@syncfusion/ej2-schedule 22.2.11 → 23.1.36

package/dist/global/index.d.ts

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

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-schedule@*",
-  "_id": "@syncfusion/ej2-schedule@22.2.8",
+  "_id": "@syncfusion/ej2-schedule@22.5.7",
   "_inBundle": false,
-  "_integrity": "sha512-Kx0CfzH9nk0XZaYgJGZpQXWGCWARyl7WB9pF2s8F7U749gjOQ/9T/+jYXY/9ViAcoH0YKgy1LsvCy1fl2Pa6cQ==",
+  "_integrity": "sha512-OkyacVmb2OC8LhOoRaL2gksKeFKVUc/KR1DbSjBkJmpZ05BDdYH5Oxcm8V2z7E5GV2fzVwfHDUjbHO60A8CMlQ==",
   "_location": "/@syncfusion/ej2-schedule",
   "_phantomChildren": {},
   "_requested": {
@@ -23,10 +23,10 @@
     "/@syncfusion/ej2-react-schedule",
     "/@syncfusion/ej2-vue-schedule"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-schedule/-/ej2-schedule-22.2.8.tgz",
-  "_shasum": "d4abd42dfb2c617501dbb6a65a870fd9e915774e",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-schedule/-/ej2-schedule-22.5.7.tgz",
+  "_shasum": "67afb25d998973aec9b52b4ed0948d850175c558",
   "_spec": "@syncfusion/ej2-schedule@*",
-  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -35,16 +35,16 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.2.10",
-    "@syncfusion/ej2-buttons": "~22.2.9",
-    "@syncfusion/ej2-calendars": "~22.2.11",
-    "@syncfusion/ej2-data": "~22.2.5",
-    "@syncfusion/ej2-dropdowns": "~22.2.11",
-    "@syncfusion/ej2-excel-export": "~22.2.5",
-    "@syncfusion/ej2-inputs": "~22.2.9",
-    "@syncfusion/ej2-lists": "~22.2.11",
-    "@syncfusion/ej2-navigations": "~22.2.11",
-    "@syncfusion/ej2-popups": "~22.2.11"
+    "@syncfusion/ej2-base": "~23.1.36",
+    "@syncfusion/ej2-buttons": "~23.1.36",
+    "@syncfusion/ej2-calendars": "~23.1.36",
+    "@syncfusion/ej2-data": "~23.1.36",
+    "@syncfusion/ej2-dropdowns": "~23.1.36",
+    "@syncfusion/ej2-excel-export": "~23.1.36",
+    "@syncfusion/ej2-inputs": "~23.1.36",
+    "@syncfusion/ej2-lists": "~23.1.36",
+    "@syncfusion/ej2-navigations": "~23.1.36",
+    "@syncfusion/ej2-popups": "~23.1.36"
   },
   "deprecated": false,
   "description": "Flexible scheduling library with more built-in features and enhanced customization options similar to outlook and google calendar, allowing the users to plan and manage their appointments with efficient data-binding support.",
@@ -73,6 +73,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "22.2.11",
+  "version": "23.1.36",
   "sideEffects": false
 }

package/src/recurrence-editor/date-generator.d.ts

@@ -23,11 +23,10 @@ export declare function generateSummary(rule: string, localeObject: L10n, locale
  * @param {number} maximumCount Accepts the maximum number count to generate date collections
  * @param {Date} viewDate Accepts the current date instead of start date
  * @param {CalendarType} calendarMode Accepts the calendar type
- * @param {string} oldTimezone Accepts the timezone name
  * @param {string} newTimezone Accepts the timezone name
  * @returns {number[]} Returns the collection of dates
  */
-export declare function generate(startDate: Date, rule: string, excludeDate: string, startDayOfWeek: number, maximumCount?: number, viewDate?: Date, calendarMode?: CalendarType, oldTimezone?: string, newTimezone?: string): number[];
+export declare function generate(startDate: Date, rule: string, excludeDate: string, startDayOfWeek: number, maximumCount?: number, viewDate?: Date, calendarMode?: CalendarType, newTimezone?: string): number[];
 /**
  * Generate date object from given date string
  *

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

@@ -103,15 +103,13 @@ function getMonthSummary(ruleObject, cldrObj, localeObj) {
  * @param {number} maximumCount Accepts the maximum number count to generate date collections
  * @param {Date} viewDate Accepts the current date instead of start date
  * @param {CalendarType} calendarMode Accepts the calendar type
- * @param {string} oldTimezone Accepts the timezone name
  * @param {string} newTimezone Accepts the timezone name
  * @returns {number[]} Returns the collection of dates
  */
-export function generate(startDate, rule, excludeDate, startDayOfWeek, maximumCount, viewDate, calendarMode, oldTimezone, newTimezone) {
+export function generate(startDate, rule, excludeDate, startDayOfWeek, maximumCount, viewDate, calendarMode, newTimezone) {
     if (maximumCount === void 0) { maximumCount = MAXOCCURRENCE; }
     if (viewDate === void 0) { viewDate = null; }
     if (calendarMode === void 0) { calendarMode = 'Gregorian'; }
-    if (oldTimezone === void 0) { oldTimezone = null; }
     if (newTimezone === void 0) { newTimezone = null; }
     var ruleObject = extractObjectFromRule(rule);
     var cacheDate;
@@ -123,8 +121,8 @@ export function generate(startDate, rule, excludeDate, startDayOfWeek, maximumCo
     var tz = new Timezone();
     tempDate.forEach(function (content) {
         var parsedDate = getDateFromRecurrenceDateString(content);
-        if (oldTimezone && newTimezone) {
-            parsedDate = tz.convert(new Date(parsedDate.getTime()), oldTimezone, newTimezone);
+        if (newTimezone) {
+            parsedDate = tz.add(new Date(parsedDate.getTime()), newTimezone);
         }
         tempExcludeDate.push(new Date(parsedDate.getTime()).setHours(0, 0, 0, 0));
     });

package/src/recurrence-editor/recurrence-editor.d.ts

@@ -229,5 +229,5 @@ export declare type RepeatType = 'none' | 'daily' | 'weekly' | 'monthly' | 'year
 * until :- Denotes that the recurrence ends on a specified date.
 * count :- Denotes that the recurrence ends after a specified number of occurrences.
 * ```
-*/
+ */
 export declare type EndType = 'never' | 'until' | 'count';

package/src/schedule/actions/crud.d.ts

@@ -13,7 +13,7 @@ export declare class Crud {
     refreshDataManager(): void;
     private dataManagerSuccess;
     dataManagerFailure(e: ReturnType): void;
-    refreshProcessedData(isVirtualScrollAction?: boolean): void;
+    refreshProcessedData(isVirtualScrollAction?: boolean, dynamicEvents?: Record<string, any>[]): void;
     private refreshData;
     addEvent(eventData: Record<string, any> | Record<string, any>[]): void;
     saveEvent(eventData: Record<string, any> | Record<string, any>[], action: CurrentAction): void;

package/src/schedule/actions/crud.js

@@ -62,7 +62,7 @@ var Crud = /** @class */ (function () {
         }
         this.parent.trigger(events.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 = '';
@@ -86,7 +86,7 @@ var Crud = /** @class */ (function () {
             }
         }
         if (isVirtualScrollAction) {
-            this.parent.notify(events.dataReady, { processedData: this.parent.eventsProcessed });
+            this.parent.notify(events.dataReady, { processedData: dynamicEvents ? this.parent.eventBase.processData(dynamicEvents) : this.parent.eventsProcessed });
             return;
         }
         var eventsData = this.parent.eventsData || [];
@@ -252,6 +252,8 @@ var Crud = /** @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
@@ -338,7 +340,8 @@ var Crud = /** @class */ (function () {
         }
         var updateEvents = (eventData instanceof Array) ? eventData : [eventData];
         var args = {
-            requestType: action === 'EditOccurrence' ? 'eventChange' : 'eventRemove', cancel: false,
+            requestType: action === 'EditOccurrence' ? 'eventChange' : 'eventRemove',
+            cancel: false,
             addedRecords: [], changedRecords: updateEvents, deletedRecords: []
         };
         args.data = occurrenceData;
@@ -386,7 +389,8 @@ var Crud = /** @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,
@@ -463,7 +467,8 @@ var Crud = /** @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
@@ -531,7 +536,8 @@ var Crud = /** @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,
@@ -592,6 +598,7 @@ var Crud = /** @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
                 };
@@ -635,6 +642,8 @@ var Crud = /** @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);
             }
@@ -649,6 +658,10 @@ var Crud = /** @class */ (function () {
         return parentEvent;
     };
     Crud.prototype.excludeDateCheck = function (eventStartTime, exceptionDateList) {
+        var timezone = this.parent.timezone || this.parent.tzModule.getLocalTimezoneName();
+        if (timezone) {
+            eventStartTime = this.parent.tzModule.remove(new Date(+eventStartTime.getTime()), timezone);
+        }
         var exDate = getRecurrenceStringFromDate(eventStartTime);
         if (!isNullOrUndefined(exceptionDateList)) {
             if (exceptionDateList.indexOf(exDate) === -1) {

package/src/schedule/actions/data.js

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Query, DataManager, Predicate } from '@syncfusion/ej2-data';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 /**
  * data module is used to generate query and data source.
  *
@@ -40,15 +41,35 @@ var Data = /** @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;

package/src/schedule/actions/keyboard.js

@@ -211,6 +211,10 @@ var KeyboardInteraction = /** @class */ (function () {
         }
         var queryStr = '.' + cls.WORK_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS + ',.' + cls.HEADER_CELLS_CLASS;
         var target = closest(e.target, queryStr);
+        var selectedCells = this.parent.getSelectedCells();
+        if (selectedCells.length > 0 && selectedCells.indexOf(target) === -1) {
+            target = selectedCells[selectedCells.length - 1];
+        }
         if (this.parent.currentView === 'TimelineYear' && target.classList.contains(cls.OTHERMONTH_CLASS)) {
             return;
         }
@@ -219,7 +223,6 @@ var KeyboardInteraction = /** @class */ (function () {
         if (this.parent.eventWindow) {
             this.parent.eventWindow.convertToEventData(this.parent.activeCellsData, cellData);
         }
-        var selectedCells = this.parent.getSelectedCells();
         var args = {
             data: cellData, element: this.parent.activeCellsData.element, event: e,
             requestType: cellSelect, showQuickPopup: false

package/src/schedule/actions/virtual-scroll.d.ts

@@ -26,6 +26,7 @@ export declare class VirtualScroll {
     private renderEvents;
     virtualScrolling(): void;
     private horizontalScrolling;
+    private triggerScrollEvent;
     private upScroll;
     private downScroll;
     private leftScroll;

package/src/schedule/actions/virtual-scroll.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { append, addClass, remove, isNullOrUndefined, setStyleAttribute, createElement, prepend } from '@syncfusion/ej2-base';
 import * as events from '../base/constant';
 import * as cls from '../base/css-constant';
@@ -89,6 +90,16 @@ var VirtualScroll = /** @class */ (function () {
     };
     VirtualScroll.prototype.renderEvents = function () {
         this.setTabIndex();
+        var dynamicData = this.triggerScrollEvent(events.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);
         }
@@ -125,7 +136,7 @@ var VirtualScroll = /** @class */ (function () {
                 resCollection = this.downScroll(conWrap, firstTDIndex);
             }
             if (!isNullOrUndefined(resCollection) && resCollection.length > 0) {
-                this.parent.showSpinner();
+                this.triggerScrollEvent(events.virtualScrollStart);
                 var selectedEle = this.parent.getSelectedCells();
                 this.focusedEle = selectedEle[selectedEle.length - 1] || this.focusedEle;
                 this.updateContent(resWrap, conWrap, eventWrap, resCollection);
@@ -153,7 +164,7 @@ var VirtualScroll = /** @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(events.virtualScrollStart);
                 var colLevels = this.parent.activeView.colLevels.slice(0);
                 this.updateHorizontalContent(conWrap, resCollection);
                 setStyleAttribute(conWrap.querySelector('table'), { transform: "translateX(" + this.translateY + "px)" });
@@ -166,6 +177,30 @@ var VirtualScroll = /** @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 === events.virtualScrollStart) {
+                _this.parent.showSpinner();
+            }
+            else if (action === events.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;

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

@@ -49,6 +49,10 @@ export declare const resizeStop: string;
 export declare const inlineClick: string;
 /** @private */
 export declare const cellSelect: string;
+/** @private */
+export declare const virtualScrollStart: string;
+/** @private */
+export declare const virtualScrollStop: string;
 /**
  * Specifies schedule internal events
  */

package/src/schedule/base/constant.js

@@ -49,6 +49,10 @@ export var resizeStop = 'resizeStop';
 export var inlineClick = 'inlineClick';
 /** @private */
 export var cellSelect = 'cellSelect';
+/** @private */
+export var virtualScrollStart = 'virtualScrollStart';
+/** @private */
+export var virtualScrollStop = 'virtualScrollStop';
 /**
  * Specifies schedule internal events
  */

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

@@ -248,6 +248,21 @@ export interface DragEventArgs extends BaseEventArgs {
     /** Defines the date range navigation action while dragging. */
     navigation?: NavigateOptions;
 }
+/** An interface that holds options of virtual scroll action. */
+export interface ScrollEventArgs extends BaseEventArgs {
+    /** Returns the group index of last resource which is currently being rendered. */
+    endIndex: number;
+    /** Returns the end date from the active view of scheduler. */
+    endDate: Date;
+    /** Returns the group index of first resource which is currently being rendered. */
+    startIndex: number;
+    /** Returns the start date from the active view of scheduler. */
+    startDate: Date;
+    /** Returns the resource data collection which is currently rendered. */
+    resourceData: Record<string, any>[];
+    /** Allows to define the event data collection that needs to be rendered on every virtual scroll action only when enableLazyLoading property is enabled. */
+    eventData?: Record<string, any>[];
+}
 /** An interface that holds options to control the navigation, while performing drag action on appointments. */
 export interface NavigateOptions {
     /** Allows to enable or disable the auto navigation while performing drag action on appointments. */

package/src/schedule/base/resource.js

@@ -337,6 +337,7 @@ var ResourceBase = /** @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, {

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

@@ -1,4 +1,4 @@
-import { Component, ModuleDeclaration, Property, Event, Animation, Collection, append } from '@syncfusion/ej2-base';import { EventHandler, EmitType, Browser, Internationalization, getDefaultDateObject, cldrData, L10n } from '@syncfusion/ej2-base';import { getValue, compile, extend, isNullOrUndefined, NotifyPropertyChanges, INotifyPropertyChanged, Complex } from '@syncfusion/ej2-base';import { getElement, removeClass, addClass, classList, remove, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';import { HeaderRenderer } from '../renderer/header-renderer';import { Scroll } from '../actions/scroll';import { ScheduleTouch } from '../actions/touch';import { KeyboardInteraction } from '../actions/keyboard';import { Data } from '../actions/data';import { View, CurrentAction, ReturnType, WeekRule } from '../base/type';import { EventBase } from '../event-renderer/event-base';import { InlineEdit } from '../event-renderer/inline-edit';import { QuickPopups } from '../popups/quick-popups';import { EventTooltip } from '../popups/event-tooltip';import { EventWindow } from '../popups/event-window';import { Render } from '../renderer/renderer';import { Day } from '../renderer/day';import { Week } from '../renderer/week';import { WorkWeek } from '../renderer/work-week';import { Month } from '../renderer/month';import { Year } from '../renderer/year';import { Agenda } from '../renderer/agenda';import { MonthAgenda } from '../renderer/month-agenda';import { TimelineViews } from '../renderer/timeline-view';import { TimelineMonth } from '../renderer/timeline-month';import { TimelineYear } from '../renderer/timeline-year';import { WorkHours } from '../models/work-hours';import { TimeScale } from '../models/time-scale';import { QuickInfoTemplates } from '../models/quick-info-templates';import { HeaderRows } from '../models/header-rows';import { Crud } from '../actions/crud';import { Resize } from '../actions/resize';import { DragAndDrop } from '../actions/drag';import { VirtualScroll } from '../actions/virtual-scroll';import { WorkCellInteraction } from '../actions/work-cells';import { WorkHoursModel, ViewsModel, EventSettingsModel, GroupModel, ResourcesModel, TimeScaleModel } from '../models/models';import { QuickInfoTemplatesModel, HeaderRowsModel } from '../models/models';import { EventSettings } from '../models/event-settings';import { Group } from '../models/group';import { Resources } from '../models/resources';import { ICalendarExport } from '../exports/calendar-export';import { ICalendarImport } from '../exports/calendar-import';import { ExcelExport } from '../exports/excel-export';import { Print } from '../exports/print';import { IRenderer, ActionEventArgs, NavigatingEventArgs, CellClickEventArgs, RenderCellEventArgs, ScrollCss, TimezoneFields } from '../base/interface';import { EventClickArgs, EventRenderedArgs, PopupOpenEventArgs, UIStateArgs, DragEventArgs, ResizeEventArgs } from '../base/interface';import { EventFieldsMapping, TdData, ResourceDetails, ResizeEdges, StateArgs, ExportOptions, SelectEventArgs } from '../base/interface';import { ViewsData, PopupCloseEventArgs, HoverEventArgs, MoreEventsClickArgs, CallbackFunction } from '../base/interface';import { CalendarUtil, Gregorian, Islamic, CalendarType } from '../../common/calendar-util';import { ResourceBase } from '../base/resource';import { Timezone, timezoneData } from '../timezone/timezone';import { RecurrenceEditor } from '../../recurrence-editor/recurrence-editor';import * as events from '../base/constant';import * as cls from '../base/css-constant';import * as util from '../base/util';
+import { Component, ModuleDeclaration, Property, Event, Animation, Collection, append } from '@syncfusion/ej2-base';import { EventHandler, EmitType, Browser, Internationalization, getDefaultDateObject, cldrData, L10n } from '@syncfusion/ej2-base';import { getValue, compile, extend, isNullOrUndefined, NotifyPropertyChanges, INotifyPropertyChanged, Complex } from '@syncfusion/ej2-base';import { getElement, removeClass, addClass, classList, remove, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';import { HeaderRenderer } from '../renderer/header-renderer';import { Scroll } from '../actions/scroll';import { ScheduleTouch } from '../actions/touch';import { KeyboardInteraction } from '../actions/keyboard';import { Data } from '../actions/data';import { View, CurrentAction, ReturnType, WeekRule } from '../base/type';import { EventBase } from '../event-renderer/event-base';import { InlineEdit } from '../event-renderer/inline-edit';import { QuickPopups } from '../popups/quick-popups';import { EventTooltip } from '../popups/event-tooltip';import { EventWindow } from '../popups/event-window';import { Render } from '../renderer/renderer';import { Day } from '../renderer/day';import { Week } from '../renderer/week';import { WorkWeek } from '../renderer/work-week';import { Month } from '../renderer/month';import { Year } from '../renderer/year';import { Agenda } from '../renderer/agenda';import { MonthAgenda } from '../renderer/month-agenda';import { TimelineViews } from '../renderer/timeline-view';import { TimelineMonth } from '../renderer/timeline-month';import { TimelineYear } from '../renderer/timeline-year';import { WorkHours } from '../models/work-hours';import { TimeScale } from '../models/time-scale';import { QuickInfoTemplates } from '../models/quick-info-templates';import { HeaderRows } from '../models/header-rows';import { Crud } from '../actions/crud';import { Resize } from '../actions/resize';import { DragAndDrop } from '../actions/drag';import { VirtualScroll } from '../actions/virtual-scroll';import { WorkCellInteraction } from '../actions/work-cells';import { WorkHoursModel, ViewsModel, EventSettingsModel, GroupModel, ResourcesModel, TimeScaleModel } from '../models/models';import { QuickInfoTemplatesModel, HeaderRowsModel } from '../models/models';import { EventSettings } from '../models/event-settings';import { Group } from '../models/group';import { Resources } from '../models/resources';import { ICalendarExport } from '../exports/calendar-export';import { ICalendarImport } from '../exports/calendar-import';import { ExcelExport } from '../exports/excel-export';import { Print } from '../exports/print';import { IRenderer, ActionEventArgs, NavigatingEventArgs, CellClickEventArgs, RenderCellEventArgs, ScrollCss, TimezoneFields } from '../base/interface';import { EventClickArgs, EventRenderedArgs, PopupOpenEventArgs, UIStateArgs, DragEventArgs, ResizeEventArgs } from '../base/interface';import { EventFieldsMapping, TdData, ResourceDetails, ResizeEdges, StateArgs, ExportOptions, SelectEventArgs } from '../base/interface';import { ViewsData, PopupCloseEventArgs, HoverEventArgs, MoreEventsClickArgs, ScrollEventArgs, CallbackFunction } from '../base/interface';import { CalendarUtil, Gregorian, Islamic, CalendarType } from '../../common/calendar-util';import { ResourceBase } from '../base/resource';import { Timezone, timezoneData } from '../timezone/timezone';import { RecurrenceEditor } from '../../recurrence-editor/recurrence-editor';import * as events from '../base/constant';import * as cls from '../base/css-constant';import * as util from '../base/util';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -477,6 +477,30 @@ export interface ScheduleModel extends ComponentModel{
      */
     editorTemplate?: string | Function;
 
+    /**
+     * The template option to render the customized header of the editor window.
+     *
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    editorHeaderTemplate?: string | Function;
+
+    /**
+     * The template option to render the customized footer of the editor window.
+     *
+     *
+     * @default null
+     * @angularType string | object
+     * @reactType string | function | JSX.Element
+     * @vueType string | function
+     * @aspType string
+     */
+    editorFooterTemplate?: string | Function;
+
     /**
      * The template option to customize the quick window. The three sections of the quick popup whereas the header, content,
      * and footer can be easily customized with individual template option.
@@ -681,8 +705,6 @@ export interface ScheduleModel extends ComponentModel{
     /**
      * Triggers on beginning of every scheduler action.
      *
-     * {% codeBlock src='schedule/actionBegin/index.md' %}{% endcodeBlock %}
-     *
      * @event 'actionBegin'
      */
     actionBegin?: EmitType<ActionEventArgs>;
@@ -690,8 +712,6 @@ export interface ScheduleModel extends ComponentModel{
     /**
      * Triggers on successful completion of the scheduler actions.
      *
-     * {% codeBlock src='schedule/actionComplete/index.md' %}{% endcodeBlock %}
-     *
      * @event 'actionComplete'
      */
     actionComplete?: EmitType<ActionEventArgs>;
@@ -699,8 +719,6 @@ export interface ScheduleModel extends ComponentModel{
     /**
      * Triggers when a scheduler action gets failed or interrupted and an error information will be returned.
      *
-     * {% codeBlock src='schedule/actionFailure/index.md' %}{% endcodeBlock %}
-     *
      * @event 'actionFailure'
      */
     actionFailure?: EmitType<ActionEventArgs>;
@@ -708,8 +726,6 @@ export interface ScheduleModel extends ComponentModel{
     /**
      * Triggers before the date or view navigation takes place on scheduler.
      *
-     * {% codeBlock src='schedule/navigating/index.md' %}{% endcodeBlock %}
-     *
      * @event 'navigating'
      */
     navigating?: EmitType<NavigatingEventArgs>;
@@ -717,8 +733,6 @@ export interface ScheduleModel extends ComponentModel{
     /**
      * Triggers before each element of the schedule rendering on the page.
      *
-     * {% codeBlock src='schedule/renderCell/index.md' %}{% endcodeBlock %}
-     *
      * @event 'renderCell'
      */
     renderCell?: EmitType<RenderCellEventArgs>;
@@ -726,8 +740,6 @@ export interface ScheduleModel extends ComponentModel{
     /**
      * Triggers when the events are single clicked or on single tapping the events on the mobile devices.
      *
-     * {% codeBlock src='schedule/eventClick/index.md' %}{% endcodeBlock %}
-     *
      * @event 'eventClick'
      */
     eventClick?: EmitType<EventClickArgs>;
@@ -735,8 +747,6 @@ export interface ScheduleModel extends ComponentModel{
     /**
      * Triggers before each of the event getting rendered on the scheduler user interface.
      *
-     * {% codeBlock src='schedule/eventRendered/index.md' %}{% endcodeBlock %}
-     *
      * @event 'eventRendered'
      */
     eventRendered?: EmitType<EventRenderedArgs>;
@@ -744,8 +754,6 @@ export interface ScheduleModel extends ComponentModel{
     /**
      * Triggers before the data binds to the scheduler.
      *
-     * {% codeBlock src='schedule/dataBinding/index.md' %}{% endcodeBlock %}
-     *
      * @event 'dataBinding'
      */
     dataBinding?: EmitType<ReturnType>;
@@ -753,8 +761,6 @@ export interface ScheduleModel extends ComponentModel{
     /**
      * Triggers before any of the scheduler popups opens on the page.
      *
-     * {% codeBlock src='schedule/popupOpen/index.md' %}{% endcodeBlock %}
-     *
      * @event 'popupOpen'
      */
     popupOpen?: EmitType<PopupOpenEventArgs>;
@@ -762,8 +768,6 @@ export interface ScheduleModel extends ComponentModel{
     /**
      * Triggers before any of the scheduler popups close on the page.
      *
-     * {% codeBlock src='schedule/popupClose/index.md' %}{% endcodeBlock %}
-     *
      * @event 'popupClose'
      */
     popupClose?: EmitType<PopupCloseEventArgs>;
@@ -771,8 +775,6 @@ export interface ScheduleModel extends ComponentModel{
     /**
      * Triggers when an appointment is started to drag.
      *
-     * {% codeBlock src='schedule/dragStart/index.md' %}{% endcodeBlock %}
-     *
      * @event 'dragStart'
      */
     dragStart?: EmitType<DragEventArgs>;
@@ -780,8 +782,6 @@ export interface ScheduleModel extends ComponentModel{
     /**
      * Triggers when an appointment is being in a dragged state.
      *
-     * {% codeBlock src='schedule/drag/index.md' %}{% endcodeBlock %}
-     *
      * @event 'drag'
      */
     drag?: EmitType<DragEventArgs>;
@@ -789,8 +789,6 @@ export interface ScheduleModel extends ComponentModel{
     /**
      * Triggers when the dragging of appointment is stopped.
      *
-     * {% codeBlock src='schedule/dragStop/index.md' %}{% endcodeBlock %}
-     *
      * @event 'dragStop'
      */
     dragStop?: EmitType<DragEventArgs>;
@@ -798,8 +796,6 @@ export interface ScheduleModel extends ComponentModel{
     /**
      * Triggers when an appointment is started to resize.
      *
-     * {% codeBlock src='schedule/resizeStart/index.md' %}{% endcodeBlock %}
-     *
      * @event 'resizeStart'
      */
     resizeStart?: EmitType<ResizeEventArgs>;
@@ -807,8 +803,6 @@ export interface ScheduleModel extends ComponentModel{
     /**
      * Triggers when an appointment is being in a resizing action.
      *
-     * {% codeBlock src='schedule/resizing/index.md' %}{% endcodeBlock %}
-     *
      * @event 'resizing'
      */
     resizing?: EmitType<ResizeEventArgs>;
@@ -816,16 +810,28 @@ export interface ScheduleModel extends ComponentModel{
     /**
      * Triggers when the resizing of appointment is stopped.
      *
-     * {% codeBlock src='schedule/resizeStop/index.md' %}{% endcodeBlock %}
-     *
      * @event 'resizeStop'
      */
     resizeStop?: EmitType<ResizeEventArgs>;
 
     /**
-     * Triggers once the event data is bound to the scheduler.
+     * Triggers when the scroll action is started.
+     * This event triggers only when `allowVirtualScrolling` or `enableLazyLoading` properties are enabled along with resource grouping.
      *
-     * {% codeBlock src='schedule/dataBound/index.md' %}{% endcodeBlock %}
+     * @event 'virtualScrollStart'
+     */
+    virtualScrollStart?: EmitType<ScrollEventArgs>;
+
+    /**
+     * Triggers when the scroll action is stopped.
+     * This event triggers only when `allowVirtualScrolling` or `enableLazyLoading` properties are enabled along with resource grouping.
+     *
+     * @event 'virtualScrollStop'
+     */
+    virtualScrollStop?: EmitType<ScrollEventArgs>;
+
+    /**
+     * Triggers once the event data is bound to the scheduler.
      *
      * @event 'dataBound'
      */