@syncfusion/ej2-schedule 32.1.19 → 32.1.22

package/dist/global/index.d.ts

@@ -1,3 +1,12 @@
+/*!
+*  filename: index.d.ts
+*  version : 32.1.22
+*  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
+*  licensing@syncfusion.com. Any infringement will be prosecuted under
+*  applicable laws. 
+*/
 import * as _schedule from '@syncfusion/ej2-schedule';
 
 export declare namespace ej {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-schedule",
-  "version": "32.1.19",
+  "version": "32.1.22",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
   "main": "./dist/ej2-schedule.umd.min.js",
@@ -8,12 +8,12 @@
   "es2015": "./dist/es6/ej2-schedule.es5.js",
   "dependencies": {
     "@syncfusion/ej2-base": "~32.1.19",
-    "@syncfusion/ej2-buttons": "~32.1.19",
-    "@syncfusion/ej2-calendars": "~32.1.19",
+    "@syncfusion/ej2-buttons": "~32.1.21",
+    "@syncfusion/ej2-calendars": "~32.1.22",
     "@syncfusion/ej2-data": "~32.1.19",
-    "@syncfusion/ej2-dropdowns": "~32.1.19",
+    "@syncfusion/ej2-dropdowns": "~32.1.22",
     "@syncfusion/ej2-excel-export": "~32.1.19",
-    "@syncfusion/ej2-inputs": "~32.1.19",
+    "@syncfusion/ej2-inputs": "~32.1.22",
     "@syncfusion/ej2-lists": "~32.1.19",
     "@syncfusion/ej2-navigations": "~32.1.19",
     "@syncfusion/ej2-popups": "~32.1.19"

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

@@ -91,7 +91,7 @@ var ActionBase = /** @class */ (function () {
         var startHour = this.parent.activeView.getStartHour();
         var intervalInMS = util.MS_PER_MINUTE * this.actionObj.interval;
         dateInMS += (startHour.getHours() * 60 + startHour.getMinutes()) * util.MS_PER_MINUTE + startHour.getSeconds() * 1000;
-        dateInMS = dateInMS + Math.floor((date.getTime() - dateInMS) / intervalInMS) * intervalInMS;
+        dateInMS = dateInMS + ((date.getTime() - dateInMS) / intervalInMS) * intervalInMS;
         return new Date(dateInMS);
     };
     ActionBase.prototype.getContentAreaDimension = function () {

package/src/schedule/actions/resize.js

@@ -415,7 +415,7 @@ var Resize = /** @class */ (function (_super) {
                     var offsetWidth = (Math.round(offset / this.actionObj.cellWidth) *
                         this.actionObj.cellWidth) + (isLeft ? 0 : (this.parent.getElementWidth(this.actionObj.clone) -
                         this.actionObj.cellWidth));
-                    cellIndex = Math.floor(offsetWidth / this.actionObj.cellWidth);
+                    cellIndex = Math.ceil(offsetWidth / this.actionObj.cellWidth);
                 }
                 isLastCell = cellIndex === tdCollections.length;
                 cellIndex = this.getIndex(cellIndex);
@@ -433,13 +433,29 @@ var Resize = /** @class */ (function (_super) {
             }
             else {
                 if (!isLeft) {
-                    offset += this.parent.getElementWidth(this.actionObj.clone);
+                    var cloneWidth = this.parent.getElementWidth(this.actionObj.clone);
+                    var pixelsPerInterval = this.actionObj.cellWidth /
+                        (this.actionObj.slotInterval / this.actionObj.interval);
+                    var numIntervals = Math.round(cloneWidth / pixelsPerInterval);
+                    cloneWidth = numIntervals * pixelsPerInterval;
+                    offset = offset + cloneWidth;
                 }
-                var spanMinutes = Math.floor((this.actionObj.slotInterval / this.actionObj.cellWidth) *
+                var spanMinutes = Math.ceil((this.actionObj.slotInterval / this.actionObj.cellWidth) *
                     (offset - Math.floor(offset / this.actionObj.cellWidth) * this.actionObj.cellWidth));
                 spanMinutes = (isLastCell || (!isLeft && spanMinutes === 0)) ? this.actionObj.slotInterval : spanMinutes;
                 resizeTime = new Date(resizeDate.getTime());
                 resizeTime = new Date(resizeDate.getTime() + (spanMinutes * util.MS_PER_MINUTE));
+                var isCustomResizeInterval = this.actionObj.interval !== this.actionObj.slotInterval;
+                var initialCellTime = new Date(resizeTime.getTime());
+                var intervalInMS = this.actionObj.interval * 60000;
+                if (intervalInMS > 0 && isCustomResizeInterval) {
+                    if (this.resizeEdges.right || this.resizeEdges.left) {
+                        var eventTime = this.resizeEdges.right ? eventEnd : eventStart;
+                        var timeDifferenceMs = initialCellTime.getTime() - eventTime.getTime();
+                        var intervalCount = Math.round(timeDifferenceMs / intervalInMS);
+                        resizeTime = new Date(eventTime.getTime() + intervalCount * intervalInMS);
+                    }
+                }
                 this.updateTimePosition(resizeTime);
             }
         }

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

@@ -372,6 +372,8 @@ export interface ResourceDetails {
     resourceData: Record<string, any>;
     /** Returns the respective resource fields data. */
     groupData?: Record<string, any>;
+    /** Returns the respective resource date. */
+    date?: Date;
     /** It returns the child level resources in compact mode. */
     resourceChild?: ResourceDetails[];
     /** It returns the Id of current resource in compact mode. */

package/src/schedule/base/resource.js

@@ -379,14 +379,16 @@ var ResourceBase = /** @class */ (function () {
                         resourceId: levelId,
                         resourceName: treeLevel.resourceData[resource.textField],
                         resource: treeLevel.resource,
-                        resourceData: treeLevel.resourceData
+                        resourceData: treeLevel.resourceData,
+                        date: _this.parent.selectedDate
                     };
                 }
                 else {
                     resObj = {
                         type: 'resourceHeader', resource: treeLevel.resource,
                         resourceData: treeLevel.resourceData, groupIndex: groupIndex,
-                        groupOrder: treeLevel.groupOrder
+                        groupOrder: treeLevel.groupOrder,
+                        date: _this.parent.selectedDate
                     };
                     resTreeColl.push(resObj);
                     groupIndex++;
@@ -714,9 +716,15 @@ var ResourceBase = /** @class */ (function () {
         }
         this.lastResourceLevel = headerLevels.slice(-1)[0] || [];
         if (!this.parent.activeViewOptions.group.byDate) {
+            for (var levelIndex = 0; levelIndex < headerLevels.length; levelIndex++) {
+                for (var _d = 0, _e = headerLevels[parseInt(levelIndex.toString(), 10)]; _d < _e.length; _d++) {
+                    var levelItem = _e[_d];
+                    levelItem.date = this.parent.selectedDate;
+                }
+            }
             var index = 0;
-            for (var _d = 0, _e = this.lastResourceLevel; _d < _e.length; _d++) {
-                var lastLevelResource = _e[_d];
+            for (var _f = 0, _g = this.lastResourceLevel; _f < _g.length; _f++) {
+                var lastLevelResource = _g[_f];
                 for (var i = 0; i < lastLevelResource.colSpan; i++) {
                     lastColumnDates[parseInt(index.toString(), 10)].groupIndex = lastLevelResource.groupIndex;
                     index++;
@@ -800,8 +808,8 @@ var ResourceBase = /** @class */ (function () {
                 dateIndex++;
             };
             var this_3 = this;
-            for (var _f = 0, headerDates_1 = headerDates; _f < headerDates_1.length; _f++) {
-                var headerDate = headerDates_1[_f];
+            for (var _h = 0, headerDates_1 = headerDates; _h < headerDates_1.length; _h++) {
+                var headerDate = headerDates_1[_h];
                 _loop_3(headerDate);
             }
             this.resourceDateTree = this.resourceDateTree.filter(function (data) { return data.length > 0; });
@@ -814,19 +822,23 @@ var ResourceBase = /** @class */ (function () {
             return dateHeaderLevels;
         }
         var dateColSpan = 0;
-        for (var _g = 0, _h = levels[0]; _g < _h.length; _g++) {
-            var firstRowTd = _h[_g];
+        for (var _j = 0, _k = levels[0]; _j < _k.length; _j++) {
+            var firstRowTd = _k[_j];
             dateColSpan += firstRowTd.colSpan;
         }
-        for (var _j = 0, headerDates_2 = headerDates; _j < headerDates_2.length; _j++) {
-            var headerDate = headerDates_2[_j];
+        for (var _l = 0, headerDates_2 = headerDates; _l < headerDates_2.length; _l++) {
+            var headerDate = headerDates_2[_l];
             headerDate.colSpan = dateColSpan;
             datesColumn.push(headerDate);
             var resGroup = extend([], levels, null, true);
             for (var k = 0, length_2 = resGroup.length; k < length_2; k++) {
+                for (var _m = 0, _o = resGroup[parseInt(k.toString(), 10)]; _m < _o.length; _m++) {
+                    var resTd = _o[_m];
+                    resTd.date = headerDate.date;
+                }
                 if (k === resGroup.length - 1) {
-                    for (var _k = 0, _l = resGroup[parseInt(k.toString(), 10)]; _k < _l.length; _k++) {
-                        var resTd = _l[_k];
+                    for (var _p = 0, _q = resGroup[parseInt(k.toString(), 10)]; _p < _q.length; _p++) {
+                        var resTd = _q[_p];
                         resTd.date = headerDate.date;
                         resTd.workDays = headerDate.workDays;
                         resTd.startHour = this.parent.getStartEndTime(resTd.resourceData[resTd.resource.startHourField]) ||
@@ -880,10 +892,13 @@ var ResourceBase = /** @class */ (function () {
         if (isNullOrUndefined(groupOrder) && this.parent.activeViewOptions.group.allowGroupEdit && resource.allowMultiple) {
             return undefined;
         }
-        var id = isNullOrUndefined(groupOrder) ? eventObj[resource.field] : groupOrder[parseInt(colorFieldIndex.toString(), 10)];
-        var data = this.filterData(resource.dataSource, resource.idField, id);
-        if (data.length > 0) {
-            return data[0][resource.colorField];
+        var isResourceEmpty = this.parent.isResourceCollectionEmpty();
+        if (!isResourceEmpty) {
+            var id = isNullOrUndefined(groupOrder) ? eventObj[resource.field] : groupOrder[parseInt(colorFieldIndex.toString(), 10)];
+            var data = this.filterData(resource.dataSource, resource.idField, id);
+            if (data.length > 0) {
+                return data[0][resource.colorField];
+            }
         }
         return undefined;
     };

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

@@ -450,6 +450,28 @@ export interface ScheduleModel extends ComponentModel{
      */
     showQuickInfo?: boolean;
 
+    /**
+     * Indicates whether the editor window and quick dialog popups are created and rendered in the DOM by default.
+     *
+     * When set to `true`, the popups are created during Scheduler initialization and reused throughout
+     * the component's lifetime. When set to `false`, the popups are created on demand when opened and
+     * destroyed when closed, reducing initial load but adding per-open creation cost.
+     *
+     * @remarks
+     * - Use `true` to minimize runtime allocations during interactions at the cost of higher initial setup.
+     * - Use `false` to reduce initial render cost and memory footprint when popups are infrequently used.
+     * - Toggling from `false` to `true` will keep subsequently created popups alive for reuse.
+     * *
+     * @example
+     * // Configure the editor to defer default popup creation.
+     * const options: ScheduleOptions= {
+     *   prerenderDialogs: false
+     * };
+     *
+     * @default true
+     */
+    prerenderDialogs?: boolean;
+
     /**
      * This property helps user to add/edit the event in inline. By default, it is set to `false`.
      *

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

@@ -546,6 +546,27 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @default true
      */
     showQuickInfo: boolean;
+    /**
+     * Indicates whether the editor window and quick dialog popups are created and rendered in the DOM by default.
+     *
+     * When set to `true`, the popups are created during Scheduler initialization and reused throughout
+     * the component's lifetime. When set to `false`, the popups are created on demand when opened and
+     * destroyed when closed, reducing initial load but adding per-open creation cost.
+     *
+     * @remarks
+     * - Use `true` to minimize runtime allocations during interactions at the cost of higher initial setup.
+     * - Use `false` to reduce initial render cost and memory footprint when popups are infrequently used.
+     * - Toggling from `false` to `true` will keep subsequently created popups alive for reuse.
+     * *
+     * @example
+     * // Configure the editor to defer default popup creation.
+     * const options: ScheduleOptions= {
+     *   prerenderDialogs: false
+     * };
+     *
+     * @default true
+     */
+    prerenderDialogs: boolean;
     /**
      * This property helps user to add/edit the event in inline. By default, it is set to `false`.
      *
@@ -1045,6 +1066,13 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
     private validateDate;
     private getViewIndex;
     private setViewOptions;
+    /**
+     * Checks if resources have empty dataSource
+     *
+     * @returns {boolean} Returns true if resources have empty dataSource, otherwise false
+     * @private
+     */
+    isResourceCollectionEmpty(): boolean;
     private getActiveViewOptions;
     private initializeDataModule;
     private setEditorTitles;

package/src/schedule/base/schedule.js

@@ -366,6 +366,19 @@ var Schedule = /** @class */ (function (_super) {
                 (currentIndex === -1) ? 0 : currentIndex;
         }
     };
+    /**
+     * Checks if resources have empty dataSource
+     *
+     * @returns {boolean} Returns true if resources have empty dataSource, otherwise false
+     * @private
+     */
+    Schedule.prototype.isResourceCollectionEmpty = function () {
+        return this.resourceCollection.length > 0 &&
+            this.resourceCollection.some(function (res) {
+                var ds = res && res.dataSource;
+                return Array.isArray(ds) ? ds.length === 0 : !ds;
+            });
+    };
     Schedule.prototype.getActiveViewOptions = function () {
         var timeScale = {
             enable: this.timeScale.enable,
@@ -374,12 +387,20 @@ var Schedule = /** @class */ (function (_super) {
             majorSlotTemplate: this.timeScale.majorSlotTemplate,
             minorSlotTemplate: this.timeScale.minorSlotTemplate
         };
+        var isResourceEmpty = this.isResourceCollectionEmpty();
         var isYearView = this.viewCollections[this.viewIndex].option.indexOf('Year') > -1;
+        var groupResources = [];
+        if ((!isNullOrUndefined(this.group.resources) && this.group.resources.length > 0) && !isResourceEmpty) {
+            groupResources = this.group.resources;
+        }
+        else if (this.resources.length > 0 && !isResourceEmpty) {
+            groupResources = [];
+        }
         var group = {
-            byDate: isYearView ? false : this.group.byDate,
+            byDate: (isYearView || isResourceEmpty) ? false : this.group.byDate,
             byGroupID: this.group.byGroupID,
             allowGroupEdit: this.group.allowGroupEdit,
-            resources: isNullOrUndefined(this.group.resources) ? [] : this.group.resources,
+            resources: groupResources,
             headerTooltipTemplate: this.group.headerTooltipTemplate,
             enableCompactView: this.group.enableCompactView,
             hideNonWorkingDays: ['Day', 'Week', 'WorkWeek', 'Month'].indexOf(this.currentView) > -1 ? this.group.hideNonWorkingDays : false
@@ -894,7 +915,7 @@ var Schedule = /** @class */ (function (_super) {
      * @private
      */
     Schedule.prototype.removeSelectedClass = function () {
-        var selectedCells = this.getSelectedCells();
+        var selectedCells = [].slice.call(this.element.querySelectorAll('.' + cls.SELECTED_CELL_CLASS));
         for (var _i = 0, selectedCells_1 = selectedCells; _i < selectedCells_1.length; _i++) {
             var cell = selectedCells_1[_i];
             cell.removeAttribute('tabindex');
@@ -1327,7 +1348,23 @@ var Schedule = /** @class */ (function (_super) {
      * @private
      */
     Schedule.prototype.getSelectedCells = function () {
-        return [].slice.call(this.element.querySelectorAll('.' + cls.SELECTED_CELL_CLASS));
+        var selectedCells = [].slice.call(this.element.querySelectorAll('.' + cls.SELECTED_CELL_CLASS));
+        if (!selectedCells || selectedCells.length === 0) {
+            return [];
+        }
+        else if (selectedCells.length === 1) {
+            return selectedCells;
+        }
+        if (selectedCells && selectedCells.length > 1) {
+            var hasAnyWorkCells = selectedCells.some(function (cell) { return cell.classList.contains(cls.WORK_CELLS_CLASS); });
+            var workCells = hasAnyWorkCells ?
+                selectedCells.filter(function (cell) { return !cell.classList.contains(cls.ALLDAY_CELLS_CLASS); }) : selectedCells;
+            if (!workCells || workCells.length === 0) {
+                return [];
+            }
+            return workCells.slice().sort(function (a, b) { return (+a.dataset.date || 0) - (+b.dataset.date || 0); });
+        }
+        return selectedCells;
     };
     /**
      * Method to generate the announcement string
@@ -1526,6 +1563,17 @@ var Schedule = /** @class */ (function (_super) {
                         state.isLayout = true;
                     }
                     break;
+                case 'prerenderDialogs': {
+                    if (newProp.prerenderDialogs) {
+                        this.eventWindow.renderEventWindow();
+                        this.quickPopup.renderQuickDialog();
+                    }
+                    else {
+                        this.eventWindow.destroy(true);
+                        this.quickPopup.destroyQuickDialog();
+                    }
+                    break;
+                }
                 case 'showWeekend':
                 case 'startHour':
                 case 'endHour':
@@ -2835,6 +2883,9 @@ var Schedule = /** @class */ (function (_super) {
      */
     Schedule.prototype.openOverlapAlert = function (args) {
         var _this = this;
+        if (!this.prerenderDialogs) {
+            return;
+        }
         if (this.quickPopup) {
             var eventProp = {
                 type: 'OverlapAlert',
@@ -2858,6 +2909,9 @@ var Schedule = /** @class */ (function (_super) {
      */
     Schedule.prototype.closeOverlapAlert = function () {
         var _this = this;
+        if (!this.prerenderDialogs) {
+            return;
+        }
         if (this.quickPopup) {
             var args = {
                 type: 'OverlapAlert',
@@ -3169,6 +3223,9 @@ var Schedule = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], Schedule.prototype, "showQuickInfo", void 0);
+    __decorate([
+        Property(true)
+    ], Schedule.prototype, "prerenderDialogs", void 0);
     __decorate([
         Property(false)
     ], Schedule.prototype, "allowInline", void 0);

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

@@ -249,7 +249,7 @@ var AgendaBase = /** @class */ (function (_super) {
                                         groupOrder: resData[parseInt(res.toString(), 10)].groupOrder.slice(0, -1),
                                         resourceData: resData[parseInt(res.toString(), 10)].resourceData,
                                         groupIndex: (lastLevelInfo.length - data.length), className: [cls.RESOURCE_NAME],
-                                        date: agendaDate
+                                        date: this.parent.activeViewOptions.group.byDate ? firstDate : agendaDate
                                     };
                                     lastLevelInfo[parseInt((lastLevelInfo.length - data.length).toString(), 10)].push(tempObj);
                                     tempLastLevelInfo.push(extend({}, tempObj, null, true));
@@ -277,7 +277,8 @@ var AgendaBase = /** @class */ (function (_super) {
                                 tempGroupedData[0].type = 'parentColumnLevel_' + (y + 1);
                                 tempGroupedData[0].resource = topResources[topResources.length - (y + 1)];
                                 tempGroupedData[0].resourceData = data[parseInt(x.toString(), 10)];
-                                tempGroupedData[0].date = agendaDate;
+                                tempGroupedData[0].date = this.parent.activeViewOptions.group.byDate ?
+                                    tempLastLevelInfo[parseInt(u.toString(), 10)].date : agendaDate;
                                 lastLevelInfo[tempGroupedData[0].groupIndex].push(tempGroupedData[0]);
                                 tempGroupedData = [];
                                 totalRowSpan = 0;

package/src/schedule/popups/event-window.d.ts

@@ -28,7 +28,7 @@ export declare class EventWindow {
     private isEnterKey;
     private dialogEvent;
     constructor(parent: Schedule);
-    private renderEventWindow;
+    renderEventWindow(): void;
     private renderDialogButtons;
     private addEventHandlers;
     refresh(): void;

package/src/schedule/popups/event-window.js

@@ -27,7 +27,9 @@ var EventWindow = /** @class */ (function () {
         this.l10n = this.parent.localeObj;
         this.fields = this.parent.eventFields;
         this.eventWindowTime = { startTime: new Date(), endTime: new Date() };
-        this.renderEventWindow();
+        if (this.parent.prerenderDialogs) {
+            this.renderEventWindow();
+        }
     }
     EventWindow.prototype.renderEventWindow = function () {
         this.element = createElement('div', { id: this.parent.element.id + '_dialog_wrapper' });
@@ -115,6 +117,9 @@ var EventWindow = /** @class */ (function () {
         }
     };
     EventWindow.prototype.openEditor = function (data, type, isEventData, repeatType) {
+        if (!this.parent.prerenderDialogs) {
+            this.renderEventWindow();
+        }
         this.parent.currentAction = type;
         this.parent.removeNewEventElement();
         if (this.parent.quickPopup) {
@@ -303,6 +308,9 @@ var EventWindow = /** @class */ (function () {
             }
             callBackPromise.resolve(args);
         });
+        if (!this.parent.prerenderDialogs && args.cancel) {
+            this.destroy(true);
+        }
         return callBackPromise;
     };
     EventWindow.prototype.onBeforeClose = function (args) {
@@ -330,6 +338,9 @@ var EventWindow = /** @class */ (function () {
                     _this.resetForm();
                     _this.parent.eventBase.focusElement(true);
                     _this.eventCrudData = null;
+                    if (!_this.parent.prerenderDialogs) {
+                        _this.destroy(true);
+                    }
                 }
             }
             callBackPromise.resolve(args);
@@ -426,7 +437,8 @@ var EventWindow = /** @class */ (function () {
         else {
             this.createRecurrenceEditor(parentDiv);
         }
-        if (this.parent.resourceCollection.length > 0) {
+        var isResourceEmpty = this.parent.isResourceCollectionEmpty();
+        if (this.parent.resourceCollection.length > 0 && !isResourceEmpty) {
             var resourceParentDiv = this.createDivElement(cls.EVENT_WINDOW_RESOURCES_DIV_CLASS);
             for (var _i = 0, _a = this.parent.resourceBase.resourceCollection; _i < _a.length; _i++) {
                 var resource = _a[_i];
@@ -971,7 +983,8 @@ var EventWindow = /** @class */ (function () {
         if (cellsData.RecurrenceRule) {
             eventObj[this.fields.recurrenceRule] = cellsData.RecurrenceRule;
         }
-        if (this.parent.resourceCollection.length > 0 || this.parent.activeViewOptions.group.resources.length > 0) {
+        var isResourceEmpty = this.parent.isResourceCollectionEmpty();
+        if ((this.parent.resourceCollection.length > 0 && !isResourceEmpty) || this.parent.activeViewOptions.group.resources.length > 0) {
             this.parent.resourceBase.setResourceValues(eventObj);
         }
     };
@@ -1580,7 +1593,7 @@ var EventWindow = /** @class */ (function () {
             if (endDate.getTime() >= new Date(+startDate).setMonth(startDate.getMonth() + interval)) {
                 alertMessage = 'createError';
             }
-            if (isNullOrUndefined(alertMessage)) {
+            if (isNullOrUndefined(alertMessage) && !isNullOrUndefined(this.parent.quickPopup.quickDialog)) {
                 this.parent.quickPopup.quickDialog.hide();
             }
         }

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

@@ -19,7 +19,7 @@ export declare class QuickPopups {
     private render;
     private renderQuickPopup;
     private renderMorePopup;
-    private renderQuickDialog;
+    renderQuickDialog(): void;
     private renderButton;
     private quickDialogClass;
     private applyFormValidation;
@@ -71,7 +71,7 @@ export declare class QuickPopups {
     refreshQuickDialog(): void;
     refreshQuickPopup(): void;
     refreshMorePopup(): void;
-    private destroyQuickDialog;
+    destroyQuickDialog(): void;
     private destroyQuickPopup;
     private destroyMorePopup;
     destroy(): void;

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

@@ -25,7 +25,9 @@ var QuickPopups = /** @class */ (function () {
     QuickPopups.prototype.render = function () {
         this.renderQuickPopup();
         this.renderMorePopup();
-        this.renderQuickDialog();
+        if (this.parent.prerenderDialogs) {
+            this.renderQuickDialog();
+        }
     };
     QuickPopups.prototype.renderQuickPopup = function () {
         var quickPopupWrapper = createElement('div', { className: cls.POPUP_WRAPPER_CLASS + ' e-popup-close', attrs: { role: 'dialog' } });
@@ -185,6 +187,9 @@ var QuickPopups = /** @class */ (function () {
         this.fieldValidator.renderFormValidator(form, rules, this.quickPopup.element, this.parent.locale);
     };
     QuickPopups.prototype.openRecurrenceAlert = function () {
+        if (!this.parent.prerenderDialogs) {
+            this.renderQuickDialog();
+        }
         var editDeleteOnly = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_OK);
         if (editDeleteOnly) {
             editDeleteOnly.innerHTML = this.l10n.getConstant(this.parent.currentAction === 'Delete' ? 'deleteEvent' : 'editEvent');
@@ -206,6 +211,9 @@ var QuickPopups = /** @class */ (function () {
         this.showQuickDialog('RecurrenceAlert');
     };
     QuickPopups.prototype.openRecurrenceValidationAlert = function (type) {
+        if (!this.parent.prerenderDialogs) {
+            this.renderQuickDialog();
+        }
         this.quickDialogClass('Alert');
         var okButton = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_OK);
         okButton.innerHTML = this.l10n.getConstant('ok');
@@ -249,6 +257,9 @@ var QuickPopups = /** @class */ (function () {
         if (this.parent.activeViewOptions.readonly) {
             return;
         }
+        if (!this.parent.prerenderDialogs) {
+            this.renderQuickDialog();
+        }
         var okButton = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_OK);
         if (okButton) {
             okButton.innerHTML = this.l10n.getConstant('delete');
@@ -267,6 +278,9 @@ var QuickPopups = /** @class */ (function () {
         this.showQuickDialog('DeleteAlert');
     };
     QuickPopups.prototype.openValidationError = function (type, eventData) {
+        if (!this.parent.prerenderDialogs) {
+            this.renderQuickDialog();
+        }
         this.quickDialog.header = this.l10n.getConstant('alert');
         this.quickDialog.content = this.l10n.getConstant(type);
         var okButton = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_OK);
@@ -296,6 +310,9 @@ var QuickPopups = /** @class */ (function () {
             if (!popupArgs.cancel) {
                 _this.quickDialog.show();
             }
+            if (!_this.parent.prerenderDialogs && popupArgs.cancel) {
+                _this.destroyQuickDialog();
+            }
         });
     };
     QuickPopups.prototype.createMoreEventList = function (eventCollection, groupOrder, groupIndex) {
@@ -613,6 +630,7 @@ var QuickPopups = /** @class */ (function () {
             var cellDetails = void 0;
             var argsData = void 0;
             var resourceText = this.getResourceText(args, type.toLowerCase());
+            var isResourceEmpty = this.parent.isResourceCollectionEmpty();
             switch (type) {
                 case 'Cell':
                     cellDetails = this.getFormattedString(data);
@@ -647,7 +665,7 @@ var QuickPopups = /** @class */ (function () {
                         content += '<div class="' + cls.DESCRIPTION_CLASS + '"><div class="' + cls.DESCRIPTION_ICON_CLASS + ' ' + cls.ICON +
                             '"></div><div class="' + cls.DESCRIPTION_DETAILS_CLASS + ' ' + cls.TEXT_ELLIPSIS + '"></div></div>';
                     }
-                    if (this.parent.resourceCollection.length > 0) {
+                    if (this.parent.resourceCollection.length > 0 && !isResourceEmpty) {
                         content += '<div class="' + cls.RESOURCE_CLASS + '"><div class="' + cls.RESOURCE_ICON_CLASS + ' ' + cls.ICON +
                             '"></div><div class="' + cls.RESOURCE_DETAILS_CLASS + ' ' + cls.TEXT_ELLIPSIS + '"></div></div>';
                     }
@@ -710,7 +728,8 @@ var QuickPopups = /** @class */ (function () {
         return footerTemplate;
     };
     QuickPopups.prototype.getResourceText = function (args, type) {
-        if (this.parent.resourceCollection.length === 0) {
+        var isResourceEmpty = this.parent.isResourceCollectionEmpty();
+        if (this.parent.resourceCollection.length === 0 || isResourceEmpty) {
             return null;
         }
         var resourceValue = '';
@@ -950,7 +969,6 @@ var QuickPopups = /** @class */ (function () {
     };
     QuickPopups.prototype.dialogButtonClick = function (event) {
         this.dialogEvent = event;
-        this.quickDialog.hide();
         var target = event.target;
         var cancelBtn = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_CANCEL);
         var eventData = this.parent.activeEventData.event;
@@ -995,6 +1013,9 @@ var QuickPopups = /** @class */ (function () {
             this.parent.uiStateValues.isIgnoreOccurrence = target.classList.contains(cls.QUICK_DIALOG_ALERT_CANCEL);
             this.parent.eventWindow.eventSave(event, this.l10n.getConstant('ok'));
         }
+        if (!isNullOrUndefined(this.quickDialog)) {
+            this.quickDialog.hide();
+        }
     };
     QuickPopups.prototype.updateTapHoldEventPopup = function (target) {
         var selectedElements = this.parent.eventBase.getSelectedEventElements(target);
@@ -1062,6 +1083,9 @@ var QuickPopups = /** @class */ (function () {
         this.parent.trigger(event.popupClose, args, function (popupCloseArgs) {
             if (!popupCloseArgs.cancel) {
                 _this.parent.eventBase.focusElement(true);
+                if (!_this.parent.prerenderDialogs) {
+                    _this.destroyQuickDialog();
+                }
             }
         });
     };
@@ -1388,7 +1412,9 @@ var QuickPopups = /** @class */ (function () {
     };
     QuickPopups.prototype.refreshQuickDialog = function () {
         this.destroyQuickDialog();
-        this.renderQuickDialog();
+        if (this.parent.prerenderDialogs) {
+            this.renderQuickDialog();
+        }
     };
     QuickPopups.prototype.refreshQuickPopup = function () {
         this.destroyQuickPopup();
@@ -1399,7 +1425,7 @@ var QuickPopups = /** @class */ (function () {
         this.renderMorePopup();
     };
     QuickPopups.prototype.destroyQuickDialog = function () {
-        if (this.quickDialog.element) {
+        if (this.quickDialog && this.quickDialog.element) {
             this.quickDialog.destroy();
             remove(this.quickDialog.element);
             this.quickDialog = null;