@syncfusion/ej2-schedule 22.2.12 → 23.1.36

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

@@ -60,6 +60,10 @@ const resizeStop = 'resizeStop';
 const inlineClick = 'inlineClick';
 /** @private */
 const cellSelect = 'cellSelect';
+/** @private */
+const virtualScrollStart = 'virtualScrollStart';
+/** @private */
+const virtualScrollStop = 'virtualScrollStop';
 /**
  * Specifies schedule internal events
  */
@@ -552,7 +556,7 @@ const WORK_HOURS_CLASS = 'e-work-hours';
 /** @private */
 const POPUP_OPEN = 'e-popup-open';
 /** @private */
-
+const POPUP_CLOSE = 'e-popup-close';
 /** @private */
 const DATE_HEADER_WRAP_CLASS = 'e-date-header-wrap';
 /** @private */
@@ -2066,8 +2070,7 @@ class KeyboardInteraction {
         const queryStr = '.' + WORK_CELLS_CLASS + ',.' + ALLDAY_CELLS_CLASS + ',.' + HEADER_CELLS_CLASS;
         let target = closest(e.target, queryStr);
         const 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)) {
@@ -3044,15 +3047,35 @@ class Data {
      */
     generateQuery(startDate, endDate) {
         const query = this.query.clone();
-        if (this.parent && this.parent.eventSettings.includeFiltersInQuery && startDate && endDate) {
-            const dateQuery = this.getStartEndQuery(startDate, endDate);
-            const 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) {
+                const resIdCollection = [];
+                this.parent.resourceBase.resourceCollection.forEach(() => resIdCollection.push([]));
+                this.parent.resourceBase.renderedResources.forEach((resource) => {
+                    resIdCollection.forEach((resId, index) => {
+                        const groupId = resource.groupOrder[parseInt(index.toString(), 10)];
+                        if (groupId && resId.indexOf(groupId) < 0) {
+                            resId.push(groupId);
+                        }
+                    });
+                });
+                this.parent.resourceBase.resourceCollection.forEach((resource, index) => {
+                    query.addParams(resource.field, resIdCollection[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) {
+                const dateQuery = this.getStartEndQuery(startDate, endDate);
+                const 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;
@@ -9167,6 +9190,9 @@ class QuickPopups {
                         'aria-label': this.parent.getAnnouncementString(eventData)
                     }
                 });
+                if (eventData[fields.isReadonly]) {
+                    addClass([appointmentElement], 'e-read-only');
+                }
                 let templateElement;
                 if (!isNullOrUndefined(this.parent.activeViewOptions.eventTemplate)) {
                     const tempId = this.parent.element.id + '_' + this.parent.activeViewOptions.eventTemplateName + 'eventTemplate';
@@ -10258,7 +10284,7 @@ class EventTooltip {
             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
         });
@@ -10366,7 +10392,11 @@ class EventTooltip {
         }
         this.parent.renderTemplates();
     }
-    onTooltipClose() {
+    onTooltipClose(args) {
+        if (args.element) {
+            removeClass([args.element], POPUP_OPEN);
+            addClass([args.element], POPUP_CLOSE);
+        }
         this.parent.resetTemplates(['tooltipTemplate', 'headerTooltipTemplate']);
     }
     setContent(content) {
@@ -11538,40 +11568,54 @@ class EventWindow {
         };
         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();
     }
+    renderDialogButtons(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)
+            }];
+    }
+    addEventHandlers() {
+        const backIcon = this.element.querySelector('.' + EVENT_WINDOW_BACK_ICON_CLASS);
+        const 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);
+        }
+    }
     refresh() {
         this.destroy(true);
         this.renderEventWindow();
@@ -11615,6 +11659,23 @@ class EventWindow {
             }
             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);
         }
@@ -11645,6 +11706,65 @@ class EventWindow {
         this.dialogObject.dataBind();
         this.applyFormValidation();
     }
+    setDialogHeader() {
+        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();
+    }
+    setDialogFooter() {
+        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();
+    }
+    createAdaptiveHeaderElement(data) {
+        const header = createElement('div', { className: 'e-title-header' });
+        const headerBackIcon = createElement('div', { className: 'e-back-icon e-icons' });
+        header.appendChild(headerBackIcon);
+        const headerTemplate = this.getDialogHeader(data);
+        header.appendChild(headerTemplate);
+        const headerSaveIcon = createElement('div', { className: 'e-save-icon e-icons' });
+        header.appendChild(headerSaveIcon);
+        return header;
+    }
+    getDialogHeader(args) {
+        let headerTemplate = [];
+        const headerTemplateId = this.parent.element.id + '_editorHeaderTemplate';
+        const temHeaderDiv = document.createElement('div');
+        headerTemplate = [].slice.call(this.parent.getEditorHeaderTemplate()(args || {}, this.parent, 'editorHeaderTemplate', headerTemplateId, false));
+        append(headerTemplate, temHeaderDiv);
+        return temHeaderDiv;
+    }
+    getDialogFooter(args) {
+        let footerTemplate = [];
+        const footerTemplateId = this.parent.element.id + '_editorFooterTemplate';
+        const temFooterDiv = document.createElement('div');
+        footerTemplate = [].slice.call(this.parent.getEditorFooterTemplate()(args || {}, this.parent, 'editorFooterTemplate', footerTemplateId, false));
+        append(footerTemplate, temFooterDiv);
+        return temFooterDiv;
+    }
     preventEventSave(e) {
         if (this.parent && !this.parent.allowKeyboardInteraction && e.code === 'Enter') {
             this.isEnterKey = true;
@@ -11912,9 +12032,9 @@ class EventWindow {
         const resourceDiv = this.createDivElement(value + '-container' + ' ' + 'e-resources');
         const resourceInput = this.createInputElement(value + ' ' + EVENT_FIELD$1, fieldName);
         resourceDiv.appendChild(resourceInput);
-        function resourceTemplate(data) {
+        const 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) {
             const listObj = new MultiSelect({
@@ -12258,7 +12378,9 @@ class EventWindow {
             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 = '';
@@ -12495,10 +12617,12 @@ class EventWindow {
         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);
@@ -13300,7 +13424,7 @@ class EventWindow {
     }
     destroy(isIgnore) {
         if (this.parent && !this.parent.isDestroyed) {
-            this.parent.resetTemplates(['editorTemplate']);
+            this.parent.resetTemplates(['editorTemplate', 'editorHeaderTemplate', 'editorFooterTemplate']);
         }
         this.destroyComponents();
         if (this.recurrenceEditor) {
@@ -13343,6 +13467,7 @@ class EventWindow {
     }
 }
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Virtual Scroll
  */
@@ -13430,6 +13555,16 @@ class VirtualScroll {
     }
     renderEvents() {
         this.setTabIndex();
+        const 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);
         }
@@ -13465,7 +13600,7 @@ class VirtualScroll {
                 resCollection = this.downScroll(conWrap, firstTDIndex);
             }
             if (!isNullOrUndefined(resCollection) && resCollection.length > 0) {
-                this.parent.showSpinner();
+                this.triggerScrollEvent(virtualScrollStart);
                 const selectedEle = this.parent.getSelectedCells();
                 this.focusedEle = selectedEle[selectedEle.length - 1] || this.focusedEle;
                 this.updateContent(resWrap, conWrap, eventWrap, resCollection);
@@ -13492,7 +13627,7 @@ class VirtualScroll {
                 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);
                 const colLevels = this.parent.activeView.colLevels.slice(0);
                 this.updateHorizontalContent(conWrap, resCollection);
                 setStyleAttribute(conWrap.querySelector('table'), { transform: `translateX(${this.translateY}px)` });
@@ -13505,6 +13640,29 @@ class VirtualScroll {
             this.timeValue = window.setTimeout(() => { this.renderEvents(); }, 250);
         }
     }
+    triggerScrollEvent(action) {
+        let dynamicData = [];
+        if (!this.parent.activeView) {
+            return dynamicData;
+        }
+        const 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((x) => x.resourceData),
+            name: action
+        };
+        this.parent.trigger(action, eventArgs, (args) => {
+            if (action === virtualScrollStart) {
+                this.parent.showSpinner();
+            }
+            else if (action === virtualScrollStop && !isNullOrUndefined(args.eventData) && args.eventData.length > 0) {
+                dynamicData = args.eventData;
+            }
+        });
+        return dynamicData;
+    }
     upScroll(conWrap, firstTDIndex) {
         let index = 0;
         index = (~~(conWrap.scrollTop / this.itemSize) + Math.ceil(conWrap.clientHeight / this.itemSize)) - this.renderedLength;
@@ -14019,7 +14177,7 @@ class Crud {
         }
         this.parent.trigger(actionFailure, { error: e }, () => this.parent.hideSpinner());
     }
-    refreshProcessedData(isVirtualScrollAction = false) {
+    refreshProcessedData(isVirtualScrollAction = false, dynamicEvents) {
         if (this.parent.dragAndDropModule) {
             this.parent.dragAndDropModule.actionObj.action = '';
             removeClass([this.parent.element], 'e-event-action');
@@ -14042,7 +14200,7 @@ class Crud {
             }
         }
         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;
         }
         const eventsData = this.parent.eventsData || [];
@@ -14198,6 +14356,8 @@ class Crud {
                             editParams.changedRecords.push(event);
                             promise = this.parent.dataModule.dataManager.update(fields.id, event, this.getTable(), this.getQuery());
                         }
+                        const cloneEvent = extend({}, saveArgs.changedRecords[saveArgs.changedRecords.length - 1], null, true);
+                        this.parent.eventBase.selectWorkCellByTime([this.parent.eventBase.processTimezone(cloneEvent)]);
                         const crudArgs = {
                             requestType: 'eventChanged', cancel: false,
                             data: saveArgs.changedRecords, promise: promise, editParams: editParams
@@ -14325,7 +14485,8 @@ class Crud {
                     }
                 }
                 const promise = this.parent.dataModule.dataManager.saveChanges(editParams, fields.id, this.getTable(), this.getQuery());
-                this.parent.eventBase.selectWorkCellByTime(occurrenceArgs.changedRecords);
+                const cloneEvent = extend({}, occurrenceArgs.changedRecords[occurrenceArgs.changedRecords.length - 1], null, true);
+                this.parent.eventBase.selectWorkCellByTime(action === 'EditOccurrence' ? [this.parent.eventBase.processTimezone(cloneEvent)] : [cloneEvent]);
                 const crudArgs = {
                     requestType: action === 'EditOccurrence' ? 'eventChanged' : 'eventRemoved',
                     cancel: false, data: isDeletedRecords ? occurrenceArgs.deletedRecords : occurrenceArgs.changedRecords,
@@ -14395,7 +14556,8 @@ class Crud {
                     }
                 }
                 const promise = this.parent.dataModule.dataManager.saveChanges(editParams, fields.id, this.getTable(), this.getQuery());
-                this.parent.eventBase.selectWorkCellByTime(followArgs.changedRecords);
+                const cloneEvent = extend({}, followArgs.changedRecords[followArgs.changedRecords.length - 1], null, true);
+                this.parent.eventBase.selectWorkCellByTime(action === 'EditFollowingEvents' ? [this.parent.eventBase.processTimezone(cloneEvent)] : [cloneEvent]);
                 const crudArgs = {
                     requestType: action === 'EditFollowingEvents' ? 'eventChanged' : 'eventRemoved',
                     cancel: false, data: followArgs.changedRecords, promise: promise, editParams: editParams
@@ -14456,7 +14618,8 @@ class Crud {
                     }
                 }
                 const promise = this.parent.dataModule.dataManager.saveChanges(editParams, fields.id, this.getTable(), this.getQuery());
-                this.parent.eventBase.selectWorkCellByTime(seriesArgs.changedRecords);
+                const cloneEvent = extend({}, seriesArgs.changedRecords[seriesArgs.changedRecords.length - 1], null, true);
+                this.parent.eventBase.selectWorkCellByTime(action === 'EditSeries' ? [this.parent.eventBase.processTimezone(cloneEvent)] : [cloneEvent]);
                 const crudArgs = {
                     requestType: action === 'EditSeries' ? 'eventChanged' : 'eventRemoved',
                     cancel: false, data: isDeletedRecords ? seriesArgs.deletedRecords : seriesArgs.changedRecords,
@@ -14510,6 +14673,7 @@ class Crud {
                     }
                 }
                 const promise = this.parent.dataModule.dataManager.saveChanges(editParams, fields.id, this.getTable(), this.getQuery());
+                this.parent.eventBase.selectWorkCellByTime(deleteArgs.deletedRecords);
                 const crudArgs = {
                     requestType: 'eventRemoved', cancel: false, data: deleteArgs.deletedRecords, promise: promise, editParams: editParams
                 };
@@ -14550,6 +14714,8 @@ class Crud {
                     }
                 }
                 const promise = this.parent.dataModule.dataManager.saveChanges(editParams, fields.id, this.getTable(), this.getQuery());
+                const cloneEvent = extend({}, editArgs.changedRecords[editArgs.changedRecords.length - 1], null, true);
+                this.parent.eventBase.selectWorkCellByTime([this.parent.eventBase.processTimezone(cloneEvent)]);
                 const crudArgs = { requestType: 'eventChanged', cancel: false, data: editArgs.changedRecords, promise: promise, editParams: editParams };
                 this.refreshData(crudArgs);
             }
@@ -15344,6 +15510,7 @@ class ResourceBase {
             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, {
@@ -16188,6 +16355,13 @@ let Schedule = class Schedule extends Component {
             this.renderElements(isSetModel);
         }
     }
+    destroyEditorWindow() {
+        if (this.eventWindow) {
+            this.eventWindow.destroy();
+            this.eventWindow = null;
+        }
+        this.eventWindow = new EventWindow(this);
+    }
     /**
      * Method to render the layout elements
      *
@@ -16354,7 +16528,8 @@ let Schedule = class Schedule extends Component {
             headerRows: this.headerRows,
             orientation: 'Horizontal',
             numberOfWeeks: 0,
-            displayDate: null
+            displayDate: null,
+            enableLazyLoading: false
         };
         const viewOptions = this.viewCollections[this.viewIndex];
         const viewsData = extend(scheduleOptions, viewOptions, undefined, true);
@@ -16365,6 +16540,11 @@ let Schedule = class Schedule extends Component {
             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;
     }
     initializeDataModule() {
@@ -16426,6 +16606,8 @@ let Schedule = class Schedule extends Component {
         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);
@@ -17059,6 +17241,24 @@ let Schedule = class Schedule extends Component {
     getEditorTemplate() {
         return this.editorTemplateFn;
     }
+    /**
+     * Method to process editor header template
+     *
+     * @returns {CallbackFunction} Returns the callback function
+     * @private
+     */
+    getEditorHeaderTemplate() {
+        return this.editorHeaderTemplateFn;
+    }
+    /**
+     * Method to process editor footer template
+     *
+     * @returns {CallbackFunction} Returns the callback function
+     * @private
+     */
+    getEditorFooterTemplate() {
+        return this.editorFooterTemplateFn;
+    }
     /**
      * Method to process quick info header template
      *
@@ -17575,6 +17775,22 @@ let Schedule = class Schedule extends Component {
                     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);
@@ -18340,13 +18556,17 @@ let Schedule = class Schedule extends Component {
                 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) {
@@ -18820,6 +19040,12 @@ __decorate([
 __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);
@@ -18931,6 +19157,12 @@ __decorate([
 __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);
@@ -26982,5 +27214,5 @@ class Print {
  * 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.es2015.js.map