@syncfusion/ej2-schedule 24.2.4 → 25.1.35

package/src/schedule/renderer/renderer.js

@@ -51,15 +51,21 @@ var Render = /** @class */ (function () {
                 break;
             case 'TimelineDay':
                 this.parent.activeView = this.parent.timelineViewsModule;
-                this.parent.activeView.viewClass = 'e-timeline-day-view';
+                if (!isNullOrUndefined(this.parent.activeView)) {
+                    this.parent.activeView.viewClass = 'e-timeline-day-view';
+                }
                 break;
             case 'TimelineWorkWeek':
                 this.parent.activeView = this.parent.timelineViewsModule;
-                this.parent.activeView.viewClass = 'e-timeline-work-week-view';
+                if (!isNullOrUndefined(this.parent.activeView)) {
+                    this.parent.activeView.viewClass = 'e-timeline-work-week-view';
+                }
                 break;
             case 'TimelineWeek':
                 this.parent.activeView = this.parent.timelineViewsModule;
-                this.parent.activeView.viewClass = 'e-timeline-week-view';
+                if (!isNullOrUndefined(this.parent.activeView)) {
+                    this.parent.activeView.viewClass = 'e-timeline-week-view';
+                }
                 break;
             case 'TimelineMonth':
                 this.parent.activeView = this.parent.timelineMonthModule;
@@ -76,6 +82,8 @@ var Render = /** @class */ (function () {
                     this.parent.headerModule.updateActiveView();
                     this.parent.headerModule.setCalendarView();
                 }
+                console.warn('[WARNING] :: Module "' + viewName + '" is not available in Schedule component!' +
+                    ' You either misspelled the module name or forgot to load it.');
                 return this.initializeLayout(firstView);
             }
             throw Error('Inject required modules');

package/src/schedule/renderer/timeline-view.d.ts

@@ -16,7 +16,6 @@ export declare class TimelineViews extends VerticalView {
     private generateTimeSlots;
     changeCurrentTimePosition(): void;
     private getLeftFromDateTime;
-    private getWorkCellWidth;
     renderHeader(): void;
     createAllDayRow(table: Element, tdData: TdData[]): void;
     getCurrentTimeIndicatorIndex(): number[];

package/src/schedule/renderer/timeline-view.js

@@ -72,7 +72,7 @@ var TimelineViews = /** @class */ (function (_super) {
         }
         var scrollLeft;
         if (isNullOrUndefined(hour) || !this.parent.activeViewOptions.timeScale.enable) {
-            scrollLeft = index * this.getWorkCellWidth();
+            scrollLeft = index * util.getElementWidth(this.element.querySelector('.e-work-cells'));
         }
         else {
             scrollLeft = isNullOrUndefined(scrollDate) ? this.getLeftFromDateTime(null, date) :
@@ -159,7 +159,7 @@ var TimelineViews = /** @class */ (function (_super) {
                 if (this.parent.activeView.colLevels[parseInt(index.toString(), 10)] &&
                     this.parent.activeView.colLevels[parseInt(index.toString(), 10)][0].colSpan) {
                     diffInDates = currentDateIndex[0] * this.parent.activeView.colLevels[parseInt(index.toString(), 10)][0].colSpan *
-                        this.getWorkCellWidth();
+                        util.getElementWidth(this.element.querySelector('.e-work-cells'));
                 }
                 else {
                     var endHour = this.getEndHour();
@@ -169,12 +169,9 @@ var TimelineViews = /** @class */ (function (_super) {
                 }
             }
         }
-        return diffInDates + ((diffInMinutes * this.getWorkCellWidth() * this.parent.activeViewOptions.timeScale.slotCount) /
+        return diffInDates + ((diffInMinutes * util.getElementWidth(this.element.querySelector('.e-work-cells')) * this.parent.activeViewOptions.timeScale.slotCount) /
             this.parent.activeViewOptions.timeScale.interval);
     };
-    TimelineViews.prototype.getWorkCellWidth = function () {
-        return this.element.querySelector('.e-work-cells').getBoundingClientRect().width;
-    };
     TimelineViews.prototype.renderHeader = function () {
         var tr = createElement('tr');
         if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {

package/src/schedule/renderer/vertical-view.js

@@ -371,7 +371,7 @@ var VerticalView = /** @class */ (function (_super) {
             this.parent.activeViewOptions.timeScale.interval;
     };
     VerticalView.prototype.getWorkCellHeight = function () {
-        return parseFloat(this.element.querySelector('.' + cls.WORK_CELLS_CLASS).getBoundingClientRect().height.toFixed(2));
+        return parseFloat(util.getElementHeight(this.element.querySelector('.' + cls.WORK_CELLS_CLASS)).toFixed(2));
     };
     VerticalView.prototype.getTdContent = function (date, type, groupIndex) {
         var cntEle;

package/src/schedule/renderer/view-base.js

@@ -449,7 +449,7 @@ var ViewBase = /** @class */ (function () {
         if (this.isTimelineView()) {
             var colElements = this.getColElements();
             var contentBody = this.element.querySelector('.' + cls.CONTENT_TABLE_CLASS + ' tbody');
-            var colWidth_1 = (contentBody.getBoundingClientRect().width / (colElements.length / 2));
+            var colWidth_1 = (util.getElementWidth(contentBody) / (colElements.length / 2));
             if (content.offsetHeight !== content.clientHeight) {
                 var resourceColumn = this.parent.element.querySelector('.' + cls.RESOURCE_COLUMN_WRAP_CLASS);
                 if (!isNullOrUndefined(resourceColumn)) {

package/styles/bootstrap-dark.css

@@ -138,6 +138,10 @@
   color: #fff;
 }
 
+.e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
+  margin-top: -3.2em;
+}
+
 /*! recurrence editor theme wise definitions*/ /*! Schedule component's bootstrap theme definitions and variables */
 .e-schedule .e-schedule-toolbar .e-icon-prev::before {
   content: "\e990";
@@ -323,6 +327,9 @@
   font-size: 14px;
   text-transform: initial;
 }
+.e-schedule .e-schedule-toolbar .e-toolbar-items {
+  height: 43px;
+}
 .e-schedule .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 43px;
   min-height: 43px;
@@ -395,6 +402,9 @@
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:hover, .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:focus {
   height: calc(100% - 20px);
 }
+.e-schedule.e-device .e-schedule-toolbar .e-toolbar-items {
+  height: 56px;
+}
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 56px;
   min-height: 56px;
@@ -421,6 +431,20 @@
 .e-schedule.e-device .e-content-wrap.e-scroll-hidden {
   overflow: hidden;
 }
+@media screen and (max-width: 320px) {
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop {
+    width: 100%;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-left: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop.e-rtl .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-right: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-tbar-btn .e-tbar-btn-text {
+    font-size: 8px;
+  }
+}
 .e-schedule .e-schedule-resource-toolbar {
   background: #131313;
   border-bottom: 1px solid #505050;
@@ -2468,8 +2492,8 @@
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item {
   min-height: 56px;
 }
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 34px;
 }
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-separator,
@@ -2789,6 +2813,19 @@
   float: right;
 }
 
+/*! schedule event window for smaller viewports*/
+@media screen and (max-width: 320px) {
+  .e-schedule-dialog.e-popup.e-popup-open {
+    max-height: 350px;
+    min-width: 100%;
+  }
+  .e-schedule-dialog .e-all-day-container {
+    padding-bottom: 10px;
+  }
+  .e-schedule-dialog .e-all-day-time-zone-row {
+    display: block;
+  }
+}
 .e-ddl.e-popup .e-resource-template {
   display: -ms-flexbox;
   display: flex;
@@ -3378,6 +3415,18 @@
   margin-right: 0;
 }
 
+/*! schedule quick popup for smaller viewports */
+@media screen and (max-width: 320px) {
+  .e-quick-popup-wrapper {
+    min-width: 100%;
+  }
+  .e-quick-popup-wrapper .e-popup-footer {
+    padding-left: 5px;
+  }
+  .e-quick-popup-wrapper.e-rtl .e-popup-footer {
+    padding-right: 5px;
+  }
+}
 .e-bigger .e-quick-popup-wrapper .e-cell-popup .e-popup-content .e-popup-table .e-subject {
   font-size: 24px;
 }

package/styles/bootstrap.css

@@ -133,6 +133,10 @@
   width: 40px;
 }
 
+.e-bigger.e-multiselect.e-control-container .e-multi-select-wrapper .e-clear-icon {
+  margin-top: -3.2em;
+}
+
 /*! recurrence editor theme wise definitions*/ /*! Schedule component's bootstrap theme definitions and variables */
 .e-schedule .e-schedule-toolbar .e-icon-prev::before {
   content: "\e990";
@@ -318,6 +322,9 @@
   font-size: 14px;
   text-transform: initial;
 }
+.e-schedule .e-schedule-toolbar .e-toolbar-items {
+  height: 43px;
+}
 .e-schedule .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 43px;
   min-height: 43px;
@@ -390,6 +397,9 @@
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:hover, .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:focus {
   height: calc(100% - 20px);
 }
+.e-schedule.e-device .e-schedule-toolbar .e-toolbar-items {
+  height: 56px;
+}
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 56px;
   min-height: 56px;
@@ -416,6 +426,20 @@
 .e-schedule.e-device .e-content-wrap.e-scroll-hidden {
   overflow: hidden;
 }
+@media screen and (max-width: 320px) {
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop {
+    width: 100%;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-left: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop.e-rtl .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-right: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-tbar-btn .e-tbar-btn-text {
+    font-size: 8px;
+  }
+}
 .e-schedule .e-schedule-resource-toolbar {
   background: #f8f8f8;
   border-bottom: 1px solid #ddd;
@@ -2463,8 +2487,8 @@
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item {
   min-height: 56px;
 }
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 34px;
 }
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-separator,
@@ -2784,6 +2808,19 @@
   float: right;
 }
 
+/*! schedule event window for smaller viewports*/
+@media screen and (max-width: 320px) {
+  .e-schedule-dialog.e-popup.e-popup-open {
+    max-height: 350px;
+    min-width: 100%;
+  }
+  .e-schedule-dialog .e-all-day-container {
+    padding-bottom: 10px;
+  }
+  .e-schedule-dialog .e-all-day-time-zone-row {
+    display: block;
+  }
+}
 .e-ddl.e-popup .e-resource-template {
   display: -ms-flexbox;
   display: flex;
@@ -3373,6 +3410,18 @@
   margin-right: 0;
 }
 
+/*! schedule quick popup for smaller viewports */
+@media screen and (max-width: 320px) {
+  .e-quick-popup-wrapper {
+    min-width: 100%;
+  }
+  .e-quick-popup-wrapper .e-popup-footer {
+    padding-left: 5px;
+  }
+  .e-quick-popup-wrapper.e-rtl .e-popup-footer {
+    padding-right: 5px;
+  }
+}
 .e-bigger .e-quick-popup-wrapper .e-cell-popup .e-popup-content .e-popup-table .e-subject {
   font-size: 24px;
 }

package/styles/bootstrap4.css

@@ -427,6 +427,9 @@
   font-size: 14px;
   text-transform: initial;
 }
+.e-schedule .e-schedule-toolbar .e-toolbar-items {
+  height: 46px;
+}
 .e-schedule .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 46px;
   min-height: 46px;
@@ -499,6 +502,9 @@
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:hover, .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:focus {
   height: calc(100% - 20px);
 }
+.e-schedule.e-device .e-schedule-toolbar .e-toolbar-items {
+  height: 54px;
+}
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 54px;
   min-height: 54px;
@@ -525,6 +531,20 @@
 .e-schedule.e-device .e-content-wrap.e-scroll-hidden {
   overflow: hidden;
 }
+@media screen and (max-width: 320px) {
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop {
+    width: 100%;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-left: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop.e-rtl .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-right: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-tbar-btn .e-tbar-btn-text {
+    font-size: 8px;
+  }
+}
 .e-schedule .e-schedule-resource-toolbar {
   background: #f8f9fa;
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
@@ -1358,7 +1378,7 @@
   cursor: default;
   font-weight: normal;
   height: 35px;
-  padding: 8px;
+  padding: 3px;
 }
 .e-schedule .e-month-view .e-content-table {
   height: 100%;
@@ -2572,8 +2592,8 @@
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item {
   min-height: 54px;
 }
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 34px;
 }
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-separator,
@@ -2893,6 +2913,19 @@
   float: right;
 }
 
+/*! schedule event window for smaller viewports*/
+@media screen and (max-width: 320px) {
+  .e-schedule-dialog.e-popup.e-popup-open {
+    max-height: 350px;
+    min-width: 100%;
+  }
+  .e-schedule-dialog .e-all-day-container {
+    padding-bottom: 10px;
+  }
+  .e-schedule-dialog .e-all-day-time-zone-row {
+    display: block;
+  }
+}
 .e-ddl.e-popup .e-resource-template {
   display: -ms-flexbox;
   display: flex;
@@ -3482,6 +3515,18 @@
   margin-right: 0;
 }
 
+/*! schedule quick popup for smaller viewports */
+@media screen and (max-width: 320px) {
+  .e-quick-popup-wrapper {
+    min-width: 100%;
+  }
+  .e-quick-popup-wrapper .e-popup-footer {
+    padding-left: 5px;
+  }
+  .e-quick-popup-wrapper.e-rtl .e-popup-footer {
+    padding-right: 5px;
+  }
+}
 .e-bigger .e-quick-popup-wrapper .e-cell-popup .e-popup-content .e-popup-table .e-subject {
   font-size: 24px;
 }

package/styles/bootstrap5-dark.css

@@ -372,6 +372,9 @@
   font-size: 14px;
   text-transform: none;
 }
+.e-schedule .e-schedule-toolbar .e-toolbar-items {
+  height: 38px;
+}
 .e-schedule .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 38px;
   min-height: 38px;
@@ -444,6 +447,9 @@
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:hover, .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:focus {
   height: calc(100% - 20px);
 }
+.e-schedule.e-device .e-schedule-toolbar .e-toolbar-items {
+  height: 54px;
+}
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 54px;
   min-height: 54px;
@@ -470,6 +476,20 @@
 .e-schedule.e-device .e-content-wrap.e-scroll-hidden {
   overflow: hidden;
 }
+@media screen and (max-width: 320px) {
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop {
+    width: 100%;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-left: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop.e-rtl .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-right: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-tbar-btn .e-tbar-btn-text {
+    font-size: 8px;
+  }
+}
 .e-schedule .e-schedule-resource-toolbar {
   background: #282d31;
   border-bottom: 0;
@@ -1303,7 +1323,7 @@
   cursor: default;
   font-weight: normal;
   height: 34px;
-  padding: 8px;
+  padding: 3px;
 }
 .e-schedule .e-month-view .e-content-table {
   height: 100%;
@@ -2517,8 +2537,8 @@
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item {
   min-height: 54px;
 }
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 34px;
 }
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-separator,
@@ -2838,6 +2858,19 @@
   float: right;
 }
 
+/*! schedule event window for smaller viewports*/
+@media screen and (max-width: 320px) {
+  .e-schedule-dialog.e-popup.e-popup-open {
+    max-height: 350px;
+    min-width: 100%;
+  }
+  .e-schedule-dialog .e-all-day-container {
+    padding-bottom: 10px;
+  }
+  .e-schedule-dialog .e-all-day-time-zone-row {
+    display: block;
+  }
+}
 .e-ddl.e-popup .e-resource-template {
   display: -ms-flexbox;
   display: flex;
@@ -3427,6 +3460,18 @@
   margin-right: 0;
 }
 
+/*! schedule quick popup for smaller viewports */
+@media screen and (max-width: 320px) {
+  .e-quick-popup-wrapper {
+    min-width: 100%;
+  }
+  .e-quick-popup-wrapper .e-popup-footer {
+    padding-left: 5px;
+  }
+  .e-quick-popup-wrapper.e-rtl .e-popup-footer {
+    padding-right: 5px;
+  }
+}
 .e-bigger .e-quick-popup-wrapper .e-cell-popup .e-popup-content .e-popup-table .e-subject {
   font-size: 24px;
 }

package/styles/bootstrap5.css

@@ -372,6 +372,9 @@
   font-size: 14px;
   text-transform: none;
 }
+.e-schedule .e-schedule-toolbar .e-toolbar-items {
+  height: 38px;
+}
 .e-schedule .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 38px;
   min-height: 38px;
@@ -444,6 +447,9 @@
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:hover, .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:focus {
   height: calc(100% - 20px);
 }
+.e-schedule.e-device .e-schedule-toolbar .e-toolbar-items {
+  height: 54px;
+}
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 54px;
   min-height: 54px;
@@ -470,6 +476,20 @@
 .e-schedule.e-device .e-content-wrap.e-scroll-hidden {
   overflow: hidden;
 }
+@media screen and (max-width: 320px) {
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop {
+    width: 100%;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-left: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop.e-rtl .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-right: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-tbar-btn .e-tbar-btn-text {
+    font-size: 8px;
+  }
+}
 .e-schedule .e-schedule-resource-toolbar {
   background: #f8f9fa;
   border-bottom: 0;
@@ -1303,7 +1323,7 @@
   cursor: default;
   font-weight: normal;
   height: 34px;
-  padding: 8px;
+  padding: 3px;
 }
 .e-schedule .e-month-view .e-content-table {
   height: 100%;
@@ -2517,8 +2537,8 @@
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item {
   min-height: 54px;
 }
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 34px;
 }
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-separator,
@@ -2838,6 +2858,19 @@
   float: right;
 }
 
+/*! schedule event window for smaller viewports*/
+@media screen and (max-width: 320px) {
+  .e-schedule-dialog.e-popup.e-popup-open {
+    max-height: 350px;
+    min-width: 100%;
+  }
+  .e-schedule-dialog .e-all-day-container {
+    padding-bottom: 10px;
+  }
+  .e-schedule-dialog .e-all-day-time-zone-row {
+    display: block;
+  }
+}
 .e-ddl.e-popup .e-resource-template {
   display: -ms-flexbox;
   display: flex;
@@ -3427,6 +3460,18 @@
   margin-right: 0;
 }
 
+/*! schedule quick popup for smaller viewports */
+@media screen and (max-width: 320px) {
+  .e-quick-popup-wrapper {
+    min-width: 100%;
+  }
+  .e-quick-popup-wrapper .e-popup-footer {
+    padding-left: 5px;
+  }
+  .e-quick-popup-wrapper.e-rtl .e-popup-footer {
+    padding-right: 5px;
+  }
+}
 .e-bigger .e-quick-popup-wrapper .e-cell-popup .e-popup-content .e-popup-table .e-subject {
   font-size: 24px;
 }

package/styles/fabric-dark.css

@@ -290,6 +290,9 @@
   font-size: 14px;
   text-transform: initial;
 }
+.e-schedule .e-schedule-toolbar .e-toolbar-items {
+  height: 43px;
+}
 .e-schedule .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 43px;
   min-height: 43px;
@@ -362,6 +365,9 @@
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:hover, .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items .e-toolbar-left .e-tbar-btn.e-icon-btn:focus {
   height: calc(100% - 20px);
 }
+.e-schedule.e-device .e-schedule-toolbar .e-toolbar-items {
+  height: 56px;
+}
 .e-schedule.e-device .e-schedule-toolbar .e-toolbar-items.e-tbar-pos {
   height: 56px;
   min-height: 56px;
@@ -388,6 +394,20 @@
 .e-schedule.e-device .e-content-wrap.e-scroll-hidden {
   overflow: hidden;
 }
+@media screen and (max-width: 320px) {
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop {
+    width: 100%;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-left: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-toolbar-pop.e-rtl .e-toolbar-item .e-tbar-btn.e-btn {
+    padding-right: 7px;
+  }
+  .e-schedule .e-schedule-toolbar .e-tbar-btn .e-tbar-btn-text {
+    font-size: 8px;
+  }
+}
 .e-schedule .e-schedule-resource-toolbar {
   background: #201f1f;
   border-bottom: 1px solid #414040;
@@ -2435,8 +2455,8 @@
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item {
   min-height: 56px;
 }
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator),
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator) {
+.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer),
+.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item:not(.e-separator):not(.e-spacer) {
   min-width: 34px;
 }
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-separator,
@@ -2756,6 +2776,19 @@
   float: right;
 }
 
+/*! schedule event window for smaller viewports*/
+@media screen and (max-width: 320px) {
+  .e-schedule-dialog.e-popup.e-popup-open {
+    max-height: 350px;
+    min-width: 100%;
+  }
+  .e-schedule-dialog .e-all-day-container {
+    padding-bottom: 10px;
+  }
+  .e-schedule-dialog .e-all-day-time-zone-row {
+    display: block;
+  }
+}
 .e-ddl.e-popup .e-resource-template {
   display: -ms-flexbox;
   display: flex;
@@ -3345,6 +3378,18 @@
   margin-right: 0;
 }
 
+/*! schedule quick popup for smaller viewports */
+@media screen and (max-width: 320px) {
+  .e-quick-popup-wrapper {
+    min-width: 100%;
+  }
+  .e-quick-popup-wrapper .e-popup-footer {
+    padding-left: 5px;
+  }
+  .e-quick-popup-wrapper.e-rtl .e-popup-footer {
+    padding-right: 5px;
+  }
+}
 .e-bigger .e-quick-popup-wrapper .e-cell-popup .e-popup-content .e-popup-table .e-subject {
   font-size: 24px;
 }