@syncfusion/ej2-schedule 19.4.55 → 20.1.47

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.55
+*  version : 20.1.47
 *  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.4.52",
+  "_id": "@syncfusion/ej2-schedule@19.17.32",
   "_inBundle": false,
-  "_integrity": "sha512-kqGJwynLsmjHrf6W2CXoFcDdFZwAEhU2iQvUoGHGtuSVVSlOJSb5TTuOU6daT4o5idjLl6nBb+OKdBEsZ+w4/w==",
+  "_integrity": "sha512-4FHdUSAgXuBaBtXh874obmuZajDCyXhm0DWafIQzUuBzXMzaPGjtQvAWyy5FHJ8nT8hm8XkmfHZQP7HiBZUuiw==",
   "_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-new/@syncfusion/ej2-schedule/-/ej2-schedule-19.4.52.tgz",
-  "_shasum": "869690125c5717449b0c8c251c01d781f6515e53",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-schedule/-/ej2-schedule-19.17.32.tgz",
+  "_shasum": "fcd93d1277377068fff0cce62d697ac67af1bd7e",
   "_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.4.52",
-    "@syncfusion/ej2-buttons": "~19.4.55",
-    "@syncfusion/ej2-calendars": "~19.4.55",
-    "@syncfusion/ej2-data": "~19.4.54",
-    "@syncfusion/ej2-dropdowns": "~19.4.55",
-    "@syncfusion/ej2-excel-export": "~19.4.52",
-    "@syncfusion/ej2-inputs": "~19.4.52",
-    "@syncfusion/ej2-lists": "~19.4.55",
-    "@syncfusion/ej2-navigations": "~19.4.55",
-    "@syncfusion/ej2-popups": "~19.4.53"
+    "@syncfusion/ej2-base": "~20.1.47",
+    "@syncfusion/ej2-buttons": "~20.1.47",
+    "@syncfusion/ej2-calendars": "~20.1.47",
+    "@syncfusion/ej2-data": "~20.1.47",
+    "@syncfusion/ej2-dropdowns": "~20.1.47",
+    "@syncfusion/ej2-excel-export": "~20.1.47",
+    "@syncfusion/ej2-inputs": "~20.1.47",
+    "@syncfusion/ej2-lists": "~20.1.47",
+    "@syncfusion/ej2-navigations": "~20.1.47",
+    "@syncfusion/ej2-popups": "~20.1.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.4.55",
+  "version": "20.1.47",
   "sideEffects": false
 }

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

@@ -145,6 +145,10 @@ export function generate(startDate, rule, excludeDate, startDayOfWeek, maximumCo
     }
     maxOccurrence = maximumCount;
     setFirstDayOfWeek(DAYINDEX[startDayOfWeek]);
+    if (ruleObject.until) {
+        var end = resetTime(ruleObject.until);
+        ruleObject.until = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 23, 59, 59);
+    }
     switch (ruleObject.freq) {
         case 'DAILY':
             dailyType(modifiedDate, ruleObject.until, data, ruleObject);

package/src/schedule/base/schedule.js

@@ -517,6 +517,7 @@ var Schedule = /** @class */ (function (_super) {
                 };
                 _this.trigger(events.navigating, navArgs, function (navigationArgs) {
                     if (!navigationArgs.cancel) {
+                        _this.uiStateValues.isInitial = ['TimelineMonth', 'TimelineYear', 'Year'].indexOf(view) > -1 ? true : _this.uiStateValues.isInitial;
                         _this.viewIndex = navigationArgs.viewIndex;
                         _this.setProperties({ currentView: view }, true);
                         if (_this.headerModule) {
@@ -1141,6 +1142,9 @@ var Schedule = /** @class */ (function (_super) {
                 if (document.querySelectorAll(template).length) {
                     return compile(document.querySelector(template).innerHTML.trim());
                 }
+                else {
+                    return compile(template);
+                }
             }
             catch (error) {
                 return compile(template);

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

@@ -34,7 +34,7 @@ var AgendaBase = /** @class */ (function (_super) {
                 moduleName: 'agenda',
                 listClass: this.parent.activeView.viewClass,
                 itemClass: this.parent.activeView.viewClass,
-                template: '<div class=' + cls.AGENDA_NO_EVENT_CLASS + '>${subject}</div>'
+                template: "<div class=\"" + cls.AGENDA_NO_EVENT_CLASS + "\">" + this.parent.localeObj.getConstant('noEvents') + "</div>"
             });
         }
         else {

package/src/schedule/event-renderer/month.d.ts

@@ -9,6 +9,7 @@ export declare class MonthEvent extends EventBase {
     fields: EventFieldsMapping;
     dateRender: Date[];
     renderedEvents: Record<string, any>[];
+    eventsRendered: Record<string, any>[];
     eventHeight: number;
     private monthHeaderHeight;
     workCells: HTMLElement[];
@@ -40,6 +41,7 @@ export declare class MonthEvent extends EventBase {
     createAppointmentElement(record: Record<string, any>, resIndex: number, isCloneElement?: boolean): HTMLElement;
     private appendEventIcons;
     renderEvents(event: Record<string, any>, resIndex: number, eventsList?: Record<string, any>[]): void;
+    private renderMoreIndicators;
     updateCellHeight(cell: HTMLElement, height: number): void;
     updateBlockElements(): void;
     getFilteredEvents(startDate: Date, endDate: Date, groupIndex: string, eventsList?: Record<string, any>[]): Record<string, any>[];
@@ -50,6 +52,7 @@ export declare class MonthEvent extends EventBase {
     getEventData(event: Record<string, any>): Record<string, any>;
     renderElement(cellTd: HTMLElement | Element, element: HTMLElement, isAppointment?: boolean): void;
     getMoreIndicatorElement(count: number, startDate: Date, endDate: Date): HTMLElement;
+    private getMoreIndicatorText;
     removeHeightProperty(selector: string): void;
     setMaxEventHeight(event: HTMLElement, cell: HTMLElement): void;
     destroy(): void;

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

@@ -27,6 +27,7 @@ var MonthEvent = /** @class */ (function (_super) {
     function MonthEvent(parent) {
         var _this = _super.call(this, parent) || this;
         _this.renderedEvents = [];
+        _this.eventsRendered = [];
         _this.monthHeaderHeight = 0;
         _this.moreIndicatorHeight = 19;
         _this.renderType = 'day';
@@ -47,7 +48,7 @@ var MonthEvent = /** @class */ (function (_super) {
             appElement = (this.parent.currentView === 'Month') ? appElement : [appElement[0]];
             for (var _i = 0, appElement_1 = appElement; _i < appElement_1.length; _i++) {
                 var wrap = appElement_1[_i];
-                if (!wrap.classList.contains('e-more-indicator') && wrap.parentElement && wrap.parentElement.parentNode) {
+                if (wrap.parentElement && wrap.parentElement.parentNode) {
                     remove(wrap.parentElement);
                 }
             }
@@ -143,6 +144,7 @@ var MonthEvent = /** @class */ (function (_super) {
     };
     MonthEvent.prototype.renderEventsHandler = function (dateRender, workDays, resData) {
         this.renderedEvents = [];
+        this.eventsRendered = [];
         var eventsList;
         var blockList;
         var resIndex = 0;
@@ -493,16 +495,16 @@ var MonthEvent = /** @class */ (function (_super) {
         }
         var overlapCount = this.getIndex(startTime);
         event.Index = overlapCount;
-        var appHeight = this.eventHeight;
         this.renderedEvents.push(extend({}, event, null, true));
         var diffInDays = event.data.count;
         if (startTime.getTime() <= endTime.getTime()) {
             var appWidth = (diffInDays * this.cellWidth) - 5;
             var cellTd = this.workCells[day];
-            var appTop = (overlapCount * (appHeight + EVENT_GAP));
-            var height = this.monthHeaderHeight + ((overlapCount + 1) * (appHeight + EVENT_GAP)) + this.moreIndicatorHeight;
+            var appTop = (overlapCount * (this.eventHeight + EVENT_GAP));
+            var height = this.monthHeaderHeight + ((overlapCount + 1) * (this.eventHeight + EVENT_GAP)) + this.moreIndicatorHeight;
             var enableAppRender = this.maxOrIndicator ? overlapCount < 1 ? true : false : this.cellHeight > height;
             if (this.parent.rowAutoHeight || enableAppRender) {
+                this.eventsRendered.push(extend({}, event, null, true));
                 var appointmentElement = void 0;
                 if (this.inlineValue) {
                     appointmentElement = this.parent.inlineModule.createInlineAppointmentElement();
@@ -518,28 +520,37 @@ var MonthEvent = /** @class */ (function (_super) {
                     var firstChild = cellTd.parentElement.firstElementChild;
                     this.updateCellHeight(firstChild, height);
                 }
+                else if (cellTd.querySelector('.' + cls.MORE_INDICATOR_CLASS)) {
+                    this.renderMoreIndicators(diffInDays, day);
+                }
             }
             else {
-                for (var i = 0; i < diffInDays; i++) {
-                    var cellTd_1 = this.workCells[day + i];
-                    if (cellTd_1 && isNullOrUndefined(cellTd_1.querySelector('.' + cls.MORE_INDICATOR_CLASS))) {
-                        var startDate = new Date(this.dateRender[day + i].getTime());
-                        var endDate = util.addDays(this.dateRender[day + i], 1);
-                        var groupIndex = cellTd_1.getAttribute('data-group-index');
-                        var filterEvents = this.getFilteredEvents(startDate, endDate, groupIndex);
-                        var appArea = this.cellHeight - this.monthHeaderHeight - this.moreIndicatorHeight;
-                        appHeight = this.withIndicator ? appArea : appHeight;
-                        var renderedAppCount = Math.floor(appArea / (appHeight + EVENT_GAP));
-                        var count = (filterEvents.length - renderedAppCount) <= 0 ? 1 : (filterEvents.length - renderedAppCount);
-                        var moreIndicatorElement = this.getMoreIndicatorElement(count, startDate, endDate);
-                        if (!isNullOrUndefined(groupIndex)) {
-                            moreIndicatorElement.setAttribute('data-group-index', groupIndex);
-                        }
-                        moreIndicatorElement.style.top = appArea + 'px';
-                        moreIndicatorElement.style.width = this.cellWidth - 2 + 'px';
-                        this.renderElement(cellTd_1, moreIndicatorElement);
-                        EventHandler.add(moreIndicatorElement, 'click', this.moreIndicatorClick, this);
+                this.renderMoreIndicators(diffInDays, day);
+            }
+        }
+    };
+    MonthEvent.prototype.renderMoreIndicators = function (diffInDays, day) {
+        for (var i = 0; i < diffInDays; i++) {
+            if (this.workCells[day + i]) {
+                var startDate = new Date(this.dateRender[day + i].getTime());
+                var endDate = util.addDays(this.dateRender[day + i], 1);
+                var groupIndex = this.workCells[day + i].getAttribute('data-group-index');
+                var filterEvents = this.getFilteredEvents(startDate, endDate, groupIndex);
+                var renderedAppCount = this.getOverlapEvents(startDate, this.eventsRendered).length;
+                var count = (filterEvents.length - renderedAppCount) <= 0 ? 1 : (filterEvents.length - renderedAppCount);
+                var indicator = this.workCells[day + i].querySelector('.' + cls.MORE_INDICATOR_CLASS);
+                if (indicator) {
+                    indicator.innerHTML = this.getMoreIndicatorText(count);
+                }
+                else {
+                    var moreIndicatorElement = this.getMoreIndicatorElement(count, startDate, endDate);
+                    if (!isNullOrUndefined(groupIndex)) {
+                        moreIndicatorElement.setAttribute('data-group-index', groupIndex);
                     }
+                    moreIndicatorElement.style.top = (this.cellHeight - this.monthHeaderHeight - this.moreIndicatorHeight) + 'px';
+                    moreIndicatorElement.style.width = this.cellWidth - 2 + 'px';
+                    this.renderElement(this.workCells[day + i], moreIndicatorElement);
+                    EventHandler.add(moreIndicatorElement, 'click', this.moreIndicatorClick, this);
                 }
             }
         }
@@ -661,7 +672,7 @@ var MonthEvent = /** @class */ (function (_super) {
     MonthEvent.prototype.getMoreIndicatorElement = function (count, startDate, endDate) {
         var moreIndicatorElement = createElement('div', {
             className: cls.MORE_INDICATOR_CLASS,
-            innerHTML: '+' + this.parent.globalize.formatNumber(count) + '&nbsp;' + (this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant('more')),
+            innerHTML: this.getMoreIndicatorText(count),
             attrs: {
                 'tabindex': '0',
                 'data-start-date': startDate.getTime().toString(),
@@ -671,6 +682,9 @@ var MonthEvent = /** @class */ (function (_super) {
         });
         return moreIndicatorElement;
     };
+    MonthEvent.prototype.getMoreIndicatorText = function (count) {
+        return '+' + this.parent.globalize.formatNumber(count) + '&nbsp;' + (this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant('more'));
+    };
     MonthEvent.prototype.removeHeightProperty = function (selector) {
         var rows = [].slice.call(this.element.querySelectorAll('.' + selector + ' tbody tr'));
         for (var _i = 0, rows_1 = rows; _i < rows_1.length; _i++) {

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

@@ -276,7 +276,8 @@ var TimelineEvent = /** @class */ (function (_super) {
         }
     };
     TimelineEvent.prototype.updateCellHeight = function (cell, height) {
-        if ((height > this.cellHeight)) {
+        var cellHeight = cell.style.height === '' ? this.cellHeight : parseInt(cell.style.height, 10);
+        if (height > cellHeight) {
             setStyleAttribute(cell, { 'height': height + 'px' });
             if (this.parent.activeViewOptions.group.resources.length > 0) {
                 var resourceCell = this.parent.element.querySelector('.' + cls.RESOURCE_COLUMN_TABLE_CLASS + ' ' + 'tbody td[data-group-index="' +

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

@@ -224,7 +224,9 @@ var YearEvent = /** @class */ (function (_super) {
         this.eventHeight = util.getElementHeightFromClass(eventTable, cls.APPOINTMENT_CLASS);
         var wrapperCollection = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CONTAINER_CLASS));
         var resources = this.parent.uiStateValues.isGroupAdaptive ?
-            [this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex]] : this.parent.resourceBase.lastResourceLevel;
+            [this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex]] :
+            this.parent.activeViewOptions.allowVirtualScrolling ? this.parent.resourceBase.renderedResources :
+                this.parent.resourceBase.lastResourceLevel;
         var months = this.getMonths();
         if (this.parent.activeViewOptions.orientation === 'Horizontal') {
             for (var month = 0; month < months.length; month++) {

package/src/schedule/popups/event-window.js

@@ -656,7 +656,8 @@ var EventWindow = /** @class */ (function () {
         return labelText;
     };
     EventWindow.prototype.onChange = function (args) {
-        var target = args.event.currentTarget.querySelector('input');
+        var targetSelector = "." + cls.EVENT_WINDOW_ALL_DAY_CLASS + ",." + cls.TIME_ZONE_CLASS + ",." + cls.EVENT_WINDOW_REPEAT_CLASS;
+        var target = closest(args.event.target, targetSelector);
         if (target.classList.contains(cls.EVENT_WINDOW_ALL_DAY_CLASS)) {
             this.onAllDayChange(args.checked);
         }
@@ -822,7 +823,8 @@ var EventWindow = /** @class */ (function () {
     };
     EventWindow.prototype.showDetails = function (eventData) {
         var eventObj = extend({}, eventData, null, true);
-        if (eventObj[this.fields.endTime].getHours() === 0 && eventObj[this.fields.endTime].getMinutes() === 0) {
+        if ((!this.cellClickAction || this.cellClickAction && !isNullOrUndefined(this.parent.editorTemplate)) &&
+            eventObj[this.fields.endTime].getHours() === 0 && eventObj[this.fields.endTime].getMinutes() === 0) {
             this.trimAllDay(eventObj);
         }
         this.eventData = eventObj;

package/src/schedule/renderer/month.d.ts

@@ -19,6 +19,7 @@ export declare class Month extends ViewBase implements IRenderer {
     scrollLeftPanel(target: HTMLElement): void;
     getLeftPanelElement(): HTMLElement;
     onScrollUIUpdate(args: NotifyEventArgs): void;
+    private scrollToSelectedDate;
     setContentHeight(content: HTMLElement, leftPanelElement: HTMLElement, height: number): void;
     generateColumnLevels(): TdData[][];
     getDateSlots(renderDates: Date[], workDays: number[]): TdData[];

package/src/schedule/renderer/month.js

@@ -57,6 +57,8 @@ var Month = /** @class */ (function (_super) {
         this.parent.notify(event.virtualScroll, e);
         this.scrollTopPanel(e.target);
         this.scrollLeftPanel(e.target);
+        this.parent.uiStateValues.top = e.target.scrollTop;
+        this.parent.uiStateValues.left = e.target.scrollLeft;
         this.setPersistence();
     };
     Month.prototype.scrollLeftPanel = function (target) {
@@ -89,26 +91,41 @@ var Month = /** @class */ (function (_super) {
             header.style[args.cssProperties.padding] = '';
         }
         this.setColWidth(content);
-        if (args.scrollPosition) {
+        if (args.scrollPosition || !args.isPreventScrollUpdate && this.parent.currentView === 'TimelineMonth') {
+            var top_1 = this.parent.currentView === 'TimelineMonth' ? this.parent.uiStateValues.top : args.scrollPosition.top;
             if (leftPanel) {
-                leftPanel.scrollTop = args.scrollPosition.top;
+                leftPanel.scrollTop = top_1;
             }
-            content.scrollTop = args.scrollPosition.top;
-            content.scrollLeft = args.scrollPosition.left;
-        }
-        else {
-            var headerCell = this.element.querySelector('.' + cls.HEADER_CELLS_CLASS + '[data-date="'
-                + this.parent.selectedDate.getTime().toString() + '"]');
-            if (!isNullOrUndefined(headerCell)) {
-                content.scrollLeft = !this.parent.enableRtl ?
-                    headerCell.offsetLeft : -(this.parent.getContentTable().offsetWidth - headerCell.offsetLeft - headerCell.offsetWidth);
+            content.scrollTop = top_1;
+            if (this.parent.uiStateValues.isInitial) {
+                this.scrollToSelectedDate();
+                this.parent.uiStateValues.isInitial = false;
             }
             else {
-                content.scrollLeft = 0;
+                content.scrollLeft = this.parent.currentView === 'TimelineMonth' ? this.parent.uiStateValues.left :
+                    args.scrollPosition.left;
             }
         }
+        else {
+            this.scrollToSelectedDate();
+        }
         this.retainScrollPosition();
     };
+    Month.prototype.scrollToSelectedDate = function () {
+        var headerCell = this.element.querySelector('.' + cls.HEADER_CELLS_CLASS + '[data-date="'
+            + this.parent.selectedDate.getTime().toString() + '"]');
+        var content = this.getContentAreaElement();
+        if (!isNullOrUndefined(headerCell)) {
+            content.scrollLeft = !this.parent.enableRtl ?
+                headerCell.offsetLeft : -(this.parent.getContentTable().offsetWidth - headerCell.offsetLeft - headerCell.offsetWidth);
+        }
+        else {
+            content.scrollLeft = 0;
+        }
+        if (content.scrollLeft === 0 && this.parent.uiStateValues.isInitial) {
+            this.parent.uiStateValues.left = 0;
+        }
+    };
     Month.prototype.setContentHeight = function (content, leftPanelElement, height) {
         content.style.height = 'auto';
         if (this.parent.currentView === 'Month') {

package/src/schedule/renderer/renderer.js

@@ -91,7 +91,8 @@ var Render = /** @class */ (function () {
             this.parent.virtualScrollModule.destroy();
             this.parent.virtualScrollModule = null;
         }
-        if (this.parent.currentView.indexOf('Timeline') !== -1 && this.parent.currentView.indexOf('Year') === -1
+        if (this.parent.currentView.indexOf('Timeline') !== -1 && (this.parent.currentView.indexOf('Year') === -1 ||
+            (this.parent.currentView === 'TimelineYear' && this.parent.activeViewOptions.orientation === 'Vertical'))
             && this.parent.activeViewOptions.allowVirtualScrolling
             && this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
             this.parent.virtualScrollModule = new VirtualScroll(this.parent);

package/src/schedule/renderer/timeline-year.d.ts

@@ -12,7 +12,8 @@ export declare class TimelineYear extends Year {
     private renderResourceHeader;
     renderContent(contentWrapper: HTMLElement): void;
     private renderDefaultContent;
-    private renderResourceContent;
+    getContentRows(): Element[];
+    renderResourceContent(wrapper: HTMLElement, monthBody: HTMLTableSectionElement, contentBody: HTMLTableSectionElement): void;
     private renderDayMonthHeaderTemplate;
     private renderCellTemplate;
     scrollToDate(scrollDate: Date): void;

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

@@ -149,7 +149,7 @@ var TimelineYear = /** @class */ (function (_super) {
             !this.parent.uiStateValues.isGroupAdaptive) {
             tdCollection.push(firstTd);
             firstTd.appendChild(this.parent.resourceBase.createResourceColumn());
-            this.rowCount = this.parent.resourceBase.lastResourceLevel.length;
+            this.rowCount = this.parent.resourceBase.renderedResources.length;
         }
         else {
             tdCollection.push(firstTd);
@@ -166,6 +166,9 @@ var TimelineYear = /** @class */ (function (_super) {
         content.appendChild(contentTable);
         var eventWrapper = createElement('div', { className: cls.EVENT_TABLE_CLASS });
         content.appendChild(eventWrapper);
+        if (this.parent.virtualScrollModule) {
+            this.parent.virtualScrollModule.renderVirtualTrack(content);
+        }
         var contentTBody = contentTable.querySelector('tbody');
         if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
             if (this.parent.rowAutoHeight) {
@@ -283,6 +286,47 @@ var TimelineYear = /** @class */ (function (_super) {
             }
         }
     };
+    TimelineYear.prototype.getContentRows = function () {
+        var tRow = [];
+        var monthCells = this.getMonths();
+        for (var row = 0; row < this.parent.resourceBase.renderedResources.length; row++) {
+            var tr = createElement('tr', { attrs: { 'role': 'row' } });
+            tRow.push(tr);
+            var resData = void 0;
+            if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
+                resData = this.parent.resourceBase.renderedResources[row];
+            }
+            var monthDate = new Date(this.parent.selectedDate.getFullYear(), monthCells[row], 1);
+            var date = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
+            for (var month = 0; month < this.columnCount; month++) {
+                var classList = [];
+                var groupIndex = resData.groupIndex;
+                classList = classList.concat(resData.className);
+                if (classList.indexOf(cls.RESOURCE_PARENT_CLASS) > -1) {
+                    classList.push(cls.RESOURCE_GROUP_CELLS_CLASS);
+                }
+                else {
+                    classList.push(cls.WORKDAY_CLASS);
+                }
+                monthDate = new Date(this.parent.selectedDate.getFullYear(), monthCells[month], 1);
+                date = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
+                var tdELe = createElement('td', {
+                    className: cls.WORK_CELLS_CLASS,
+                    attrs: {
+                        'role': 'gridcell', 'aria-selected': 'false',
+                        'data-date': date.getTime().toString()
+                    }
+                });
+                addClass([tdELe], classList);
+                tdELe.setAttribute('data-group-index', groupIndex.toString());
+                this.renderCellTemplate({ date: date, type: 'resourceGroupCells', groupIndex: groupIndex }, tdELe);
+                this.wireEvents(tdELe, 'cell');
+                this.parent.trigger(event.renderCell, { elementType: 'resourceGroupCells', element: tdELe, date: date });
+                tr.appendChild(tdELe);
+            }
+        }
+        return tRow;
+    };
     TimelineYear.prototype.renderResourceContent = function (wrapper, monthBody, contentBody) {
         var months = this.getMonths();
         for (var row = 0; row < this.rowCount; row++) {
@@ -290,8 +334,8 @@ var TimelineYear = /** @class */ (function (_super) {
             var tr = createElement('tr', { attrs: { 'role': 'row' } });
             contentBody.appendChild(tr);
             var resData = void 0;
-            if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
-                resData = this.parent.resourceBase.lastResourceLevel[row];
+            if (this.parent.activeViewOptions.orientation === 'Vertical' && this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
+                resData = this.parent.resourceBase.renderedResources[row];
             }
             var monthDate = new Date(this.parent.selectedDate.getFullYear(), months[row], 1);
             var date = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
@@ -312,8 +356,9 @@ var TimelineYear = /** @class */ (function (_super) {
             }
             for (var month = 0; month < this.columnCount; month++) {
                 var classList = [];
-                var groupIndex = row;
+                var groupIndex = void 0;
                 if (this.parent.activeViewOptions.orientation === 'Vertical') {
+                    groupIndex = resData.groupIndex;
                     classList = classList.concat(resData.className);
                     if (classList.indexOf(cls.RESOURCE_PARENT_CLASS) > -1) {
                         classList.push(cls.RESOURCE_GROUP_CELLS_CLASS);

package/src/schedule/renderer/year.js

@@ -41,6 +41,9 @@ var Year = /** @class */ (function (_super) {
         var viewTypeClass = this.parent.activeViewOptions.orientation === 'Horizontal' ? 'e-horizontal' : 'e-vertical';
         addClass([this.element], [this.viewClass, viewTypeClass, className]);
         this.renderPanel(className);
+        if (this.parent.activeViewOptions.allowVirtualScrolling) {
+            addClass([this.element], [cls.VIRTUAL_SCROLL_CLASS]);
+        }
         var calendarTable = this.createTableLayout(cls.OUTER_TABLE_CLASS);
         this.element.appendChild(calendarTable);
         this.element.querySelector('table').setAttribute('role', 'presentation');
@@ -261,6 +264,7 @@ var Year = /** @class */ (function (_super) {
     Year.prototype.onContentScroll = function (e) {
         var target = e.target;
         var headerWrapper = this.getDatesHeaderElement();
+        this.parent.notify(event.virtualScroll, e);
         if (headerWrapper) {
             headerWrapper.firstElementChild.scrollLeft = target.scrollLeft;
         }
@@ -269,6 +273,10 @@ var Year = /** @class */ (function (_super) {
         if (scrollTopElement) {
             scrollTopElement.scrollTop = target.scrollTop;
         }
+        if (!this.parent.isAdaptive) {
+            this.parent.uiStateValues.top = e.target.scrollTop;
+        }
+        this.parent.uiStateValues.left = e.target.scrollLeft;
         this.setPersistence();
     };
     Year.prototype.onScrollUiUpdate = function (args) {
@@ -299,6 +307,18 @@ var Year = /** @class */ (function (_super) {
             var isYScroll = contentWrapper.scrollWidth > contentWrapper.clientWidth;
             leftPanelElement.style.height = formatUnit(height - (isYScroll ? 17 : 0));
         }
+        if (!args.isPreventScrollUpdate) {
+            if (this.parent.uiStateValues.isInitial) {
+                this.parent.uiStateValues.isInitial = false;
+            }
+            else {
+                if (leftPanelElement) {
+                    leftPanelElement.scrollTop = this.parent.uiStateValues.top;
+                }
+                contentWrapper.scrollTop = this.parent.uiStateValues.top;
+                contentWrapper.scrollLeft = this.parent.uiStateValues.left;
+            }
+        }
         this.retainScrollPosition();
     };
     Year.prototype.getStartDate = function () {

package/styles/bootstrap-dark.css

@@ -1847,6 +1847,15 @@
   text-decoration: underline;
 }
 
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells {
+  background-color: rgba(0, 0, 0, 0.08);
+  box-shadow: inset 0 0 0 8px #2a2a2a;
+}
+
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
 .e-schedule .e-timeline-year-view .e-event-table {
   position: absolute;
   top: 0;
@@ -2878,13 +2887,6 @@
   min-width: 34px;
 }
 
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons {
-  padding: 0;
-}
-
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
@@ -4015,6 +4017,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-content,
 .e-more-popup-wrapper .e-more-event-content {
+  color: #f0f0f0;
   height: calc(100% - 35px);
   max-height: 150px;
   overflow-y: auto;

package/styles/bootstrap.css

@@ -1844,6 +1844,15 @@
   text-decoration: underline;
 }
 
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells {
+  background-color: rgba(0, 0, 0, 0.08);
+  box-shadow: inset 0 0 0 8px #f8f8f8;
+}
+
+.e-schedule .e-timeline-year-view.e-virtual-mask .e-work-cells:hover {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
 .e-schedule .e-timeline-year-view .e-event-table {
   position: absolute;
   top: 0;
@@ -2875,13 +2884,6 @@
   min-width: 34px;
 }
 
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons,
-.e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons {
-  padding: 0;
-}
-
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger .e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-tbtn-txt .e-icons.e-icon-right,
 .e-bigger.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item button.e-btn.e-tbtn-txt .e-icons.e-icon-right,
@@ -4013,6 +4015,7 @@
 
 .e-bigger .e-more-popup-wrapper .e-more-event-content,
 .e-more-popup-wrapper .e-more-event-content {
+  color: #333;
   height: calc(100% - 35px);
   max-height: 150px;
   overflow-y: auto;