@syncfusion/ej2-schedule 23.2.4 → 24.1.41

package/src/schedule/renderer/header-renderer.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { isNullOrUndefined, createElement, remove, closest, addClass, removeClass, extend, append } from '@syncfusion/ej2-base';
 import { Toolbar } from '@syncfusion/ej2-navigations';
@@ -63,7 +74,7 @@ var HeaderRenderer = /** @class */ (function () {
     };
     HeaderRenderer.prototype.renderToolbar = function () {
         var _this = this;
-        var items = this.getItems();
+        var items = (this.parent.toolbarItems && this.parent.toolbarItems.length > 0) ? this.getToolbarItems() : this.getItems();
         this.parent.trigger(events.actionBegin, { requestType: 'toolbarItemRendering', items: items }, function (args) {
             _this.toolbarObj = new Toolbar({
                 items: args.items,
@@ -73,6 +84,7 @@ var HeaderRenderer = /** @class */ (function () {
                 enableHtmlSanitizer: _this.parent.enableHtmlSanitizer,
                 locale: _this.parent.locale
             });
+            _this.toolbarObj.root = _this.parent.root ? _this.parent.root : _this.parent;
             _this.toolbarObj.appendTo(_this.parent.element.querySelector('.' + cls.HEADER_TOOLBAR));
             var prevNavEle = _this.toolbarObj.element.querySelector('.e-prev');
             if (prevNavEle) {
@@ -195,20 +207,146 @@ var HeaderRenderer = /** @class */ (function () {
         });
         return util.capitalizeFirstWord(dateString, 'single');
     };
+    HeaderRenderer.prototype.getItemModel = function (propItem) {
+        var item = {};
+        if (propItem.id) {
+            item.id = propItem.id;
+        }
+        if (propItem.text) {
+            item.text = propItem.text;
+        }
+        if (propItem.tooltipText) {
+            item.tooltipText = propItem.tooltipText;
+        }
+        if (propItem.prefixIcon) {
+            item.prefixIcon = propItem.prefixIcon;
+        }
+        if (propItem.cssClass) {
+            item.cssClass = propItem.cssClass;
+        }
+        if (propItem.showTextOn !== 'Both') {
+            item.showTextOn = propItem.showTextOn;
+        }
+        if (propItem.template) {
+            item.template = propItem.template;
+        }
+        if (propItem.disabled) {
+            item.disabled = propItem.disabled;
+        }
+        if (propItem.width !== 'auto') {
+            item.width = propItem.width;
+        }
+        if (propItem.suffixIcon) {
+            item.suffixIcon = propItem.suffixIcon;
+        }
+        if (propItem.align !== 'Left') {
+            item.align = propItem.align;
+        }
+        if (propItem.overflow !== 'None') {
+            item.overflow = propItem.overflow;
+        }
+        if (propItem.htmlAttributes) {
+            item.htmlAttributes = propItem.htmlAttributes;
+        }
+        if (propItem.type !== 'Button') {
+            item.type = propItem.type;
+        }
+        if (propItem.visible !== true) {
+            item.visible = propItem.visible;
+        }
+        if (propItem.showAlwaysInPopup) {
+            item.showAlwaysInPopup = propItem.showAlwaysInPopup;
+        }
+        if (propItem.tabIndex !== -1) {
+            item.tabIndex = propItem.tabIndex;
+        }
+        return item;
+    };
+    HeaderRenderer.prototype.getToolbarItems = function () {
+        var items = [];
+        var propItem;
+        for (var _i = 0, _a = this.parent.toolbarItems; _i < _a.length; _i++) {
+            var item = _a[_i];
+            propItem = this.getItemModel(item);
+            var tbItem = void 0;
+            if (item.name) {
+                switch (item.name) {
+                    case 'Today':
+                        tbItem = {
+                            showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-day',
+                            text: this.l10n.getConstant('today'), cssClass: 'e-today', overflow: 'Show'
+                        };
+                        tbItem.align = propItem.align ? propItem.align : item.align;
+                        items.push(__assign({}, tbItem, propItem));
+                        break;
+                    case 'Previous':
+                        tbItem = {
+                            prefixIcon: 'e-icon-prev', tooltipText: 'Previous', overflow: 'Show',
+                            cssClass: 'e-prev', htmlAttributes: { 'role': 'navigation' }
+                        };
+                        tbItem.align = propItem.align ? propItem.align : item.align;
+                        items.push(__assign({}, tbItem, propItem));
+                        break;
+                    case 'Next':
+                        tbItem = {
+                            prefixIcon: 'e-icon-next', tooltipText: 'Next', overflow: 'Show',
+                            cssClass: 'e-next', htmlAttributes: { 'role': 'navigation' }
+                        };
+                        tbItem.align = propItem.align ? propItem.align : item.align;
+                        items.push(__assign({}, tbItem, propItem));
+                        break;
+                    case 'DateRangeText':
+                        tbItem = {
+                            text: this.getDateRangeText(), suffixIcon: 'e-icon-down-arrow', cssClass: 'e-date-range',
+                            overflow: 'Show',
+                            htmlAttributes: { 'aria-atomic': 'true', 'aria-live': 'assertive', 'role': 'navigation' }
+                        };
+                        tbItem.align = propItem.align ? propItem.align : item.align;
+                        items.push(__assign({}, tbItem, propItem));
+                        break;
+                    case 'NewEvent':
+                        tbItem = {
+                            showAlwaysInPopup: (this.parent.isAdaptive || this.parent.enableAdaptiveUI), prefixIcon: 'e-icon-add',
+                            text: this.l10n.getConstant('newEvent'), cssClass: 'e-add', overflow: 'Show'
+                        };
+                        tbItem.align = propItem.align ? propItem.align : item.align;
+                        items.push(__assign({}, tbItem, propItem));
+                        break;
+                    case 'Views':
+                        if (this.parent.views.length > 1) {
+                            for (var _b = 0, _c = this.parent.views; _b < _c.length; _b++) {
+                                var view = _c[_b];
+                                tbItem = this.getItemObject(view);
+                                tbItem.align = propItem.align ? propItem.align : item.align;
+                                items.push(__assign({}, tbItem, propItem));
+                            }
+                        }
+                        break;
+                    case 'Custom':
+                        items.push(item);
+                        break;
+                }
+            }
+            else {
+                items.push(item);
+            }
+        }
+        return items;
+    };
     HeaderRenderer.prototype.getItems = function () {
         var items = [];
         items.push({
             align: 'Left', prefixIcon: 'e-icon-prev', tooltipText: 'Previous', overflow: 'Show',
-            cssClass: 'e-prev', htmlAttributes: { 'role': 'navigation' }
+            cssClass: 'e-prev'
         });
         items.push({
             align: 'Left', prefixIcon: 'e-icon-next', tooltipText: 'Next', overflow: 'Show',
-            cssClass: 'e-next', htmlAttributes: { 'role': 'navigation' }
+            cssClass: 'e-next'
         });
         items.push({
             align: 'Left', text: this.getDateRangeText(), suffixIcon: 'e-icon-down-arrow', cssClass: 'e-date-range',
             overflow: 'Show',
-            htmlAttributes: { 'aria-atomic': 'true', 'aria-live': 'assertive', 'role': 'navigation' }
+            htmlAttributes: { 'aria-atomic': 'true', 'aria-live': 'assertive' }
         });
         if (this.parent.isAdaptive || this.parent.enableAdaptiveUI) {
             items.push({

package/src/schedule/renderer/renderer.js

@@ -132,7 +132,7 @@ var Render = /** @class */ (function () {
     };
     Render.prototype.updateLabelText = function (view) {
         var content = this.parent.activeView.getLabelText(view);
-        this.parent.element.setAttribute('role', 'main');
+        this.parent.element.setAttribute('role', 'application');
         this.parent.element.setAttribute('aria-label', content);
     };
     return Render;

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

@@ -761,9 +761,9 @@ var VerticalView = /** @class */ (function (_super) {
         var msStartHour = startHour.getTime();
         var msEndHour = endHour.getTime();
         if (msStartHour !== msEndHour) {
-            var duration = this.parent.activeViewOptions.timeScale.interval / this.parent.activeViewOptions.timeScale.slotCount;
-            length = (Math.abs(msEndHour - msStartHour) / msInterval) - ((new Date(msEndHour).getTimezoneOffset()
-                - new Date(msStartHour).getTimezoneOffset()) / duration);
+            var milliSeconds = (startHour.getTimezoneOffset() !== endHour.getTimezoneOffset()) ?
+                (msEndHour - msStartHour) - 3600000 : (msEndHour - msStartHour);
+            length = Math.round(milliSeconds / msInterval);
         }
         if (!this.parent.activeViewOptions.timeScale.enable) {
             length = 1;

package/src/schedule/renderer/year.js

@@ -170,6 +170,9 @@ var Year = /** @class */ (function (_super) {
                 var classList = [];
                 if (currentDate.getMonth() !== date.getMonth()) {
                     classList.push(cls.OTHERMONTH_CLASS);
+                    if (td.firstElementChild && !this.parent.activeViewOptions.cellTemplate) {
+                        td.firstElementChild.setAttribute('aria-disabled', 'true');
+                    }
                 }
                 if (this.isCurrentDate(date) && currentDate.getMonth() === date.getMonth()) {
                     classList = classList.concat(['e-today', 'e-selected']);

package/styles/bootstrap-dark.css

@@ -1154,7 +1154,7 @@
   text-decoration: none;
 }
 .e-schedule.e-device .e-vertical-view .e-left-indent {
-  width: 35px;
+  width: 60px;
 }
 .e-schedule.e-device .e-vertical-view .e-clone-time-indicator,
 .e-schedule.e-device .e-vertical-view .e-current-time {
@@ -1162,7 +1162,7 @@
 }
 .e-schedule.e-device .e-vertical-view .e-time-cells-wrap {
   float: left;
-  width: 35px;
+  width: 60px;
 }
 .e-schedule.e-device .e-vertical-view .e-time-cells-wrap table td {
   font-size: 11px;
@@ -1200,7 +1200,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-schedule .e-vertical-view .e-left-indent {
-    width: 35px;
+    width: 60px;
   }
 }
 .e-schedule .e-month-view .e-left-indent,
@@ -3350,8 +3350,8 @@
   background: transparent;
   border: 0;
   color: #f0f0f0;
-  height: 40px;
-  width: 40px;
+  height: 35px;
+  width: 35px;
 }
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close:focus, .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close:hover,
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit:focus,
@@ -3363,10 +3363,10 @@
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-subject {
   font-size: 15px;
   font-weight: 500;
-  height: 40px;
+  height: 35px;
   line-height: 2.25;
-  padding: 4px 5px;
-  width: calc(100% - 95px);
+  padding: 2px 5px;
+  width: calc(100% - 105px);
 }
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close-icon,
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit-icon,
@@ -3400,9 +3400,13 @@
 .e-bigger .e-quick-popup-wrapper.e-rtl .e-event-popup .e-date-time-icon {
   padding-right: 13px;
 }
-.e-bigger .e-quick-popup-wrapper .e-edit.e-btn.e-small.e-round,
-.e-bigger .e-quick-popup-wrapper .e-delete.e-btn.e-small.e-round,
-.e-bigger .e-quick-popup-wrapper .e-close.e-btn.e-small.e-round {
+.e-bigger .e-quick-popup-wrapper .e-cell-popup .e-close.e-btn.e-small.e-round {
+  height: 2em;
+  width: 2em;
+}
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-edit.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-delete.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-close.e-btn.e-small.e-round {
   height: 2em;
   width: 2em;
 }
@@ -3416,8 +3420,13 @@
 .e-bigger .e-quick-popup-wrapper.e-device .e-event-popup .e-popup-header .e-header-icon-wrapper .e-delete-icon {
   font-size: 14px;
 }
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-delete.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close.e-btn.e-small.e-round {
+  height: 35px;
+}
 .e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-subject {
-  padding: 0 5px 0 8px;
+  padding: 2px 5px;
 }
 
 .e-bigger .e-agenda-view .e-appointment {
@@ -4199,6 +4208,7 @@
 .e-recurrenceeditor .e-input-wrapper.e-end-on-date,
 .e-recurrenceeditor .e-input-wrapper.e-end-on-count {
   padding-right: 0;
+  margin-top: 24px;
 }
 .e-recurrenceeditor.e-rtl .e-end-on > div,
 .e-recurrenceeditor.e-rtl .e-month-expander > div > div {
@@ -4273,13 +4283,6 @@
   padding: 16px 20px 0;
   width: 50%;
 }
-.e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-label {
-  float: none;
-  font-size: 12px;
-  font-weight: bold;
-  margin-bottom: 7px;
-  padding-right: 16px;
-}
 .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 16px;
 }
@@ -4289,7 +4292,7 @@
 .e-recurrenceeditor .e-input-wrapper-side.e-non-week > .e-month-expander-label {
   font-size: 12px;
   font-weight: bold;
-  margin-bottom: 7px;
+  margin-bottom: 9px;
   padding-right: 16px;
 }
 .e-recurrenceeditor .e-input-wrapper-side .e-days .e-form-left {
@@ -4331,7 +4334,8 @@
 }
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-non-week > .e-month-expander-label {
   font-size: 12px;
-  margin-bottom: 0;
+  margin-bottom: 9px;
+  font-weight: bold;
 }
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 8px;
@@ -4497,7 +4501,7 @@
   }
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-non-week > .e-month-expander-label,
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-end-on .e-end-on-label {
-    margin-bottom: 7px;
+    margin-bottom: 9px;
   }
   .e-recurrenceeditor .e-editor > div {
     margin-top: 20px;

package/styles/bootstrap.css

@@ -1149,7 +1149,7 @@
   text-decoration: none;
 }
 .e-schedule.e-device .e-vertical-view .e-left-indent {
-  width: 35px;
+  width: 60px;
 }
 .e-schedule.e-device .e-vertical-view .e-clone-time-indicator,
 .e-schedule.e-device .e-vertical-view .e-current-time {
@@ -1157,7 +1157,7 @@
 }
 .e-schedule.e-device .e-vertical-view .e-time-cells-wrap {
   float: left;
-  width: 35px;
+  width: 60px;
 }
 .e-schedule.e-device .e-vertical-view .e-time-cells-wrap table td {
   font-size: 11px;
@@ -1195,7 +1195,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-schedule .e-vertical-view .e-left-indent {
-    width: 35px;
+    width: 60px;
   }
 }
 .e-schedule .e-month-view .e-left-indent,
@@ -3345,8 +3345,8 @@
   background: transparent;
   border: 0;
   color: #333;
-  height: 40px;
-  width: 40px;
+  height: 35px;
+  width: 35px;
 }
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close:focus, .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close:hover,
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit:focus,
@@ -3358,10 +3358,10 @@
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-subject {
   font-size: 15px;
   font-weight: 500;
-  height: 40px;
+  height: 35px;
   line-height: 2.25;
-  padding: 4px 5px;
-  width: calc(100% - 95px);
+  padding: 2px 5px;
+  width: calc(100% - 105px);
 }
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close-icon,
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit-icon,
@@ -3395,9 +3395,13 @@
 .e-bigger .e-quick-popup-wrapper.e-rtl .e-event-popup .e-date-time-icon {
   padding-right: 13px;
 }
-.e-bigger .e-quick-popup-wrapper .e-edit.e-btn.e-small.e-round,
-.e-bigger .e-quick-popup-wrapper .e-delete.e-btn.e-small.e-round,
-.e-bigger .e-quick-popup-wrapper .e-close.e-btn.e-small.e-round {
+.e-bigger .e-quick-popup-wrapper .e-cell-popup .e-close.e-btn.e-small.e-round {
+  height: 2em;
+  width: 2em;
+}
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-edit.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-delete.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-close.e-btn.e-small.e-round {
   height: 2em;
   width: 2em;
 }
@@ -3411,8 +3415,13 @@
 .e-bigger .e-quick-popup-wrapper.e-device .e-event-popup .e-popup-header .e-header-icon-wrapper .e-delete-icon {
   font-size: 14px;
 }
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-delete.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close.e-btn.e-small.e-round {
+  height: 35px;
+}
 .e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-subject {
-  padding: 0 5px 0 8px;
+  padding: 2px 5px;
 }
 
 .e-bigger .e-agenda-view .e-appointment {
@@ -4194,6 +4203,7 @@
 .e-recurrenceeditor .e-input-wrapper.e-end-on-date,
 .e-recurrenceeditor .e-input-wrapper.e-end-on-count {
   padding-right: 0;
+  margin-top: 24px;
 }
 .e-recurrenceeditor.e-rtl .e-end-on > div,
 .e-recurrenceeditor.e-rtl .e-month-expander > div > div {
@@ -4268,13 +4278,6 @@
   padding: 16px 20px 0;
   width: 50%;
 }
-.e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-label {
-  float: none;
-  font-size: 12px;
-  font-weight: bold;
-  margin-bottom: 7px;
-  padding-right: 16px;
-}
 .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 16px;
 }
@@ -4284,7 +4287,7 @@
 .e-recurrenceeditor .e-input-wrapper-side.e-non-week > .e-month-expander-label {
   font-size: 12px;
   font-weight: bold;
-  margin-bottom: 7px;
+  margin-bottom: 9px;
   padding-right: 16px;
 }
 .e-recurrenceeditor .e-input-wrapper-side .e-days .e-form-left {
@@ -4326,7 +4329,8 @@
 }
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-non-week > .e-month-expander-label {
   font-size: 12px;
-  margin-bottom: 0;
+  margin-bottom: 9px;
+  font-weight: bold;
 }
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 8px;
@@ -4492,7 +4496,7 @@
   }
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-non-week > .e-month-expander-label,
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-end-on .e-end-on-label {
-    margin-bottom: 7px;
+    margin-bottom: 9px;
   }
   .e-recurrenceeditor .e-editor > div {
     margin-top: 20px;

package/styles/bootstrap4.css

@@ -1258,7 +1258,7 @@
   text-decoration: none;
 }
 .e-schedule.e-device .e-vertical-view .e-left-indent {
-  width: 35px;
+  width: 60px;
 }
 .e-schedule.e-device .e-vertical-view .e-clone-time-indicator,
 .e-schedule.e-device .e-vertical-view .e-current-time {
@@ -1266,7 +1266,7 @@
 }
 .e-schedule.e-device .e-vertical-view .e-time-cells-wrap {
   float: left;
-  width: 35px;
+  width: 60px;
 }
 .e-schedule.e-device .e-vertical-view .e-time-cells-wrap table td {
   font-size: 11px;
@@ -1304,7 +1304,7 @@
 }
 @media screen and (max-width: 480px) {
   .e-schedule .e-vertical-view .e-left-indent {
-    width: 35px;
+    width: 60px;
   }
 }
 .e-schedule .e-month-view .e-left-indent,
@@ -3454,8 +3454,8 @@
   background: #fff;
   border: 0;
   color: rgba(33, 37, 41, 0.5);
-  height: 40px;
-  width: 40px;
+  height: 35px;
+  width: 35px;
 }
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close:focus, .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close:hover,
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit:focus,
@@ -3467,10 +3467,10 @@
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-subject {
   font-size: 15px;
   font-weight: 500;
-  height: 40px;
+  height: 35px;
   line-height: 2.25;
-  padding: 4px 5px;
-  width: calc(100% - 95px);
+  padding: 2px 5px;
+  width: calc(100% - 105px);
 }
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close-icon,
 .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit-icon,
@@ -3504,9 +3504,13 @@
 .e-bigger .e-quick-popup-wrapper.e-rtl .e-event-popup .e-date-time-icon {
   padding-right: 13px;
 }
-.e-bigger .e-quick-popup-wrapper .e-edit.e-btn.e-small.e-round,
-.e-bigger .e-quick-popup-wrapper .e-delete.e-btn.e-small.e-round,
-.e-bigger .e-quick-popup-wrapper .e-close.e-btn.e-small.e-round {
+.e-bigger .e-quick-popup-wrapper .e-cell-popup .e-close.e-btn.e-small.e-round {
+  height: 2em;
+  width: 2em;
+}
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-edit.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-delete.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper .e-event-popup .e-close.e-btn.e-small.e-round {
   height: 2em;
   width: 2em;
 }
@@ -3520,8 +3524,13 @@
 .e-bigger .e-quick-popup-wrapper.e-device .e-event-popup .e-popup-header .e-header-icon-wrapper .e-delete-icon {
   font-size: 14px;
 }
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-edit.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-delete.e-btn.e-small.e-round,
+.e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-close.e-btn.e-small.e-round {
+  height: 35px;
+}
 .e-bigger .e-quick-popup-wrapper.e-device .e-multiple-event-popup .e-popup-header .e-subject {
-  padding: 0 5px 0 8px;
+  padding: 2px 5px;
 }
 
 .e-bigger .e-agenda-view .e-appointment {
@@ -4303,6 +4312,7 @@
 .e-recurrenceeditor .e-input-wrapper.e-end-on-date,
 .e-recurrenceeditor .e-input-wrapper.e-end-on-count {
   padding-right: 0;
+  margin-top: 24px;
 }
 .e-recurrenceeditor.e-rtl .e-end-on > div,
 .e-recurrenceeditor.e-rtl .e-month-expander > div > div {
@@ -4377,13 +4387,6 @@
   padding: 16px 20px 0;
   width: 50%;
 }
-.e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-label {
-  float: none;
-  font-size: 14px;
-  font-weight: 400;
-  margin-bottom: 7px;
-  padding-right: 16px;
-}
 .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 16px;
 }
@@ -4393,7 +4396,7 @@
 .e-recurrenceeditor .e-input-wrapper-side.e-non-week > .e-month-expander-label {
   font-size: 14px;
   font-weight: 400;
-  margin-bottom: 7px;
+  margin-bottom: 3px;
   padding-right: 16px;
 }
 .e-recurrenceeditor .e-input-wrapper-side .e-days .e-form-left {
@@ -4436,6 +4439,7 @@
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-non-week > .e-month-expander-label {
   font-size: 16px;
   margin-bottom: 0;
+  font-weight: 400;
 }
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
   padding-right: 16px;
@@ -4601,7 +4605,7 @@
   }
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-non-week > .e-month-expander-label,
   .e-recurrenceeditor .e-editor .e-input-wrapper-side.e-end-on .e-end-on-label {
-    margin-bottom: 7px;
+    margin-bottom: 3px;
   }
   .e-recurrenceeditor .e-editor > div {
     margin-top: 20px;