@syncfusion/ej2-schedule 19.3.55 → 19.4.38

package/src/schedule/renderer/month.js

@@ -144,10 +144,11 @@ var Month = /** @class */ (function (_super) {
     Month.prototype.getDateSlots = function (renderDates, workDays) {
         var count = this.parent.activeViewOptions.showWeekend ? util.WEEK_LENGTH : workDays.length;
         var dateSlots = [];
+        var isCurrentMonth = this.isCurrentMonth(this.parent.selectedDate);
         for (var col = 0; col < count; col++) {
             var classList = [cls.HEADER_CELLS_CLASS];
             var currentDateIndex = renderDates.slice(0, count).map(function (date) { return date.getDay(); });
-            if (this.isCurrentMonth(this.parent.selectedDate) && currentDateIndex.indexOf(this.parent.getCurrentTime().getDay()) === col) {
+            if (isCurrentMonth && currentDateIndex.indexOf(this.parent.getCurrentTime().getDay()) === col) {
                 classList.push(cls.CURRENT_DAY_CLASS);
             }
             dateSlots.push({ date: renderDates[col], type: 'monthDay', className: classList, colSpan: 1, workDays: workDays });
@@ -186,6 +187,9 @@ var Month = /** @class */ (function (_super) {
             this.renderResourceMobileLayout();
         }
         this.parent.notify(event.contentReady, {});
+        if (this.parent.uiStateValues.isCustomMonth) {
+            this.parent.uiStateValues.isCustomMonth = false;
+        }
     };
     Month.prototype.refreshHeader = function () {
         remove(this.element.querySelector('tbody tr'));
@@ -371,7 +375,7 @@ var Month = /** @class */ (function (_super) {
         return slotDatas;
     };
     Month.prototype.updateClassList = function (data) {
-        if (this.isOtherMonth(data.date)) {
+        if (!this.isCustomMonth() && this.isOtherMonth(data.date)) {
             data.className.push(cls.OTHERMONTH_CLASS);
         }
         if (!this.parent.isMinMaxDate(data.date)) {
@@ -480,15 +484,33 @@ var Month = /** @class */ (function (_super) {
         }
     };
     Month.prototype.getMonthStart = function (currentDate) {
-        var monthStart = util.getWeekFirstDate(this.parent.calendarUtil.firstDateOfMonth(currentDate), this.parent.activeViewOptions.firstDayOfWeek);
-        var start = new Date(monthStart.getFullYear(), monthStart.getMonth(), monthStart.getDate());
-        return start;
+        var useDisplayDate = this.parent.currentView === 'Month' && !isNullOrUndefined(this.parent.activeViewOptions.displayDate) && (this.parent.uiStateValues.isCustomMonth || this.isCustomRange());
+        var date = useDisplayDate ? this.parent.activeViewOptions.displayDate : !(this.parent.uiStateValues.isCustomMonth ||
+            this.isCustomRange()) && this.isCustomMonth() ? currentDate : this.parent.calendarUtil.firstDateOfMonth(currentDate);
+        var monthStart = util.getWeekFirstDate(date, this.parent.activeViewOptions.firstDayOfWeek);
+        return new Date(monthStart.getFullYear(), monthStart.getMonth(), monthStart.getDate());
     };
     Month.prototype.getMonthEnd = function (currentDate) {
-        var endDate = util.addMonths(currentDate, this.parent.activeViewOptions.interval - 1);
-        var lastWeekOfMonth = util.getWeekFirstDate(this.parent.calendarUtil.lastDateOfMonth(endDate), this.parent.activeViewOptions.firstDayOfWeek);
-        var monthEnd = util.addDays(lastWeekOfMonth, util.WEEK_LENGTH - 1);
-        return monthEnd;
+        if (this.isCustomMonth()) {
+            var start = this.getMonthStart(currentDate);
+            var numberOfDays = util.WEEK_LENGTH * (this.parent.activeViewOptions.numberOfWeeks > 0 ?
+                this.parent.activeViewOptions.numberOfWeeks : util.DEFAULT_WEEKS);
+            return util.addDays(start, (numberOfDays - 1));
+        }
+        else {
+            var endDate = util.addMonths(currentDate, this.parent.activeViewOptions.interval - 1);
+            var lastWeekOfMonth = util.getWeekFirstDate(this.parent.calendarUtil.lastDateOfMonth(endDate), this.parent.activeViewOptions.firstDayOfWeek);
+            return util.addDays(lastWeekOfMonth, util.WEEK_LENGTH - 1);
+        }
+    };
+    Month.prototype.isCustomRange = function () {
+        var dates = this.parent.getCurrentViewDates();
+        if (dates && dates.length > 0) {
+            var selectedTime = util.resetTime(this.parent.selectedDate).getTime();
+            return !(selectedTime >= util.getWeekFirstDate(dates[0], this.parent.activeViewOptions.firstDayOfWeek).getTime() &&
+                selectedTime <= util.addDays(util.getWeekFirstDate(dates[dates.length - 1], this.parent.activeViewOptions.firstDayOfWeek), 6).getTime());
+        }
+        return false;
     };
     Month.prototype.getRenderDates = function (workDays) {
         var renderDates = [];
@@ -518,34 +540,57 @@ var Month = /** @class */ (function (_super) {
         return renderDates;
     };
     Month.prototype.getNextPreviousDate = function (type) {
-        if (type === 'next') {
-            return util.addMonths(this.parent.selectedDate, this.parent.activeViewOptions.interval);
+        if (this.isCustomMonth()) {
+            var dates = this.parent.getCurrentViewDates();
+            var date = util.getWeekFirstDate(type === 'next' ? dates[dates.length - 1]
+                : dates[0], this.parent.activeViewOptions.firstDayOfWeek);
+            return util.addDays(date, type === 'next' ? util.WEEK_LENGTH : -(this.parent.activeViewOptions.numberOfWeeks > 0 ?
+                this.parent.activeViewOptions.numberOfWeeks : util.DEFAULT_WEEKS) * util.WEEK_LENGTH);
         }
         else {
-            return util.addMonths(this.parent.selectedDate, -(this.parent.activeViewOptions.interval));
+            return util.addMonths(this.parent.selectedDate, ((type === 'next' ? 1 : -1) * this.parent.activeViewOptions.interval));
         }
     };
+    Month.prototype.getStartDate = function () {
+        return this.getMonthStart(this.parent.selectedDate);
+    };
+    Month.prototype.getEndDate = function () {
+        return this.getMonthEnd(this.parent.selectedDate);
+    };
     Month.prototype.getEndDateFromStartDate = function (start) {
         return util.addDays(new Date(start.getTime()), 1);
     };
     Month.prototype.getDateRangeText = function () {
         if (this.parent.isAdaptive || isNullOrUndefined(this.parent.activeViewOptions.dateFormat)) {
-            if (this.parent.activeViewOptions.interval > 1) {
-                var endDate = util.addMonths(util.lastDateOfMonth(this.parent.selectedDate), this.parent.activeViewOptions.interval - 1);
-                if (this.parent.selectedDate.getFullYear() === endDate.getFullYear()) {
-                    var monthNames = (this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM', calendar: this.parent.getCalendarMode() })) + ' - ' +
+            var startDate = this.parent.selectedDate;
+            var endDate = void 0;
+            var updateCustomRange = false;
+            if (this.isCustomMonth()) {
+                var dates = this.parent.getCurrentViewDates();
+                updateCustomRange = dates[0].getMonth() !== dates[dates.length - 1].getMonth() ||
+                    dates[0].getFullYear() !== dates[dates.length - 1].getFullYear();
+                if (updateCustomRange) {
+                    startDate = dates[0];
+                    endDate = dates[dates.length - 1];
+                }
+            }
+            var isUpdateDateRange = (this.parent.currentView !== 'Month' || !this.isCustomMonth());
+            if (this.parent.activeViewOptions.interval > 1 && isUpdateDateRange || updateCustomRange) {
+                endDate = endDate ? endDate : util.addMonths(util.lastDateOfMonth(startDate), this.parent.activeViewOptions.interval - 1);
+                if (startDate.getFullYear() === endDate.getFullYear()) {
+                    var monthNames = (this.parent.globalize.formatDate(startDate, { format: 'MMMM', calendar: this.parent.getCalendarMode() })) + ' - ' +
                         (this.parent.globalize.formatDate(endDate, { format: 'MMMM ', calendar: this.parent.getCalendarMode() })) +
                         this.parent.globalize.formatDate(endDate, { skeleton: 'y', calendar: this.parent.getCalendarMode() });
                     return util.capitalizeFirstWord(monthNames, 'single');
                 }
-                var text = (this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM', calendar: this.parent.getCalendarMode() })) + ' ' +
-                    this.parent.selectedDate.getFullYear() + ' - ' +
+                var text = (this.parent.globalize.formatDate(startDate, { format: 'MMMM', calendar: this.parent.getCalendarMode() })) + ' ' +
+                    startDate.getFullYear() + ' - ' +
                     this.parent.globalize.formatDate(endDate, { format: 'MMMM ', calendar: this.parent.getCalendarMode() }) +
                     this.parent.globalize.formatDate(endDate, { skeleton: 'y', calendar: this.parent.getCalendarMode() });
                 return util.capitalizeFirstWord(text, 'single');
             }
             var format = (this.parent.activeViewOptions.dateFormat) ? this.parent.activeViewOptions.dateFormat : 'MMMM y';
-            return util.capitalizeFirstWord(this.parent.globalize.formatDate(this.parent.selectedDate, { format: format, calendar: this.parent.getCalendarMode() }), 'single');
+            return util.capitalizeFirstWord(this.parent.globalize.formatDate(startDate, { format: format, calendar: this.parent.getCalendarMode() }), 'single');
         }
         return this.formatDateRange(this.parent.selectedDate);
     };
@@ -570,6 +615,10 @@ var Month = /** @class */ (function (_super) {
             EventHandler.remove(contentScrollableEle, 'scroll', this.onContentScroll);
         }
     };
+    Month.prototype.isCustomMonth = function () {
+        return this.parent.currentView === 'Month' &&
+            (!isNullOrUndefined(this.parent.activeViewOptions.displayDate) || this.parent.activeViewOptions.numberOfWeeks > 0);
+    };
     Month.prototype.getModuleName = function () {
         return 'month';
     };

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

@@ -43,6 +43,9 @@ var TimelineYear = /** @class */ (function (_super) {
             tr.appendChild(leftHeaderCells);
             leftHeaderCells.appendChild(this.renderResourceHeader(cls.LEFT_INDENT_WRAP_CLASS));
         }
+        var isHorizontal = this.parent.activeViewOptions.orientation === 'Horizontal';
+        var isGroup = this.parent.activeViewOptions.group.resources.length > 0;
+        this.isInverseTableSelect = isHorizontal && !isGroup ? false : true;
         var td = createElement('td');
         tr.appendChild(td);
         var container = createElement('div', { className: cls.DATE_HEADER_CONTAINER_CLASS });

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

@@ -209,6 +209,10 @@ var ViewBase = /** @class */ (function () {
         return date.setHours(0, 0, 0, 0) === this.parent.getCurrentTime().setHours(0, 0, 0, 0);
     };
     ViewBase.prototype.isCurrentMonth = function (date) {
+        if (this.parent.activeViewOptions.displayDate || this.parent.activeViewOptions.numberOfWeeks > 0) {
+            return this.parent.activeView.getStartDate().getTime() <= this.parent.getCurrentTime().getTime() &&
+                this.parent.activeView.getEndDate().getTime() >= this.parent.getCurrentTime().getTime();
+        }
         return date.getFullYear() ===
             this.parent.getCurrentTime().getFullYear() && date.getMonth() === this.parent.getCurrentTime().getMonth();
     };
@@ -441,6 +445,11 @@ var ViewBase = /** @class */ (function () {
                     setStyleAttribute(resourceColumn, { 'height': formatUnit(content.clientHeight) });
                 }
             }
+            var headerCellElements = [].slice.call(this.element.querySelectorAll('.' + cls.HEADER_CELLS_CLASS));
+            headerCellElements.forEach(function (ele) {
+                var headerCellColSpan = parseInt(ele.getAttribute('colspan'), 10);
+                setStyleAttribute(ele, { 'width': formatUnit(colWidth_1 * headerCellColSpan) });
+            });
         }
     };
     ViewBase.prototype.resetColWidth = function () {

package/src/schedule/renderer/year.d.ts

@@ -29,8 +29,8 @@ export declare class Year extends ViewBase implements IRenderer {
     private onCellClick;
     onContentScroll(e: Event): void;
     onScrollUiUpdate(args: NotifyEventArgs): void;
-    private getStartDate;
-    private getEndDate;
+    getStartDate(): Date;
+    getEndDate(): Date;
     startDate(): Date;
     endDate(): Date;
     getEndDateFromStartDate(start: Date): Date;

package/src/schedule/renderer/year.js

@@ -236,10 +236,27 @@ var Year = /** @class */ (function (_super) {
     Year.prototype.onCellClick = function (e) {
         var target = closest(e.target, '.' + cls.WORK_CELLS_CLASS);
         var startDate = this.parent.getDateFromElement(target);
-        var endDate = util.addDays(new Date(startDate.getTime()), 1);
-        var filteredEvents = this.parent.eventBase.filterEvents(startDate, endDate);
-        var moreEventArgs = { date: startDate, event: filteredEvents, element: e.target };
-        this.parent.quickPopup.moreEventClick(moreEventArgs, endDate);
+        this.parent.activeCellsData = this.parent.getCellDetails(target);
+        var isPrevious = startDate.getTime() < this.getStartDate().getTime();
+        if (isPrevious || startDate.getTime() > this.getEndDate().getTime()) {
+            this.parent.changeDate(this.parent.activeView.getNextPreviousDate(isPrevious ? 'previous' : 'next'), e);
+            var activeDate = this.parent.activeCellsData.startTime.getTime();
+            var inRange = activeDate >= this.getStartDate().getTime() && activeDate <= this.getEndDate().getTime();
+            var dateAttr = inRange ? activeDate : (isPrevious ? this.getEndDate() : this.getStartDate()).getTime();
+            var selectedCell = this.parent.element.querySelector(':not(.' + cls.OTHERMONTH_CLASS + ')[data-date="' + dateAttr + '"]');
+            this.parent.selectCell(selectedCell);
+            this.parent.activeCellsData = this.parent.getCellDetails(selectedCell);
+        }
+        else {
+            var endDate = util.addDays(new Date(startDate.getTime()), 1);
+            var filteredEvents = this.parent.eventBase.filterEvents(startDate, endDate);
+            var moreEventArgs = { date: startDate, event: filteredEvents, element: e.target };
+            if (target.classList.contains(cls.OTHERMONTH_CLASS)) {
+                target = this.parent.element.querySelector(':not(.' + cls.OTHERMONTH_CLASS + ')[data-date="' + target.getAttribute('data-date') + '"]');
+            }
+            this.parent.activeCellsData = this.parent.getCellDetails(target);
+            this.parent.quickPopup.moreEventClick(moreEventArgs, endDate);
+        }
     };
     Year.prototype.onContentScroll = function (e) {
         var target = e.target;
@@ -291,10 +308,10 @@ var Year = /** @class */ (function (_super) {
         return util.addDays(util.addMonths(this.getStartDate(), this.parent.monthsCount), -1);
     };
     Year.prototype.startDate = function () {
-        return util.getWeekFirstDate(this.getStartDate(), this.parent.firstDayOfWeek);
+        return this.parent.currentView === 'Year' ? util.getWeekFirstDate(this.getStartDate(), this.parent.firstDayOfWeek) : this.getStartDate();
     };
     Year.prototype.endDate = function () {
-        return util.addDays(util.getWeekLastDate(this.getEndDate(), this.parent.firstDayOfWeek), 1);
+        return this.parent.currentView === 'Year' ? util.addDays(util.getWeekLastDate(this.getEndDate(), this.parent.firstDayOfWeek), 1) : this.getEndDate();
     };
     Year.prototype.getEndDateFromStartDate = function (start) {
         var date = new Date(start.getTime());
@@ -337,6 +354,7 @@ var Year = /** @class */ (function (_super) {
                 EventHandler.add(element, 'click', this.onCellClick, this);
             }
             else {
+                EventHandler.add(element, 'mousedown', this.parent.workCellAction.cellMouseDown, this.parent.workCellAction);
                 EventHandler.add(element, 'click', this.parent.workCellAction.cellClick, this.parent.workCellAction);
                 if (!this.parent.isAdaptive) {
                     EventHandler.add(element, 'dblclick', this.parent.workCellAction.cellDblClick, this.parent.workCellAction);

package/styles/bootstrap-dark.css

@@ -225,10 +225,6 @@
   color: #3e98ff;
 }
 
-.e-schedule .e-schedule-toolbar .e-toolbar-pop {
-  overflow: auto;
-}
-
 .e-schedule .e-schedule-toolbar .e-tbar-btn .e-tbar-btn-text {
   cursor: pointer;
   font-size: 14px;
@@ -294,6 +290,10 @@
   text-transform: initial;
 }
 
+.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-tbtn-txt .e-icons.e-btn-icon {
+  padding: 0 12px;
+}
+
 .e-schedule .e-schedule-toolbar.e-rtl .e-hor-nav {
   background: #131313;
   border-left: 0;
@@ -357,6 +357,10 @@
   font-size: 18px;
 }
 
+.e-schedule.e-device .e-schedule-toolbar .e-toolbar-pop {
+  overflow: auto;
+}
+
 .e-schedule.e-device .e-content-wrap.e-scroll-hidden {
   overflow: hidden;
 }
@@ -436,10 +440,10 @@
 
 .e-schedule .e-resource-tree-popup {
   background: #6e6e6e;
+  box-shadow: 0 3px 4px 0.2px rgba(0, 0, 0, 0.4);
   height: 100%;
   position: absolute;
   width: 250px;
-  box-shadow: 0 3px 4px 0.2px rgba(0, 0, 0, 0.4);
 }
 
 .e-schedule .e-resource-tree-popup .e-resource-tree {
@@ -1533,6 +1537,7 @@
 
 .e-schedule .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar .e-content span.e-day {
   display: block;
+  margin: 0 auto;
 }
 
 .e-schedule .e-year-view .e-calendar-wrapper .e-month-calendar.e-calendar .e-other-month {
@@ -1551,9 +1556,8 @@
   background-color: #0070f0;
   border-radius: 50%;
   height: 5px;
-  margin-left: 13px;
-  margin-top: -6px;
-  position: absolute;
+  margin: -6px auto 0;
+  position: relative;
   width: 5px;
 }
 
@@ -1604,10 +1608,6 @@
   border-left-width: 0;
 }
 
-.e-schedule .e-year-view .e-calendar-table td:not(.e-cell) {
-  border-left: 1px solid #505050;
-}
-
 .e-schedule .e-year-view .e-resource .e-month-calendar {
   max-width: 100%;
   min-width: 100%;
@@ -2092,7 +2092,7 @@
 .e-schedule .e-timeline-view.e-ignore-whitespace .e-resource-cells,
 .e-schedule .e-timeline-month-view.e-ignore-whitespace .e-work-cells,
 .e-schedule .e-timeline-month-view.e-ignore-whitespace .e-resource-cells {
-  height: 42px;
+  height: 60px;
 }
 
 .e-schedule .e-timeline-view.e-virtual-mask .e-work-cells,
@@ -2552,6 +2552,10 @@
   width: 75px;
 }
 
+.e-schedule.e-rtl .e-month-agenda-view .e-resource-column .e-resource-name {
+  white-space: normal;
+}
+
 .e-schedule.e-rtl .e-month-agenda-view .e-day-padding {
   padding-right: 8px;
 }
@@ -2773,6 +2777,10 @@
   width: 75px;
 }
 
+.e-schedule.e-rtl .e-agenda-view .e-resource-column .e-resource-name {
+  white-space: normal;
+}
+
 .e-schedule.e-rtl .e-agenda-view .e-day-padding {
   padding-right: 8px;
 }
@@ -2854,9 +2862,8 @@
   height: auto;
   line-height: 25px;
   margin: 4px 0;
-  min-height: 0;
+  min-height: 34px;
   min-width: 34px;
-  padding: 0 1.5px;
 }
 
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
@@ -2994,6 +3001,10 @@
   font-weight: 500;
 }
 
+.e-bigger .e-dialog.e-quick-dialog.e-following-events-dialog {
+  width: 485px;
+}
+
 .e-dialog.e-quick-dialog.e-following-events-dialog {
   width: 420px;
 }
@@ -3015,6 +3026,14 @@
   display: none;
 }
 
+.e-dialog.e-quick-dialog .e-dlg-header-content {
+  border-bottom: none;
+}
+
+.e-dialog.e-quick-dialog .e-footer-content {
+  border-top: none;
+}
+
 .e-dialog.e-quick-dialog .e-quick-dialog-cancel {
   box-shadow: none;
 }
@@ -3051,15 +3070,23 @@
 
 .e-schedule-dialog .e-subject-container,
 .e-schedule-dialog .e-start-container,
-.e-schedule-dialog .e-start-time-zone-container,
 .e-schedule-dialog .e-description-label {
   padding-right: 8px;
 }
 
+.e-schedule-dialog .e-start-time-zone-container {
+  padding-left: 4px;
+  padding-right: 8px;
+}
+
 .e-schedule-dialog .e-location-container,
-.e-schedule-dialog .e-end-container,
+.e-schedule-dialog .e-end-container {
+  padding-left: 8px;
+}
+
 .e-schedule-dialog .e-end-time-zone-container {
   padding-left: 8px;
+  padding-right: 4px;
 }
 
 .e-schedule-dialog .e-all-day-container {
@@ -3152,19 +3179,27 @@
 
 .e-schedule-dialog.e-rtl .e-subject-container,
 .e-schedule-dialog.e-rtl .e-start-container,
-.e-schedule-dialog.e-rtl .e-start-time-zone-container,
 .e-schedule-dialog.e-rtl .e-description-label {
   padding-left: 8px;
   padding-right: 0;
 }
 
+.e-schedule-dialog.e-rtl .e-start-time-zone-container {
+  padding-left: 8px;
+  padding-right: 4px;
+}
+
 .e-schedule-dialog.e-rtl .e-location-container,
-.e-schedule-dialog.e-rtl .e-end-container,
-.e-schedule-dialog.e-rtl .e-end-time-zone-container {
+.e-schedule-dialog.e-rtl .e-end-container {
   padding-left: 0;
   padding-right: 8px;
 }
 
+.e-schedule-dialog.e-rtl .e-end-time-zone-container {
+  padding-left: 4px;
+  padding-right: 8px;
+}
+
 .e-schedule-dialog.e-rtl .e-event-delete {
   float: right;
 }
@@ -3728,6 +3763,10 @@
   margin-right: 10px;
 }
 
+.e-quick-popup-wrapper.e-rtl .e-event-details {
+  margin-left: 8px;
+}
+
 .e-quick-popup-wrapper.e-device {
   bottom: 0;
   height: 100%;
@@ -3933,31 +3972,36 @@
   width: 26px;
 }
 
+.e-bigger .e-more-popup-wrapper,
 .e-more-popup-wrapper {
   background-color: #1a1a1a;
   border: 1px solid #505050;
   border-radius: 2px;
+  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.4);
   opacity: 1;
   padding: 8px 0;
   width: 225px;
-  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.4);
 }
 
+.e-bigger .e-more-popup-wrapper .e-more-appointment-wrapper,
 .e-more-popup-wrapper .e-more-appointment-wrapper {
   margin: 0 4px;
 }
 
+.e-bigger .e-more-popup-wrapper .e-more-event-popup,
 .e-more-popup-wrapper .e-more-event-popup {
   height: 100%;
   position: relative;
   width: 100%;
 }
 
+.e-bigger .e-more-popup-wrapper .e-more-event-header,
 .e-more-popup-wrapper .e-more-event-header {
   height: 35px;
   margin: 0 8px 4px 14px;
 }
 
+.e-bigger .e-more-popup-wrapper .e-more-event-content,
 .e-more-popup-wrapper .e-more-event-content {
   height: calc(100% - 35px);
   max-height: 300px;
@@ -3966,20 +4010,24 @@
   padding-right: 10px;
 }
 
+.e-bigger .e-more-popup-wrapper .e-more-event-content .e-appointment-border,
 .e-more-popup-wrapper .e-more-event-content .e-appointment-border {
   border: 0;
   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
 }
 
+.e-bigger .e-more-popup-wrapper .e-more-event-date-header,
 .e-more-popup-wrapper .e-more-event-date-header {
   height: 100%;
   width: calc(100% - 25px);
 }
 
+.e-bigger .e-more-popup-wrapper .e-more-event-date-header .e-current-date,
 .e-more-popup-wrapper .e-more-event-date-header .e-current-date {
   color: #3e98ff;
 }
 
+.e-bigger .e-more-popup-wrapper .e-header-day,
 .e-more-popup-wrapper .e-header-day {
   color: #f0f0f0;
   font-size: 13px;
@@ -3987,6 +4035,7 @@
   padding-bottom: 2px;
 }
 
+.e-bigger .e-more-popup-wrapper .e-header-date,
 .e-more-popup-wrapper .e-header-date {
   color: #f0f0f0;
   font-size: 18px;
@@ -3994,15 +4043,18 @@
   max-width: 15%;
 }
 
+.e-bigger .e-more-popup-wrapper .e-header-date:hover,
 .e-more-popup-wrapper .e-header-date:hover {
   cursor: pointer;
   text-decoration: underline;
 }
 
+.e-bigger .e-more-popup-wrapper .e-header-date:focus,
 .e-more-popup-wrapper .e-header-date:focus {
   text-decoration: underline;
 }
 
+.e-bigger .e-more-popup-wrapper .e-more-event-close,
 .e-more-popup-wrapper .e-more-event-close {
   background-color: transparent;
   border: 0;
@@ -4015,20 +4067,25 @@
   width: 25px;
 }
 
+.e-bigger .e-more-popup-wrapper .e-more-event-close .e-close-icon,
 .e-more-popup-wrapper .e-more-event-close .e-close-icon {
   font-size: 9px;
 }
 
+.e-bigger .e-more-popup-wrapper .e-more-event-close .e-btn-icon,
 .e-more-popup-wrapper .e-more-event-close .e-btn-icon {
   margin-top: 3px;
 }
 
-.e-more-popup-wrapper .e-more-event-close:focus, .e-more-popup-wrapper .e-more-event-close:hover {
+.e-bigger .e-more-popup-wrapper .e-more-event-close:focus, .e-bigger .e-more-popup-wrapper .e-more-event-close:hover,
+.e-more-popup-wrapper .e-more-event-close:focus,
+.e-more-popup-wrapper .e-more-event-close:hover {
   background-color: #484848;
   border-radius: 50%;
   color: #fff;
 }
 
+.e-bigger .e-more-popup-wrapper .e-appointment,
 .e-more-popup-wrapper .e-appointment {
   background: #0070f0;
   border-radius: 4px;
@@ -4042,6 +4099,7 @@
   width: 100%;
 }
 
+.e-bigger .e-more-popup-wrapper .e-appointment .e-subject,
 .e-more-popup-wrapper .e-appointment .e-subject {
   color: #fff;
   -ms-flex: auto;
@@ -4054,17 +4112,22 @@
   white-space: nowrap;
 }
 
+.e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-icon,
+.e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-edit-icon,
 .e-more-popup-wrapper .e-appointment .e-recurrence-icon,
 .e-more-popup-wrapper .e-appointment .e-recurrence-edit-icon {
   line-height: 22px;
   padding: 0 2px;
 }
 
-.e-more-popup-wrapper .e-appointment.e-appointment-border, .e-more-popup-wrapper .e-appointment:focus {
+.e-bigger .e-more-popup-wrapper .e-appointment.e-appointment-border, .e-bigger .e-more-popup-wrapper .e-appointment:focus,
+.e-more-popup-wrapper .e-appointment.e-appointment-border,
+.e-more-popup-wrapper .e-appointment:focus {
   border: 0;
   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
 }
 
+.e-bigger .e-more-popup-wrapper.e-device,
 .e-more-popup-wrapper.e-device {
   bottom: 0;
   height: 100%;
@@ -4078,10 +4141,12 @@
   z-index: 1002;
 }
 
+.e-bigger .e-more-popup-wrapper.e-device .e-more-event-content,
 .e-more-popup-wrapper.e-device .e-more-event-content {
   max-height: unset;
 }
 
+.e-bigger .e-more-popup-wrapper.e-rtl .e-more-event-close,
 .e-more-popup-wrapper.e-rtl .e-more-event-close {
   left: 6px;
   right: auto;
@@ -4559,8 +4624,13 @@
 }
 
 .e-recurrenceeditor .e-recurrence-table .e-week-position {
+  min-width: 98px;
   position: relative;
-  right: 16px;
+  right: 27px;
+}
+
+.e-recurrenceeditor .e-recurrence-table .e-day-position {
+  min-width: 120px;
 }
 
 .e-recurrenceeditor .e-recurrence-table .e-monthday-element {
@@ -4610,12 +4680,13 @@
 }
 
 .e-recurrenceeditor.e-rtl .e-recurrence-table .e-monthday-element {
-  padding-left: 0;
+  position: relative;
+  right: 10px;
 }
 
 .e-recurrenceeditor.e-rtl .e-week-position {
-  padding-left: 16px;
-  right: 0;
+  position: relative;
+  right: -27px;
 }
 
 .e-recurrenceeditor.e-rtl .e-input-wrapper-side.e-end-on .e-end-on-label,
@@ -4752,15 +4823,25 @@
 }
 
 .e-bigger .e-recurrenceeditor .e-week-position {
+  min-width: 162px;
   padding-left: 55px;
   padding-right: 0;
 }
 
+.e-bigger .e-recurrenceeditor .e-day-position {
+  min-width: 190px;
+  padding-left: 54px;
+}
+
 .e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-non-week > .e-month-expander-label {
   font-size: 12px;
   margin-bottom: 0;
 }
 
+.e-bigger .e-recurrenceeditor .e-input-wrapper-side.e-end-on .e-end-on-left {
+  padding-right: 8px;
+}
+
 .e-bigger .e-recurrenceeditor .e-end-on-label {
   margin-bottom: 0;
 }