@syncfusion/ej2-schedule 33.2.3 → 34.1.29

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 33.2.3
+*  version : 34.1.29
 *  Copyright Syncfusion Inc. 2001 - 2025. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@syncfusion/ej2-schedule",
-  "version": "33.2.3",
+  "version": "34.1.29",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
   "main": "./dist/ej2-schedule.umd.min.js",
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-schedule.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~33.2.3",
-    "@syncfusion/ej2-buttons": "~33.2.3",
-    "@syncfusion/ej2-calendars": "~33.2.3",
-    "@syncfusion/ej2-data": "~33.2.3",
-    "@syncfusion/ej2-dropdowns": "~33.2.3",
-    "@syncfusion/ej2-excel-export": "~33.2.3",
-    "@syncfusion/ej2-inputs": "~33.2.3",
-    "@syncfusion/ej2-lists": "~33.2.3",
-    "@syncfusion/ej2-navigations": "~33.2.3",
-    "@syncfusion/ej2-popups": "~33.2.3"
+    "@syncfusion/ej2-base": "~34.1.29",
+    "@syncfusion/ej2-buttons": "~34.1.29",
+    "@syncfusion/ej2-calendars": "~34.1.29",
+    "@syncfusion/ej2-data": "~34.1.29",
+    "@syncfusion/ej2-dropdowns": "~34.1.29",
+    "@syncfusion/ej2-excel-export": "~34.1.29",
+    "@syncfusion/ej2-inputs": "~34.1.29",
+    "@syncfusion/ej2-lists": "~34.1.29",
+    "@syncfusion/ej2-navigations": "~34.1.29",
+    "@syncfusion/ej2-popups": "~34.1.29"
   },
   "devDependencies": {},
   "description": "Flexible scheduling library with more built-in features and enhanced customization options similar to outlook and google calendar, allowing the users to plan and manage their appointments with efficient data-binding support.",

package/src/recurrence-editor/recurrence-editor.js

@@ -214,6 +214,11 @@ var RecurrenceEditor = /** @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);

package/src/schedule/actions/action-base.js

@@ -373,8 +373,12 @@ var ActionBase = /** @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 = util.resetTime(event[this.parent.eventFields.startTime]).getTime();
         var query = '.' + cls.WORK_CELLS_CLASS + '[data-date="' + date + '"]';

package/src/schedule/actions/resize.js

@@ -514,7 +514,7 @@ var Resize = /** @class */ (function (_super) {
         var slotInterval = (this.actionObj.cellWidth / this.actionObj.slotInterval) * this.actionObj.interval;
         var pageWidth = isLeft ? (this.actionObj.X - this.actionObj.pageX) : (this.actionObj.pageX - this.actionObj.X);
         var targetWidth = isTimelineView ?
-            Math.round(this.parent.getElementWidth(this.actionObj.element) / this.actionObj.cellWidth) * this.actionObj.cellWidth :
+            Math.round((this.parent.getElementWidth(this.actionObj.element) / this.actionObj.cellWidth) * this.actionObj.cellWidth) :
             this.parent.currentView === 'Month' ? this.parent.getElementWidth(this.actionObj.element) :
                 Math.ceil(this.parent.getElementWidth(this.actionObj.element) / this.actionObj.cellWidth) * this.actionObj.cellWidth;
         var offsetWidth = targetWidth + (Math.ceil(pageWidth / this.actionObj.cellWidth) * this.actionObj.cellWidth);

package/src/schedule/base/css-constant.d.ts

@@ -262,6 +262,8 @@ export declare const APPOINTMENT_ROW_COLLAPSE_CLASS: string;
 /** @private */
 export declare const MORE_INDICATOR_CLASS: string;
 /** @private */
+export declare const MAX_EVENT_STACK_INDICATOR_CLASS: string;
+/** @private */
 export declare const CELL_POPUP_CLASS: string;
 /** @private */
 export declare const EVENT_POPUP_CLASS: string;

package/src/schedule/base/css-constant.js

@@ -262,6 +262,8 @@ export var APPOINTMENT_ROW_COLLAPSE_CLASS = 'e-appointment-collapse';
 /** @private */
 export var MORE_INDICATOR_CLASS = 'e-more-indicator';
 /** @private */
+export var MAX_EVENT_STACK_INDICATOR_CLASS = 'e-event-indicator-badge';
+/** @private */
 export var CELL_POPUP_CLASS = 'e-cell-popup';
 /** @private */
 export var EVENT_POPUP_CLASS = 'e-event-popup';

package/src/schedule/base/interface.d.ts

@@ -31,6 +31,8 @@ export interface ActionEventArgs extends ToolbarActionArgs {
      * If no overlapping events are found, the scheduler proceeds with the action.
      */
     promise?: Promise<boolean>;
+    /** False when triggered programmatically via changeSelectedResource(), true when triggered by user interaction. Only set for requestType 'resourceChange'/'resourceChanged'. */
+    isUserInitiated?: boolean;
 }
 /** */
 export interface ToolbarActionArgs extends BaseEventArgs {
@@ -594,6 +596,7 @@ export interface UIStateArgs {
     isTouchScroll?: boolean;
     isTransformed?: boolean;
     isSwipeScroll?: boolean;
+    isNavigation?: boolean;
 }
 /**
  *  @private

package/src/schedule/base/resource.d.ts

@@ -32,7 +32,7 @@ export declare class ResourceBase {
     private generateTreeData;
     private renderResourceHeaderText;
     private menuClick;
-    selectResourceByIndex(groupIndex: number): void;
+    selectResourceByIndex(groupIndex: number, isUserInitiated?: boolean): void;
     private resourceClick;
     private triggerEvents;
     private documentClick;

package/src/schedule/base/resource.js

@@ -475,9 +475,10 @@ var ResourceBase = /** @class */ (function () {
             addClass([this.popupOverlay], cls.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) {
@@ -490,15 +491,16 @@ var ResourceBase = /** @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(events.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(events.actionComplete, args);

package/src/schedule/base/schedule-model.d.ts

@@ -691,6 +691,37 @@ export interface ScheduleModel extends ComponentModel{
      */
     resources?: ResourcesModel[];
 
+    /**
+     * Allows setting the default selected resource in Adaptive UI mode by specifying the resource ID.
+     *
+     * @remarks
+     * - This property only applies when `enableAdaptiveUI` is set to `true`. In normal UI mode, this property is ignored.
+     * - The resource is selected based on the value of the `idField` (typically 'Id') defined in the respective resource data source.
+     * - If the specified resource ID does not exist in the data source, a warning message is logged to the console.
+     *
+     * @example
+     * // Initialize Schedule with default selected resource
+     * let schedule = new Schedule({
+     *     resources: [
+     *         {
+     *             field: 'RoomId',
+     *             name: 'Rooms',
+     *             dataSource: [
+     *                 { Id: 1, RoomText: 'Room 1' },
+     *                 { Id: 2, RoomText: 'Room 2' }
+     *             ],
+     *             textField: 'RoomText',
+     *             idField: 'Id'
+     *         }
+     *     ],
+     *     enableAdaptiveUI: true,
+     *     selectedResource: 2  // Selects Room 2 on initialization
+     * });
+     *
+     * @default null
+     */
+    selectedResource?: string | number;
+
     /**
      * Allows defining the collection of custom header rows to display the year, month, week, date and hour label as an individual row
      * on the timeline view of the scheduler.

package/src/schedule/base/schedule.d.ts

@@ -764,6 +764,36 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @default []
      */
     resources: ResourcesModel[];
+    /**
+     * Allows setting the default selected resource in Adaptive UI mode by specifying the resource ID.
+     *
+     * @remarks
+     * - This property only applies when `enableAdaptiveUI` is set to `true`. In normal UI mode, this property is ignored.
+     * - The resource is selected based on the value of the `idField` (typically 'Id') defined in the respective resource data source.
+     * - If the specified resource ID does not exist in the data source, a warning message is logged to the console.
+     *
+     * @example
+     * // Initialize Schedule with default selected resource
+     * let schedule = new Schedule({
+     *     resources: [
+     *         {
+     *             field: 'RoomId',
+     *             name: 'Rooms',
+     *             dataSource: [
+     *                 { Id: 1, RoomText: 'Room 1' },
+     *                 { Id: 2, RoomText: 'Room 2' }
+     *             ],
+     *             textField: 'RoomText',
+     *             idField: 'Id'
+     *         }
+     *     ],
+     *     enableAdaptiveUI: true,
+     *     selectedResource: 2  // Selects Room 2 on initialization
+     * });
+     *
+     * @default null
+     */
+    selectedResource: string | number;
     /**
      * Allows defining the collection of custom header rows to display the year, month, week, date and hour label as an individual row
      * on the timeline view of the scheduler.
@@ -1054,6 +1084,7 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      */
     sanitize(value: string, element: HTMLElement): void;
     private initializeResources;
+    private initializeSelectedResource;
     private destroyEditorWindow;
     /**
      * Method to render the layout elements
@@ -1605,6 +1636,7 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @returns {ResourceDetails} Object An object holding the details of resource and resourceData.
      */
     getResourcesByIndex(index: number): ResourceDetails;
+    private changeSelectedResource;
     /**
      * This method allows to expand the resource that available on the scheduler.
      *
@@ -1898,6 +1930,7 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @returns {void}
      */
     closeQuickInfoPopup(): void;
+    private closeQuickInfoOnNavigation;
     /**
      * To manually open the overlap validation Alert.
      *

package/src/schedule/base/schedule.js

@@ -234,6 +234,11 @@ var Schedule = /** @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();
@@ -268,6 +273,7 @@ var Schedule = /** @class */ (function (_super) {
         if (!this.isPrinting) {
             this.initializePopups();
         }
+        this.initializeSelectedResource();
     };
     Schedule.prototype.validateDate = function (selectedDate) {
         if (selectedDate === void 0) { selectedDate = this.selectedDate; }
@@ -617,6 +623,7 @@ var Schedule = /** @class */ (function (_super) {
      */
     Schedule.prototype.changeView = function (view, event, muteOnChange, index) {
         var _this = this;
+        this.closeQuickInfoOnNavigation();
         if (isNullOrUndefined(index)) {
             index = this.getViewIndex(view);
         }
@@ -667,6 +674,7 @@ var Schedule = /** @class */ (function (_super) {
      */
     Schedule.prototype.changeDate = function (selectedDate, event) {
         var _this = this;
+        this.closeQuickInfoOnNavigation();
         var args = { requestType: 'dateNavigate', cancel: false, event: event };
         this.trigger(events.actionBegin, args, function (actionArgs) {
             if (!actionArgs.cancel) {
@@ -786,7 +794,7 @@ var Schedule = /** @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();
@@ -1799,6 +1807,11 @@ var Schedule = /** @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;
@@ -2188,6 +2201,21 @@ var Schedule = /** @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.
      *
@@ -2872,6 +2900,11 @@ var Schedule = /** @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.
      *
@@ -3292,6 +3325,9 @@ var Schedule = /** @class */ (function (_super) {
     __decorate([
         Collection([], Resources)
     ], Schedule.prototype, "resources", void 0);
+    __decorate([
+        Property()
+    ], Schedule.prototype, "selectedResource", void 0);
     __decorate([
         Collection([], HeaderRows)
     ], Schedule.prototype, "headerRows", void 0);

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

@@ -1501,9 +1501,13 @@ var EventBase = /** @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('.' + cls.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) {

package/src/schedule/event-renderer/inline-edit.js

@@ -97,8 +97,8 @@ var InlineEdit = /** @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);

package/src/schedule/event-renderer/month.js

@@ -739,9 +739,15 @@ var MonthEvent = /** @class */ (function (_super) {
         }
     };
     MonthEvent.prototype.setMaxEventHeight = function (event, cell) {
-        var headerHeight = util.getOuterHeight(cell.querySelector('.' + cls.DATE_HEADER_CLASS));
+        var headerHeight = (this.parent.currentView === 'Month') ? util.getOuterHeight(cell.querySelector('.' + cls.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('.' + cls.APPOINTMENT_DETAILS);
+            if (!isNullOrUndefined(appointmentDetails)) {
+                setStyleAttribute(appointmentDetails, { 'align-items': 'center' });
+            }
+        }
     };
     MonthEvent.prototype.destroy = function () {
         this.element = null;

package/src/schedule/event-renderer/vertical-view.d.ts

@@ -24,6 +24,7 @@ export declare class VerticalEvent extends EventBase {
     cellHeight: number;
     resources: TdData[];
     private isResourceEventTemplate;
+    private moreIndicatorsMap;
     constructor(parent: Schedule);
     renderAppointments(): void;
     initializeValues(): void;
@@ -31,6 +32,10 @@ export declare class VerticalEvent extends EventBase {
     private appendEvent;
     private processBlockEvents;
     private renderBlockEvents;
+    private filterEventsByOverlapGroups;
+    private renderMoreIndicator;
+    private onMoreIndicatorClick;
+    private showMorePopup;
     private renderEvents;
     getStartCount(): number;
     private getDayIndex;
@@ -53,5 +58,6 @@ export declare class VerticalEvent extends EventBase {
     private getEventHeight;
     private rowExpandCollapse;
     private animationUiUpdate;
+    private cleanupMoreIndicators;
     destroy(): void;
 }