@syncfusion/ej2-schedule 19.2.60 → 19.3.48

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.2.60
+*  version : 19.3.48
 *  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@19.2.56",
+  "_id": "@syncfusion/ej2-schedule@19.3.46",
   "_inBundle": false,
-  "_integrity": "sha512-cfWUXCpsRIqVEw2gm4X7eolB8xMv/lvweTI8hGxbT0+N2juPoiJChvz139Jgy6MPCUDXYebVDiRedehogyKPWA==",
+  "_integrity": "sha512-x1dE8/ZswBw4vAbLAILohZWlisR8SymVBt4/qwG38WgG+4nQ+yamS89F+aD/KkXQdFZ+zFdWKZbUCyNCPUDUUQ==",
   "_location": "/@syncfusion/ej2-schedule",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-schedule",
     "/@syncfusion/ej2-vue-schedule"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-schedule/-/ej2-schedule-19.2.56.tgz",
-  "_shasum": "1e0fa34fa7eac614da14cdbcd06a7012dbc44b89",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix/@syncfusion/ej2-schedule/-/ej2-schedule-19.3.46.tgz",
+  "_shasum": "96b789963b4984b83da4f6a024bd5e08e6869712",
   "_spec": "@syncfusion/ej2-schedule@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -35,16 +35,16 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~19.2.60",
-    "@syncfusion/ej2-buttons": "~19.2.60",
-    "@syncfusion/ej2-calendars": "~19.2.60",
-    "@syncfusion/ej2-data": "~19.2.60",
-    "@syncfusion/ej2-dropdowns": "~19.2.60",
-    "@syncfusion/ej2-excel-export": "~19.2.60",
-    "@syncfusion/ej2-inputs": "~19.2.60",
-    "@syncfusion/ej2-lists": "~19.2.60",
-    "@syncfusion/ej2-navigations": "~19.2.60",
-    "@syncfusion/ej2-popups": "~19.2.60"
+    "@syncfusion/ej2-base": "~19.3.47",
+    "@syncfusion/ej2-buttons": "~19.3.44",
+    "@syncfusion/ej2-calendars": "~19.3.46",
+    "@syncfusion/ej2-data": "~19.3.47",
+    "@syncfusion/ej2-dropdowns": "~19.3.48",
+    "@syncfusion/ej2-excel-export": "~19.3.48",
+    "@syncfusion/ej2-inputs": "~19.3.48",
+    "@syncfusion/ej2-lists": "~19.3.48",
+    "@syncfusion/ej2-navigations": "~19.3.46",
+    "@syncfusion/ej2-popups": "~19.3.47"
   },
   "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.",
@@ -81,6 +81,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "19.2.60",
+  "version": "19.3.48",
   "sideEffects": false
 }

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

@@ -94,7 +94,7 @@ var ActionBase = /** @class */ (function () {
         var viewElement = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
         var trElement = [].slice.call(viewElement.querySelector('tr').children);
         if (!this.parent.activeView.isTimelineView() && this.parent.activeViewOptions.group.resources.length > 0 &&
-            !this.parent.isAdaptive) {
+            !this.parent.isAdaptive && !this.parent.enableAdaptiveUI) {
             trElement = this.getResourceElements(trElement);
         }
         var leftOffset = trElement[0].getBoundingClientRect();

package/src/schedule/actions/crud.js

@@ -43,8 +43,7 @@ var Crud = /** @class */ (function () {
             var resultData = extend([], args.result, null, true);
             _this.parent.eventsData = resultData.filter(function (data) { return !data[_this.parent.eventFields.isBlock]; });
             _this.parent.blockData = resultData.filter(function (data) { return data[_this.parent.eventFields.isBlock]; });
-            var processed = _this.parent.eventBase.processData(resultData);
-            _this.parent.notify(events.dataReady, { processedData: processed });
+            _this.parent.refreshEvents(false);
             if (_this.parent.dragAndDropModule && _this.parent.dragAndDropModule.actionObj.action === 'drag') {
                 _this.parent.dragAndDropModule.navigationWrapper();
             }
@@ -146,6 +145,7 @@ var Crud = /** @class */ (function () {
                     if (addArgs.addedRecords instanceof Array) {
                         for (var _i = 0, _a = addArgs.addedRecords; _i < _a.length; _i++) {
                             var event_1 = _a[_i];
+                            event_1 = _this.parent.eventBase.updateEventDateTime(event_1);
                             var eventData_1 = extend({}, _this.parent.eventBase.processTimezone(event_1, true), null, true);
                             editParams.addedRecords.push(eventData_1);
                         }
@@ -203,6 +203,7 @@ var Crud = /** @class */ (function () {
                         if (saveArgs.changedRecords instanceof Array) {
                             for (var _i = 0, _a = saveArgs.changedRecords; _i < _a.length; _i++) {
                                 var event_3 = _a[_i];
+                                event_3 = _this.parent.eventBase.updateEventDateTime(event_3);
                                 var eventData_2 = extend({}, _this.parent.eventBase.processTimezone(event_3, true), null, true);
                                 editParams.changedRecords.push(eventData_2);
                             }

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

@@ -23,7 +23,9 @@ export declare class DragAndDrop extends ActionBase {
     private isAllDayTarget;
     private targetTd;
     private isCursorAhead;
+    private dragArea;
     wireDragEvent(element: HTMLElement): void;
+    setDragArea(): void;
     private dragHelper;
     private dragPosition;
     private setDragActionDefaultValues;

package/src/schedule/actions/drag.js

@@ -52,7 +52,6 @@ var DragAndDrop = /** @class */ (function (_super) {
         return _this;
     }
     DragAndDrop.prototype.wireDragEvent = function (element) {
-        var dragElement = document.querySelector(this.parent.eventDragArea);
         new Draggable(element, {
             abort: '.' + cls.EVENT_RESIZE_CLASS,
             clone: true,
@@ -60,8 +59,7 @@ var DragAndDrop = /** @class */ (function (_super) {
             enableTapHold: this.parent.isAdaptive,
             enableTailMode: (this.parent.eventDragArea) ? true : false,
             cursorAt: (this.parent.eventDragArea) ? { left: -20, top: -20 } : { left: 0, top: 0 },
-            dragArea: (this.parent.eventDragArea && dragElement) ?
-                dragElement : this.parent.element.querySelector('.' + cls.CONTENT_TABLE_CLASS),
+            dragArea: this.dragArea,
             dragStart: this.dragStart.bind(this),
             drag: this.drag.bind(this),
             dragStop: this.dragStop.bind(this),
@@ -70,6 +68,11 @@ var DragAndDrop = /** @class */ (function (_super) {
             queryPositionInfo: this.dragPosition.bind(this)
         });
     };
+    DragAndDrop.prototype.setDragArea = function () {
+        var dragElement = document.querySelector(this.parent.eventDragArea);
+        this.dragArea = this.parent.eventDragArea && dragElement ? dragElement :
+            this.parent.element.querySelector('.' + cls.CONTENT_TABLE_CLASS);
+    };
     DragAndDrop.prototype.dragHelper = function (e) {
         var _this = this;
         this.setDragActionDefaultValues();
@@ -683,18 +686,20 @@ var DragAndDrop = /** @class */ (function (_super) {
         var eventData = [];
         var startTime = event[eventFields.startTime];
         var endTime = event[eventFields.endTime];
-        var isDifferentDate = util.resetTime(new Date(startTime.getTime())) < util.resetTime(new Date(endTime.getTime()));
-        if (isDifferentDate) {
-            var scheduleStartHour = this.parent.activeView.getStartHour();
-            var scheduleEndHour = this.parent.activeView.getEndHour();
-            var startDate = util.getStartEndHours(util.resetTime(startTime), scheduleStartHour, scheduleEndHour);
-            var endDate = util.getStartEndHours(util.resetTime(endTime), scheduleStartHour, scheduleEndHour);
-            var firstEventObj = extend({}, event, null, true);
-            firstEventObj[eventFields.endTime] = startDate.endHour;
-            eventData.push(firstEventObj);
-            var secondEventObj = extend({}, event, null, true);
-            secondEventObj[eventFields.startTime] = endDate.startHour;
-            eventData.push(secondEventObj);
+        if (util.resetTime(new Date(startTime.getTime())) < util.resetTime(new Date(endTime.getTime()))) {
+            var startReferenceDate = util.resetTime(new Date(startTime.getTime()));
+            var endReferenceDate = new Date(startReferenceDate.getTime());
+            for (var i = 0; startReferenceDate < new Date(endTime.getTime()); i++) {
+                endReferenceDate = new Date(endReferenceDate.setDate(startReferenceDate.getDate() + 1));
+                var eventObj = extend({}, event, null, true);
+                eventObj[eventFields.startTime] = new Date(startReferenceDate);
+                eventObj[eventFields.endTime] = new Date(endReferenceDate);
+                startReferenceDate = new Date(startReferenceDate.setDate(startReferenceDate.getDate() + 1));
+                eventData.push(eventObj);
+            }
+            var index = eventData.length - 1;
+            eventData[0][eventFields.startTime] = startTime;
+            eventData[index][eventFields.endTime] = endTime;
         }
         else {
             eventData.push(event);
@@ -765,8 +770,7 @@ var DragAndDrop = /** @class */ (function (_super) {
                 // eslint-disable-next-line max-len
                 this.parent.getDateFromElement(isNullOrUndefined(index) ? this.actionObj.target : this.targetTd)));
             var splitEvents = this.splitEvent(event);
-            var events_1 = event[this.parent.eventFields.isAllDay] ||
-                this.parent.eventBase.isAllDayAppointment(event) || splitEvents.length > 2 ? [event] : splitEvents;
+            var events_1 = this.parent.eventBase.isAllDayAppointment(event) || splitEvents.length > 2 || !(this.parent.eventSettings.spannedEventPlacement == 'TimeSlot') ? [event] : splitEvents;
             for (var i = 0; i < events_1.length; i++) {
                 if (i > 0) {
                     var filterQuery = ".e-day-wrapper[data-date=\"" + util.resetTime(events_1[i][this.parent.eventFields.startTime]).getTime() + "\"]";
@@ -1061,6 +1065,12 @@ var DragAndDrop = /** @class */ (function (_super) {
             var eventSrt = eventObj[this.parent.eventFields.startTime];
             eventStart.setHours(eventSrt.getHours(), eventSrt.getMinutes(), eventSrt.getSeconds());
         }
+        if (this.parent.eventDragArea) {
+            var targetDate = this.parent.getDateFromElement(e.target);
+            if (!isNullOrUndefined(targetDate)) {
+                eventStart = targetDate;
+            }
+        }
         var eventEnd = new Date(eventStart.getTime());
         eventEnd.setMilliseconds(eventDuration);
         var eventsData = [this.getUpdatedEvent(eventStart, eventEnd, this.actionObj.event)];

package/src/schedule/actions/keyboard.js

@@ -113,7 +113,7 @@ var KeyboardInteraction = /** @class */ (function () {
                 this.processCtrlShiftNavigationArrows(e);
                 break;
             case 'escape':
-                this.processEscape();
+                this.processEscape(e);
         }
     };
     KeyboardInteraction.prototype.addEventListener = function () {
@@ -258,7 +258,7 @@ var KeyboardInteraction = /** @class */ (function () {
         if (target.classList.contains(cls.MORE_EVENT_HEADER_DATE_CLASS)) {
             this.parent.setProperties({ selectedDate: this.parent.getDateFromElement(target) }, true);
             this.parent.changeView(this.parent.getNavigateView(), e);
-            this.processEscape();
+            this.processEscape(e);
             return;
         }
     };
@@ -837,7 +837,7 @@ var KeyboardInteraction = /** @class */ (function () {
                 !this.parent.eventSettings.allowDeleting) {
                 return;
             }
-            this.parent.quickPopup.deleteClick();
+            this.parent.quickPopup.deleteClick(e);
         }
     };
     KeyboardInteraction.prototype.processCtrlShiftNavigationArrows = function (e) {
@@ -872,8 +872,8 @@ var KeyboardInteraction = /** @class */ (function () {
             }
         }
     };
-    KeyboardInteraction.prototype.processEscape = function () {
-        this.parent.quickPopup.onClosePopup();
+    KeyboardInteraction.prototype.processEscape = function (event) {
+        this.parent.quickPopup.onClosePopup(event);
         this.parent.quickPopup.morePopup.hide();
         if (this.parent.headerModule) {
             this.parent.headerModule.hideHeaderPopup();

package/src/schedule/actions/resize.js

@@ -209,6 +209,9 @@ var Resize = /** @class */ (function (_super) {
     };
     Resize.prototype.monthResizing = function () {
         this.removeCloneElement();
+        if (isNullOrUndefined(this.actionObj.pageX) || isNullOrUndefined(this.actionObj.pageY)) {
+            return;
+        }
         var td = document.elementFromPoint(this.actionObj.pageX, this.actionObj.pageY);
         if (isNullOrUndefined(td)) {
             return;
@@ -342,13 +345,16 @@ var Resize = /** @class */ (function (_super) {
         var eventEnd = new Date(this.actionObj.event[this.parent.eventFields.endTime].getTime());
         var resizeTime;
         var isDateHeader = false;
+        var isTimeViews = ['TimelineDay', 'TimelineWeek', 'TimelineWorkWeek'].indexOf(this.parent.currentView) > -1;
+        var isTimelineMonth = this.parent.currentView === 'TimelineMonth';
+        var isWithoutScale = isTimelineMonth || isTimeViews && !this.parent.activeViewOptions.timeScale.enable;
         if (this.parent.activeView.isTimelineView()) {
             var tr = this.parent.getContentTable().querySelector('tr');
             var headerName = this.parent.currentView;
             if (this.parent.activeViewOptions.headerRows.length > 0) {
                 var rows = this.parent.activeViewOptions.headerRows.map(function (row) { return row.option; });
                 headerName = rows.slice(-1)[0];
-                if (this.parent.currentView === 'TimelineMonth' && headerName === 'Hour') {
+                if (isTimelineMonth && headerName === 'Hour') {
                     headerName = rows.slice(-2)[0] || 'Month';
                 }
             }
@@ -368,9 +374,8 @@ var Resize = /** @class */ (function (_super) {
                     offsetValue += (this.actionObj.clone.offsetWidth - this.actionObj.cellWidth);
                 }
                 cellIndex = Math.floor(offsetValue / Math.floor(tr.offsetWidth / noOfDays));
-                isDateHeader =
-                    ['TimelineDay', 'TimelineWeek', 'TimelineWorkWeek'].indexOf(this.parent.currentView) > -1 && headerName === 'Date';
-                cellIndex = isLeft ? cellIndex : (this.parent.currentView === 'TimelineMonth' || isDateHeader) ? cellIndex + 1 : cellIndex;
+                isDateHeader = isTimeViews && headerName === 'Date';
+                cellIndex = isLeft ? cellIndex : (isTimelineMonth || isDateHeader) ? cellIndex + 1 : cellIndex;
                 isLastCell = cellIndex === tdCollections.length;
                 cellIndex = (cellIndex < 0) ? 0 : (cellIndex >= noOfDays) ? noOfDays - 1 : cellIndex;
             }
@@ -382,7 +387,7 @@ var Resize = /** @class */ (function (_super) {
                 if (this.parent.enableRtl) {
                     var cellOffsetWidth = 0;
                     if (headerName === 'TimelineMonth' || (!this.parent.activeViewOptions.timeScale.enable &&
-                        this.parent.currentView !== 'TimelineMonth')) {
+                        !isTimelineMonth)) {
                         cellOffsetWidth = this.actionObj.cellWidth;
                     }
                     var offsetWidth = (Math.floor(parseInt(this.actionObj.clone.style.right, 10) / this.actionObj.cellWidth) *
@@ -434,16 +439,18 @@ var Resize = /** @class */ (function (_super) {
             }
         }
         if (isLeft) {
-            if ((this.actionObj.event[this.parent.eventFields.endTime].getTime() - resizeTime.getTime()) <= 0) {
-                resizeTime = new Date(this.actionObj.event[this.parent.eventFields.startTime].getTime());
+            if ((eventEnd.getTime() - resizeTime.getTime()) <= 0) {
+                resizeTime = isWithoutScale ? util.resetTime(eventEnd) : eventStart;
             }
             this.actionObj.start = this.parent.activeViewOptions.timeScale.enable ? this.calculateIntervalTime(resizeTime) : resizeTime;
         }
         else {
-            var isTimeViews = ['TimelineDay', 'TimelineWeek', 'TimelineWorkWeek'].indexOf(this.parent.currentView) > -1 &&
-                this.parent.activeViewOptions.timeScale.enable;
-            var resizeEnd = ((!isTimeViews || isDateHeader) && resizeTime.getHours() === 0 && resizeTime.getMinutes() === 0) ?
+            var isTimeScaleViews = isTimeViews && this.parent.activeViewOptions.timeScale.enable;
+            var resizeEnd = ((!isTimeScaleViews || isDateHeader) && resizeTime.getHours() === 0 && resizeTime.getMinutes() === 0) ?
                 util.addDays(resizeTime, 1) : resizeTime;
+            if (isWithoutScale && (resizeEnd.getTime() - eventStart.getTime()) <= 0) {
+                resizeEnd = util.addDays(util.resetTime(eventStart), 1);
+            }
             this.actionObj.end = this.parent.activeViewOptions.timeScale.enable && this.parent.currentView !== 'Month' ?
                 this.calculateIntervalTime(resizeEnd) : resizeEnd;
         }

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

@@ -104,7 +104,7 @@ var VirtualScroll = /** @class */ (function () {
     };
     VirtualScroll.prototype.renderEvents = function () {
         this.setTabIndex();
-        this.parent.notify(events.dataReady, {});
+        this.parent.refreshEvents(false);
         this.parent.notify(events.contentReady, {});
         this.parent.hideSpinner();
     };
@@ -158,6 +158,7 @@ var VirtualScroll = /** @class */ (function () {
         }
         else {
             var height = (this.parent.rowAutoHeight) ? this.averageRowHeight : this.itemSize;
+            height = (height > 0) ? height : this.itemSize;
             this.translateY = (conWrap.scrollTop - (this.bufferCount * height) > 0) ?
                 conWrap.scrollTop - (this.bufferCount * height) : 0;
         }

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

@@ -145,6 +145,8 @@ export interface PopupOpenEventArgs extends BaseEventArgs {
 }
 /** An interface that holds options to control the popup close action. */
 export interface PopupCloseEventArgs extends BaseEventArgs {
+    /** Return the current interaction event. */
+    event?: Event;
     /**
      * Returns the type of the popup which is currently being opted to open.
      * The available type values are as follows,
@@ -380,6 +382,8 @@ export interface IRenderer {
     getEventRows(trCount: number): Element[];
     getDateSlots(renderDates: Date[], workDays: number[]): TdData[];
     getNextPreviousDate(type: string): Date;
+    refreshHeader(): void;
+    refreshResourceHeader(): void;
     renderLayout(type: string): void;
     renderResourceMobileLayout(): void;
     setPanel(panel: HTMLElement): void;
@@ -526,6 +530,7 @@ export interface ViewsData extends ViewsModel {
     dateHeaderTemplateName?: string;
     cellTemplateName?: string;
     resourceHeaderTemplateName?: string;
+    headerIndentTemplateName?: string;
     eventTemplateName?: string;
     dayHeaderTemplateName?: string;
     monthHeaderTemplateName?: string;
@@ -540,3 +545,7 @@ export interface CrudAction {
 export interface CallbackFunction extends Function {
     bind<T, A0, A1, A2, A3, A extends any[], R>(this: (this: T, args0: A0, args1: A1, args2: A2, args3: A3, ...args: A[]) => R, thisArgs: T, args0: A0, args1: A1, args2: A2, args3: A3): (...args: A[]) => R;
 }
+/** @private */
+export interface SortComparerFunction {
+    (param: Record<string, any>[]): Record<string, any>[];
+}

package/src/schedule/base/resource.js

@@ -17,7 +17,13 @@ var ResourceBase = /** @class */ (function () {
     ResourceBase.prototype.renderResourceHeaderIndent = function (tr) {
         var resColTd = createElement('td', { className: cls.RESOURCE_LEFT_TD_CLASS });
         var resColDiv = createElement('div', { className: cls.RESOURCE_TEXT_CLASS });
-        resColTd.appendChild(resColDiv);
+        if (this.parent.activeViewOptions.headerIndentTemplate) {
+            var data = { className: [resColTd.className], type: 'emptyCells' };
+            this.parent.renderHeaderIndentTemplate(data, resColTd);
+        }
+        else {
+            resColTd.appendChild(resColDiv);
+        }
         var args = { elementType: 'emptyCells', element: resColTd };
         this.parent.trigger(events.renderCell, args);
         tr.appendChild(resColTd);
@@ -206,7 +212,7 @@ var ResourceBase = /** @class */ (function () {
                     cancel: false, event: e, groupIndex: index,
                     requestType: target.classList.contains(cls.RESOURCE_COLLAPSE_CLASS) ? 'resourceExpanded' : 'resourceCollapsed'
                 };
-                _this.parent.notify(events.dataReady, {});
+                _this.parent.refreshEvents(false);
                 _this.parent.trigger(events.actionComplete, args);
             }
         });
@@ -668,8 +674,11 @@ var ResourceBase = /** @class */ (function () {
                 var currentLevelChilds = _a[_i];
                 for (var _b = 0, currentLevelChilds_1 = currentLevelChilds; _b < currentLevelChilds_1.length; _b++) {
                     var currentLevelChild = currentLevelChilds_1[_b];
-                    if (resTreeGroup[i + 1]) {
+                    if (resTreeGroup[i + 1] && resTreeGroup[i + 1].length > 0) {
                         var nextLevelChilds = resTreeGroup[i + 1][temp];
+                        if (!nextLevelChilds) {
+                            continue;
+                        }
                         var colSpan = 0;
                         for (var _c = 0, nextLevelChilds_1 = nextLevelChilds; _c < nextLevelChilds_1.length; _c++) {
                             var nextLevelChild = nextLevelChilds_1[_c];

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

@@ -1,4 +1,4 @@
-import { Component, ModuleDeclaration, Property, Event, Animation, Collection } 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 } 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 } 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 } 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 } 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 } 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 } 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';
 
 /**
@@ -492,6 +492,18 @@ export interface ScheduleModel extends ComponentModel{
      */
     resourceHeaderTemplate?: string;
 
+    /**
+     * Template option to customize the header indent bar. Here, the template accepts either
+     *  the string or HTMLElement as template design and then the parsed design is displayed onto the header indent cell.
+     *
+     * Refer to the below code snippet.
+     *
+     * {% codeBlock src='schedule/headerIndentTemplate/index.md' %}{% endcodeBlock %}
+     *
+     * @default null
+     */
+    headerIndentTemplate?: string;
+
     /**
      * Allows defining the group related settings of multiple resources. When this property is non-empty, it means
      * that the resources will be grouped on the schedule layout based on the provided resource names.

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

@@ -37,7 +37,7 @@ import { ExcelExport } from '../exports/excel-export';
 import { Print } from '../exports/print';
 import { IRenderer, ActionEventArgs, NavigatingEventArgs, CellClickEventArgs, RenderCellEventArgs, ScrollCss } from '../base/interface';
 import { EventClickArgs, EventRenderedArgs, PopupOpenEventArgs, UIStateArgs, DragEventArgs, ResizeEventArgs } from '../base/interface';
-import { EventFieldsMapping, ResourceDetails, ResizeEdges, ExportOptions, SelectEventArgs } from '../base/interface';
+import { EventFieldsMapping, TdData, ResourceDetails, ResizeEdges, ExportOptions, SelectEventArgs } from '../base/interface';
 import { ViewsData, PopupCloseEventArgs, HoverEventArgs, MoreEventsClickArgs, CallbackFunction } from '../base/interface';
 import { CalendarUtil, CalendarType } from '../../common/calendar-util';
 import { ResourceBase } from '../base/resource';
@@ -95,6 +95,7 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
     private quickInfoTemplatesContentFn;
     private quickInfoTemplatesFooterFn;
     private resourceHeaderTemplateFn;
+    private headerIndentTemplateFn;
     private defaultLocale;
     dayModule: Day;
     weekModule: Week;
@@ -569,6 +570,17 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @default null
      */
     resourceHeaderTemplate: string;
+    /**
+     * Template option to customize the header indent bar. Here, the template accepts either
+     *  the string or HTMLElement as template design and then the parsed design is displayed onto the header indent cell.
+     *
+     * Refer to the below code snippet.
+     *
+     * {% codeBlock src='schedule/headerIndentTemplate/index.md' %}{% endcodeBlock %}
+     *
+     * @default null
+     */
+    headerIndentTemplate: string;
     /**
      * Allows defining the group related settings of multiple resources. When this property is non-empty, it means
      * that the resources will be grouped on the schedule layout based on the provided resource names.
@@ -1112,6 +1124,13 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @private
      */
     getResourceHeaderTemplate(): CallbackFunction;
+    /**
+     * Method to process indent template
+     *
+     * @returns {CallbackFunction} Returns the callback function
+     * @private
+     */
+    getHeaderIndentTemplate(): CallbackFunction;
     /**
      * Method to get dynamic CSS properties
      *
@@ -1170,6 +1189,15 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @private
      */
     getWeekNumberContent(dates: Date[]): string;
+    /**
+     * Method to render the header indent template.
+     *
+     * @param {TdData} data Accepts the td data
+     * @param {Element} td Accepts the td element
+     * @returns {void}
+     * @private
+     */
+    renderHeaderIndentTemplate(data: TdData, td: Element): void;
     private unWireEvents;
     /**
      * Core method to return the component name.
@@ -1480,9 +1508,24 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * Refreshes the event dataSource. This method may be useful when the events alone in the schedule needs to be re-rendered.
      *
      * @function refreshEvents
+     * @param {boolean} isRemoteRefresh Accepts the boolean to refresh data from remote or local
+     * @returns {void}
+     */
+    refreshEvents(isRemoteRefresh?: boolean): void;
+    /**
+     * Method to refresh the given Schedule templates
+     *
+     * @param {string} templateName Accepts the template name
+     * @returns {void}
+     */
+    refreshTemplates(templateName?: string): void;
+    /**
+     * Refreshes the Schedule layout without re-render.
+     *
+     * @function refreshLayout
      * @returns {void}
      */
-    refreshEvents(): void;
+    refreshLayout(): void;
     /**
      * To retrieve the appointment object from element.
      *