@syncfusion/ej2-schedule 33.2.4 → 34.1.29

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

@@ -832,6 +832,8 @@ const APPOINTMENT_ROW_COLLAPSE_CLASS = 'e-appointment-collapse';
 /** @private */
 const MORE_INDICATOR_CLASS = 'e-more-indicator';
 /** @private */
+const MAX_EVENT_STACK_INDICATOR_CLASS = 'e-event-indicator-badge';
+/** @private */
 const CELL_POPUP_CLASS = 'e-cell-popup';
 /** @private */
 const EVENT_POPUP_CLASS = 'e-event-popup';
@@ -7221,11 +7223,15 @@ class EventBase {
                 ? [].slice.call(this.parent.element.querySelectorAll('.' + WEEK_NUMBER_WRAPPER_CLASS + ' tbody tr'))
                 : [];
             for (const row of rows) {
-                const height = (this.parent.activeViewOptions.maxEventsPerRow *
+                let height = (this.parent.activeViewOptions.maxEventsPerRow *
                     ((eventHeight + (this.parent.currentView === 'Month' ? eventGap : 2)))) + headerHeight + indHeight;
+                const 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) {
@@ -7264,6 +7270,7 @@ class VerticalEvent extends EventBase {
         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) });
@@ -7434,6 +7441,148 @@ class VerticalEvent extends EventBase {
             this.appendEvent(eventObj, appointmentElement, index, appLeft);
         }
     }
+    filterEventsByOverlapGroups(eventList, maxEventStack, groupIndex, dayIndex, dayCount, resource) {
+        if (maxEventStack === 0 || eventList.length === 0) {
+            return eventList;
+        }
+        for (let i = 0; i < eventList.length; i++) {
+            const item = eventList[parseInt(i.toString(), 10)];
+            if (!item.__id) {
+                item.__id = i;
+            }
+        }
+        const overlapGroupList = [];
+        for (const currentEvent of eventList) {
+            const seedGroup = [currentEvent];
+            const overlapGroup = [];
+            for (const comparedEvent of eventList) {
+                const isOverlapping = seedGroup.some((e) => !(comparedEvent.StartTime >= e.EndTime || comparedEvent.EndTime <= e.StartTime));
+                if (isOverlapping) {
+                    overlapGroup.push(comparedEvent);
+                }
+            }
+            overlapGroupList.push(overlapGroup);
+        }
+        const finalEventList = [];
+        const currentVisibleEventBuffer = [];
+        const visibleEventIdSet = new Set();
+        const hiddenEventIdSet = new Set();
+        const indicatorsForThisSlot = [];
+        for (const overlapGroup of overlapGroupList) {
+            const orderedGroupEvents = overlapGroup
+                .slice()
+                .sort((a, b) => {
+                const startDiff = a.StartTime.getTime() - b.StartTime.getTime();
+                return startDiff !== 0 ? startDiff : (a.__id - b.__id);
+            });
+            for (const candidateEvent of orderedGroupEvents) {
+                const overlappingVisibleEvents = currentVisibleEventBuffer.filter((e) => !(candidateEvent.StartTime >= e.EndTime || candidateEvent.EndTime <= e.StartTime));
+                const eventId = candidateEvent.__id;
+                if (!visibleEventIdSet.has(eventId) && !hiddenEventIdSet.has(eventId) && overlappingVisibleEvents.length < maxEventStack) {
+                    finalEventList.push(candidateEvent);
+                    currentVisibleEventBuffer.push(candidateEvent);
+                    visibleEventIdSet.add(eventId);
+                }
+            }
+            const hiddenEventsInGroup = overlapGroup
+                .filter((e) => !visibleEventIdSet.has(e.__id) && !hiddenEventIdSet.has(e.__id));
+            if (hiddenEventsInGroup.length > 0) {
+                const indicatorStartTime = new Date(Math.min(...hiddenEventsInGroup.map((e) => e.StartTime.getTime())));
+                const indicatorEndTime = new Date(Math.max(...hiddenEventsInGroup.map((e) => e.EndTime.getTime())));
+                const indicatorKey = `${indicatorStartTime.getTime()}_${indicatorEndTime.getTime()}_${groupIndex}_${dayCount}_${resource}`;
+                const 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 (const hiddenEvent of hiddenEventsInGroup) {
+                    hiddenEventIdSet.add(hiddenEvent.__id);
+                }
+            }
+        }
+        for (const event of eventList) {
+            if (!visibleEventIdSet.has(event.__id) && !hiddenEventIdSet.has(event.__id)) {
+                finalEventList.push(event);
+                visibleEventIdSet.add(event.__id);
+            }
+        }
+        for (const indicator of indicatorsForThisSlot) {
+            this.moreIndicatorsMap.push({ key: indicator.key, info: indicator.info });
+        }
+        for (const event of finalEventList) {
+            delete event.__id;
+        }
+        return finalEventList;
+    }
+    renderMoreIndicator(indicatorInfo, dayIndex, resource, dayCount) {
+        const hiddenCount = indicatorInfo.hiddenEventCount || 0;
+        if (hiddenCount === 0) {
+            return;
+        }
+        const index = this.getDayIndex(dayIndex, resource, dayCount);
+        const indicatorKey = `${indicatorInfo.startTime.getTime()}_${indicatorInfo.endTime.getTime()}_${indicatorInfo.groupIndex}_${indicatorInfo.dayCount}_${indicatorInfo.resource}`;
+        const appointmentWrapper = this.element.querySelector('.' + APPOINTMENT_WRAPPER_CLASS + '[id="' + APPOINTMENT_WRAPPER_CLASS + '-' + index + '"]');
+        if (appointmentWrapper) {
+            const existingIndicator = appointmentWrapper.querySelector(`[data-indicator-key="${indicatorKey}"]`);
+            if (existingIndicator) {
+                EventHandler.remove(existingIndicator, 'click', this.onMoreIndicatorClick);
+                remove(existingIndicator);
+            }
+        }
+        const 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()
+            }
+        });
+        const startDate = indicatorInfo.startTime;
+        const endDate = indicatorInfo.endTime;
+        const top = this.getTopValue(startDate);
+        const 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);
+    }
+    onMoreIndicatorClick(e) {
+        const target = e.target;
+        const indicatorKey = target.getAttribute('data-indicator-key');
+        if (indicatorKey) {
+            const indicator = this.moreIndicatorsMap.find((item) => item.key === indicatorKey);
+            if (indicator) {
+                const indicatorInfo = indicator.info;
+                const hiddenEvents = indicatorInfo.hiddenEvents;
+                this.showMorePopup(hiddenEvents, indicatorInfo.startTime, indicatorInfo.endTime, e);
+            }
+        }
+    }
+    showMorePopup(hiddenEvents, startDate, endDate, e) {
+        if (this.parent.quickPopup) {
+            const target = closest(e.target, '.' + MORE_INDICATOR_CLASS);
+            const groupIndex = target.getAttribute('data-group-index');
+            const moreArgs = { date: startDate, event: hiddenEvents, element: e.target };
+            this.parent.quickPopup.moreEventClick(moreArgs, endDate, groupIndex);
+        }
+    }
     renderEvents(eventType) {
         removeClass(this.allDayElement, ALLDAY_ROW_ANIMATE_CLASS);
         const eventCollection = (eventType === 'allDayEvents') ? this.sortByDateTime(this.allDayEvents) : undefined;
@@ -7462,17 +7611,56 @@ class VerticalEvent extends EventBase {
                 const endDate = resetTime(addDays(renderDates[parseInt(day.toString(), 10)], 1));
                 const filterEvents = this.filterEvents(startDate, endDate, eventCollection, this.resources[parseInt(resource.toString(), 10)]);
                 if (isRender) {
-                    for (const event of filterEvents) {
-                        if (this.parent.resourceBase) {
-                            this.setValues(event, resource);
+                    const maxEventStack = this.parent.activeViewOptions.maxEventStack || 0;
+                    if (maxEventStack > 0 && !this.parent.eventSettings.enableMaxHeight) {
+                        const normalEvents = [];
+                        const allDayEventsInDay = [];
+                        for (const event of filterEvents) {
+                            if (this.isAllDayAppointment(event)) {
+                                allDayEventsInDay.push(event);
+                            }
+                            else {
+                                normalEvents.push(event);
+                            }
                         }
-                        if (eventType === 'allDayEvents') {
-                            this.renderAllDayEvents(event, day, resource, dateCount, false, allDayRowTop, appHeight);
+                        let finalEventList = [];
+                        const currentDayIndicators = [];
+                        if (normalEvents.length > 0) {
+                            finalEventList =
+                                this.filterEventsByOverlapGroups(normalEvents, maxEventStack, parseInt(resource.toString(), 10), day, dateCount, parseInt(resource.toString(), 10));
+                            for (const indicator of this.moreIndicatorsMap) {
+                                const indicatorInfo = indicator.info;
+                                if (indicatorInfo.dayIndex === day && indicatorInfo.dayCount === dateCount &&
+                                    indicatorInfo.resource === parseInt(resource.toString(), 10)) {
+                                    currentDayIndicators.push(indicator);
+                                }
+                            }
                         }
                         else {
-                            if (this.isAllDayAppointment(event)) {
+                            finalEventList = normalEvents;
+                        }
+                        for (const event of allDayEventsInDay) {
+                            if (this.parent.resourceBase) {
+                                this.setValues(event, resource);
+                            }
+                            if (eventType === 'allDayEvents') {
+                                this.renderAllDayEvents(event, day, resource, dateCount, false, allDayRowTop, appHeight);
+                            }
+                            else {
                                 this.allDayEvents.push(extend({}, event, null, true));
                             }
+                            this.cssClass = null;
+                            this.groupOrder = null;
+                        }
+                        for (const event of finalEventList) {
+                            if (this.parent.resourceBase) {
+                                this.setValues(event, resource);
+                            }
+                            if (eventType === 'allDayEvents') {
+                                if (!this.isAllDayAppointment(event)) {
+                                    continue;
+                                }
+                            }
                             else {
                                 if (this.parent.eventSettings.enableMaxHeight) {
                                     if (this.getOverlapIndex(event, day, false, resource) > 0) {
@@ -7480,10 +7668,53 @@ class VerticalEvent extends EventBase {
                                     }
                                 }
                                 this.renderNormalEvents(event, day, resource, dateCount);
+                                const appointmentWrapper = this.element.querySelector('.' + APPOINTMENT_WRAPPER_CLASS + '[id="' + APPOINTMENT_WRAPPER_CLASS + '-' + dateCount + '"]');
+                                if (appointmentWrapper) {
+                                    const existingIndicators = [].slice.call(appointmentWrapper.querySelectorAll('.' + MORE_INDICATOR_CLASS));
+                                    for (const existingIndicator of existingIndicators) {
+                                        const indicatorKey = existingIndicator.getAttribute('data-indicator-key');
+                                        const foundIndicator = currentDayIndicators
+                                            .find((item) => item.key === indicatorKey);
+                                        if (!foundIndicator) {
+                                            EventHandler.remove(existingIndicator, 'click', this.onMoreIndicatorClick);
+                                            remove(existingIndicator);
+                                        }
+                                    }
+                                }
+                            }
+                            this.cssClass = null;
+                            this.groupOrder = null;
+                        }
+                        for (const indicator of currentDayIndicators) {
+                            const indicatorInfo = indicator.info;
+                            this.renderMoreIndicator(indicatorInfo, day, resource, dateCount);
+                        }
+                    }
+                    else {
+                        this.cleanupMoreIndicators();
+                        for (const event of filterEvents) {
+                            if (this.parent.resourceBase) {
+                                this.setValues(event, resource);
+                            }
+                            if (eventType === 'allDayEvents') {
+                                this.renderAllDayEvents(event, day, resource, dateCount, false, allDayRowTop, appHeight);
+                            }
+                            else {
+                                if (this.isAllDayAppointment(event)) {
+                                    this.allDayEvents.push(extend({}, event, null, true));
+                                }
+                                else {
+                                    if (this.parent.eventSettings.enableMaxHeight) {
+                                        if (this.getOverlapIndex(event, day, false, resource) > 0) {
+                                            continue;
+                                        }
+                                    }
+                                    this.renderNormalEvents(event, day, resource, dateCount);
+                                }
                             }
+                            this.cssClass = null;
+                            this.groupOrder = null;
                         }
-                        this.cssClass = null;
-                        this.groupOrder = null;
                     }
                 }
                 else {
@@ -7847,7 +8078,10 @@ class VerticalEvent extends EventBase {
         }
     }
     getEventWidth() {
-        const width = this.parent.currentView === 'Day' ? 97 : 94;
+        const 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));
         const tempWidth = ((width - this.overlapEvents.length) / this.overlapEvents.length);
         return (tempWidth < 0 ? 0 : tempWidth) + '%';
     }
@@ -8096,10 +8330,21 @@ class VerticalEvent extends EventBase {
     animationUiUpdate() {
         this.parent.notify(contentReady, {});
     }
+    cleanupMoreIndicators() {
+        if (this.element) {
+            const moreIndicators = [].slice.call(this.element.querySelectorAll('.' + MAX_EVENT_STACK_INDICATOR_CLASS));
+            for (const indicator of moreIndicators) {
+                EventHandler.remove(indicator, 'click', this.onMoreIndicatorClick);
+                remove(indicator);
+            }
+        }
+        this.moreIndicatorsMap = null;
+    }
     destroy() {
         if (!this.parent || this.parent && this.parent.isDestroyed) {
             return;
         }
+        this.cleanupMoreIndicators();
         this.removeEventListener();
         this.allDayElement = null;
         this.renderedAllDayEvents = null;
@@ -8111,6 +8356,7 @@ class VerticalEvent extends EventBase {
         this.element = null;
         this.fields = null;
         this.animation = null;
+        this.moreIndicatorsMap = null;
         super.destroy();
     }
 }
@@ -8819,9 +9065,15 @@ class MonthEvent extends EventBase {
         }
     }
     setMaxEventHeight(event, cell) {
-        const headerHeight = getOuterHeight(cell.querySelector('.' + DATE_HEADER_CLASS));
+        const headerHeight = (this.parent.currentView === 'Month') ? getOuterHeight(cell.querySelector('.' + DATE_HEADER_CLASS)) : 0;
         const 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)) {
+            const appointmentDetails = event.querySelector('.' + APPOINTMENT_DETAILS);
+            if (!isNullOrUndefined(appointmentDetails)) {
+                setStyleAttribute(appointmentDetails, { 'align-items': 'center' });
+            }
+        }
     }
     destroy() {
         this.element = null;
@@ -9504,8 +9756,8 @@ class InlineEdit {
                     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);
@@ -9785,6 +10037,7 @@ class QuickPopups {
     constructor(parent) {
         this.isMultipleEventSelect = false;
         this.isCrudAction = false;
+        this.morePopupHiddenEvents = [];
         this.parent = parent;
         this.l10n = this.parent.localeObj;
         this.fieldValidator = new FieldValidator();
@@ -10592,6 +10845,7 @@ class QuickPopups {
         if (moreEventContentEle) {
             remove(moreEventContentEle);
         }
+        this.morePopupHiddenEvents = extend([], data.event, null, true);
         const selectedDate = ((data.date).getTime()).toString();
         const target = closest(data.element, '.' + MORE_INDICATOR_CLASS + ',.' + WORK_CELLS_CLASS);
         const day = this.parent.globalize.formatDate(data.date, { format: 'E', calendar: this.parent.getCalendarMode() });
@@ -10637,7 +10891,13 @@ class QuickPopups {
                 }
             }
             else {
-                this.morePopup.relateTo = closest(target, '.' + WORK_CELLS_CLASS);
+                const 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(() => {
@@ -10711,7 +10971,13 @@ class QuickPopups {
             data = this.parent.resourceBase.lastResourceLevel[parseInt(groupIndex, 10)];
             groupOrder = data.groupOrder;
         }
-        const events = this.parent.eventBase.filterEvents(startDate, endDate, this.parent.eventsProcessed, data);
+        let events = this.parent.eventBase.filterEvents(startDate, endDate, this.parent.eventsProcessed, data);
+        const morePopupIsVerticalView = ['Day', 'Week', 'WorkWeek'].indexOf(this.parent.currentView) > -1 && this.parent.activeViewOptions.timeScale.enable;
+        if (morePopupIsVerticalView && this.morePopupHiddenEvents.length > 0) {
+            events = events.filter((processedEvent) => {
+                return this.morePopupHiddenEvents.some((hiddenEvent) => hiddenEvent[this.parent.eventFields.id] === processedEvent[this.parent.eventFields.id]);
+            });
+        }
         const moreElement = this.createMoreEventList(events, groupOrder, groupIndex);
         this.morePopup.element.querySelector('.' + MORE_EVENT_POPUP_CLASS).appendChild(moreElement);
     }
@@ -11028,9 +11294,14 @@ class QuickPopups {
         let popupData;
         if (isCellPopup) {
             const 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();
+                }
             }
             const fields = this.parent.eventFields;
             const saveObj = this.parent.eventWindow.getObjectFromFormData(POPUP_WRAPPER_CLASS);
@@ -11208,6 +11479,7 @@ class QuickPopups {
         this.destroyMorePopup();
         this.destroyQuickDialog();
         this.dialogEvent = null;
+        this.morePopupHiddenEvents = null;
         this.parent = null;
         this.l10n = null;
         this.isCrudAction = null;
@@ -11596,6 +11868,11 @@ let RecurrenceEditor = class RecurrenceEditor extends Component {
         this.selectMonthDay(startDate);
         this.updateUntilDate(startDate);
         this.onMonthDay.setProperties({ checked: true });
+        const repeatContentElement = this.element.querySelector('.' + REPEATCONTENT);
+        if (repeatContentElement) {
+            const contentKey = freq.toLowerCase();
+            repeatContentElement.innerHTML = this.localeObj.getConstant(contentType[contentKey]);
+        }
     }
     preRender() {
         this.localeObj = new L10n(this.getModuleName(), this.defaultLocale, this.locale);
@@ -16973,9 +17250,9 @@ class ResourceBase {
             addClass([this.popupOverlay], ENABLE_CLASS);
         }
     }
-    selectResourceByIndex(groupIndex) {
+    selectResourceByIndex(groupIndex, isUserInitiated = true) {
         if (this.lastResourceLevel && groupIndex > -1 && groupIndex < this.lastResourceLevel.length) {
-            this.triggerEvents(groupIndex);
+            this.triggerEvents(groupIndex, undefined, isUserInitiated);
         }
     }
     resourceClick(event) {
@@ -16988,14 +17265,14 @@ class ResourceBase {
             event.event.preventDefault();
         }
     }
-    triggerEvents(groupIndex, event) {
-        let args = { cancel: false, event: (event) ? event.event : null, groupIndex: groupIndex, requestType: 'resourceChange' };
+    triggerEvents(groupIndex, event, isUserInitiated = true) {
+        let args = { cancel: false, event: (event) ? event.event : null, groupIndex: groupIndex, requestType: 'resourceChange', isUserInitiated: isUserInitiated };
         this.parent.trigger(actionBegin, args, (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);
@@ -17824,6 +18101,11 @@ let Schedule = class Schedule extends Component {
             this.renderElements(isSetModel);
         }
     }
+    initializeSelectedResource() {
+        if (!isNullOrUndefined(this.selectedResource) && this.enableAdaptiveUI && this.resourceBase) {
+            this.changeSelectedResource(this.selectedResource);
+        }
+    }
     destroyEditorWindow() {
         if (this.eventWindow) {
             this.eventWindow.destroy();
@@ -17858,6 +18140,7 @@ let Schedule = class Schedule extends Component {
         if (!this.isPrinting) {
             this.initializePopups();
         }
+        this.initializeSelectedResource();
     }
     validateDate(selectedDate = this.selectedDate) {
         // persist the selected date value
@@ -18202,6 +18485,7 @@ let Schedule = class Schedule extends Component {
      * @private
      */
     changeView(view, event, muteOnChange, index) {
+        this.closeQuickInfoOnNavigation();
         if (isNullOrUndefined(index)) {
             index = this.getViewIndex(view);
         }
@@ -18251,6 +18535,7 @@ let Schedule = class Schedule extends Component {
      * @private
      */
     changeDate(selectedDate, event) {
+        this.closeQuickInfoOnNavigation();
         let args = { requestType: 'dateNavigate', cancel: false, event: event };
         this.trigger(actionBegin, args, (actionArgs) => {
             if (!actionArgs.cancel) {
@@ -18367,7 +18652,7 @@ let Schedule = class Schedule extends Component {
             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();
@@ -19378,6 +19663,11 @@ let Schedule = class Schedule extends Component {
             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;
@@ -19762,6 +20052,21 @@ let Schedule = class Schedule extends Component {
         }
         return undefined;
     }
+    changeSelectedResource(resourceId) {
+        if (!this.resourceBase || !this.resourceBase.lastResourceLevel || this.resourceBase.lastResourceLevel.length === 0) {
+            return;
+        }
+        const foundIndex = this.resourceBase.lastResourceLevel.findIndex((level) => {
+            const 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.
      *
@@ -20435,6 +20740,11 @@ let Schedule = class Schedule extends Component {
             this.quickPopup.quickPopupHide(true);
         }
     }
+    closeQuickInfoOnNavigation() {
+        this.uiStateValues.isNavigation = true;
+        this.closeQuickInfoPopup();
+        this.uiStateValues.isNavigation = false;
+    }
     /**
      * To manually open the overlap validation Alert.
      *
@@ -20852,6 +21162,9 @@ __decorate$b([
 __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);
@@ -21320,8 +21633,12 @@ class ActionBase {
             '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 });
+        const eventGuid = event.Guid;
+        if (eventGuid) {
+            const originalElement = this.parent.element.querySelector(`[data-guid="${eventGuid}"]`);
+            if (originalElement && originalElement.style.backgroundColor) {
+                setStyleAttribute(appointmentElement, { 'backgroundColor': originalElement.style.backgroundColor });
+            }
         }
         const date = resetTime(event[this.parent.eventFields.startTime]).getTime();
         let query = '.' + WORK_CELLS_CLASS + '[data-date="' + date + '"]';