@syncfusion/ej2-schedule 26.2.14 → 27.1.50

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 26.2.14
+*  version : 27.1.50
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@26.2.12",
+  "_id": "@syncfusion/ej2-schedule@27.1.48",
   "_inBundle": false,
-  "_integrity": "sha512-mUILDakcc3sCVN0/q/N/vHLnFZjxmMf70dncdtrY/dPTE05kW6GNUfbKZMCflT09r86jZxo0BQM+WZ12d8eJ/A==",
+  "_integrity": "sha512-GQffkT4ABTCmTBf9pPJpeeK5ygE2veOdOPvSKFQOGA0ydZXSzDDbYhNSvfLGyHcybcJWj6NxNyNbbJ7kHI3deg==",
   "_location": "/@syncfusion/ej2-schedule",
   "_phantomChildren": {},
   "_requested": {
@@ -23,10 +23,10 @@
     "/@syncfusion/ej2-react-schedule",
     "/@syncfusion/ej2-vue-schedule"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-schedule/-/ej2-schedule-26.2.12.tgz",
-  "_shasum": "fd72425ccf4ccd964d292e1ab6111c0f3a09dc70",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-schedule/-/ej2-schedule-27.1.48.tgz",
+  "_shasum": "e574faa7c52c4a0332da422baa23137a282c4c42",
   "_spec": "@syncfusion/ej2-schedule@*",
-  "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -35,17 +35,16 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~26.2.10",
-    "@syncfusion/ej2-buttons": "~26.2.10",
-    "@syncfusion/ej2-calendars": "~26.2.12",
-    "@syncfusion/ej2-data": "~26.2.14",
-    "@syncfusion/ej2-dropdowns": "~26.2.13",
-    "@syncfusion/ej2-excel-export": "~26.2.11",
-    "@syncfusion/ej2-inputs": "~26.2.14",
-    "@syncfusion/ej2-lists": "~26.2.14",
-    "@syncfusion/ej2-navigations": "~26.2.12",
-    "@syncfusion/ej2-popups": "~26.2.11",
-    "@types/requirejs": "^2.1.37"
+    "@syncfusion/ej2-base": "~27.1.50",
+    "@syncfusion/ej2-buttons": "~27.1.50",
+    "@syncfusion/ej2-calendars": "~27.1.50",
+    "@syncfusion/ej2-data": "~27.1.50",
+    "@syncfusion/ej2-dropdowns": "~27.1.50",
+    "@syncfusion/ej2-excel-export": "~27.1.50",
+    "@syncfusion/ej2-inputs": "~27.1.50",
+    "@syncfusion/ej2-lists": "~27.1.50",
+    "@syncfusion/ej2-navigations": "~27.1.50",
+    "@syncfusion/ej2-popups": "~27.1.50"
   },
   "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.",
@@ -74,6 +73,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "26.2.14",
+  "version": "27.1.50",
   "sideEffects": false
 }

package/src/schedule/actions/crud.js

@@ -112,10 +112,10 @@ var Crud = /** @class */ (function () {
             addedRecords: args.editParams.addedRecords, changedRecords: args.editParams.changedRecords,
             deletedRecords: args.editParams.deletedRecords
         };
-        if (this.parent.dragAndDropModule && this.parent.dragAndDropModule.actionObj && this.parent.dragAndDropModule.actionObj.element) {
+        if (this.parent.dragAndDropModule && this.parent.dragAndDropModule.actionObj && this.parent.dragAndDropModule.actionObj.element && this.parent.dragAndDropModule.actionObj.action) {
             this.parent.dragAndDropModule.actionObj.element.style.display = 'none';
         }
-        if (this.parent.resizeModule && this.parent.resizeModule.actionObj && this.parent.resizeModule.actionObj.element) {
+        if (this.parent.resizeModule && this.parent.resizeModule.actionObj && this.parent.resizeModule.actionObj.element && this.parent.resizeModule.actionObj.action) {
             this.parent.resizeModule.actionObj.element.style.display = 'none';
         }
         if (this.parent.isSpecificResourceEvents()) {

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

@@ -13,6 +13,7 @@ export declare class KeyboardInteraction {
     private keyboardModule;
     constructor(parent: Schedule);
     private keyActionHandler;
+    private processShiftAltN;
     private processFTwelve;
     private addEventListener;
     private removeEventListener;

package/src/schedule/actions/keyboard.js

@@ -43,7 +43,9 @@ var KeyboardInteraction = /** @class */ (function () {
             ctrlShiftUpArrow: 'ctrl+shift+uparrow',
             ctrlShiftDownArrow: 'ctrl+shift+downarrow',
             ctrlShiftLeftArrow: 'ctrl+shift+leftarrow',
-            ctrlShiftRightArrow: 'ctrl+shift+rightarrow'
+            ctrlShiftRightArrow: 'ctrl+shift+rightarrow',
+            shiftAltY: 'shift+alt+y',
+            shiftAltN: 'shift+alt+n'
         };
         this.parent = parent;
         this.parent.element.tabIndex = this.parent.element.tabIndex === -1 ? 0 : this.parent.element.tabIndex;
@@ -124,6 +126,43 @@ var KeyboardInteraction = /** @class */ (function () {
                     this.processFTwelve(e);
                 }
                 break;
+            case 'shiftAltY':
+                this.parent.changeDate(new Date(), e);
+                break;
+            case 'shiftAltN':
+                if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda' ||
+                    this.parent.currentView === 'Year') {
+                    return;
+                }
+                this.processShiftAltN(e);
+                break;
+        }
+    };
+    KeyboardInteraction.prototype.processShiftAltN = function (e) {
+        var selectedCells = this.parent.getSelectedCells();
+        var target = e.target;
+        var cellData = extend({}, null, true);
+        if (selectedCells.length > 0 && (closest(target, '.' + cls.WORK_CELLS_CLASS)
+            || closest(target, '.' + cls.ALLDAY_CELLS_CLASS) || closest(target, '.' + cls.HEADER_CELLS_CLASS))) {
+            cellData = this.getSelectedElements(target);
+        }
+        else if (closest(target, '.' + cls.APPOINTMENT_CLASS) && !isNullOrUndefined(this.parent.activeEventData.event)) {
+            var event_1 = this.parent.activeEventData.event;
+            cellData.startTime = event_1.StartTime;
+            cellData.endTime = event_1.EndTime;
+            cellData.isAllDay = event_1.IsAllDay;
+        }
+        else {
+            var workHour = this.parent.getStartEndTime(this.parent.workHours.start);
+            var slotInterval = this.parent.activeViewOptions.timeScale.interval /
+                this.parent.activeViewOptions.timeScale.slotCount;
+            cellData.startTime = new Date(this.parent.selectedDate);
+            cellData.startTime.setHours(workHour.getHours(), workHour.getMinutes(), 0, 0);
+            cellData.endTime = new Date(cellData.startTime.getTime() + slotInterval * 60000);
+        }
+        var args = extend(cellData, { cancel: false, event: e });
+        if (args != null) {
+            this.parent.eventWindow.openEditor(args, 'Add');
         }
     };
     KeyboardInteraction.prototype.processFTwelve = function (e) {
@@ -549,8 +588,11 @@ var KeyboardInteraction = /** @class */ (function () {
         return this.parent.eventBase.selectWorkCellByTime([selectedObject]);
     };
     KeyboardInteraction.prototype.processViewNavigation = function (e) {
-        var index = parseInt(e.key, 10) - 1;
-        if (!isNullOrUndefined(this.parent.views) && index < this.parent.views.length) {
+        if (isNullOrUndefined(e.code)) {
+            return;
+        }
+        var index = parseInt(e.code.slice(e.code.length - 1), 10) - 1;
+        if (!isNaN(index) && !isNullOrUndefined(this.parent.views) && index < this.parent.views.length) {
             var view = this.parent.viewCollections[parseInt(index.toString(), 10)].option;
             this.parent.changeView(view, e, undefined, index);
             if (this.parent.headerModule) {

package/src/schedule/actions/resize.js

@@ -321,6 +321,7 @@ var Resize = /** @class */ (function (_super) {
         EventHandler.remove(document, Browser.touchEndEvent, this.resizeStop);
         clearInterval(this.actionObj.scrollInterval);
         this.actionObj.scrollInterval = null;
+        this.actionObj.action = null;
         this.removeCloneElementClasses();
         this.removeCloneElement();
         this.actionClass('removeClass');

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

@@ -41,6 +41,7 @@ export declare class VirtualScroll {
     private getByIdCollection;
     private setStartEndIndex;
     updateContent(resWrap: HTMLElement, conWrap: HTMLElement, eventWrap: HTMLElement, resCollection: TdData[]): void;
+    private removeObsoleteRows;
     private updateHorizontalContent;
     private updateMonthViewContent;
     private updateOtherViewContent;

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

@@ -114,6 +114,7 @@ var VirtualScroll = /** @class */ (function () {
             firstTDIndex = (endIndex > this.parent.resourceBase.expandedResources.length) ?
                 (this.parent.resourceBase.expandedResources.length - this.renderedLength) : firstTDIndex;
             firstTDIndex = firstTDIndex < 0 ? 0 : firstTDIndex;
+            this.existingDataCollection = this.parent.resourceBase.renderedResources;
             this.parent.resourceBase.renderedResources = this.parent.resourceBase.expandedResources.slice(firstTDIndex, endIndex);
             if (this.parent.resourceBase.renderedResources.length > 0) {
                 this.updateContent(resWrap, conWrap, eventWrap, this.parent.resourceBase.renderedResources);
@@ -163,6 +164,7 @@ var VirtualScroll = /** @class */ (function () {
             var scrollHeight = this.parent.rowAutoHeight ?
                 (conTable.offsetHeight - conWrap.offsetHeight) : this.bufferCount * this.itemSize;
             var resCollection = [];
+            this.existingDataCollection = this.parent.resourceBase.renderedResources;
             if ((conWrap.scrollTop) - this.translateY < 0) {
                 resCollection = this.upScroll(conWrap, firstTDIndex);
             }
@@ -366,18 +368,47 @@ var VirtualScroll = /** @class */ (function () {
             this.parent.element.focus();
         }
         for (var i = 0; i < renderedLength; i++) {
-            remove(resWrap.querySelector('tbody tr'));
-            remove(conWrap.querySelector('tbody tr'));
             remove(eventWrap.querySelector('div'));
         }
         this.parent.resourceBase.renderedResources = resCollection;
+        var currentGroupIndices = this.parent.activeView.getGroupIndices(resCollection);
+        var previousGroupIndices = this.parent.activeView.getGroupIndices(this.existingDataCollection);
+        var newGroupIndices = currentGroupIndices.filter(function (index) { return previousGroupIndices.indexOf(index) < 0; });
+        var resWrapRows = Array.from(resWrap.querySelectorAll('tbody tr'));
+        var conWrapRows = Array.from(conWrap.querySelectorAll('tbody tr'));
+        var resWrapBody = resWrap.querySelector('tbody');
+        var conWrapBody = conWrap.querySelector('tbody');
+        this.removeObsoleteRows(resWrapRows, currentGroupIndices);
+        this.removeObsoleteRows(conWrapRows, currentGroupIndices);
         var resourceRows = this.parent.resourceBase.getContentRows(resCollection, true);
         var contentRows = this.parent.activeView.getContentRows();
         var eventRows = this.parent.activeView.getEventRows(resCollection.length);
-        append(resourceRows, resWrap.querySelector('tbody'));
-        append(contentRows, conWrap.querySelector('tbody'));
+        for (var i = 0; i < newGroupIndices.length; i++) {
+            var index = currentGroupIndices.indexOf(newGroupIndices[parseInt(i.toString(), 10)]);
+            if (index === 0) {
+                prepend([resourceRows[parseInt(i.toString(), 10)]], resWrapBody);
+                prepend([contentRows[parseInt(i.toString(), 10)]], conWrapBody);
+            }
+            else if (resWrapBody && conWrapBody && resWrapBody.children[parseInt(index.toString(), 10)] &&
+                conWrapBody.children[parseInt(index.toString(), 10)]) {
+                resWrapBody.insertBefore(resourceRows[parseInt(i.toString(), 10)], resWrapBody.children[parseInt(index.toString(), 10)]);
+                conWrapBody.insertBefore(contentRows[parseInt(i.toString(), 10)], conWrapBody.children[parseInt(index.toString(), 10)]);
+            }
+            else {
+                append([resourceRows[parseInt(i.toString(), 10)]], resWrapBody);
+                append([contentRows[parseInt(i.toString(), 10)]], conWrapBody);
+            }
+        }
         append(eventRows, eventWrap);
     };
+    VirtualScroll.prototype.removeObsoleteRows = function (elements, currentGroupIndices) {
+        elements.forEach(function (element) {
+            var groupIndex = parseInt(element.firstElementChild.getAttribute('data-group-index'), 10);
+            if (currentGroupIndices.indexOf(groupIndex) < 0) {
+                remove(element);
+            }
+        });
+    };
     VirtualScroll.prototype.updateHorizontalContent = function (conWrap, resCollection) {
         this.existingDataCollection = this.parent.resourceBase.expandedResources;
         this.parent.resourceBase.expandedResources = resCollection;

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

@@ -449,6 +449,7 @@ export interface IRenderer {
     getAdjustedDate?(date: Date): Date;
     viewIndex: number;
     colLevels: TdData[][];
+    getGroupIndices(dataCollection?: TdData[]): number[];
 }
 /** @private */
 export interface EJ2Instance extends HTMLElement {

package/src/schedule/base/resource.js

@@ -96,7 +96,11 @@ var ResourceBase = /** @class */ (function () {
         var resColl = this.resourceCollection;
         var tr = createElement('tr');
         var td = createElement('td', { attrs: { tabindex: isVirtualScroll ? '-1' : '0' } });
+        var existingGroupIndices = this.parent.activeView.getGroupIndices();
         for (var i = 0; i < resData.length; i++) {
+            if (existingGroupIndices.length > 0 && existingGroupIndices.indexOf(resData[parseInt(i.toString(), 10)].groupIndex) > -1) {
+                continue;
+            }
             var ntd = td.cloneNode();
             rIndex = util.findIndexInData(resColl, 'name', resData[parseInt(i.toString(), 10)].resource.name);
             if (rIndex === resColl.length - 1) {
@@ -277,6 +281,7 @@ var ResourceBase = /** @class */ (function () {
         this.setExpandedResources();
         var resourceCount = this.parent.virtualScrollModule.getRenderedCount();
         var startIndex = this.expandedResources.indexOf(this.renderedResources[0]);
+        this.parent.virtualScrollModule.existingDataCollection = this.renderedResources;
         this.renderedResources = this.expandedResources.slice(startIndex, startIndex + resourceCount);
         if (this.renderedResources.length < resourceCount) {
             var sIndex = this.expandedResources.length - resourceCount;

package/src/schedule/base/schedule.js

@@ -1257,7 +1257,8 @@ var Schedule = /** @class */ (function (_super) {
     };
     Schedule.prototype.onScheduleResize = function () {
         if (isNullOrUndefined(this.activeView) || ((this.isAdaptive || util.isMobile()) && document.activeElement
-            && document.activeElement.classList.contains(cls.SUBJECT_CLASS)) || this.uiStateValues.isTapHold) {
+            && (document.activeElement.classList.contains(cls.SUBJECT_CLASS) ||
+                document.activeElement.classList.contains(cls.INLINE_SUBJECT_CLASS))) || this.uiStateValues.isTapHold) {
             return;
         }
         if (this.virtualScrollModule && this.activeView.isTimelineView()) {

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

@@ -897,6 +897,7 @@ var EventBase = /** @class */ (function () {
         this.parent.activeEventData = { event: eventObject, element: target };
     };
     EventBase.prototype.generateOccurrence = function (event, viewDate, isMaxCount) {
+        var _this = this;
         var startDate = event[this.parent.eventFields.startTime];
         var endDate = event[this.parent.eventFields.endTime];
         var eventRule = event[this.parent.eventFields.recurrenceRule];
@@ -911,6 +912,10 @@ var EventBase = /** @class */ (function () {
         var newTimezone = this.parent.timezone || this.parent.tzModule.getLocalTimezoneName();
         var firstDay = this.parent.activeViewOptions.firstDayOfWeek;
         var calendarMode = this.parent.calendarMode;
+        if (event[this.parent.eventFields.recurrenceRule] && event[this.parent.eventFields.recurrenceRule].includes('BYMONTHDAY') &&
+            this.parent.timezone && event[this.parent.eventFields.startTimezone] && event[this.parent.eventFields.endTimezone]) {
+            startDate = this.parent.tzModule.convert(event[this.parent.eventFields.startTime], this.parent.timezone, event[this.parent.eventFields.startTimezone]);
+        }
         var dates = generate(startDate, eventRule, exception, firstDay, maxCount, viewDate, calendarMode, newTimezone);
         if (this.parent.currentView === 'Agenda' && eventRule.indexOf('COUNT') === -1 && eventRule.indexOf('UNTIL') === -1) {
             if (isNullOrUndefined(event.generatedDates)) {
@@ -925,11 +930,21 @@ var EventBase = /** @class */ (function () {
                 }
             }
         }
+        var isDSTAdjusted = false;
+        var convertedDates = [];
+        if (event[this.parent.eventFields.recurrenceRule] && event[this.parent.eventFields.recurrenceRule].includes('BYMONTHDAY') &&
+            this.parent.timezone && event[this.parent.eventFields.startTimezone] && event[this.parent.eventFields.endTimezone]) {
+            isDSTAdjusted = true;
+            convertedDates.push.apply(convertedDates, dates.map(function (date) {
+                return _this.parent.tzModule.convert(new Date(date), event[_this.parent.eventFields.startTimezone], _this.parent.timezone).getTime();
+            }));
+        }
+        convertedDates = convertedDates.length > 0 ? convertedDates : dates;
         var occurrenceCollection = [];
-        for (var _i = 0, dates_1 = dates; _i < dates_1.length; _i++) {
-            var date = dates_1[_i];
+        for (var _i = 0, convertedDates_1 = convertedDates; _i < convertedDates_1.length; _i++) {
+            var date = convertedDates_1[_i];
             var clonedObject = extend({}, event, null, true);
-            date = this.getDSTAdjustedTime(date, clonedObject);
+            date = !isDSTAdjusted ? this.getDSTAdjustedTime(date, clonedObject) : date;
             clonedObject[this.parent.eventFields.startTime] = new Date(date);
             clonedObject[this.parent.eventFields.endTime] = new Date(new Date(date).setMilliseconds(duration));
             clonedObject[this.parent.eventFields.recurrenceID] = clonedObject[this.parent.eventFields.id];

package/src/schedule/event-renderer/inline-edit.js

@@ -90,7 +90,15 @@ var InlineEdit = /** @class */ (function () {
                 subjectWrap.insertBefore(inlineSubject, subjectWrap.firstChild);
             }
             else {
-                args.element.querySelector('.e-appointment-details').prepend(inlineSubject);
+                var elementSelector = ['TimelineDay', 'TimelineWeek', 'TimelineWorkWeek', 'TimelineMonth'].indexOf(this.parent.currentView) > -1 ?
+                    '.e-inner-wrap' : '.e-appointment-details';
+                var innerWrapElement = args.element.querySelector(elementSelector);
+                if (isNullOrUndefined(innerWrapElement)) {
+                    args.element.querySelector('.e-appointment-details').prepend(inlineSubject);
+                }
+                else {
+                    innerWrapElement.prepend(inlineSubject);
+                }
             }
             inlineSubject.focus();
         }

package/src/schedule/event-renderer/month.js

@@ -347,7 +347,10 @@ var MonthEvent = /** @class */ (function (_super) {
         if (this.parent.crudModule && this.parent.crudModule.crudObj.isCrudAction) {
             for (var i = 0, len = this.parent.crudModule.crudObj.sourceEvent.length; i < len; i++) {
                 var sourceRes = this.parent.crudModule.crudObj.sourceEvent[parseInt(i.toString(), 10)];
-                this.renderEventsHandler(sourceRes.renderDates, sourceRes.workDays, sourceRes);
+                if (!this.parent.uiStateValues.isGroupAdaptive ||
+                    (this.parent.uiStateValues.groupIndex === sourceRes.groupIndex && this.parent.uiStateValues.isGroupAdaptive)) {
+                    this.renderEventsHandler(sourceRes.renderDates, sourceRes.workDays, sourceRes);
+                }
                 if (this.parent.crudModule.crudObj.sourceEvent[parseInt(i.toString(), 10)].groupIndex !==
                     this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)].groupIndex) {
                     var target = this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)];

package/src/schedule/event-renderer/timeline-view.js

@@ -133,7 +133,10 @@ var TimelineEvent = /** @class */ (function (_super) {
             for (var i = 0, len = this.parent.crudModule.crudObj.sourceEvent.length; i < len; i++) {
                 var source = this.parent.crudModule.crudObj.sourceEvent[parseInt(i.toString(), 10)];
                 this.rowIndex = source.groupIndex;
-                this.renderEventsHandler(this.parent.activeView.renderDates, this.parent.activeViewOptions.workDays, source);
+                if (!this.parent.uiStateValues.isGroupAdaptive ||
+                    (this.parent.uiStateValues.groupIndex === source.groupIndex && this.parent.uiStateValues.isGroupAdaptive)) {
+                    this.renderEventsHandler(this.parent.activeView.renderDates, this.parent.activeViewOptions.workDays, source);
+                }
                 if (this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)] && this.parent.crudModule.crudObj.sourceEvent[parseInt(i.toString(), 10)].groupIndex !==
                     this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)].groupIndex) {
                     var target = this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)];

package/src/schedule/event-renderer/year.js

@@ -67,8 +67,8 @@ var YearEvent = /** @class */ (function (_super) {
             var monthDate = new Date(this.parent.selectedDate.getFullYear(), month, 1);
             var monthStart = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
             var monthEnd = this.parent.calendarUtil.getMonthEndDate(new Date(monthDate.getTime()));
-            var startDate = util.getWeekFirstDate(monthStart, this.parent.firstDayOfWeek);
-            var endDate = util.addDays(util.getWeekLastDate(monthEnd, this.parent.firstDayOfWeek), 1);
+            var startDate = util.getWeekFirstDate(monthStart, this.parent.activeViewOptions.firstDayOfWeek);
+            var endDate = util.addDays(util.getWeekLastDate(monthEnd, this.parent.activeViewOptions.firstDayOfWeek), 1);
             for (var index = 0; startDate.getTime() < endDate.getTime(); index++) {
                 var start = util.resetTime(new Date(startDate.getTime()));
                 var end = util.addDays(new Date(start.getTime()), 1);

package/src/schedule/renderer/header-renderer.d.ts

@@ -37,6 +37,7 @@ export declare class HeaderRenderer {
     private calendarChange;
     setCalendarTimezone(): void;
     private calculateViewIndex;
+    private toolbarCreateHandler;
     private toolbarClickHandler;
     private hasSelectedDate;
     getHeaderElement(): HTMLElement;

package/src/schedule/renderer/header-renderer.js

@@ -81,10 +81,12 @@ var HeaderRenderer = /** @class */ (function () {
                 items: args.items,
                 overflowMode: 'Popup',
                 clicked: _this.toolbarClickHandler.bind(_this),
+                created: _this.toolbarCreateHandler.bind(_this),
                 enableRtl: _this.parent.enableRtl,
                 enableHtmlSanitizer: _this.parent.enableHtmlSanitizer,
                 locale: _this.parent.locale
             });
+            _this.toolbarObj.isStringTemplate = true;
             _this.toolbarObj.root = _this.parent.root ? _this.parent.root : _this.parent;
             _this.toolbarObj.appendTo(_this.parent.element.querySelector('.' + cls.HEADER_TOOLBAR));
             _this.toolbarObj.element.setAttribute('aria-label', 'Scheduler');
@@ -517,6 +519,12 @@ var HeaderRenderer = /** @class */ (function () {
         var views = [].slice.call(this.element.querySelectorAll('.e-views'));
         return views.indexOf(target);
     };
+    HeaderRenderer.prototype.toolbarCreateHandler = function () {
+        if (this.parent && this.parent.portals && this.toolbarObj && this.toolbarObj.portals) {
+            this.parent.portals = this.parent.portals.concat(this.toolbarObj.portals);
+            this.parent['renderReactTemplates']();
+        }
+    };
     HeaderRenderer.prototype.toolbarClickHandler = function (args) {
         if (!args.item) {
             return;
@@ -660,7 +668,7 @@ var HeaderRenderer = /** @class */ (function () {
         var firstDate = new Date(dates[0].getTime());
         var lastDate = new Date(dates[dates.length - 1].getTime());
         if (this.parent.currentView === 'WorkWeek' || this.parent.currentView === 'TimelineWorkWeek') {
-            firstDate = util.getWeekFirstDate(util.resetTime(this.parent.selectedDate), this.parent.firstDayOfWeek);
+            firstDate = util.getWeekFirstDate(util.resetTime(this.parent.selectedDate), this.parent.activeViewOptions.firstDayOfWeek);
             lastDate = util.addDays(firstDate, 7 * this.parent.activeViewOptions.interval);
         }
         else if (this.parent.currentView === 'Month') {

package/src/schedule/renderer/month.js

@@ -483,7 +483,13 @@ var Month = /** @class */ (function (_super) {
         var tr = createElement('tr');
         var td = createElement('td', { attrs: { 'aria-selected': 'false' } });
         var slotDatas = this.getContentSlots();
+        var isTimeline = this.parent.currentView === 'TimelineMonth';
+        var existingGroupIndices = isTimeline ? this.getGroupIndices() : [];
         for (var row = 0; row < slotDatas.length; row++) {
+            if (existingGroupIndices.length > 0 &&
+                existingGroupIndices.indexOf(slotDatas[parseInt(row.toString(), 10)][0].groupIndex) > -1) {
+                continue;
+            }
             var ntr = tr.cloneNode();
             for (var col = 0; col < slotDatas[parseInt(row.toString(), 10)].length; col++) {
                 var ntd = this.createContentTd(slotDatas[parseInt(row.toString(), 10)][parseInt(col.toString(), 10)], td);

package/src/schedule/renderer/timeline-header-row.js

@@ -35,7 +35,7 @@ var TimelineHeaderRow = /** @class */ (function () {
             var jsDate = +new Date(1970, 0, 1);
             var tzOffsetDiff = d.getTimezoneOffset() - new Date(1970, 0, 1).getTimezoneOffset();
             var key = Math.ceil(((((+d - jsDate) - (tzOffsetDiff * 60 * 1000)) / MS_PER_DAY) + new Date(jsDate).getDay() + 1) / 7);
-            if (this.parent.firstDayOfWeek && this.parent.firstDayOfWeek > new Date(+d).getDay()) {
+            if (this.parent.activeViewOptions.firstDayOfWeek && this.parent.activeViewOptions.firstDayOfWeek > new Date(+d).getDay()) {
                 key = key - 1;
             }
             result[parseInt(key.toString(), 10)] = result[parseInt(key.toString(), 10)] || [];

package/src/schedule/renderer/timeline-view.js

@@ -237,7 +237,12 @@ var TimelineViews = /** @class */ (function (_super) {
         var tr = createElement('tr');
         var td = createElement('td', { attrs: { 'aria-selected': 'false' } });
         var trCount = this.getRowCount();
+        var existingGroupIndices = this.getGroupIndices();
         for (var i = 0; i < trCount; i++) {
+            if (existingGroupIndices.length > 0 &&
+                existingGroupIndices.indexOf(this.parent.resourceBase.renderedResources[parseInt(i.toString(), 10)].groupIndex) > -1) {
+                continue;
+            }
             var ntr = tr.cloneNode();
             for (var _i = 0, _a = this.colLevels[this.colLevels.length - 1]; _i < _a.length; _i++) {
                 var tdData = _a[_i];

package/src/schedule/renderer/timeline-year.js

@@ -301,13 +301,17 @@ var TimelineYear = /** @class */ (function (_super) {
     TimelineYear.prototype.getContentRows = function () {
         var tRow = [];
         var monthCells = this.getMonths();
+        var existingGroupIndices = this.getGroupIndices();
         for (var row = 0; row < this.parent.resourceBase.renderedResources.length; row++) {
-            var tr = createElement('tr');
-            tRow.push(tr);
             var resData = void 0;
             if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
                 resData = this.parent.resourceBase.renderedResources[parseInt(row.toString(), 10)];
+                if (existingGroupIndices.length > 0 && existingGroupIndices.indexOf(resData.groupIndex) > -1) {
+                    continue;
+                }
             }
+            var tr = createElement('tr');
+            tRow.push(tr);
             var monthDate = new Date(this.parent.selectedDate.getFullYear(), monthCells[parseInt(row.toString(), 10)], 1);
             var date = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
             for (var month = 0; month < this.columnCount; month++) {

package/src/schedule/renderer/vertical-view.js

@@ -678,18 +678,14 @@ var VerticalView = /** @class */ (function (_super) {
         var rows = [];
         var tr = createElement('tr');
         var td = createElement('td', { attrs: { 'aria-selected': 'false' } });
-        var existingGroupIndices = new Set();
-        if (this.parent.virtualScrollModule && this.parent.activeViewOptions.group.resources.length > 0 &&
-            this.parent.virtualScrollModule.existingDataCollection.length > 0) {
-            existingGroupIndices = new Set(this.parent.virtualScrollModule.existingDataCollection.map(function (data) { return data.groupIndex; }));
-        }
+        var existingGroupIndices = this.getGroupIndices();
         var handler = function (r) {
             var ntr = tr.cloneNode();
             for (var _i = 0, _a = _this.colLevels[_this.colLevels.length - 1]; _i < _a.length; _i++) {
                 var tdData = _a[_i];
                 var isAllowTdCreation = true;
                 if (_this.parent.virtualScrollModule && _this.parent.activeViewOptions.group.resources.length > 0) {
-                    if (existingGroupIndices.has(tdData.groupIndex)) {
+                    if (existingGroupIndices.indexOf(tdData.groupIndex) > -1) {
                         isAllowTdCreation = false;
                     }
                 }

package/src/schedule/renderer/view-base.d.ts

@@ -75,5 +75,6 @@ export declare class ViewBase {
     getViewEndDate(): Date;
     getAdjustedDate(startTime: Date): Date;
     resetColLevels(): void;
+    getGroupIndices(dataCollection?: TdData[]): number[];
     destroy(): void;
 }

package/src/schedule/renderer/view-base.js

@@ -625,6 +625,15 @@ var ViewBase = /** @class */ (function () {
             this.parent.resourceBase.expandedResources = this.colLevels[this.colLevels.length - 1];
         }
     };
+    ViewBase.prototype.getGroupIndices = function (dataCollection) {
+        var groupIndices = [];
+        if (this.parent.virtualScrollModule && this.parent.activeViewOptions.group.resources.length > 0 && (dataCollection ||
+            this.parent.virtualScrollModule.existingDataCollection.length > 0) && !this.parent.uiStateValues.isGroupAdaptive) {
+            dataCollection = isNullOrUndefined(dataCollection) ? this.parent.virtualScrollModule.existingDataCollection : dataCollection;
+            groupIndices = dataCollection.map(function (data) { return data.groupIndex; });
+        }
+        return groupIndices;
+    };
     ViewBase.prototype.destroy = function () {
         if (this.element && this.element.parentNode) {
             remove(this.element);

package/src/schedule/renderer/year.js

@@ -113,7 +113,7 @@ var Year = /** @class */ (function (_super) {
         this.setAriaAttributes(contentTable);
         var thead = createElement('thead', { className: 'e-week-header' });
         var tr = createElement('tr');
-        var currentWeek = util.getWeekFirstDate(util.firstDateOfMonth(currentDate), this.parent.firstDayOfWeek);
+        var currentWeek = util.getWeekFirstDate(util.firstDateOfMonth(currentDate), this.parent.activeViewOptions.firstDayOfWeek);
         if (this.parent.activeViewOptions.showWeekNumber) {
             tr.appendChild(createElement('th'));
         }
@@ -242,7 +242,7 @@ var Year = /** @class */ (function (_super) {
         return dateCol;
     };
     Year.prototype.getMonthDates = function (date) {
-        var startDate = util.getWeekFirstDate(util.firstDateOfMonth(date), this.parent.firstDayOfWeek);
+        var startDate = util.getWeekFirstDate(util.firstDateOfMonth(date), this.parent.activeViewOptions.firstDayOfWeek);
         var endDate = util.addDays(new Date(+startDate), (6 * util.WEEK_LENGTH));
         var dateCollection = [];
         for (var start = startDate; start.getTime() < endDate.getTime(); start = util.addDays(start, 1)) {
@@ -378,10 +378,10 @@ var Year = /** @class */ (function (_super) {
         return util.addDays(util.addMonths(this.getStartDate(), this.parent.monthsCount), -1);
     };
     Year.prototype.startDate = function () {
-        return this.parent.currentView === 'Year' ? util.getWeekFirstDate(this.getStartDate(), this.parent.firstDayOfWeek) : this.getStartDate();
+        return this.parent.currentView === 'Year' ? util.getWeekFirstDate(this.getStartDate(), this.parent.activeViewOptions.firstDayOfWeek) : this.getStartDate();
     };
     Year.prototype.endDate = function () {
-        return this.parent.currentView === 'Year' ? util.addDays(util.getWeekLastDate(this.getEndDate(), this.parent.firstDayOfWeek), 1) :
+        return this.parent.currentView === 'Year' ? util.addDays(util.getWeekLastDate(this.getEndDate(), this.parent.activeViewOptions.firstDayOfWeek), 1) :
             util.addDays(this.getEndDate(), 1);
     };
     Year.prototype.getEndDateFromStartDate = function (start) {