@syncfusion/ej2-schedule 20.1.59 → 20.2.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/dist/ej2-schedule.umd.min.js +2 -2
  3. package/dist/ej2-schedule.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-schedule.es2015.js +250 -68
  5. package/dist/es6/ej2-schedule.es2015.js.map +1 -1
  6. package/dist/es6/ej2-schedule.es5.js +254 -67
  7. package/dist/es6/ej2-schedule.es5.js.map +1 -1
  8. package/dist/global/ej2-schedule.min.js +2 -2
  9. package/dist/global/ej2-schedule.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/helpers/e2e/index.js +9 -7
  12. package/helpers/e2e/recurrence-editor.js +41 -25
  13. package/helpers/e2e/schedule.js +44 -28
  14. package/package.json +15 -15
  15. package/src/recurrence-editor/recurrence-editor.js +4 -1
  16. package/src/schedule/actions/action-base.d.ts +1 -0
  17. package/src/schedule/actions/action-base.js +3 -2
  18. package/src/schedule/actions/crud.js +9 -7
  19. package/src/schedule/actions/drag.js +1 -1
  20. package/src/schedule/base/interface.d.ts +6 -0
  21. package/src/schedule/base/schedule.d.ts +8 -0
  22. package/src/schedule/base/schedule.js +66 -0
  23. package/src/schedule/event-renderer/agenda-base.js +6 -6
  24. package/src/schedule/event-renderer/event-base.d.ts +2 -0
  25. package/src/schedule/event-renderer/event-base.js +23 -4
  26. package/src/schedule/event-renderer/month.js +3 -6
  27. package/src/schedule/event-renderer/vertical-view.js +3 -3
  28. package/src/schedule/event-renderer/year.js +2 -2
  29. package/src/schedule/exports/calendar-export.js +1 -1
  30. package/src/schedule/exports/calendar-import.js +32 -18
  31. package/src/schedule/exports/excel-export.js +8 -4
  32. package/src/schedule/popups/event-window.js +3 -1
  33. package/src/schedule/popups/quick-popups.js +5 -4
  34. package/src/schedule/renderer/agenda.js +2 -2
  35. package/src/schedule/renderer/timeline-month.d.ts +1 -0
  36. package/src/schedule/renderer/timeline-month.js +9 -0
  37. package/src/schedule/renderer/timeline-view.d.ts +1 -0
  38. package/src/schedule/renderer/timeline-view.js +14 -0
  39. package/src/schedule/renderer/timeline-year.js +3 -0
  40. package/src/schedule/renderer/vertical-view.d.ts +2 -0
  41. package/src/schedule/renderer/vertical-view.js +37 -5
  42. package/src/schedule/renderer/view-base.d.ts +1 -0
  43. package/src/schedule/renderer/view-base.js +19 -0
  44. package/src/schedule/renderer/year.js +2 -1
  45. package/styles/bootstrap-dark.css +6 -5
  46. package/styles/bootstrap.css +6 -5
  47. package/styles/bootstrap4.css +6 -5
  48. package/styles/bootstrap5-dark.css +5 -3
  49. package/styles/bootstrap5.css +6 -5
  50. package/styles/fabric-dark.css +6 -5
  51. package/styles/fabric.css +6 -5
  52. package/styles/fluent-dark.css +20 -18
  53. package/styles/fluent.css +8 -7
  54. package/styles/highcontrast-light.css +6 -5
  55. package/styles/highcontrast.css +6 -5
  56. package/styles/material-dark.css +6 -5
  57. package/styles/material.css +6 -5
  58. package/styles/recurrence-editor/_fusionnew-definition.scss +15 -0
  59. package/styles/recurrence-editor/_material3-definition.scss +15 -0
  60. package/styles/schedule/_fluent-definition.scss +1 -1
  61. package/styles/schedule/_fusionnew-definition.scss +224 -0
  62. package/styles/schedule/_layout.scss +6 -2
  63. package/styles/schedule/_material3-definition.scss +224 -0
  64. package/styles/schedule/bootstrap-dark.css +6 -5
  65. package/styles/schedule/bootstrap.css +6 -5
  66. package/styles/schedule/bootstrap4.css +6 -5
  67. package/styles/schedule/bootstrap5-dark.css +5 -3
  68. package/styles/schedule/bootstrap5.css +6 -5
  69. package/styles/schedule/fabric-dark.css +6 -5
  70. package/styles/schedule/fabric.css +6 -5
  71. package/styles/schedule/fluent-dark.css +20 -18
  72. package/styles/schedule/fluent.css +8 -7
  73. package/styles/schedule/highcontrast-light.css +6 -5
  74. package/styles/schedule/highcontrast.css +6 -5
  75. package/styles/schedule/icons/_fusionnew.scss +232 -0
  76. package/styles/schedule/icons/_material3.scss +232 -0
  77. package/styles/schedule/material-dark.css +6 -5
  78. package/styles/schedule/material.css +6 -5
  79. package/styles/schedule/tailwind-dark.css +5 -3
  80. package/styles/schedule/tailwind.css +6 -5
  81. package/styles/tailwind-dark.css +5 -3
  82. package/styles/tailwind.css +6 -5
package/styles/schedule/_fusionnew-definition.scss ADDED
@@ -0,0 +1,224 @@
1
+ /*! Schedule's bootstrap5 theme wise override definitions and variables */
2
+ // sass-lint:disable-all
3
+ $schedule-skin: $skin-name !default;
4
+
5
+ // font definitions
6
+ $schedule-date-navigation-font-size: $text-lg !default;
7
+ $schedule-header-nrml-font-size: $text-sm !default;
8
+ $schedule-header-bgr-font-size: $text-base !default;
9
+ $schedule-header-device-font-size: $text-base !default;
10
+ $schedule-content-nrml-font-size: $text-sm !default;
11
+ $schedule-content-bgr-font-size: $text-base !default;
12
+ $schedule-content-device-font-size: 14px !default;
13
+ $schedule-date-month-header-wrap-bgr-font-size: $text-base !default;
14
+ $schedule-date-header-wrap-nrml-font-size: $text-sm !default;
15
+ $schedule-date-header-wrap-bgr-font-size: $text-base !default;
16
+ $schedule-date-header-wrap-device-font-size: $text-base !default;
17
+ $schedule-header-day-nrml-font-size: $text-xs !default;
18
+ $schedule-header-day-bgr-font-size: $text-sm !default;
19
+ $schedule-header-day-device-font-size: $text-sm !default;
20
+ $schedule-header-date-device-font-size: $text-lg !default;
21
+ $schedule-header-date-nrml-font-size: $text-base !default;
22
+ $schedule-header-date-bgr-font-size: $text-lg !default;
23
+ $schedule-time-scale-nrml-font-size: $text-xs !default;
24
+ $schedule-time-scale-bgr-font-size: $text-sm !default;
25
+ $schedule-time-scale-device-font-size: 11px !default;
26
+ $schedule-current-time-nrml-font-size: $text-xxs !default;
27
+ $schedule-current-time-bgr-font-size: $text-xs !default;
28
+ $schedule-current-time-bgr-device-font-size: $text-xs !default;
29
+ $schedule-recurrence-font-size: 11px !default;
30
+ $schedule-tbar-down-arrow-font-size: $text-lg !default;
31
+ $schedule-content-nrml-font-text-transform: none !default;
32
+ $schedule-more-indicator-nrml-font-size: $text-xxs !default;
33
+ $schedule-popup-header-icon-font-size: 14px !default;
34
+
35
+ // font color definitions
36
+ $schedule-header-font-color: $content-text-color-alt1 !default;
37
+ $schedule-primary-content-font-color: $content-text-color !default;
38
+ $schedule-secondary-content-font-color: $content-text-color-alt2 !default;
39
+ $schedule-select-font-color: $content-text-color !default;
40
+ $schedule-hover-font-color: $content-text-color-hover !default;
41
+ $schedule-disable-font-color: $content-text-color !default;
42
+ $schedule-active-font-color: $primary !default;
43
+ $schedule-tbar-hover-font: rgba($primary, .87) !default;
44
+
45
+ // schedule appointment definitions
46
+ $schedule-appointment-details-padding: 0 4px !default;
47
+ $schedule-appointment-bg-color: $primary !default;
48
+ $schedule-appointment-border-color: $border-light !default;
49
+ $schedule-appointment-selected-border: 1px solid rgba($border-light, .5) !default;
50
+ $schedule-appointment-border-radius: 2px !default;
51
+ $schedule-appointment-active-border-color: $icon-color !default;
52
+ $schedule-month-appointment-height: 26px !default;
53
+ $schedule-month-appointment-text-line-height: 18px !default;
54
+ $schedule-appointment-text-line-height: 18px !default;
55
+ $schedule-month-appointment-time-padding: 1.5px !default;
56
+ $schedule-month-appointment-subject-padding: 1px 2px !default;
57
+ $schedule-timescale-appointment-height: 54px !default;
58
+ $schedule-appointment-font-color: $primary-text-color !default;
59
+ $schedule-block-appointment-font-color: $content-text-color-alt2 !default;
60
+ $schedule-more-appointment-margin-bottom: 2px !default;
61
+ $schedule-block-appointment-bg-color: $content-bg-color-alt2 !default;
62
+ $schedule-event-box-shadow-1: $shadow-md !default;
63
+ $schedule-event-box-shadow-2: $shadow-md !default;
64
+ $schedule-event-box-shadow-3: $shadow-md !default;
65
+
66
+ // schedule popup definitions
67
+ $schedule-popup-content-padding: 40px 18px 12px !default;
68
+ $schedule-popup-footer-padding: 8px 18px 8px 18px !default;
69
+ $schedule-popup-box-shadow-1: $shadow-lg !default;
70
+ $schedule-popup-box-shadow-2: $shadow-lg !default;
71
+ $schedule-popup-box-shadow-3: $shadow-lg !default;
72
+ $schedule-popup-border-color: $border-light !default;
73
+ $schedule-popup-bg-color: $content-bg-color !default;
74
+ $schedule-popup-header-icon-color: $icon-color !default;
75
+ $schedule-popup-header-icon-hover-color: $primary !default;
76
+ $schedule-popup-header-icon-hover-bg-color: rgba(255, 255, 255, .15) !default;
77
+ $schedule-popup-icon-color: $schedule-appointment-active-border-color !default;
78
+ $schedule-popup-icon-hover-color: $schedule-appointment-active-border-color !default;
79
+ $schedule-popup-icon-hover-bg-color: $content-bg-color-alt2 !default;
80
+ $schedule-popup-content-icon-color: $schedule-secondary-content-font-color !default;
81
+ $schedule-event-popup-content-padding: 0 18px 12px !default;
82
+ $schedule-event-popup-fields-padding: 12px !default;
83
+ $schedule-popup-title-color: rgba($color: $schedule-appointment-bg-color, $alpha: .3) !default;
84
+ $schedule-popup-btn-border: none !default;
85
+ $schedule-alert-dialog-border: none !default;
86
+ $schedule-more-popup-close-margin-top: 3px !default;
87
+ $schedule-more-popup-padding: 8px 0 !default;
88
+ $schedule-event-popup-header-icon-padding: 6px 8px 0 0 !default;
89
+ $schedule-event-popup-subject-padding: 12px 18px !default;
90
+ $schedule-popup-overlay-bg-color: $overlay-bg-color !default;
91
+
92
+ // schedule toolbar definitions
93
+ $border-size: 1px;
94
+ $schedule-tbar-down-arrow-padding-top: 0 !default;
95
+ $schedule-tbar-bgr-color: $secondary-bg-color-focus !default;
96
+ $schedule-tbar-bgr-min-height: 54px !default;
97
+ $schedule-tbar-border-bottom-size: 0 !default;
98
+ $schedule-tbar-box-shadow: 0 1px 2px rgba($black, .15) !default;
99
+ $schedule-tbar-box-shadow-bottom-margin: 3px !default;
100
+ $schedule-tbar-min-height: 38px !default;
101
+ $schedule-tbar-default-icon-color: $icon-color !default;
102
+ $schedule-tbar-separator-size: $border-size !default;
103
+ $schedule-tbar-default-bg: $content-bg-color-alt1 !default;
104
+ $schedule-tbar-separator-border: $border-light !default;
105
+ $schedule-tbar-border-nav: $border-light !default;
106
+ $schedule-tbar-border-nav-type: solid !default;
107
+ $schedule-tbar-hover-bg: $content-bg-color-alt3 !default;
108
+ $schedule-tbar-nav-bgr-width: 32px !default;
109
+ $schedule-tbar-bgr-item-size: 34px !default;
110
+ $schedule-tbar-bgr-size: $schedule-tbar-bgr-min-height !default;
111
+ $schedule-tbar-bgr-items-size: $schedule-tbar-bgr-min-height !default;
112
+ $schedule-tbar-separator-bgr-height: calc(100% - 15px) !default;
113
+ $schedule-tbar-separator-bgr-mrgn: 7.5px 3px !default;
114
+ $schedule-tbar-separator-bgr-minheight: 38px !default;
115
+ $schedule-tbar-btn-icon-bgr-width: 24px !default;
116
+ $schedule-tbar-btn-bgr-mrgn: 4px 0 !default;
117
+ $schedule-tbar-btn-bgr-minheight: 24px !default;
118
+ $schedule-tbar-btn-bgr-minwidth: 24px !default;
119
+ $schedule-tbar-btn-bgr-padding: 8px !default;
120
+ $schedule-tbar-btn-icn-bgr-padding: 0 !default;
121
+ $schedule-tbar-btn-icn-right-bgr-padding: 4px 0 0 12px !default;
122
+
123
+ // view definitions
124
+ $schedule-timeline-header-cells-height: 36px !default;
125
+ $schedule-timeline-work-cells-height: 60px !default;
126
+ $schedule-timeline-work-cells-width: 50px !default;
127
+ $schedule-timeline-month-cells-width: 70px !default;
128
+ $schedule-timeline-work-cells-border: 0 0 1px 1px !default;
129
+ $schedule-rtl-timeline-work-cells-border: 0 1px 1px 0 !default;
130
+ $schedule-timeline-appointment-height: 38px !default;
131
+ $schedule-timeline-year-work-cells-height: 75px !default;
132
+ $schedule-timeline-year-work-cells-width: 100px !default;
133
+ $schedule-timeline-year-resource-text-padding: 4px 12px !default;
134
+ $schedule-timeline-year-resource-cells-padding-left: 12px !default;
135
+ $schedule-timeline-year-left-indent-padding: 0 !default;
136
+ $schedule-timeline-date-header-wrap-padding: 8px 0 8px 8px !default;
137
+ $schedule-dialog-row-continer-padding-bottom: 12px !default;
138
+ $schedule-dialog-all-day-row-padding-top: 4px !default;
139
+ $schedule-dialog-all-day-row-padding-bottom: 12px !default;
140
+ $schedule-bigger-dialog-row-continer-padding-bottom: 12px !default;
141
+ $schedule-bigger-dialog-all-day-row-padding-top: 10px !default;
142
+ $schedule-device-dialog-all-day-row-padding-top: 20px !default;
143
+ $schedule-vertical-time-slot-color: $content-bg-color-alt2 !default;
144
+ $schedule-vertical-work-cells-border: 0 0 1px 1px !default;
145
+ $schedule-rtl-vertical-work-cells-border: 0 1px 1px 0 !default;
146
+ $schedule-month-work-cells-border: 0 0 1px 1px !default;
147
+ $schedule-month-work-cells-height: 80px !default;
148
+ $schedule-rtl-month-work-cells-border: 0 1px 1px 0 !default;
149
+ $schedule-month-agenda-header-cells-border: 0 0 1px 0 !default;
150
+ $schedule-month-agenda-work-cells-border: 0 !default;
151
+ $schedule-rtl-month-agenda-work-cells-border: 0 !default;
152
+ $schedule-agenda-color: $content-bg-color !default;
153
+ $schedule-month-agenda-app-indicator-color: $primary !default;
154
+ $schedule-agenda-date-header-padding: 8px 20px 14px 14px !default;
155
+ $schedule-agenda-item-padding: 10px 0 !default;
156
+ $schedule-agenda-appointment-padding: 0 14px !default;
157
+ $schedule-month-agenda-appointment-padding: 0 16px !default;
158
+ $schedule-month-agenda-item-padding: 10px 0 !default;
159
+
160
+ // resource definitions
161
+ $schedule-timeline-resources-width: 200px !default;
162
+ $schedule-resource-color-margin-top: 10px !default;
163
+ $schedule-bigger-resource-color-margin-top: 14px !default;
164
+ $schedule-resource-color-size: 14px !default;
165
+ $schedule-bigger-resource-color-size: 16px !default;
166
+
167
+ // dimension definitions
168
+ $schedule-header-cells-height: 60px !default;
169
+ $schedule-header-cells-width: 36px !default;
170
+ $schedule-month-header-cells-nrml-height: 34px !default;
171
+ $schedule-month-header-cells-bgr-height: 38px !default;
172
+ $schedule-month-header-cells-padding: 8px !default;
173
+ $schedule-allday-cells-height: 0 !default;
174
+ $schedule-work-cells-height: 36px !default;
175
+ $schedule-work-cells-width: 36px !default;
176
+ $schedule-date-header-line-height: 22px !default;
177
+ $schedule-date-header-margin: 3px 3px 2px !default;
178
+ $schedule-timezone-enable-nrml-height: 60px !default;
179
+ $schedule-timezone-enable-bgr-height: 66px !default;
180
+ $schedule-header-cells-padding: 4px !default;
181
+ $schedule-time-scale-width: 85px !default;
182
+ $schedule-device-time-scale-width: 35px !default;
183
+ $border-type: solid !default;
184
+ $schedule-alternate-cell-border: dotted !default;
185
+ $schedule-header-hover-border-radius: 4px !default;
186
+ $schedule-more-popup-wrapper-border-radius: 6px !default;
187
+ $schedule-box-shadow: 0 1px 0 rgba($black, .15) !default;
188
+ $schedule-btn-txt-bgr-padding: 5px 12px !default;
189
+
190
+ // color definitions
191
+ $schedule-header-bg-color: $content-bg-color !default;
192
+ $schedule-header-border-color: $border-light !default;
193
+ $schedule-header-hover-color: $content-bg-color-alt3 !default;
194
+ $schedule-content-bg-color: $content-bg-color !default;
195
+ $schedule-content-border-color: $border-light !default;
196
+ $schedule-month-agenda-border: 2px solid $schedule-content-border-color !default;
197
+ $schedule-select-bg-color: $content-bg-color-alt2 !default;
198
+ $schedule-work-cells-bg-color: $content-bg-color-alt1 !default;
199
+ $schedule-current-date-bg-color: $primary !default;
200
+ $schedule-disable-dates-color: $content-bg-color-alt2 !default;
201
+ $schedule-workhour-bg-color: $content-bg-color !default;
202
+ $schedule-hover-bg-color: darken($content-bg-color-alt1, 2%) !default;
203
+ $schedule-active-color: $content-bg-color !default;
204
+ $schedule-current-day-active-color: $schedule-active-color !default;
205
+ $schedule-active-border-color: $primary !default;
206
+ $schedule-calendar-background: $flyout-bg-color !default;
207
+ $schedule-icon-color: $icon-color !default;
208
+ $schedule-more-indicator-shadow-color: $shadow !default;
209
+ $schedule-more-indicator-shadow-color-res-tree-popup: $schedule-more-indicator-shadow-color !default;
210
+ $schedule-more-indicator-shadow-color-more-popup: none !default;
211
+ $schedule-tree-bg-color: $content-bg-color-alt1 !default;
212
+ $schedule-val-error-color: $danger-bg-color !default;
213
+ $schedule-val-error-bg-color: $danger-light !default;
214
+ $schedule-tree-content-color: $content-text-color-alt2;
215
+ $schedule-popup-header-icon-focus-bg-color: $schedule-active-color !default;
216
+ $schedule-popup-header-icon-focus-color: $schedule-popup-header-icon-hover-color !default;
217
+
218
+ @mixin tbar-btn-animation {
219
+ content: '';
220
+ }
221
+
222
+ @mixin tbar-btn-animation-after {
223
+ content: '';
224
+ }
package/styles/schedule/_layout.scss CHANGED
@@ -1251,7 +1251,6 @@
1251
1251
  }
1252
1252
 
1253
1253
  .e-content-wrap {
1254
- display: flex;
1255
1254
  font-size: $schedule-date-header-wrap-nrml-font-size;
1256
1255
  }
1257
1256
 
@@ -1797,6 +1796,11 @@
1797
1796
  position: absolute;
1798
1797
  top: 0;
1799
1798
 
1799
+ .e-appointment-container.e-event-container {
1800
+ height: $schedule-timeline-year-work-cells-height;
1801
+ position: relative;
1802
+ }
1803
+
1800
1804
  .e-appointment-wrapper {
1801
1805
  position: absolute;
1802
1806
  }
@@ -3019,7 +3023,7 @@
3019
3023
  }
3020
3024
 
3021
3025
  .e-bigger .e-dialog.e-quick-dialog.e-following-events-dialog {
3022
- width: 485px;
3026
+ width: 502px;
3023
3027
  }
3024
3028
 
3025
3029
  .e-dialog.e-quick-dialog.e-following-events-dialog {
package/styles/schedule/_material3-definition.scss ADDED
@@ -0,0 +1,224 @@
1
+ /*! Schedule's bootstrap5 theme wise override definitions and variables */
2
+ // sass-lint:disable-all
3
+ $schedule-skin: $skin-name !default;
4
+
5
+ // font definitions
6
+ $schedule-date-navigation-font-size: $text-lg !default;
7
+ $schedule-header-nrml-font-size: $text-sm !default;
8
+ $schedule-header-bgr-font-size: $text-base !default;
9
+ $schedule-header-device-font-size: $text-base !default;
10
+ $schedule-content-nrml-font-size: $text-sm !default;
11
+ $schedule-content-bgr-font-size: $text-base !default;
12
+ $schedule-content-device-font-size: 14px !default;
13
+ $schedule-date-month-header-wrap-bgr-font-size: $text-base !default;
14
+ $schedule-date-header-wrap-nrml-font-size: $text-sm !default;
15
+ $schedule-date-header-wrap-bgr-font-size: $text-base !default;
16
+ $schedule-date-header-wrap-device-font-size: $text-base !default;
17
+ $schedule-header-day-nrml-font-size: $text-xs !default;
18
+ $schedule-header-day-bgr-font-size: $text-sm !default;
19
+ $schedule-header-day-device-font-size: $text-sm !default;
20
+ $schedule-header-date-device-font-size: $text-lg !default;
21
+ $schedule-header-date-nrml-font-size: $text-base !default;
22
+ $schedule-header-date-bgr-font-size: $text-lg !default;
23
+ $schedule-time-scale-nrml-font-size: $text-xs !default;
24
+ $schedule-time-scale-bgr-font-size: $text-sm !default;
25
+ $schedule-time-scale-device-font-size: 11px !default;
26
+ $schedule-current-time-nrml-font-size: $text-xxs !default;
27
+ $schedule-current-time-bgr-font-size: $text-xs !default;
28
+ $schedule-current-time-bgr-device-font-size: $text-xs !default;
29
+ $schedule-recurrence-font-size: 11px !default;
30
+ $schedule-tbar-down-arrow-font-size: $text-lg !default;
31
+ $schedule-content-nrml-font-text-transform: none !default;
32
+ $schedule-more-indicator-nrml-font-size: $text-xxs !default;
33
+ $schedule-popup-header-icon-font-size: 14px !default;
34
+
35
+ // font color definitions
36
+ $schedule-header-font-color: $content-text-color-alt1 !default;
37
+ $schedule-primary-content-font-color: $content-text-color !default;
38
+ $schedule-secondary-content-font-color: $content-text-color-alt2 !default;
39
+ $schedule-select-font-color: $content-text-color !default;
40
+ $schedule-hover-font-color: $content-text-color-hover !default;
41
+ $schedule-disable-font-color: $content-text-color !default;
42
+ $schedule-active-font-color: $primary !default;
43
+ $schedule-tbar-hover-font: rgba($primary, .87) !default;
44
+
45
+ // schedule appointment definitions
46
+ $schedule-appointment-details-padding: 0 4px !default;
47
+ $schedule-appointment-bg-color: $primary !default;
48
+ $schedule-appointment-border-color: $border-light !default;
49
+ $schedule-appointment-selected-border: 1px solid rgba($border-light, .5) !default;
50
+ $schedule-appointment-border-radius: 2px !default;
51
+ $schedule-appointment-active-border-color: $icon-color !default;
52
+ $schedule-month-appointment-height: 26px !default;
53
+ $schedule-month-appointment-text-line-height: 18px !default;
54
+ $schedule-appointment-text-line-height: 18px !default;
55
+ $schedule-month-appointment-time-padding: 1.5px !default;
56
+ $schedule-month-appointment-subject-padding: 1px 2px !default;
57
+ $schedule-timescale-appointment-height: 54px !default;
58
+ $schedule-appointment-font-color: $primary-text-color !default;
59
+ $schedule-block-appointment-font-color: $content-text-color-alt2 !default;
60
+ $schedule-more-appointment-margin-bottom: 2px !default;
61
+ $schedule-block-appointment-bg-color: $content-bg-color-alt2 !default;
62
+ $schedule-event-box-shadow-1: $shadow-md !default;
63
+ $schedule-event-box-shadow-2: $shadow-md !default;
64
+ $schedule-event-box-shadow-3: $shadow-md !default;
65
+
66
+ // schedule popup definitions
67
+ $schedule-popup-content-padding: 40px 18px 12px !default;
68
+ $schedule-popup-footer-padding: 8px 18px 8px 18px !default;
69
+ $schedule-popup-box-shadow-1: $shadow-lg !default;
70
+ $schedule-popup-box-shadow-2: $shadow-lg !default;
71
+ $schedule-popup-box-shadow-3: $shadow-lg !default;
72
+ $schedule-popup-border-color: $border-light !default;
73
+ $schedule-popup-bg-color: $content-bg-color !default;
74
+ $schedule-popup-header-icon-color: $icon-color !default;
75
+ $schedule-popup-header-icon-hover-color: $primary !default;
76
+ $schedule-popup-header-icon-hover-bg-color: rgba(255, 255, 255, .15) !default;
77
+ $schedule-popup-icon-color: $schedule-appointment-active-border-color !default;
78
+ $schedule-popup-icon-hover-color: $schedule-appointment-active-border-color !default;
79
+ $schedule-popup-icon-hover-bg-color: $content-bg-color-alt2 !default;
80
+ $schedule-popup-content-icon-color: $schedule-secondary-content-font-color !default;
81
+ $schedule-event-popup-content-padding: 0 18px 12px !default;
82
+ $schedule-event-popup-fields-padding: 12px !default;
83
+ $schedule-popup-title-color: rgba($color: $schedule-appointment-bg-color, $alpha: .3) !default;
84
+ $schedule-popup-btn-border: none !default;
85
+ $schedule-alert-dialog-border: none !default;
86
+ $schedule-more-popup-close-margin-top: 3px !default;
87
+ $schedule-more-popup-padding: 8px 0 !default;
88
+ $schedule-event-popup-header-icon-padding: 6px 8px 0 0 !default;
89
+ $schedule-event-popup-subject-padding: 12px 18px !default;
90
+ $schedule-popup-overlay-bg-color: $overlay-bg-color !default;
91
+
92
+ // schedule toolbar definitions
93
+ $border-size: 1px;
94
+ $schedule-tbar-down-arrow-padding-top: 0 !default;
95
+ $schedule-tbar-bgr-color: $secondary-bg-color-focus !default;
96
+ $schedule-tbar-bgr-min-height: 54px !default;
97
+ $schedule-tbar-border-bottom-size: 0 !default;
98
+ $schedule-tbar-box-shadow: 0 1px 2px rgba($black, .15) !default;
99
+ $schedule-tbar-box-shadow-bottom-margin: 3px !default;
100
+ $schedule-tbar-min-height: 38px !default;
101
+ $schedule-tbar-default-icon-color: $icon-color !default;
102
+ $schedule-tbar-separator-size: $border-size !default;
103
+ $schedule-tbar-default-bg: $content-bg-color-alt1 !default;
104
+ $schedule-tbar-separator-border: $border-light !default;
105
+ $schedule-tbar-border-nav: $border-light !default;
106
+ $schedule-tbar-border-nav-type: solid !default;
107
+ $schedule-tbar-hover-bg: $content-bg-color-alt3 !default;
108
+ $schedule-tbar-nav-bgr-width: 32px !default;
109
+ $schedule-tbar-bgr-item-size: 34px !default;
110
+ $schedule-tbar-bgr-size: $schedule-tbar-bgr-min-height !default;
111
+ $schedule-tbar-bgr-items-size: $schedule-tbar-bgr-min-height !default;
112
+ $schedule-tbar-separator-bgr-height: calc(100% - 15px) !default;
113
+ $schedule-tbar-separator-bgr-mrgn: 7.5px 3px !default;
114
+ $schedule-tbar-separator-bgr-minheight: 38px !default;
115
+ $schedule-tbar-btn-icon-bgr-width: 24px !default;
116
+ $schedule-tbar-btn-bgr-mrgn: 4px 0 !default;
117
+ $schedule-tbar-btn-bgr-minheight: 24px !default;
118
+ $schedule-tbar-btn-bgr-minwidth: 24px !default;
119
+ $schedule-tbar-btn-bgr-padding: 8px !default;
120
+ $schedule-tbar-btn-icn-bgr-padding: 0 !default;
121
+ $schedule-tbar-btn-icn-right-bgr-padding: 4px 0 0 12px !default;
122
+
123
+ // view definitions
124
+ $schedule-timeline-header-cells-height: 36px !default;
125
+ $schedule-timeline-work-cells-height: 60px !default;
126
+ $schedule-timeline-work-cells-width: 50px !default;
127
+ $schedule-timeline-month-cells-width: 70px !default;
128
+ $schedule-timeline-work-cells-border: 0 0 1px 1px !default;
129
+ $schedule-rtl-timeline-work-cells-border: 0 1px 1px 0 !default;
130
+ $schedule-timeline-appointment-height: 38px !default;
131
+ $schedule-timeline-year-work-cells-height: 75px !default;
132
+ $schedule-timeline-year-work-cells-width: 100px !default;
133
+ $schedule-timeline-year-resource-text-padding: 4px 12px !default;
134
+ $schedule-timeline-year-resource-cells-padding-left: 12px !default;
135
+ $schedule-timeline-year-left-indent-padding: 0 !default;
136
+ $schedule-timeline-date-header-wrap-padding: 8px 0 8px 8px !default;
137
+ $schedule-dialog-row-continer-padding-bottom: 12px !default;
138
+ $schedule-dialog-all-day-row-padding-top: 4px !default;
139
+ $schedule-dialog-all-day-row-padding-bottom: 12px !default;
140
+ $schedule-bigger-dialog-row-continer-padding-bottom: 12px !default;
141
+ $schedule-bigger-dialog-all-day-row-padding-top: 10px !default;
142
+ $schedule-device-dialog-all-day-row-padding-top: 20px !default;
143
+ $schedule-vertical-time-slot-color: $content-bg-color-alt2 !default;
144
+ $schedule-vertical-work-cells-border: 0 0 1px 1px !default;
145
+ $schedule-rtl-vertical-work-cells-border: 0 1px 1px 0 !default;
146
+ $schedule-month-work-cells-border: 0 0 1px 1px !default;
147
+ $schedule-month-work-cells-height: 80px !default;
148
+ $schedule-rtl-month-work-cells-border: 0 1px 1px 0 !default;
149
+ $schedule-month-agenda-header-cells-border: 0 0 1px 0 !default;
150
+ $schedule-month-agenda-work-cells-border: 0 !default;
151
+ $schedule-rtl-month-agenda-work-cells-border: 0 !default;
152
+ $schedule-agenda-color: $content-bg-color !default;
153
+ $schedule-month-agenda-app-indicator-color: $primary !default;
154
+ $schedule-agenda-date-header-padding: 8px 20px 14px 14px !default;
155
+ $schedule-agenda-item-padding: 10px 0 !default;
156
+ $schedule-agenda-appointment-padding: 0 14px !default;
157
+ $schedule-month-agenda-appointment-padding: 0 16px !default;
158
+ $schedule-month-agenda-item-padding: 10px 0 !default;
159
+
160
+ // resource definitions
161
+ $schedule-timeline-resources-width: 200px !default;
162
+ $schedule-resource-color-margin-top: 10px !default;
163
+ $schedule-bigger-resource-color-margin-top: 14px !default;
164
+ $schedule-resource-color-size: 14px !default;
165
+ $schedule-bigger-resource-color-size: 16px !default;
166
+
167
+ // dimension definitions
168
+ $schedule-header-cells-height: 60px !default;
169
+ $schedule-header-cells-width: 36px !default;
170
+ $schedule-month-header-cells-nrml-height: 34px !default;
171
+ $schedule-month-header-cells-bgr-height: 38px !default;
172
+ $schedule-month-header-cells-padding: 8px !default;
173
+ $schedule-allday-cells-height: 0 !default;
174
+ $schedule-work-cells-height: 36px !default;
175
+ $schedule-work-cells-width: 36px !default;
176
+ $schedule-date-header-line-height: 22px !default;
177
+ $schedule-date-header-margin: 3px 3px 2px !default;
178
+ $schedule-timezone-enable-nrml-height: 60px !default;
179
+ $schedule-timezone-enable-bgr-height: 66px !default;
180
+ $schedule-header-cells-padding: 4px !default;
181
+ $schedule-time-scale-width: 85px !default;
182
+ $schedule-device-time-scale-width: 35px !default;
183
+ $border-type: solid !default;
184
+ $schedule-alternate-cell-border: dotted !default;
185
+ $schedule-header-hover-border-radius: 4px !default;
186
+ $schedule-more-popup-wrapper-border-radius: 6px !default;
187
+ $schedule-box-shadow: 0 1px 0 rgba($black, .15) !default;
188
+ $schedule-btn-txt-bgr-padding: 5px 12px !default;
189
+
190
+ // color definitions
191
+ $schedule-header-bg-color: $content-bg-color !default;
192
+ $schedule-header-border-color: $border-light !default;
193
+ $schedule-header-hover-color: $content-bg-color-alt3 !default;
194
+ $schedule-content-bg-color: $content-bg-color !default;
195
+ $schedule-content-border-color: $border-light !default;
196
+ $schedule-month-agenda-border: 2px solid $schedule-content-border-color !default;
197
+ $schedule-select-bg-color: $content-bg-color-alt2 !default;
198
+ $schedule-work-cells-bg-color: $content-bg-color-alt1 !default;
199
+ $schedule-current-date-bg-color: $primary !default;
200
+ $schedule-disable-dates-color: $content-bg-color-alt2 !default;
201
+ $schedule-workhour-bg-color: $content-bg-color !default;
202
+ $schedule-hover-bg-color: darken($content-bg-color-alt1, 2%) !default;
203
+ $schedule-active-color: $content-bg-color !default;
204
+ $schedule-current-day-active-color: $schedule-active-color !default;
205
+ $schedule-active-border-color: $primary !default;
206
+ $schedule-calendar-background: $flyout-bg-color !default;
207
+ $schedule-icon-color: $icon-color !default;
208
+ $schedule-more-indicator-shadow-color: $shadow !default;
209
+ $schedule-more-indicator-shadow-color-res-tree-popup: $schedule-more-indicator-shadow-color !default;
210
+ $schedule-more-indicator-shadow-color-more-popup: none !default;
211
+ $schedule-tree-bg-color: $content-bg-color-alt1 !default;
212
+ $schedule-val-error-color: $danger-bg-color !default;
213
+ $schedule-val-error-bg-color: $danger-light !default;
214
+ $schedule-tree-content-color: $content-text-color-alt2;
215
+ $schedule-popup-header-icon-focus-bg-color: $schedule-active-color !default;
216
+ $schedule-popup-header-icon-focus-color: $schedule-popup-header-icon-hover-color !default;
217
+
218
+ @mixin tbar-btn-animation {
219
+ content: '';
220
+ }
221
+
222
+ @mixin tbar-btn-animation-after {
223
+ content: '';
224
+ }
package/styles/schedule/bootstrap-dark.css CHANGED
@@ -1,5 +1,4 @@
1
- /*! recurrence editor theme wise definitions*/
2
- /*! Schedule component's bootstrap theme definitions and variables */
1
+ /*! recurrence editor theme wise definitions*/ /*! Schedule component's bootstrap theme definitions and variables */
3
2
  .e-schedule .e-schedule-toolbar .e-icon-prev::before {
4
3
  content: "\e990";
5
4
  }
@@ -1073,8 +1072,6 @@
1073
1072
  height: 70px;
1074
1073
  }
1075
1074
  .e-schedule .e-month-view .e-content-wrap {
1076
- display: -ms-flexbox;
1077
- display: flex;
1078
1075
  font-size: 13px;
1079
1076
  }
1080
1077
  .e-schedule .e-month-view .e-date-header-wrap table col {
@@ -1503,6 +1500,10 @@
1503
1500
  position: absolute;
1504
1501
  top: 0;
1505
1502
  }
1503
+ .e-schedule .e-timeline-year-view .e-event-table .e-appointment-container.e-event-container {
1504
+ height: 75px;
1505
+ position: relative;
1506
+ }
1506
1507
  .e-schedule .e-timeline-year-view .e-event-table .e-appointment-wrapper {
1507
1508
  position: absolute;
1508
1509
  }
@@ -2468,7 +2469,7 @@
2468
2469
  }
2469
2470
 
2470
2471
  .e-bigger .e-dialog.e-quick-dialog.e-following-events-dialog {
2471
- width: 485px;
2472
+ width: 502px;
2472
2473
  }
2473
2474
 
2474
2475
  .e-dialog.e-quick-dialog.e-following-events-dialog {
package/styles/schedule/bootstrap.css CHANGED
@@ -1,5 +1,4 @@
1
- /*! recurrence editor theme wise definitions*/
2
- /*! Schedule component's bootstrap theme definitions and variables */
1
+ /*! recurrence editor theme wise definitions*/ /*! Schedule component's bootstrap theme definitions and variables */
3
2
  .e-schedule .e-schedule-toolbar .e-icon-prev::before {
4
3
  content: "\e990";
5
4
  }
@@ -1071,8 +1070,6 @@
1071
1070
  height: 70px;
1072
1071
  }
1073
1072
  .e-schedule .e-month-view .e-content-wrap {
1074
- display: -ms-flexbox;
1075
- display: flex;
1076
1073
  font-size: 13px;
1077
1074
  }
1078
1075
  .e-schedule .e-month-view .e-date-header-wrap table col {
@@ -1501,6 +1498,10 @@
1501
1498
  position: absolute;
1502
1499
  top: 0;
1503
1500
  }
1501
+ .e-schedule .e-timeline-year-view .e-event-table .e-appointment-container.e-event-container {
1502
+ height: 75px;
1503
+ position: relative;
1504
+ }
1504
1505
  .e-schedule .e-timeline-year-view .e-event-table .e-appointment-wrapper {
1505
1506
  position: absolute;
1506
1507
  }
@@ -2466,7 +2467,7 @@
2466
2467
  }
2467
2468
 
2468
2469
  .e-bigger .e-dialog.e-quick-dialog.e-following-events-dialog {
2469
- width: 485px;
2470
+ width: 502px;
2470
2471
  }
2471
2472
 
2472
2473
  .e-dialog.e-quick-dialog.e-following-events-dialog {
package/styles/schedule/bootstrap4.css CHANGED
@@ -1,5 +1,4 @@
1
- /*! recurrence editor theme wise definitions*/
2
- /*! Schedule component's bootstrap4 theme definitions and variables */
1
+ /*! recurrence editor theme wise definitions*/ /*! Schedule component's bootstrap4 theme definitions and variables */
3
2
  .e-schedule .e-schedule-toolbar .e-icon-prev::before {
4
3
  content: "\e78c";
5
4
  }
@@ -1073,8 +1072,6 @@
1073
1072
  height: 70px;
1074
1073
  }
1075
1074
  .e-schedule .e-month-view .e-content-wrap {
1076
- display: -ms-flexbox;
1077
- display: flex;
1078
1075
  font-size: 14px;
1079
1076
  }
1080
1077
  .e-schedule .e-month-view .e-date-header-wrap table col {
@@ -1506,6 +1503,10 @@
1506
1503
  position: absolute;
1507
1504
  top: 0;
1508
1505
  }
1506
+ .e-schedule .e-timeline-year-view .e-event-table .e-appointment-container.e-event-container {
1507
+ height: 75px;
1508
+ position: relative;
1509
+ }
1509
1510
  .e-schedule .e-timeline-year-view .e-event-table .e-appointment-wrapper {
1510
1511
  position: absolute;
1511
1512
  }
@@ -2485,7 +2486,7 @@
2485
2486
  }
2486
2487
 
2487
2488
  .e-bigger .e-dialog.e-quick-dialog.e-following-events-dialog {
2488
- width: 485px;
2489
+ width: 502px;
2489
2490
  }
2490
2491
 
2491
2492
  .e-dialog.e-quick-dialog.e-following-events-dialog {
package/styles/schedule/bootstrap5-dark.css CHANGED
@@ -1079,8 +1079,6 @@
1079
1079
  height: 70px;
1080
1080
  }
1081
1081
  .e-schedule .e-month-view .e-content-wrap {
1082
- display: -ms-flexbox;
1083
- display: flex;
1084
1082
  font-size: 14px;
1085
1083
  }
1086
1084
  .e-schedule .e-month-view .e-date-header-wrap table col {
@@ -1510,6 +1508,10 @@
1510
1508
  position: absolute;
1511
1509
  top: 0;
1512
1510
  }
1511
+ .e-schedule .e-timeline-year-view .e-event-table .e-appointment-container.e-event-container {
1512
+ height: 75px;
1513
+ position: relative;
1514
+ }
1513
1515
  .e-schedule .e-timeline-year-view .e-event-table .e-appointment-wrapper {
1514
1516
  position: absolute;
1515
1517
  }
@@ -2493,7 +2495,7 @@
2493
2495
  }
2494
2496
 
2495
2497
  .e-bigger .e-dialog.e-quick-dialog.e-following-events-dialog {
2496
- width: 485px;
2498
+ width: 502px;
2497
2499
  }
2498
2500
 
2499
2501
  .e-dialog.e-quick-dialog.e-following-events-dialog {
package/styles/schedule/bootstrap5.css CHANGED
@@ -1,5 +1,4 @@
1
- /*! recurrence editor theme wise definitions*/
2
- /*! Schedule's bootstrap5 theme wise override definitions and variables */
1
+ /*! recurrence editor theme wise definitions*/ /*! Schedule's bootstrap5 theme wise override definitions and variables */
3
2
  .e-schedule .e-schedule-toolbar .e-icon-prev::before {
4
3
  content: "\e765";
5
4
  }
@@ -1080,8 +1079,6 @@
1080
1079
  height: 70px;
1081
1080
  }
1082
1081
  .e-schedule .e-month-view .e-content-wrap {
1083
- display: -ms-flexbox;
1084
- display: flex;
1085
1082
  font-size: 14px;
1086
1083
  }
1087
1084
  .e-schedule .e-month-view .e-date-header-wrap table col {
@@ -1511,6 +1508,10 @@
1511
1508
  position: absolute;
1512
1509
  top: 0;
1513
1510
  }
1511
+ .e-schedule .e-timeline-year-view .e-event-table .e-appointment-container.e-event-container {
1512
+ height: 75px;
1513
+ position: relative;
1514
+ }
1514
1515
  .e-schedule .e-timeline-year-view .e-event-table .e-appointment-wrapper {
1515
1516
  position: absolute;
1516
1517
  }
@@ -2494,7 +2495,7 @@
2494
2495
  }
2495
2496
 
2496
2497
  .e-bigger .e-dialog.e-quick-dialog.e-following-events-dialog {
2497
- width: 485px;
2498
+ width: 502px;
2498
2499
  }
2499
2500
 
2500
2501
  .e-dialog.e-quick-dialog.e-following-events-dialog {
package/styles/schedule/fabric-dark.css CHANGED
@@ -1,5 +1,4 @@
1
- /*! recurrence editor theme wise definitions*/
2
- /*! Schedule component's fabric theme definitions and variables */
1
+ /*! recurrence editor theme wise definitions*/ /*! Schedule component's fabric theme definitions and variables */
3
2
  .e-schedule .e-schedule-toolbar .e-icon-prev::before {
4
3
  content: "\e98f";
5
4
  }
@@ -1073,8 +1072,6 @@
1073
1072
  height: 70px;
1074
1073
  }
1075
1074
  .e-schedule .e-month-view .e-content-wrap {
1076
- display: -ms-flexbox;
1077
- display: flex;
1078
1075
  font-size: 13px;
1079
1076
  }
1080
1077
  .e-schedule .e-month-view .e-date-header-wrap table col {
@@ -1503,6 +1500,10 @@
1503
1500
  position: absolute;
1504
1501
  top: 0;
1505
1502
  }
1503
+ .e-schedule .e-timeline-year-view .e-event-table .e-appointment-container.e-event-container {
1504
+ height: 75px;
1505
+ position: relative;
1506
+ }
1506
1507
  .e-schedule .e-timeline-year-view .e-event-table .e-appointment-wrapper {
1507
1508
  position: absolute;
1508
1509
  }
@@ -2469,7 +2470,7 @@
2469
2470
  }
2470
2471
 
2471
2472
  .e-bigger .e-dialog.e-quick-dialog.e-following-events-dialog {
2472
- width: 485px;
2473
+ width: 502px;
2473
2474
  }
2474
2475
 
2475
2476
  .e-dialog.e-quick-dialog.e-following-events-dialog {