@syncfusion/ej2-schedule 33.2.4 → 34.1.29

package/dist/es6/ej2-schedule.es5.js

@@ -833,6 +833,8 @@ var APPOINTMENT_ROW_COLLAPSE_CLASS = 'e-appointment-collapse';
 /** @private */
 var MORE_INDICATOR_CLASS = 'e-more-indicator';
 /** @private */
+var MAX_EVENT_STACK_INDICATOR_CLASS = 'e-event-indicator-badge';
+/** @private */
 var CELL_POPUP_CLASS = 'e-cell-popup';
 /** @private */
 var EVENT_POPUP_CLASS = 'e-event-popup';
@@ -7365,9 +7367,13 @@ var EventBase = /** @__PURE__ @class */ (function () {
                 var row = rows_1[_i];
                 var height = (this.parent.activeViewOptions.maxEventsPerRow *
                     ((eventHeight + (this.parent.currentView === 'Month' ? eventGap : 2)))) + headerHeight + indHeight;
+                var monthHeaderHeight = this.parent.element.querySelectorAll('.' + MONTH_HEADER_CLASS);
                 if (weekNumberRows.length > 0) {
                     setStyleAttribute(weekNumberRows[rows.indexOf(row)].firstElementChild, { 'height': height + 'px' });
                 }
+                if (this.parent.currentView === 'TimelineYear') {
+                    height = height >= monthHeaderHeight[0].offsetHeight ? height : monthHeaderHeight[0].offsetHeight;
+                }
                 setStyleAttribute(row.firstElementChild, { 'height': height + 'px' });
             }
             if (!this.parent.enablePersistence && !this.parent.activeViewOptions.allowVirtualScrolling && isScrollUpdate) {
@@ -7421,6 +7427,7 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
         _this.allDayLevel = 0;
         _this.startHour = _this.getStartEndHours(_this.parent.activeViewOptions.startHour);
         _this.endHour = _this.getStartEndHours(_this.parent.activeViewOptions.endHour);
+        _this.moreIndicatorsMap = [];
         _this.element = _this.parent.activeView.getPanel();
         _this.fields = _this.parent.eventFields;
         _this.animation = new Animation({ progress: _this.animationUiUpdate.bind(_this) });
@@ -7598,6 +7605,168 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
             this.appendEvent(eventObj, appointmentElement, index, appLeft);
         }
     };
+    VerticalEvent.prototype.filterEventsByOverlapGroups = function (eventList, maxEventStack, groupIndex, dayIndex, dayCount, resource) {
+        if (maxEventStack === 0 || eventList.length === 0) {
+            return eventList;
+        }
+        for (var i = 0; i < eventList.length; i++) {
+            var item = eventList[parseInt(i.toString(), 10)];
+            if (!item.__id) {
+                item.__id = i;
+            }
+        }
+        var overlapGroupList = [];
+        for (var _i = 0, eventList_1 = eventList; _i < eventList_1.length; _i++) {
+            var currentEvent = eventList_1[_i];
+            var seedGroup = [currentEvent];
+            var overlapGroup = [];
+            var _loop_1 = function (comparedEvent) {
+                var isOverlapping = seedGroup.some(function (e) {
+                    return !(comparedEvent.StartTime >= e.EndTime || comparedEvent.EndTime <= e.StartTime);
+                });
+                if (isOverlapping) {
+                    overlapGroup.push(comparedEvent);
+                }
+            };
+            for (var _a = 0, eventList_2 = eventList; _a < eventList_2.length; _a++) {
+                var comparedEvent = eventList_2[_a];
+                _loop_1(comparedEvent);
+            }
+            overlapGroupList.push(overlapGroup);
+        }
+        var finalEventList = [];
+        var currentVisibleEventBuffer = [];
+        var visibleEventIdSet = new Set();
+        var hiddenEventIdSet = new Set();
+        var indicatorsForThisSlot = [];
+        for (var _b = 0, overlapGroupList_1 = overlapGroupList; _b < overlapGroupList_1.length; _b++) {
+            var overlapGroup = overlapGroupList_1[_b];
+            var orderedGroupEvents = overlapGroup
+                .slice()
+                .sort(function (a, b) {
+                var startDiff = a.StartTime.getTime() - b.StartTime.getTime();
+                return startDiff !== 0 ? startDiff : (a.__id - b.__id);
+            });
+            var _loop_2 = function (candidateEvent) {
+                var overlappingVisibleEvents = currentVisibleEventBuffer.filter(function (e) { return !(candidateEvent.StartTime >= e.EndTime || candidateEvent.EndTime <= e.StartTime); });
+                var eventId = candidateEvent.__id;
+                if (!visibleEventIdSet.has(eventId) && !hiddenEventIdSet.has(eventId) && overlappingVisibleEvents.length < maxEventStack) {
+                    finalEventList.push(candidateEvent);
+                    currentVisibleEventBuffer.push(candidateEvent);
+                    visibleEventIdSet.add(eventId);
+                }
+            };
+            for (var _c = 0, orderedGroupEvents_1 = orderedGroupEvents; _c < orderedGroupEvents_1.length; _c++) {
+                var candidateEvent = orderedGroupEvents_1[_c];
+                _loop_2(candidateEvent);
+            }
+            var hiddenEventsInGroup = overlapGroup
+                .filter(function (e) { return !visibleEventIdSet.has(e.__id) && !hiddenEventIdSet.has(e.__id); });
+            if (hiddenEventsInGroup.length > 0) {
+                var indicatorStartTime = new Date(Math.min.apply(Math, hiddenEventsInGroup.map(function (e) {
+                    return e.StartTime.getTime();
+                })));
+                var indicatorEndTime = new Date(Math.max.apply(Math, hiddenEventsInGroup.map(function (e) {
+                    return e.EndTime.getTime();
+                })));
+                var indicatorKey = indicatorStartTime.getTime() + "_" + indicatorEndTime.getTime() + "_" + groupIndex + "_" + dayCount + "_" + resource;
+                var indicatorInfo = {
+                    hiddenEvents: hiddenEventsInGroup,
+                    hiddenEventCount: hiddenEventsInGroup.length,
+                    startTime: indicatorStartTime,
+                    endTime: indicatorEndTime,
+                    groupIndex: groupIndex,
+                    dayIndex: dayIndex,
+                    dayCount: dayCount,
+                    resource: resource
+                };
+                indicatorsForThisSlot.push({ key: indicatorKey, info: indicatorInfo });
+                for (var _d = 0, hiddenEventsInGroup_1 = hiddenEventsInGroup; _d < hiddenEventsInGroup_1.length; _d++) {
+                    var hiddenEvent = hiddenEventsInGroup_1[_d];
+                    hiddenEventIdSet.add(hiddenEvent.__id);
+                }
+            }
+        }
+        for (var _e = 0, eventList_3 = eventList; _e < eventList_3.length; _e++) {
+            var event_2 = eventList_3[_e];
+            if (!visibleEventIdSet.has(event_2.__id) && !hiddenEventIdSet.has(event_2.__id)) {
+                finalEventList.push(event_2);
+                visibleEventIdSet.add(event_2.__id);
+            }
+        }
+        for (var _f = 0, indicatorsForThisSlot_1 = indicatorsForThisSlot; _f < indicatorsForThisSlot_1.length; _f++) {
+            var indicator = indicatorsForThisSlot_1[_f];
+            this.moreIndicatorsMap.push({ key: indicator.key, info: indicator.info });
+        }
+        for (var _g = 0, finalEventList_1 = finalEventList; _g < finalEventList_1.length; _g++) {
+            var event_3 = finalEventList_1[_g];
+            delete event_3.__id;
+        }
+        return finalEventList;
+    };
+    VerticalEvent.prototype.renderMoreIndicator = function (indicatorInfo, dayIndex, resource, dayCount) {
+        var hiddenCount = indicatorInfo.hiddenEventCount || 0;
+        if (hiddenCount === 0) {
+            return;
+        }
+        var index = this.getDayIndex(dayIndex, resource, dayCount);
+        var indicatorKey = indicatorInfo.startTime.getTime() + "_" + indicatorInfo.endTime.getTime() + "_" + indicatorInfo.groupIndex + "_" + indicatorInfo.dayCount + "_" + indicatorInfo.resource;
+        var appointmentWrapper = this.element.querySelector('.' + APPOINTMENT_WRAPPER_CLASS + '[id="' + APPOINTMENT_WRAPPER_CLASS + '-' + index + '"]');
+        if (appointmentWrapper) {
+            var existingIndicator = appointmentWrapper.querySelector("[data-indicator-key=\"" + indicatorKey + "\"]");
+            if (existingIndicator) {
+                EventHandler.remove(existingIndicator, 'click', this.onMoreIndicatorClick);
+                remove(existingIndicator);
+            }
+        }
+        var indicatorElement = createElement('div', {
+            className: MAX_EVENT_STACK_INDICATOR_CLASS + ' ' + MORE_INDICATOR_CLASS,
+            attrs: {
+                'tabindex': '0',
+                'role': 'button',
+                'aria-label': hiddenCount + " more events",
+                'data-indicator-key': indicatorKey,
+                'data-hidden-count': hiddenCount.toString()
+            }
+        });
+        var startDate = indicatorInfo.startTime;
+        var endDate = indicatorInfo.endTime;
+        var top = this.getTopValue(startDate);
+        var height = this.getHeight(startDate, endDate);
+        setStyleAttribute(indicatorElement, {
+            'top': top + 'px',
+            'height': height + 'px'
+        });
+        if (this.parent.enableRtl) {
+            indicatorElement.style.left = '0%';
+        }
+        else {
+            indicatorElement.style.right = '0%';
+        }
+        indicatorElement.innerHTML = "+" + hiddenCount;
+        EventHandler.add(indicatorElement, 'click', this.onMoreIndicatorClick, this);
+        appointmentWrapper.appendChild(indicatorElement);
+    };
+    VerticalEvent.prototype.onMoreIndicatorClick = function (e) {
+        var target = e.target;
+        var indicatorKey = target.getAttribute('data-indicator-key');
+        if (indicatorKey) {
+            var indicator = this.moreIndicatorsMap.find(function (item) { return item.key === indicatorKey; });
+            if (indicator) {
+                var indicatorInfo = indicator.info;
+                var hiddenEvents = indicatorInfo.hiddenEvents;
+                this.showMorePopup(hiddenEvents, indicatorInfo.startTime, indicatorInfo.endTime, e);
+            }
+        }
+    };
+    VerticalEvent.prototype.showMorePopup = function (hiddenEvents, startDate, endDate, e) {
+        if (this.parent.quickPopup) {
+            var target = closest(e.target, '.' + MORE_INDICATOR_CLASS);
+            var groupIndex = target.getAttribute('data-group-index');
+            var moreArgs = { date: startDate, event: hiddenEvents, element: e.target };
+            this.parent.quickPopup.moreEventClick(moreArgs, endDate, groupIndex);
+        }
+    };
     VerticalEvent.prototype.renderEvents = function (eventType) {
         removeClass(this.allDayElement, ALLDAY_ROW_ANIMATE_CLASS);
         var eventCollection = (eventType === 'allDayEvents') ? this.sortByDateTime(this.allDayEvents) : undefined;
@@ -7606,7 +7775,7 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
         var isRender;
         var appHeight = eventType === 'allDayEvents' ? this.parent.getElementHeightFromClass(this.element.querySelector('.' + ALLDAY_APPOINTMENT_WRAPPER_CLASS), APPOINTMENT_CLASS) : 0;
         var allDayRowTop = eventType === 'allDayEvents' && this.allDayElement.length > 0 ? this.allDayElement[0].offsetTop : 0;
-        var _loop_1 = function (resource) {
+        var _loop_3 = function (resource) {
             isRender = true;
             if (this_1.parent.crudModule && this_1.parent.crudModule.crudObj.isCrudAction && eventType !== 'allDayEvents'
                 && !this_1.parent.uiStateValues.isGroupAdaptive) {
@@ -7626,36 +7795,127 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
                 var endDate = resetTime(addDays(renderDates[parseInt(day.toString(), 10)], 1));
                 var filterEvents = this_1.filterEvents(startDate, endDate, eventCollection, this_1.resources[parseInt(resource.toString(), 10)]);
                 if (isRender) {
-                    for (var _i = 0, filterEvents_2 = filterEvents; _i < filterEvents_2.length; _i++) {
-                        var event_2 = filterEvents_2[_i];
-                        if (this_1.parent.resourceBase) {
-                            this_1.setValues(event_2, resource);
+                    var maxEventStack = this_1.parent.activeViewOptions.maxEventStack || 0;
+                    if (maxEventStack > 0 && !this_1.parent.eventSettings.enableMaxHeight) {
+                        var normalEvents = [];
+                        var allDayEventsInDay = [];
+                        for (var _i = 0, filterEvents_2 = filterEvents; _i < filterEvents_2.length; _i++) {
+                            var event_4 = filterEvents_2[_i];
+                            if (this_1.isAllDayAppointment(event_4)) {
+                                allDayEventsInDay.push(event_4);
+                            }
+                            else {
+                                normalEvents.push(event_4);
+                            }
                         }
-                        if (eventType === 'allDayEvents') {
-                            this_1.renderAllDayEvents(event_2, day, resource, dateCount, false, allDayRowTop, appHeight);
+                        var finalEventList = [];
+                        var currentDayIndicators = [];
+                        if (normalEvents.length > 0) {
+                            finalEventList =
+                                this_1.filterEventsByOverlapGroups(normalEvents, maxEventStack, parseInt(resource.toString(), 10), day, dateCount, parseInt(resource.toString(), 10));
+                            for (var _a = 0, _b = this_1.moreIndicatorsMap; _a < _b.length; _a++) {
+                                var indicator = _b[_a];
+                                var indicatorInfo = indicator.info;
+                                if (indicatorInfo.dayIndex === day && indicatorInfo.dayCount === dateCount &&
+                                    indicatorInfo.resource === parseInt(resource.toString(), 10)) {
+                                    currentDayIndicators.push(indicator);
+                                }
+                            }
                         }
                         else {
-                            if (this_1.isAllDayAppointment(event_2)) {
-                                this_1.allDayEvents.push(extend({}, event_2, null, true));
+                            finalEventList = normalEvents;
+                        }
+                        for (var _c = 0, allDayEventsInDay_1 = allDayEventsInDay; _c < allDayEventsInDay_1.length; _c++) {
+                            var event_5 = allDayEventsInDay_1[_c];
+                            if (this_1.parent.resourceBase) {
+                                this_1.setValues(event_5, resource);
+                            }
+                            if (eventType === 'allDayEvents') {
+                                this_1.renderAllDayEvents(event_5, day, resource, dateCount, false, allDayRowTop, appHeight);
+                            }
+                            else {
+                                this_1.allDayEvents.push(extend({}, event_5, null, true));
+                            }
+                            this_1.cssClass = null;
+                            this_1.groupOrder = null;
+                        }
+                        for (var _d = 0, finalEventList_2 = finalEventList; _d < finalEventList_2.length; _d++) {
+                            var event_6 = finalEventList_2[_d];
+                            if (this_1.parent.resourceBase) {
+                                this_1.setValues(event_6, resource);
+                            }
+                            if (eventType === 'allDayEvents') {
+                                if (!this_1.isAllDayAppointment(event_6)) {
+                                    continue;
+                                }
                             }
                             else {
                                 if (this_1.parent.eventSettings.enableMaxHeight) {
-                                    if (this_1.getOverlapIndex(event_2, day, false, resource) > 0) {
+                                    if (this_1.getOverlapIndex(event_6, day, false, resource) > 0) {
                                         continue;
                                     }
                                 }
-                                this_1.renderNormalEvents(event_2, day, resource, dateCount);
+                                this_1.renderNormalEvents(event_6, day, resource, dateCount);
+                                var appointmentWrapper = this_1.element.querySelector('.' + APPOINTMENT_WRAPPER_CLASS + '[id="' + APPOINTMENT_WRAPPER_CLASS + '-' + dateCount + '"]');
+                                if (appointmentWrapper) {
+                                    var existingIndicators = [].slice.call(appointmentWrapper.querySelectorAll('.' + MORE_INDICATOR_CLASS));
+                                    var _loop_4 = function (existingIndicator) {
+                                        var indicatorKey = existingIndicator.getAttribute('data-indicator-key');
+                                        var foundIndicator = currentDayIndicators
+                                            .find(function (item) { return item.key === indicatorKey; });
+                                        if (!foundIndicator) {
+                                            EventHandler.remove(existingIndicator, 'click', this_1.onMoreIndicatorClick);
+                                            remove(existingIndicator);
+                                        }
+                                    };
+                                    for (var _e = 0, existingIndicators_1 = existingIndicators; _e < existingIndicators_1.length; _e++) {
+                                        var existingIndicator = existingIndicators_1[_e];
+                                        _loop_4(existingIndicator);
+                                    }
+                                }
                             }
+                            this_1.cssClass = null;
+                            this_1.groupOrder = null;
+                        }
+                        for (var _f = 0, currentDayIndicators_1 = currentDayIndicators; _f < currentDayIndicators_1.length; _f++) {
+                            var indicator = currentDayIndicators_1[_f];
+                            var indicatorInfo = indicator.info;
+                            this_1.renderMoreIndicator(indicatorInfo, day, resource, dateCount);
+                        }
+                    }
+                    else {
+                        this_1.cleanupMoreIndicators();
+                        for (var _g = 0, filterEvents_3 = filterEvents; _g < filterEvents_3.length; _g++) {
+                            var event_7 = filterEvents_3[_g];
+                            if (this_1.parent.resourceBase) {
+                                this_1.setValues(event_7, resource);
+                            }
+                            if (eventType === 'allDayEvents') {
+                                this_1.renderAllDayEvents(event_7, day, resource, dateCount, false, allDayRowTop, appHeight);
+                            }
+                            else {
+                                if (this_1.isAllDayAppointment(event_7)) {
+                                    this_1.allDayEvents.push(extend({}, event_7, null, true));
+                                }
+                                else {
+                                    if (this_1.parent.eventSettings.enableMaxHeight) {
+                                        if (this_1.getOverlapIndex(event_7, day, false, resource) > 0) {
+                                            continue;
+                                        }
+                                    }
+                                    this_1.renderNormalEvents(event_7, day, resource, dateCount);
+                                }
+                            }
+                            this_1.cssClass = null;
+                            this_1.groupOrder = null;
                         }
-                        this_1.cssClass = null;
-                        this_1.groupOrder = null;
                     }
                 }
                 else {
-                    for (var _a = 0, filterEvents_3 = filterEvents; _a < filterEvents_3.length; _a++) {
-                        var event_3 = filterEvents_3[_a];
-                        if (this_1.isAllDayAppointment(event_3)) {
-                            this_1.allDayEvents.push(extend({}, event_3, null, true));
+                    for (var _h = 0, filterEvents_4 = filterEvents; _h < filterEvents_4.length; _h++) {
+                        var event_8 = filterEvents_4[_h];
+                        if (this_1.isAllDayAppointment(event_8)) {
+                            this_1.allDayEvents.push(extend({}, event_8, null, true));
                         }
                     }
                 }
@@ -7665,7 +7925,7 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
         var this_1 = this;
         for (var _i = 0, resources_2 = resources; _i < resources_2.length; _i++) {
             var resource = resources_2[_i];
-            _loop_1(resource);
+            _loop_3(resource);
         }
     };
     VerticalEvent.prototype.getStartCount = function () {
@@ -8024,7 +8284,10 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
         }
     };
     VerticalEvent.prototype.getEventWidth = function () {
-        var width = this.parent.currentView === 'Day' ? 97 : 94;
+        var width = (isNullOrUndefined(this.parent.activeViewOptions.maxEventStack) || this.parent.activeViewOptions.maxEventStack === 0)
+            ? (this.parent.currentView === 'Day' ? 97 : 94)
+            : (this.parent.isAdaptive ? (this.parent.currentView === 'Day' ? 75 : 50)
+                : (this.parent.currentView === 'Day' ? 75 : 70));
         var tempWidth = ((width - this.overlapEvents.length) / this.overlapEvents.length);
         return (tempWidth < 0 ? 0 : tempWidth) + '%';
     };
@@ -8130,14 +8393,14 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
             this.overlapList = this.overlapList.concat(appointment_1);
             eventsList = this.overlapList;
             for (var _i = 0, eventsList_1 = eventsList; _i < eventsList_1.length; _i++) {
-                var event_4 = eventsList_1[_i];
-                var record_1 = event_4;
+                var event_9 = eventsList_1[_i];
+                var record_1 = event_9;
                 var index = record_1.Index;
                 if (isNullOrUndefined(this.overlapEvents[parseInt(index.toString(), 10)])) {
-                    this.overlapEvents[parseInt(index.toString(), 10)] = [event_4];
+                    this.overlapEvents[parseInt(index.toString(), 10)] = [event_9];
                 }
                 else {
-                    this.overlapEvents[parseInt(index.toString(), 10)].push(event_4);
+                    this.overlapEvents[parseInt(index.toString(), 10)].push(event_9);
                 }
             }
         }
@@ -8284,10 +8547,22 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
     VerticalEvent.prototype.animationUiUpdate = function () {
         this.parent.notify(contentReady, {});
     };
+    VerticalEvent.prototype.cleanupMoreIndicators = function () {
+        if (this.element) {
+            var moreIndicators = [].slice.call(this.element.querySelectorAll('.' + MAX_EVENT_STACK_INDICATOR_CLASS));
+            for (var _i = 0, moreIndicators_1 = moreIndicators; _i < moreIndicators_1.length; _i++) {
+                var indicator = moreIndicators_1[_i];
+                EventHandler.remove(indicator, 'click', this.onMoreIndicatorClick);
+                remove(indicator);
+            }
+        }
+        this.moreIndicatorsMap = null;
+    };
     VerticalEvent.prototype.destroy = function () {
         if (!this.parent || this.parent && this.parent.isDestroyed) {
             return;
         }
+        this.cleanupMoreIndicators();
         this.removeEventListener();
         this.allDayElement = null;
         this.renderedAllDayEvents = null;
@@ -8299,6 +8574,7 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
         this.element = null;
         this.fields = null;
         this.animation = null;
+        this.moreIndicatorsMap = null;
         _super.prototype.destroy.call(this);
     };
     return VerticalEvent;
@@ -9038,9 +9314,15 @@ var MonthEvent = /** @__PURE__ @class */ (function (_super) {
         }
     };
     MonthEvent.prototype.setMaxEventHeight = function (event, cell) {
-        var headerHeight = getOuterHeight(cell.querySelector('.' + DATE_HEADER_CLASS));
+        var headerHeight = (this.parent.currentView === 'Month') ? getOuterHeight(cell.querySelector('.' + DATE_HEADER_CLASS)) : 0;
         var height = (cell.offsetHeight - headerHeight) - (this.maxHeight ? 0 : this.moreIndicatorHeight);
-        setStyleAttribute(event, { 'height': height + 'px', 'align-items': 'center' });
+        setStyleAttribute(event, { 'height': height + 'px' });
+        if (!isNullOrUndefined(event)) {
+            var appointmentDetails = event.querySelector('.' + APPOINTMENT_DETAILS);
+            if (!isNullOrUndefined(appointmentDetails)) {
+                setStyleAttribute(appointmentDetails, { 'align-items': 'center' });
+            }
+        }
     };
     MonthEvent.prototype.destroy = function () {
         this.element = null;
@@ -9748,8 +10030,8 @@ var InlineEdit = /** @__PURE__ @class */ (function () {
                     args.element.querySelector('.e-appointment-details').prepend(inlineSubject);
                 }
                 else {
-                    if (subEle && this.parent.activeViewOptions && !this.parent.activeViewOptions.eventTemplate) {
-                        innerWrapElement.insertBefore(inlineSubject, subEle);
+                    if (subEle && subEle.parentNode && this.parent.activeViewOptions && !this.parent.activeViewOptions.eventTemplate) {
+                        subEle.parentNode.insertBefore(inlineSubject, subEle);
                     }
                     else {
                         innerWrapElement.prepend(inlineSubject);
@@ -10037,6 +10319,7 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
     function QuickPopups(parent) {
         this.isMultipleEventSelect = false;
         this.isCrudAction = false;
+        this.morePopupHiddenEvents = [];
         this.parent = parent;
         this.l10n = this.parent.localeObj;
         this.fieldValidator = new FieldValidator();
@@ -10857,6 +11140,7 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
         if (moreEventContentEle) {
             remove(moreEventContentEle);
         }
+        this.morePopupHiddenEvents = extend([], data.event, null, true);
         var selectedDate = ((data.date).getTime()).toString();
         var target = closest(data.element, '.' + MORE_INDICATOR_CLASS + ',.' + WORK_CELLS_CLASS);
         var day = this.parent.globalize.formatDate(data.date, { format: 'E', calendar: this.parent.getCalendarMode() });
@@ -10902,7 +11186,13 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
                 }
             }
             else {
-                this.morePopup.relateTo = closest(target, '.' + WORK_CELLS_CLASS);
+                var isVerticalView = ['Day', 'Week', 'WorkWeek'].indexOf(this.parent.currentView) > -1 && !this.parent.activeViewOptions.timeScale.enable;
+                if (!isVerticalView) {
+                    this.morePopup.relateTo = target;
+                }
+                else {
+                    this.morePopup.relateTo = closest(target, '.' + WORK_CELLS_CLASS);
+                }
             }
         }
         this.parent.renderTemplates(function () {
@@ -10959,6 +11249,7 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
         }
     };
     QuickPopups.prototype.updateMoreEventContent = function () {
+        var _this = this;
         if (this.morePopup.element.classList.contains('e-popup-close')) {
             return;
         }
@@ -10977,6 +11268,14 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
             groupOrder = data.groupOrder;
         }
         var events = this.parent.eventBase.filterEvents(startDate, endDate, this.parent.eventsProcessed, data);
+        var morePopupIsVerticalView = ['Day', 'Week', 'WorkWeek'].indexOf(this.parent.currentView) > -1 && this.parent.activeViewOptions.timeScale.enable;
+        if (morePopupIsVerticalView && this.morePopupHiddenEvents.length > 0) {
+            events = events.filter(function (processedEvent) {
+                return _this.morePopupHiddenEvents.some(function (hiddenEvent) {
+                    return hiddenEvent[_this.parent.eventFields.id] === processedEvent[_this.parent.eventFields.id];
+                });
+            });
+        }
         var moreElement = this.createMoreEventList(events, groupOrder, groupIndex);
         this.morePopup.element.querySelector('.' + MORE_EVENT_POPUP_CLASS).appendChild(moreElement);
     };
@@ -11296,9 +11595,14 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
         var popupData;
         if (isCellPopup) {
             var formvalidator = this.quickPopup.element.querySelector('.e-formvalidator');
-            if (this.isCrudAction && formvalidator &&
-                !formvalidator.ej2_instances[0].validate()) {
-                return;
+            if (this.isCrudAction && formvalidator && !formvalidator.ej2_instances[0].validate()) {
+                if (!this.parent.uiStateValues.isNavigation) {
+                    return;
+                }
+                this.isCrudAction = false;
+                if (this.fieldValidator) {
+                    this.fieldValidator.destroyToolTip();
+                }
             }
             var fields = this.parent.eventFields;
             var saveObj = this.parent.eventWindow.getObjectFromFormData(POPUP_WRAPPER_CLASS);
@@ -11477,6 +11781,7 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
         this.destroyMorePopup();
         this.destroyQuickDialog();
         this.dialogEvent = null;
+        this.morePopupHiddenEvents = null;
         this.parent = null;
         this.l10n = null;
         this.isCrudAction = null;
@@ -11883,6 +12188,11 @@ var RecurrenceEditor = /** @__PURE__ @class */ (function (_super) {
         this.selectMonthDay(startDate);
         this.updateUntilDate(startDate);
         this.onMonthDay.setProperties({ checked: true });
+        var repeatContentElement = this.element.querySelector('.' + REPEATCONTENT);
+        if (repeatContentElement) {
+            var contentKey = freq.toLowerCase();
+            repeatContentElement.innerHTML = this.localeObj.getConstant(contentType[contentKey]);
+        }
     };
     RecurrenceEditor.prototype.preRender = function () {
         this.localeObj = new L10n(this.getModuleName(), this.defaultLocale, this.locale);
@@ -17562,9 +17872,10 @@ var ResourceBase = /** @__PURE__ @class */ (function () {
             addClass([this.popupOverlay], ENABLE_CLASS);
         }
     };
-    ResourceBase.prototype.selectResourceByIndex = function (groupIndex) {
+    ResourceBase.prototype.selectResourceByIndex = function (groupIndex, isUserInitiated) {
+        if (isUserInitiated === void 0) { isUserInitiated = true; }
         if (this.lastResourceLevel && groupIndex > -1 && groupIndex < this.lastResourceLevel.length) {
-            this.triggerEvents(groupIndex);
+            this.triggerEvents(groupIndex, undefined, isUserInitiated);
         }
     };
     ResourceBase.prototype.resourceClick = function (event) {
@@ -17577,15 +17888,16 @@ var ResourceBase = /** @__PURE__ @class */ (function () {
             event.event.preventDefault();
         }
     };
-    ResourceBase.prototype.triggerEvents = function (groupIndex, event) {
+    ResourceBase.prototype.triggerEvents = function (groupIndex, event, isUserInitiated) {
         var _this = this;
-        var args = { cancel: false, event: (event) ? event.event : null, groupIndex: groupIndex, requestType: 'resourceChange' };
+        if (isUserInitiated === void 0) { isUserInitiated = true; }
+        var args = { cancel: false, event: (event) ? event.event : null, groupIndex: groupIndex, requestType: 'resourceChange', isUserInitiated: isUserInitiated };
         this.parent.trigger(actionBegin, args, function (actionArgs) {
             if (!actionArgs.cancel) {
                 _this.parent.uiStateValues.groupIndex = actionArgs.groupIndex;
                 _this.parent.renderModule.render(_this.parent.currentView);
                 args = {
-                    cancel: false, event: (event) ? event.event : null, groupIndex: _this.parent.uiStateValues.groupIndex, requestType: 'resourceChanged'
+                    cancel: false, event: (event) ? event.event : null, groupIndex: _this.parent.uiStateValues.groupIndex, requestType: 'resourceChanged', isUserInitiated: isUserInitiated
                 };
                 _this.parent.adaptiveGroupIndex = _this.parent.uiStateValues.groupIndex;
                 _this.parent.trigger(actionComplete, args);
@@ -18504,6 +18816,11 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
             this.renderElements(isSetModel);
         }
     };
+    Schedule.prototype.initializeSelectedResource = function () {
+        if (!isNullOrUndefined(this.selectedResource) && this.enableAdaptiveUI && this.resourceBase) {
+            this.changeSelectedResource(this.selectedResource);
+        }
+    };
     Schedule.prototype.destroyEditorWindow = function () {
         if (this.eventWindow) {
             this.eventWindow.destroy();
@@ -18538,6 +18855,7 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
         if (!this.isPrinting) {
             this.initializePopups();
         }
+        this.initializeSelectedResource();
     };
     Schedule.prototype.validateDate = function (selectedDate) {
         if (selectedDate === void 0) { selectedDate = this.selectedDate; }
@@ -18887,6 +19205,7 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
      */
     Schedule.prototype.changeView = function (view, event, muteOnChange, index) {
         var _this = this;
+        this.closeQuickInfoOnNavigation();
         if (isNullOrUndefined(index)) {
             index = this.getViewIndex(view);
         }
@@ -18937,6 +19256,7 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
      */
     Schedule.prototype.changeDate = function (selectedDate, event) {
         var _this = this;
+        this.closeQuickInfoOnNavigation();
         var args = { requestType: 'dateNavigate', cancel: false, event: event };
         this.trigger(actionBegin, args, function (actionArgs) {
             if (!actionArgs.cancel) {
@@ -19056,7 +19376,7 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
             this.uiStateValues = {
                 expand: false, isInitial: true, left: 0, top: 0, isGroupAdaptive: false,
                 isIgnoreOccurrence: false, groupIndex: this.adaptiveGroupIndex, action: false,
-                isBlock: false, isCustomMonth: true, isPreventTimezone: false, isTransformed: false
+                isBlock: false, isCustomMonth: true, isPreventTimezone: false, isTransformed: false, isNavigation: false
             };
         }
         this.currentTimezoneDate = this.getCurrentTime();
@@ -20069,6 +20389,11 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
             case 'resources':
                 state.isResource = true;
                 break;
+            case 'selectedResource':
+                if (!isNullOrUndefined(newProp.selectedResource) && this.enableAdaptiveUI) {
+                    this.changeSelectedResource(newProp.selectedResource);
+                }
+                break;
             case 'timeScale':
                 this.activeViewOptions.timeScale.interval = newProp.timeScale.interval || this.activeViewOptions.timeScale.interval;
                 this.activeViewOptions.timeScale.slotCount = newProp.timeScale.slotCount || this.activeViewOptions.timeScale.slotCount;
@@ -20458,6 +20783,21 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
         }
         return undefined;
     };
+    Schedule.prototype.changeSelectedResource = function (resourceId) {
+        if (!this.resourceBase || !this.resourceBase.lastResourceLevel || this.resourceBase.lastResourceLevel.length === 0) {
+            return;
+        }
+        var foundIndex = this.resourceBase.lastResourceLevel.findIndex(function (level) {
+            var idField = level.resource.idField || 'Id';
+            // eslint-disable-next-line security/detect-object-injection
+            return level.resourceData[idField] === resourceId;
+        });
+        if (foundIndex === -1) {
+            console.warn("Resource with ID \"" + resourceId + "\" not found in data source.");
+            return;
+        }
+        this.resourceBase.selectResourceByIndex(foundIndex, false);
+    };
     /**
      * This method allows to expand the resource that available on the scheduler.
      *
@@ -21142,6 +21482,11 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
             this.quickPopup.quickPopupHide(true);
         }
     };
+    Schedule.prototype.closeQuickInfoOnNavigation = function () {
+        this.uiStateValues.isNavigation = true;
+        this.closeQuickInfoPopup();
+        this.uiStateValues.isNavigation = false;
+    };
     /**
      * To manually open the overlap validation Alert.
      *
@@ -21562,6 +21907,9 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
     __decorate$b([
         Collection([], Resources)
     ], Schedule.prototype, "resources", void 0);
+    __decorate$b([
+        Property()
+    ], Schedule.prototype, "selectedResource", void 0);
     __decorate$b([
         Collection([], HeaderRows)
     ], Schedule.prototype, "headerRows", void 0);
@@ -22044,8 +22392,12 @@ var ActionBase = /** @__PURE__ @class */ (function () {
             'width': appWidth + 'px', 'border': '0px', 'pointer-events': 'none',
             'position': 'absolute', 'overflow': 'hidden', 'padding': '3px'
         });
-        if (this.actionObj.clone.style.backgroundColor !== '') {
-            setStyleAttribute(appointmentElement, { 'backgroundColor': this.actionObj.clone.style.backgroundColor });
+        var eventGuid = event.Guid;
+        if (eventGuid) {
+            var originalElement = this.parent.element.querySelector("[data-guid=\"" + eventGuid + "\"]");
+            if (originalElement && originalElement.style.backgroundColor) {
+                setStyleAttribute(appointmentElement, { 'backgroundColor': originalElement.style.backgroundColor });
+            }
         }
         var date = resetTime(event[this.parent.eventFields.startTime]).getTime();
         var query = '.' + WORK_CELLS_CLASS + '[data-date="' + date + '"]';