@syncfusion/ej2-schedule 22.2.12 → 23.1.36

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

@@ -60,6 +60,10 @@ var resizeStop = 'resizeStop';
 var inlineClick = 'inlineClick';
 /** @private */
 var cellSelect = 'cellSelect';
+/** @private */
+var virtualScrollStart = 'virtualScrollStart';
+/** @private */
+var virtualScrollStop = 'virtualScrollStop';
 /**
  * Specifies schedule internal events
  */
@@ -553,7 +557,7 @@ var WORK_HOURS_CLASS = 'e-work-hours';
 /** @private */
 var POPUP_OPEN = 'e-popup-open';
 /** @private */
-
+var POPUP_CLOSE = 'e-popup-close';
 /** @private */
 var DATE_HEADER_WRAP_CLASS = 'e-date-header-wrap';
 /** @private */
@@ -2075,8 +2079,7 @@ var KeyboardInteraction = /** @__PURE__ @class */ (function () {
         var queryStr = '.' + WORK_CELLS_CLASS + ',.' + ALLDAY_CELLS_CLASS + ',.' + HEADER_CELLS_CLASS;
         var target = closest(e.target, queryStr);
         var selectedCells = this.parent.getSelectedCells();
-        if (this.parent.activeViewOptions.group.resources.length > 0 && selectedCells.length > 0 &&
-            selectedCells[0].getAttribute('data-group-index') !== target.getAttribute('data-group-index')) {
+        if (selectedCells.length > 0 && selectedCells.indexOf(target) === -1) {
             target = selectedCells[selectedCells.length - 1];
         }
         if (this.parent.currentView === 'TimelineYear' && target.classList.contains(OTHERMONTH_CLASS)) {
@@ -3059,15 +3062,35 @@ var Data = /** @__PURE__ @class */ (function () {
      */
     Data.prototype.generateQuery = function (startDate, endDate) {
         var query = this.query.clone();
-        if (this.parent && this.parent.eventSettings.includeFiltersInQuery && startDate && endDate) {
-            var dateQuery = this.getStartEndQuery(startDate, endDate);
-            var recurrenceQuery = new Predicate(this.parent.eventFields.recurrenceRule, 'notequal', null).and(new Predicate(this.parent.eventFields.recurrenceRule, 'notequal', ''));
-            return query.where(dateQuery.or(recurrenceQuery));
-        }
-        if (startDate) {
+        if (this.parent && startDate && endDate) {
+            if (this.parent.activeViewOptions && this.parent.activeViewOptions.enableLazyLoading &&
+                !isNullOrUndefined(this.parent.activeViewOptions.group.resources) &&
+                this.parent.activeViewOptions.group.resources.length > 0 && this.parent.resourceBase &&
+                this.parent.resourceBase.resourceCollection.length > 0 && this.parent.resourceBase.renderedResources.length > 0) {
+                var resIdCollection_1 = [];
+                this.parent.resourceBase.resourceCollection.forEach(function () { return resIdCollection_1.push([]); });
+                this.parent.resourceBase.renderedResources.forEach(function (resource) {
+                    resIdCollection_1.forEach(function (resId, index) {
+                        var groupId = resource.groupOrder[parseInt(index.toString(), 10)];
+                        if (groupId && resId.indexOf(groupId) < 0) {
+                            resId.push(groupId);
+                        }
+                    });
+                });
+                this.parent.resourceBase.resourceCollection.forEach(function (resource, index) {
+                    query.addParams(resource.field, resIdCollection_1[parseInt(index.toString(), 10)].toString());
+                });
+            }
+            if (this.parent.timezone) {
+                startDate = this.parent.tzModule.remove(new Date(+startDate.getTime()), this.parent.timezone);
+                endDate = this.parent.tzModule.remove(new Date(+endDate.getTime()), this.parent.timezone);
+            }
+            if (this.parent.eventSettings.includeFiltersInQuery) {
+                var dateQuery = this.getStartEndQuery(startDate, endDate);
+                var recurrenceQuery = new Predicate(this.parent.eventFields.recurrenceRule, 'notequal', null).and(new Predicate(this.parent.eventFields.recurrenceRule, 'notequal', ''));
+                return query.where(dateQuery.or(recurrenceQuery));
+            }
             query.addParams('StartDate', startDate.toISOString());
-        }
-        if (endDate) {
             query.addParams('EndDate', endDate.toISOString());
         }
         return query;
@@ -9380,6 +9403,9 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
                         'aria-label': this_1.parent.getAnnouncementString(eventData)
                     }
                 });
+                if (eventData[fields.isReadonly]) {
+                    addClass([appointmentElement], 'e-read-only');
+                }
                 var templateElement = void 0;
                 if (!isNullOrUndefined(this_1.parent.activeViewOptions.eventTemplate)) {
                     var tempId = this_1.parent.element.id + '_' + this_1.parent.activeViewOptions.eventTemplateName + 'eventTemplate';
@@ -10488,7 +10514,7 @@ var EventTooltip = /** @__PURE__ @class */ (function () {
             cssClass: this.parent.cssClass + ' ' + EVENT_TOOLTIP_ROOT_CLASS,
             target: this.getTargets(),
             beforeRender: this.onBeforeRender.bind(this),
-            afterClose: this.onTooltipClose.bind(this),
+            beforeClose: this.onTooltipClose.bind(this),
             enableRtl: this.parent.enableRtl,
             enableHtmlSanitizer: this.parent.enableHtmlSanitizer
         });
@@ -10596,7 +10622,11 @@ var EventTooltip = /** @__PURE__ @class */ (function () {
         }
         this.parent.renderTemplates();
     };
-    EventTooltip.prototype.onTooltipClose = function () {
+    EventTooltip.prototype.onTooltipClose = function (args) {
+        if (args.element) {
+            removeClass([args.element], POPUP_OPEN);
+            addClass([args.element], POPUP_CLOSE);
+        }
         this.parent.resetTemplates(['tooltipTemplate', 'headerTooltipTemplate']);
     };
     EventTooltip.prototype.setContent = function (content) {
@@ -11803,40 +11833,54 @@ var EventWindow = /** @__PURE__ @class */ (function () {
         };
         if (this.parent.isAdaptive) {
             dialogModel.cssClass = EVENT_WINDOW_DIALOG_CLASS + ' ' + DEVICE_CLASS;
-            dialogModel.header = '<div class="e-title-header"><div class="e-back-icon e-icons"></div><div class="e-title-text">' +
-                this.l10n.getConstant('newEvent') + '</div><div class="e-save-icon e-icons"></div></div>';
+            if (!this.parent.editorHeaderTemplate) {
+                dialogModel.header = '<div class="e-title-header"><div class="e-back-icon e-icons"></div><div class="e-title-text">' +
+                    this.l10n.getConstant('newEvent') + '</div><div class="e-save-icon e-icons"></div></div>';
+            }
         }
         else {
-            dialogModel.buttons = [{
-                    buttonModel: {
-                        content: this.l10n.getConstant('deleteButton'), cssClass: DELETE_EVENT_CLASS,
-                        disabled: !this.parent.eventSettings.allowDeleting || this.parent.readonly
-                    },
-                    click: this.eventDelete.bind(this)
-                }, {
-                    buttonModel: {
-                        content: this.l10n.getConstant('saveButton'), cssClass: 'e-primary ' + EVENT_WINDOW_SAVE_BUTTON_CLASS,
-                        isPrimary: true, disabled: !this.parent.eventSettings.allowAdding || this.parent.readonly
-                    },
-                    click: this.eventSave.bind(this)
-                }, {
-                    buttonModel: { cssClass: EVENT_WINDOW_CANCEL_BUTTON_CLASS, content: this.l10n.getConstant('cancelButton') },
-                    click: this.dialogClose.bind(this)
-                }];
-            dialogModel.header = '<div class="e-title-text">' + this.l10n.getConstant('newEvent') + '</div>';
+            if (!this.parent.editorFooterTemplate) {
+                this.renderDialogButtons(dialogModel);
+            }
+            if (!this.parent.editorHeaderTemplate) {
+                dialogModel.header = '<div class="e-title-text">' + this.l10n.getConstant('newEvent') + '</div>';
+            }
         }
         this.dialogObject = new Dialog(dialogModel, this.element);
         if (this.dialogObject.element.querySelector('.e-dlg-closeicon-btn')) {
             this.dialogObject.element.querySelector('.e-dlg-closeicon-btn').setAttribute('title', this.l10n.getConstant('close'));
         }
+        this.addEventHandlers();
         addClass([this.element.parentElement], EVENT_WINDOW_DIALOG_CLASS + '-container');
-        if (this.parent.isAdaptive) {
-            EventHandler.add(this.element.querySelector('.' + EVENT_WINDOW_BACK_ICON_CLASS), 'click', this.dialogClose, this);
-            EventHandler.add(this.element.querySelector('.' + EVENT_WINDOW_SAVE_ICON_CLASS), 'click', this.eventSave, this);
-        }
         EventHandler.add(this.dialogObject.element, 'keydown', this.preventEventSave, this);
         this.applyFormValidation();
     };
+    EventWindow.prototype.renderDialogButtons = function (dialogButton) {
+        dialogButton.buttons = [{
+                buttonModel: {
+                    content: this.l10n.getConstant('deleteButton'), cssClass: DELETE_EVENT_CLASS,
+                    disabled: !this.parent.eventSettings.allowDeleting || this.parent.readonly
+                },
+                click: this.eventDelete.bind(this)
+            }, {
+                buttonModel: {
+                    content: this.l10n.getConstant('saveButton'), cssClass: 'e-primary ' + EVENT_WINDOW_SAVE_BUTTON_CLASS,
+                    isPrimary: true, disabled: !this.parent.eventSettings.allowAdding || this.parent.readonly
+                },
+                click: this.eventSave.bind(this)
+            }, {
+                buttonModel: { cssClass: EVENT_WINDOW_CANCEL_BUTTON_CLASS, content: this.l10n.getConstant('cancelButton') },
+                click: this.dialogClose.bind(this)
+            }];
+    };
+    EventWindow.prototype.addEventHandlers = function () {
+        var backIcon = this.element.querySelector('.' + EVENT_WINDOW_BACK_ICON_CLASS);
+        var saveIcon = this.element.querySelector('.' + EVENT_WINDOW_SAVE_ICON_CLASS);
+        if (this.parent.isAdaptive && !isNullOrUndefined(backIcon) && !isNullOrUndefined(saveIcon)) {
+            EventHandler.add(backIcon, 'click', this.dialogClose, this);
+            EventHandler.add(saveIcon, 'click', this.eventSave, this);
+        }
+    };
     EventWindow.prototype.refresh = function () {
         this.destroy(true);
         this.renderEventWindow();
@@ -11880,6 +11924,23 @@ var EventWindow = /** @__PURE__ @class */ (function () {
             }
             data = eventObj;
         }
+        if (!isNullOrUndefined(this.parent.editorHeaderTemplate)) {
+            this.parent.resetTemplates(['editorHeaderTemplate']);
+            if (this.parent.isAdaptive && !this.parent.editorFooterTemplate) {
+                this.dialogObject.header = this.createAdaptiveHeaderElement(data);
+            }
+            else {
+                this.dialogObject.header = this.getDialogHeader(data);
+            }
+        }
+        if (!isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.parent.resetTemplates(['editorFooterTemplate']);
+            this.dialogObject.footerTemplate = this.getDialogFooter(data);
+        }
+        if (!isNullOrUndefined(this.parent.editorHeaderTemplate) || !isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.dialogObject.dataBind();
+            this.addEventHandlers();
+        }
         if (!isNullOrUndefined(this.parent.editorTemplate)) {
             this.renderFormElements(this.element.querySelector('.e-schedule-form'), data);
         }
@@ -11910,6 +11971,65 @@ var EventWindow = /** @__PURE__ @class */ (function () {
         this.dialogObject.dataBind();
         this.applyFormValidation();
     };
+    EventWindow.prototype.setDialogHeader = function () {
+        if (!isNullOrUndefined(this.parent.editorHeaderTemplate)) {
+            this.parent.resetTemplates(['editorHeaderTemplate']);
+            if (this.parent.isAdaptive && !this.parent.editorFooterTemplate) {
+                this.dialogObject.header = this.createAdaptiveHeaderElement();
+            }
+            else {
+                this.dialogObject.header = this.getDialogHeader();
+            }
+        }
+        else if (this.parent.isAdaptive) {
+            this.dialogObject.header = '<div class="e-title-header"><div class="e-back-icon e-icons"></div><div class="e-title-text">' +
+                this.l10n.getConstant('newEvent') + '</div><div class="e-save-icon e-icons"></div></div>';
+        }
+        else {
+            this.dialogObject.header = '<div class="e-title-text">' + this.l10n.getConstant('newEvent') + '</div>';
+        }
+        this.dialogObject.dataBind();
+        this.addEventHandlers();
+    };
+    EventWindow.prototype.setDialogFooter = function () {
+        if (!isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.parent.resetTemplates(['editorFooterTemplate']);
+            this.dialogObject.footerTemplate = this.getDialogFooter();
+        }
+        else if (!this.parent.isAdaptive && isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.renderDialogButtons(this.dialogObject);
+        }
+        else if (this.parent.isAdaptive && isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.dialogObject.footerTemplate = null;
+        }
+        this.dialogObject.dataBind();
+    };
+    EventWindow.prototype.createAdaptiveHeaderElement = function (data) {
+        var header = createElement('div', { className: 'e-title-header' });
+        var headerBackIcon = createElement('div', { className: 'e-back-icon e-icons' });
+        header.appendChild(headerBackIcon);
+        var headerTemplate = this.getDialogHeader(data);
+        header.appendChild(headerTemplate);
+        var headerSaveIcon = createElement('div', { className: 'e-save-icon e-icons' });
+        header.appendChild(headerSaveIcon);
+        return header;
+    };
+    EventWindow.prototype.getDialogHeader = function (args) {
+        var headerTemplate = [];
+        var headerTemplateId = this.parent.element.id + '_editorHeaderTemplate';
+        var temHeaderDiv = document.createElement('div');
+        headerTemplate = [].slice.call(this.parent.getEditorHeaderTemplate()(args || {}, this.parent, 'editorHeaderTemplate', headerTemplateId, false));
+        append(headerTemplate, temHeaderDiv);
+        return temHeaderDiv;
+    };
+    EventWindow.prototype.getDialogFooter = function (args) {
+        var footerTemplate = [];
+        var footerTemplateId = this.parent.element.id + '_editorFooterTemplate';
+        var temFooterDiv = document.createElement('div');
+        footerTemplate = [].slice.call(this.parent.getEditorFooterTemplate()(args || {}, this.parent, 'editorFooterTemplate', footerTemplateId, false));
+        append(footerTemplate, temFooterDiv);
+        return temFooterDiv;
+    };
     EventWindow.prototype.preventEventSave = function (e) {
         if (this.parent && !this.parent.allowKeyboardInteraction && e.code === 'Enter') {
             this.isEnterKey = true;
@@ -12183,9 +12303,9 @@ var EventWindow = /** @__PURE__ @class */ (function () {
         var resourceDiv = this.createDivElement(value + '-container' + ' ' + 'e-resources');
         var resourceInput = this.createInputElement(value + ' ' + EVENT_FIELD$1, fieldName);
         resourceDiv.appendChild(resourceInput);
-        function resourceTemplate(data) {
+        var resourceTemplate = function (data) {
             return "<div class=\"e-resource-template\"><div class=\"e-resource-color\" style=\"background-color:" + data[resourceData.colorField] + "\"></div><div class=\"e-resource-text\">" + data[resourceData.textField] + "</div></div>";
-        }
+        };
         initializeCSPTemplate(resourceTemplate, resourceData);
         if (resourceData.allowMultiple) {
             var listObj = new MultiSelect({
@@ -12538,7 +12658,9 @@ var EventWindow = /** @__PURE__ @class */ (function () {
             this.renderRepeatDialog();
         }
         this.element.querySelector('.' + FORM_CLASS).removeAttribute('data-id');
-        this.element.querySelector('.' + EVENT_WINDOW_TITLE_TEXT_CLASS).innerHTML = this.l10n.getConstant('newEvent');
+        if (isNullOrUndefined(this.parent.editorHeaderTemplate)) {
+            this.element.querySelector('.' + EVENT_WINDOW_TITLE_TEXT_CLASS).innerHTML = this.l10n.getConstant('newEvent');
+        }
         eventObj.Timezone = false;
         this.repeatStartDate = eventObj[this.fields.startTime];
         this.repeatRule = '';
@@ -12778,10 +12900,12 @@ var EventWindow = /** @__PURE__ @class */ (function () {
         if (!this.parent.eventSettings.allowEditing) {
             return;
         }
-        if (!this.parent.isAdaptive) {
+        if (!this.parent.isAdaptive && isNullOrUndefined(this.parent.editorFooterTemplate)) {
             removeClass([this.element.querySelector('.' + DELETE_EVENT_CLASS)], DISABLE_CLASS);
         }
-        this.element.querySelector('.' + EVENT_WINDOW_TITLE_TEXT_CLASS).innerHTML = this.l10n.getConstant('editEvent');
+        if (isNullOrUndefined(this.parent.editorHeaderTemplate)) {
+            this.element.querySelector('.' + EVENT_WINDOW_TITLE_TEXT_CLASS).innerHTML = this.l10n.getConstant('editEvent');
+        }
         this.element.querySelector('.' + FORM_CLASS).setAttribute('data-id', eventObj[this.fields.id].toString());
         if (isNullOrUndefined(this.parent.editorTemplate)) {
             eventObj = extend({}, eventObj, null, true);
@@ -13604,7 +13728,7 @@ var EventWindow = /** @__PURE__ @class */ (function () {
     };
     EventWindow.prototype.destroy = function (isIgnore) {
         if (this.parent && !this.parent.isDestroyed) {
-            this.parent.resetTemplates(['editorTemplate']);
+            this.parent.resetTemplates(['editorTemplate', 'editorHeaderTemplate', 'editorFooterTemplate']);
         }
         this.destroyComponents();
         if (this.recurrenceEditor) {
@@ -13648,6 +13772,7 @@ var EventWindow = /** @__PURE__ @class */ (function () {
     return EventWindow;
 }());
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Virtual Scroll
  */
@@ -13735,6 +13860,16 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
     };
     VirtualScroll.prototype.renderEvents = function () {
         this.setTabIndex();
+        var dynamicData = this.triggerScrollEvent(virtualScrollStop);
+        if (this.parent.activeViewOptions && this.parent.activeViewOptions.enableLazyLoading && this.parent.crudModule) {
+            if (dynamicData.length > 0) {
+                this.parent.crudModule.refreshProcessedData(true, dynamicData);
+                this.parent.hideSpinner();
+                return;
+            }
+            this.parent.crudModule.refreshDataManager();
+            return;
+        }
         if (this.parent.crudModule) {
             this.parent.crudModule.refreshProcessedData(true);
         }
@@ -13771,7 +13906,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                 resCollection = this.downScroll(conWrap, firstTDIndex);
             }
             if (!isNullOrUndefined(resCollection) && resCollection.length > 0) {
-                this.parent.showSpinner();
+                this.triggerScrollEvent(virtualScrollStart);
                 var selectedEle = this.parent.getSelectedCells();
                 this.focusedEle = selectedEle[selectedEle.length - 1] || this.focusedEle;
                 this.updateContent(resWrap, conWrap, eventWrap, resCollection);
@@ -13799,7 +13934,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
                 this.parent.resourceBase.expandedResources[0] !== resCollection[0] ||
                 this.parent.resourceBase.expandedResources[this.parent.resourceBase.expandedResources.length - 1] !==
                     resCollection[resCollection.length - 1]) {
-                this.parent.showSpinner();
+                this.triggerScrollEvent(virtualScrollStart);
                 var colLevels = this.parent.activeView.colLevels.slice(0);
                 this.updateHorizontalContent(conWrap, resCollection);
                 setStyleAttribute(conWrap.querySelector('table'), { transform: "translateX(" + this.translateY + "px)" });
@@ -13812,6 +13947,30 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
             this.timeValue = window.setTimeout(function () { _this.renderEvents(); }, 250);
         }
     };
+    VirtualScroll.prototype.triggerScrollEvent = function (action) {
+        var _this = this;
+        var dynamicData = [];
+        if (!this.parent.activeView) {
+            return dynamicData;
+        }
+        var eventArgs = {
+            startDate: this.parent.activeView.startDate(),
+            endDate: this.parent.activeView.endDate(),
+            startIndex: this.parent.resourceBase.renderedResources[0].groupIndex,
+            endIndex: this.parent.resourceBase.renderedResources[this.parent.resourceBase.renderedResources.length - 1].groupIndex,
+            resourceData: this.parent.resourceBase.renderedResources.map(function (x) { return x.resourceData; }),
+            name: action
+        };
+        this.parent.trigger(action, eventArgs, function (args) {
+            if (action === virtualScrollStart) {
+                _this.parent.showSpinner();
+            }
+            else if (action === virtualScrollStop && !isNullOrUndefined(args.eventData) && args.eventData.length > 0) {
+                dynamicData = args.eventData;
+            }
+        });
+        return dynamicData;
+    };
     VirtualScroll.prototype.upScroll = function (conWrap, firstTDIndex) {
         var index = 0;
         index = (~~(conWrap.scrollTop / this.itemSize) + Math.ceil(conWrap.clientHeight / this.itemSize)) - this.renderedLength;
@@ -14408,7 +14567,7 @@ var Crud = /** @__PURE__ @class */ (function () {
         }
         this.parent.trigger(actionFailure, { error: e }, function () { return _this.parent.hideSpinner(); });
     };
-    Crud.prototype.refreshProcessedData = function (isVirtualScrollAction) {
+    Crud.prototype.refreshProcessedData = function (isVirtualScrollAction, dynamicEvents) {
         if (isVirtualScrollAction === void 0) { isVirtualScrollAction = false; }
         if (this.parent.dragAndDropModule) {
             this.parent.dragAndDropModule.actionObj.action = '';
@@ -14432,7 +14591,7 @@ var Crud = /** @__PURE__ @class */ (function () {
             }
         }
         if (isVirtualScrollAction) {
-            this.parent.notify(dataReady, { processedData: this.parent.eventsProcessed });
+            this.parent.notify(dataReady, { processedData: dynamicEvents ? this.parent.eventBase.processData(dynamicEvents) : this.parent.eventsProcessed });
             return;
         }
         var eventsData = this.parent.eventsData || [];
@@ -14598,6 +14757,8 @@ var Crud = /** @__PURE__ @class */ (function () {
                             editParams.changedRecords.push(event_4);
                             promise = _this.parent.dataModule.dataManager.update(fields.id, event_4, _this.getTable(), _this.getQuery());
                         }
+                        var cloneEvent = extend({}, saveArgs.changedRecords[saveArgs.changedRecords.length - 1], null, true);
+                        _this.parent.eventBase.selectWorkCellByTime([_this.parent.eventBase.processTimezone(cloneEvent)]);
                         var crudArgs = {
                             requestType: 'eventChanged', cancel: false,
                             data: saveArgs.changedRecords, promise: promise, editParams: editParams
@@ -14733,7 +14894,8 @@ var Crud = /** @__PURE__ @class */ (function () {
                     _loop_2(a, count);
                 }
                 var promise = _this.parent.dataModule.dataManager.saveChanges(editParams, fields.id, _this.getTable(), _this.getQuery());
-                _this.parent.eventBase.selectWorkCellByTime(occurrenceArgs.changedRecords);
+                var cloneEvent = extend({}, occurrenceArgs.changedRecords[occurrenceArgs.changedRecords.length - 1], null, true);
+                _this.parent.eventBase.selectWorkCellByTime(action === 'EditOccurrence' ? [_this.parent.eventBase.processTimezone(cloneEvent)] : [cloneEvent]);
                 var crudArgs = {
                     requestType: action === 'EditOccurrence' ? 'eventChanged' : 'eventRemoved',
                     cancel: false, data: isDeletedRecords ? occurrenceArgs.deletedRecords : occurrenceArgs.changedRecords,
@@ -14810,7 +14972,8 @@ var Crud = /** @__PURE__ @class */ (function () {
                     _loop_3(a, count);
                 }
                 var promise = _this.parent.dataModule.dataManager.saveChanges(editParams, fields_1.id, _this.getTable(), _this.getQuery());
-                _this.parent.eventBase.selectWorkCellByTime(followArgs.changedRecords);
+                var cloneEvent = extend({}, followArgs.changedRecords[followArgs.changedRecords.length - 1], null, true);
+                _this.parent.eventBase.selectWorkCellByTime(action === 'EditFollowingEvents' ? [_this.parent.eventBase.processTimezone(cloneEvent)] : [cloneEvent]);
                 var crudArgs = {
                     requestType: action === 'EditFollowingEvents' ? 'eventChanged' : 'eventRemoved',
                     cancel: false, data: followArgs.changedRecords, promise: promise, editParams: editParams
@@ -14878,7 +15041,8 @@ var Crud = /** @__PURE__ @class */ (function () {
                     _loop_4(a, count);
                 }
                 var promise = _this.parent.dataModule.dataManager.saveChanges(editParams, fields_2.id, _this.getTable(), _this.getQuery());
-                _this.parent.eventBase.selectWorkCellByTime(seriesArgs.changedRecords);
+                var cloneEvent = extend({}, seriesArgs.changedRecords[seriesArgs.changedRecords.length - 1], null, true);
+                _this.parent.eventBase.selectWorkCellByTime(action === 'EditSeries' ? [_this.parent.eventBase.processTimezone(cloneEvent)] : [cloneEvent]);
                 var crudArgs = {
                     requestType: action === 'EditSeries' ? 'eventChanged' : 'eventRemoved',
                     cancel: false, data: isDeletedRecords ? seriesArgs.deletedRecords : seriesArgs.changedRecords,
@@ -14939,6 +15103,7 @@ var Crud = /** @__PURE__ @class */ (function () {
                     _loop_5(a, count);
                 }
                 var promise = _this.parent.dataModule.dataManager.saveChanges(editParams, fields_3.id, _this.getTable(), _this.getQuery());
+                _this.parent.eventBase.selectWorkCellByTime(deleteArgs.deletedRecords);
                 var crudArgs = {
                     requestType: 'eventRemoved', cancel: false, data: deleteArgs.deletedRecords, promise: promise, editParams: editParams
                 };
@@ -14982,6 +15147,8 @@ var Crud = /** @__PURE__ @class */ (function () {
                     }
                 }
                 var promise = _this.parent.dataModule.dataManager.saveChanges(editParams, fields.id, _this.getTable(), _this.getQuery());
+                var cloneEvent = extend({}, editArgs.changedRecords[editArgs.changedRecords.length - 1], null, true);
+                _this.parent.eventBase.selectWorkCellByTime([_this.parent.eventBase.processTimezone(cloneEvent)]);
                 var crudArgs = { requestType: 'eventChanged', cancel: false, data: editArgs.changedRecords, promise: promise, editParams: editParams };
                 _this.refreshData(crudArgs);
             }
@@ -15875,6 +16042,7 @@ var ResourceBase = /** @__PURE__ @class */ (function () {
             nodeClicked: this.resourceClick.bind(this),
             created: this.resourceTreeCreated.bind(this)
         });
+        this.treeViewObj.root = this.parent.root ? this.parent.root : this.parent;
         this.treeViewObj.appendTo(resourceTree);
         this.treeViewObj.expandAll();
         this.treePopup = new Popup(treeWrapper, {
@@ -16802,6 +16970,13 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
             this.renderElements(isSetModel);
         }
     };
+    Schedule.prototype.destroyEditorWindow = function () {
+        if (this.eventWindow) {
+            this.eventWindow.destroy();
+            this.eventWindow = null;
+        }
+        this.eventWindow = new EventWindow(this);
+    };
     /**
      * Method to render the layout elements
      *
@@ -16971,7 +17146,8 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
             headerRows: this.headerRows,
             orientation: 'Horizontal',
             numberOfWeeks: 0,
-            displayDate: null
+            displayDate: null,
+            enableLazyLoading: false
         };
         var viewOptions = this.viewCollections[this.viewIndex];
         var viewsData = extend(scheduleOptions, viewOptions, undefined, true);
@@ -16982,6 +17158,11 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
             viewsData.displayDate = viewsData.displayDate instanceof Date ? new Date(viewsData.displayDate.getTime()) :
                 new Date(viewsData.displayDate);
         }
+        if (viewsData.enableLazyLoading && !isNullOrUndefined(viewsData.group.resources) && viewsData.group.resources.length > 0 &&
+            (['Agenda', 'MonthAgenda', 'Year', 'TimelineYear'].indexOf(viewsData.option) === -1 ||
+                (viewsData.option === 'TimelineYear' && viewsData.orientation === 'Vertical'))) {
+            viewsData.allowVirtualScrolling = true;
+        }
         return viewsData;
     };
     Schedule.prototype.initializeDataModule = function () {
@@ -17043,6 +17224,8 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
         this.headerTooltipTemplateFn = this.templateParser(this.activeViewOptions.group.headerTooltipTemplate);
         this.eventTooltipTemplateFn = this.templateParser(this.eventSettings.tooltipTemplate);
         this.editorTemplateFn = this.templateParser(this.editorTemplate);
+        this.editorHeaderTemplateFn = this.templateParser(this.editorHeaderTemplate);
+        this.editorFooterTemplateFn = this.templateParser(this.editorFooterTemplate);
         this.quickInfoTemplatesHeaderFn = this.templateParser(this.quickInfoTemplates.header);
         this.quickInfoTemplatesContentFn = this.templateParser(this.quickInfoTemplates.content);
         this.quickInfoTemplatesFooterFn = this.templateParser(this.quickInfoTemplates.footer);
@@ -17684,6 +17867,24 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
     Schedule.prototype.getEditorTemplate = function () {
         return this.editorTemplateFn;
     };
+    /**
+     * Method to process editor header template
+     *
+     * @returns {CallbackFunction} Returns the callback function
+     * @private
+     */
+    Schedule.prototype.getEditorHeaderTemplate = function () {
+        return this.editorHeaderTemplateFn;
+    };
+    /**
+     * Method to process editor footer template
+     *
+     * @returns {CallbackFunction} Returns the callback function
+     * @private
+     */
+    Schedule.prototype.getEditorFooterTemplate = function () {
+        return this.editorFooterTemplateFn;
+    };
     /**
      * Method to process quick info header template
      *
@@ -18201,6 +18402,22 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
                     this.eventWindow.setDialogContent();
                 }
                 break;
+            case 'editorHeaderTemplate':
+                if (!isNullOrUndefined(this.editorHeaderTemplate)) {
+                    this.editorHeaderTemplateFn = this.templateParser(this.editorHeaderTemplate);
+                }
+                if (this.eventWindow) {
+                    this.eventWindow.setDialogHeader();
+                }
+                break;
+            case 'editorFooterTemplate':
+                if (!isNullOrUndefined(this.editorFooterTemplate)) {
+                    this.editorFooterTemplateFn = this.templateParser(this.editorFooterTemplate);
+                }
+                if (this.eventWindow) {
+                    this.eventWindow.setDialogFooter();
+                }
+                break;
             case 'quickInfoTemplates':
                 if (this.quickInfoTemplates.header) {
                     this.quickInfoTemplatesHeaderFn = this.templateParser(this.quickInfoTemplates.header);
@@ -18971,13 +19188,17 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
                 this.quickInfoTemplatesFooterFn = this.templateParser(this.quickInfoTemplates.footer);
                 break;
             case 'editorTemplate':
-                if (this.eventWindow) {
-                    this.eventWindow.destroy();
-                    this.eventWindow = null;
-                }
-                this.eventWindow = new EventWindow(this);
+                this.destroyEditorWindow();
                 this.editorTemplateFn = this.templateParser(this.editorTemplate);
                 break;
+            case 'editorHeaderTemplate':
+                this.destroyEditorWindow();
+                this.editorHeaderTemplateFn = this.templateParser(this.editorHeaderTemplate);
+                break;
+            case 'editorFooterTemplate':
+                this.destroyEditorWindow();
+                this.editorFooterTemplateFn = this.templateParser(this.editorFooterTemplate);
+                break;
             case 'tooltipTemplate':
             case 'headerTooltipTemplate':
                 if (this.eventTooltip) {
@@ -19459,6 +19680,12 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Property()
     ], Schedule.prototype, "editorTemplate", void 0);
+    __decorate([
+        Property()
+    ], Schedule.prototype, "editorHeaderTemplate", void 0);
+    __decorate([
+        Property()
+    ], Schedule.prototype, "editorFooterTemplate", void 0);
     __decorate([
         Complex({}, QuickInfoTemplates)
     ], Schedule.prototype, "quickInfoTemplates", void 0);
@@ -19570,6 +19797,12 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Event()
     ], Schedule.prototype, "resizeStop", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "virtualScrollStart", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "virtualScrollStop", void 0);
     __decorate([
         Event()
     ], Schedule.prototype, "dataBound", void 0);
@@ -28022,5 +28255,5 @@ var Print = /** @__PURE__ @class */ (function () {
  * Export Schedule components
  */
 
-export { Schedule, cellClick, cellDoubleClick, moreEventsClick, select, hover, actionBegin, actionComplete, actionFailure, navigating, renderCell, eventClick, eventRendered, dataBinding, dataBound, popupOpen, popupClose, dragStart, drag, dragStop, resizeStart, resizing, resizeStop, inlineClick, cellSelect, initialLoad, initialEnd, print$1 as print, dataReady, eventsLoaded, contentReady, scroll, virtualScroll, scrollUiUpdate, uiUpdate, documentClick, cellMouseDown, WEEK_LENGTH, DEFAULT_WEEKS, MS_PER_DAY, MS_PER_MINUTE, getElementHeightFromClass, getElementWidthFromClass, getTranslateY, getTranslateX, getWeekFirstDate, getWeekLastDate, firstDateOfMonth, lastDateOfMonth, getWeekNumber, getWeekMiddleDate, setTime, resetTime, getDateInMs, getDateCount, addDays, addMonths, addYears, getStartEndHours, getMaxDays, getDaysCount, getDateFromString, getScrollBarWidth, resetScrollbarWidth, findIndexInData, getOuterHeight, removeChildren, isDaylightSavingTime, getUniversalTime, isMobile, isIPadDevice, capitalizeFirstWord, Resize, DragAndDrop, HeaderRenderer, ViewBase, Day, Week, WorkWeek, Month, Year, Agenda, MonthAgenda, TimelineViews, TimelineMonth, TimelineYear, Timezone, timezoneData, ICalendarExport, ICalendarImport, ExcelExport, Print, RecurrenceEditor, generateSummary, generate, getDateFromRecurrenceDateString, extractObjectFromRule, getCalendarUtil, getRecurrenceStringFromDate, Gregorian, Islamic };
+export { Schedule, cellClick, cellDoubleClick, moreEventsClick, select, hover, actionBegin, actionComplete, actionFailure, navigating, renderCell, eventClick, eventRendered, dataBinding, dataBound, popupOpen, popupClose, dragStart, drag, dragStop, resizeStart, resizing, resizeStop, inlineClick, cellSelect, virtualScrollStart, virtualScrollStop, initialLoad, initialEnd, print$1 as print, dataReady, eventsLoaded, contentReady, scroll, virtualScroll, scrollUiUpdate, uiUpdate, documentClick, cellMouseDown, WEEK_LENGTH, DEFAULT_WEEKS, MS_PER_DAY, MS_PER_MINUTE, getElementHeightFromClass, getElementWidthFromClass, getTranslateY, getTranslateX, getWeekFirstDate, getWeekLastDate, firstDateOfMonth, lastDateOfMonth, getWeekNumber, getWeekMiddleDate, setTime, resetTime, getDateInMs, getDateCount, addDays, addMonths, addYears, getStartEndHours, getMaxDays, getDaysCount, getDateFromString, getScrollBarWidth, resetScrollbarWidth, findIndexInData, getOuterHeight, removeChildren, isDaylightSavingTime, getUniversalTime, isMobile, isIPadDevice, capitalizeFirstWord, Resize, DragAndDrop, HeaderRenderer, ViewBase, Day, Week, WorkWeek, Month, Year, Agenda, MonthAgenda, TimelineViews, TimelineMonth, TimelineYear, Timezone, timezoneData, ICalendarExport, ICalendarImport, ExcelExport, Print, RecurrenceEditor, generateSummary, generate, getDateFromRecurrenceDateString, extractObjectFromRule, getCalendarUtil, getRecurrenceStringFromDate, Gregorian, Islamic };
 //# sourceMappingURL=ej2-schedule.es5.js.map