@syncfusion/ej2-schedule 33.2.4 → 34.1.29

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

@@ -37,6 +37,7 @@ var VerticalEvent = /** @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) });
@@ -214,6 +215,168 @@ var VerticalEvent = /** @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('.' + cls.APPOINTMENT_WRAPPER_CLASS + '[id="' + cls.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: cls.MAX_EVENT_STACK_INDICATOR_CLASS + ' ' + cls.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, '.' + cls.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, cls.ALLDAY_ROW_ANIMATE_CLASS);
         var eventCollection = (eventType === 'allDayEvents') ? this.sortByDateTime(this.allDayEvents) : undefined;
@@ -222,7 +385,7 @@ var VerticalEvent = /** @class */ (function (_super) {
         var isRender;
         var appHeight = eventType === 'allDayEvents' ? this.parent.getElementHeightFromClass(this.element.querySelector('.' + cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS), cls.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) {
@@ -242,36 +405,127 @@ var VerticalEvent = /** @class */ (function (_super) {
                 var endDate = util.resetTime(util.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('.' + cls.APPOINTMENT_WRAPPER_CLASS + '[id="' + cls.APPOINTMENT_WRAPPER_CLASS + '-' + dateCount + '"]');
+                                if (appointmentWrapper) {
+                                    var existingIndicators = [].slice.call(appointmentWrapper.querySelectorAll('.' + cls.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));
                         }
                     }
                 }
@@ -281,7 +535,7 @@ var VerticalEvent = /** @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 () {
@@ -640,7 +894,10 @@ var VerticalEvent = /** @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) + '%';
     };
@@ -746,14 +1003,14 @@ var VerticalEvent = /** @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);
                 }
             }
         }
@@ -900,10 +1157,22 @@ var VerticalEvent = /** @class */ (function (_super) {
     VerticalEvent.prototype.animationUiUpdate = function () {
         this.parent.notify(events.contentReady, {});
     };
+    VerticalEvent.prototype.cleanupMoreIndicators = function () {
+        if (this.element) {
+            var moreIndicators = [].slice.call(this.element.querySelectorAll('.' + cls.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;
@@ -915,6 +1184,7 @@ var VerticalEvent = /** @class */ (function (_super) {
         this.element = null;
         this.fields = null;
         this.animation = null;
+        this.moreIndicatorsMap = null;
         _super.prototype.destroy.call(this);
     };
     return VerticalEvent;

package/src/schedule/models/views-model.d.ts

@@ -367,4 +367,17 @@ export interface ViewsModel {
      */
     enableLazyLoading?: boolean;
 
+    /**
+     * Specifies the maximum number of events to be displayed per cell in vertical views.
+     * This property is applicable only to Day, Week and WorkWeek views when the TimeScale option is enabled.
+     *
+     * @remarks
+     * - When set to 0 (default), all events are displayed without any limit, maintaining backward compatibility.
+     * - When set to a positive integer (e.g., 1, 2), only that many events will be visible, and remaining events are hidden.
+     *
+     * @default 0
+     * @aspType int
+     */
+    maxEventStack?: number;
+
 }

package/src/schedule/models/views.d.ts

@@ -332,4 +332,16 @@ export declare class Views extends ChildProperty<Views> {
      * @default false
      */
     enableLazyLoading: boolean;
+    /**
+     * Specifies the maximum number of events to be displayed per cell in vertical views.
+     * This property is applicable only to Day, Week and WorkWeek views when the TimeScale option is enabled.
+     *
+     * @remarks
+     * - When set to 0 (default), all events are displayed without any limit, maintaining backward compatibility.
+     * - When set to a positive integer (e.g., 1, 2), only that many events will be visible, and remaining events are hidden.
+     *
+     * @default 0
+     * @aspType int
+     */
+    maxEventStack: number;
 }

package/src/schedule/models/views.js

@@ -134,6 +134,9 @@ var Views = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], Views.prototype, "enableLazyLoading", void 0);
+    __decorate([
+        Property(0)
+    ], Views.prototype, "maxEventStack", void 0);
     return Views;
 }(ChildProperty));
 export { Views };

package/src/schedule/popups/quick-popups.d.ts

@@ -15,6 +15,7 @@ export declare class QuickPopups {
     private isCrudAction;
     lastEvent: Record<string, any>;
     private dialogEvent;
+    private morePopupHiddenEvents;
     constructor(parent: Schedule);
     private render;
     private renderQuickPopup;

package/src/schedule/popups/quick-popups.js

@@ -16,6 +16,7 @@ var QuickPopups = /** @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();
@@ -836,6 +837,7 @@ var QuickPopups = /** @class */ (function () {
         if (moreEventContentEle) {
             remove(moreEventContentEle);
         }
+        this.morePopupHiddenEvents = extend([], data.event, null, true);
         var selectedDate = ((data.date).getTime()).toString();
         var target = closest(data.element, '.' + cls.MORE_INDICATOR_CLASS + ',.' + cls.WORK_CELLS_CLASS);
         var day = this.parent.globalize.formatDate(data.date, { format: 'E', calendar: this.parent.getCalendarMode() });
@@ -881,7 +883,13 @@ var QuickPopups = /** @class */ (function () {
                 }
             }
             else {
-                this.morePopup.relateTo = closest(target, '.' + cls.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, '.' + cls.WORK_CELLS_CLASS);
+                }
             }
         }
         this.parent.renderTemplates(function () {
@@ -938,6 +946,7 @@ var QuickPopups = /** @class */ (function () {
         }
     };
     QuickPopups.prototype.updateMoreEventContent = function () {
+        var _this = this;
         if (this.morePopup.element.classList.contains('e-popup-close')) {
             return;
         }
@@ -956,6 +965,14 @@ var QuickPopups = /** @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('.' + cls.MORE_EVENT_POPUP_CLASS).appendChild(moreElement);
     };
@@ -1275,9 +1292,14 @@ var QuickPopups = /** @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(cls.POPUP_WRAPPER_CLASS);
@@ -1456,6 +1478,7 @@ var QuickPopups = /** @class */ (function () {
         this.destroyMorePopup();
         this.destroyQuickDialog();
         this.dialogEvent = null;
+        this.morePopupHiddenEvents = null;
         this.parent = null;
         this.l10n = null;
         this.isCrudAction = null;