@syncfusion/ej2-schedule 20.3.61 → 20.4.38

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { isNullOrUndefined, createElement, remove, closest, addClass, removeClass, extend } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, createElement, remove, closest, addClass, removeClass, extend, append } from '@syncfusion/ej2-base';
 import { Toolbar } from '@syncfusion/ej2-navigations';
 import { Calendar } from '@syncfusion/ej2-calendars';
 import { Popup } from '@syncfusion/ej2-popups';
@@ -148,13 +148,29 @@ var HeaderRenderer = /** @class */ (function () {
             addClass([selEle[this.parent.viewIndex]], ['e-active-view']);
         }
     };
-    HeaderRenderer.prototype.updateDateRange = function (text) {
+    HeaderRenderer.prototype.updateDateRange = function (date) {
         var selEle = this.toolbarObj.element.querySelector('.e-date-range');
-        if (selEle) {
+        if (!selEle) {
+            return;
+        }
+        var textEle = selEle.querySelector('.e-tbar-btn-text');
+        if (this.parent.activeViewOptions.dateRangeTemplate) {
+            textEle.textContent = '';
+            var args = {
+                startDate: this.parent.activeView.getStartDate(),
+                endDate: this.parent.activeView.getEndDate(), currentView: this.parent.currentView
+            };
+            var viewName = this.parent.activeViewOptions.dateRangeTemplateName;
+            var templateId = this.parent.element.id + '_' + viewName + 'dateRangeTemplate';
+            var dateTemplate = [].slice.call(this.parent.getDateRangeTemplate()(args, this.parent, 'dateRangeTemplate', templateId, false));
+            append(dateTemplate, textEle);
+        }
+        else {
+            var text = this.parent.activeView.getDateRangeText(date);
             selEle.setAttribute('aria-label', text);
-            selEle.querySelector('.e-tbar-btn-text').innerHTML = text;
-            this.refresh();
+            textEle.textContent = text;
         }
+        this.refresh();
     };
     HeaderRenderer.prototype.refresh = function () {
         if (this.toolbarObj) {

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

@@ -12,7 +12,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { createElement, addClass, formatUnit, remove } from '@syncfusion/ej2-base';
+import { EventHandler, createElement, addClass, formatUnit, remove } from '@syncfusion/ej2-base';
 import { AgendaBase } from '../event-renderer/agenda-base';
 import { Month } from './month';
 import * as util from '../base/util';
@@ -56,11 +56,18 @@ var MonthAgenda = /** @class */ (function (_super) {
         }
         var contentArea = this.getContentAreaElement().firstElementChild;
         var dateHeader = this.element.querySelector('.' + cls.DATE_HEADER_WRAP_CLASS);
-        var availHeight = this.parent.element.offsetHeight - headerHeight - dateHeader.offsetHeight - contentArea.offsetHeight;
+        var availHeight = this.parent.element.offsetHeight - headerHeight - dateHeader.offsetHeight;
+        var contentAreaHeight = (this.parent.activeViewOptions.interval > 1) ?
+            Math.round(availHeight * 0.8) : contentArea.offsetHeight;
+        var appContainerHeight = availHeight - contentAreaHeight;
         var wrapperContainer = this.element.querySelector('.' + cls.WRAPPER_CONTAINER_CLASS);
         var eventWrapper = this.element.querySelector('.' + cls.APPOINTMENT_WRAP_CLASS);
         if (this.parent.height !== 'auto') {
-            wrapperContainer.style.height = eventWrapper.style.height = formatUnit(availHeight);
+            if (this.parent.activeViewOptions.interval > 1) {
+                contentArea.style.height = formatUnit(contentAreaHeight);
+                EventHandler.add(contentArea, 'scroll', this.onContentScroll, this);
+            }
+            wrapperContainer.style.height = eventWrapper.style.height = formatUnit(appContainerHeight);
         }
     };
     MonthAgenda.prototype.onDataReady = function (args) {
@@ -77,7 +84,7 @@ var MonthAgenda = /** @class */ (function (_super) {
         for (var _i = 0, _a = this.renderDates; _i < _a.length; _i++) {
             var date = _a[_i];
             var filterData = this.appointmentFiltering(date);
-            var workCell = this.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS)[count];
+            var workCell = this.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS)[parseInt(count.toString(), 10)];
             if (filterData.length > 0) {
                 if (!workCell.querySelector('.' + cls.APPOINTMENT_INDICATOR_CLASS)) {
                     workCell.appendChild(createElement('div', { className: cls.APPOINTMENT_INDICATOR_CLASS }));

package/src/schedule/renderer/month.js

@@ -133,7 +133,9 @@ var Month = /** @class */ (function (_super) {
         }
         if (leftPanelElement) {
             if (this.parent.currentView === 'MonthAgenda') {
-                height = this.element.querySelector('.' + cls.CONTENT_TABLE_CLASS).offsetHeight;
+                height = (this.parent.activeViewOptions.interval > 1) ?
+                    this.getContentAreaElement().firstElementChild.offsetHeight :
+                    this.element.querySelector('.' + cls.CONTENT_TABLE_CLASS).offsetHeight;
             }
             leftPanelElement.style.height = 'auto';
             leftPanelElement.style.height = formatUnit(height - this.getScrollXIndent(content));
@@ -149,7 +151,14 @@ var Month = /** @class */ (function (_super) {
             }
             if (this.parent.uiStateValues.isGroupAdaptive && this.parent.resourceBase.lastResourceLevel.length > 0) {
                 var resourceLevel = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];
-                colLevels = [this.getDateSlots(resourceLevel.renderDates, resourceLevel.workDays)];
+                var levels_1 = this.getDateSlots(resourceLevel.renderDates, resourceLevel.workDays);
+                if (this.parent.activeViewOptions.group.byDate && this.parent.activeViewOptions.group.hideNonWorkingDays) {
+                    var index = levels_1.findIndex(function (x, index) {
+                        return index !== 0 && x.date.getDay() === levels_1[0].date.getDay();
+                    });
+                    levels_1 = index > -1 ? levels_1.slice(0, index) : levels_1;
+                }
+                colLevels = [levels_1];
             }
         }
         else {
@@ -168,7 +177,7 @@ var Month = /** @class */ (function (_super) {
             if (isCurrentMonth && currentDateIndex.indexOf(this.parent.getCurrentTime().getDay()) === col) {
                 classList.push(cls.CURRENT_DAY_CLASS);
             }
-            dateSlots.push({ date: renderDates[col], type: 'monthDay', className: classList, colSpan: 1, workDays: workDays });
+            dateSlots.push({ date: renderDates[parseInt(col.toString(), 10)], type: 'monthDay', className: classList, colSpan: 1, workDays: workDays });
         }
         return dateSlots;
     };
@@ -185,6 +194,9 @@ var Month = /** @class */ (function (_super) {
         clsList.push(type);
         if (this.parent.activeViewOptions.group.byDate) {
             clsList.push('e-by-date');
+            if (this.parent.currentView !== 'Month') {
+                this.parent.activeViewOptions.group.hideNonWorkingDays = false;
+            }
         }
         if (this.parent.activeViewOptions.allowVirtualScrolling && !this.parent.uiStateValues.isGroupAdaptive) {
             clsList.push(cls.VIRTUAL_SCROLL_CLASS);
@@ -298,10 +310,10 @@ var Month = /** @class */ (function (_super) {
         this.createColGroup(table, this.colLevels[this.colLevels.length - 1]);
         var trEle = createElement('tr');
         for (var i = 0; i < this.colLevels.length; i++) {
-            var level = this.colLevels[i];
+            var level = this.colLevels[parseInt(i.toString(), 10)];
             var ntr = trEle.cloneNode();
             for (var j = 0; j < level.length; j++) {
-                var td = level[j];
+                var td = level[parseInt(j.toString(), 10)];
                 ntr.appendChild(this.createHeaderCell(td));
             }
             table.querySelector('tbody').appendChild(ntr);
@@ -359,10 +371,10 @@ var Month = /** @class */ (function (_super) {
                 date: new Date(+renderDate), groupIndex: resData.groupIndex, workDays: resData.workDays,
                 type: 'monthCells', className: classList || [cls.WORK_CELLS_CLASS]
             };
-            if (!slotDatas[rowIndex]) {
-                slotDatas[rowIndex] = [];
+            if (!slotDatas[parseInt(rowIndex.toString(), 10)]) {
+                slotDatas[parseInt(rowIndex.toString(), 10)] = [];
             }
-            slotDatas[rowIndex].push(data);
+            slotDatas[parseInt(rowIndex.toString(), 10)].push(data);
         };
         var includeResource = this.parent.currentView !== 'MonthAgenda' &&
             this.parent.activeViewOptions.group.resources.length > 0;
@@ -388,22 +400,38 @@ var Month = /** @class */ (function (_super) {
             var startIndex = this.renderDates.map(Number).indexOf(+level[0].date);
             for (var i = 0; i < (this.renderDates.length / count); i++) {
                 var colDates = dates.splice(0, count);
-                for (var j = startIndex; j < (this.colLevels[0].length + startIndex) && j < colDates.length; j++) {
-                    var colDate = colDates[j];
+                var k = startIndex;
+                var _loop_1 = function (j) {
+                    var colDate = colDates[parseInt(k.toString(), 10)];
+                    k++;
                     if (includeResource) {
-                        var lastRow = this.colLevels[(this.colLevels.length - 1)];
-                        var resourcesTd = lastRow.slice(0, lastRow.length / count);
+                        var lastRow = this_1.colLevels[(this_1.colLevels.length - 1)];
+                        var rowCount = lastRow.length / count;
+                        var resourcesTd = lastRow.slice(0, rowCount);
+                        if (this_1.parent.activeViewOptions.group.hideNonWorkingDays) {
+                            resourcesTd = lastRow.filter(function (x) { return x.date.getDay() === colDate.getDay(); });
+                            if (resourcesTd.length === 0) {
+                                j = j - 1;
+                                return out_j_1 = j, "continue";
+                            }
+                        }
                         for (var resIndex = 0; resIndex < resourcesTd.length; resIndex++) {
                             var clsList = void 0;
                             if (resIndex !== 0) {
                                 clsList = [cls.WORK_CELLS_CLASS, cls.DISABLE_DATE];
                             }
-                            prepareSlots(i, colDate, resourcesTd[resIndex], clsList);
+                            prepareSlots(i, colDate, resourcesTd[parseInt(resIndex.toString(), 10)], clsList);
                         }
                     }
                     else {
-                        prepareSlots(i, colDate, this.colLevels[this.colLevels.length - 1][0]);
+                        prepareSlots(i, colDate, this_1.colLevels[this_1.colLevels.length - 1][0]);
                     }
+                    out_j_1 = j;
+                };
+                var this_1 = this, out_j_1;
+                for (var j = startIndex; j < (this.colLevels[0].length + startIndex) && j < colDates.length; j++) {
+                    _loop_1(j);
+                    j = out_j_1;
                 }
             }
         }
@@ -447,8 +475,8 @@ var Month = /** @class */ (function (_super) {
         var slotDatas = this.getContentSlots();
         for (var row = 0; row < slotDatas.length; row++) {
             var ntr = tr.cloneNode();
-            for (var col = 0; col < slotDatas[row].length; col++) {
-                var ntd = this.createContentTd(slotDatas[row][col], td);
+            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);
                 ntr.appendChild(ntd);
             }
             trows.push(ntr);

package/src/schedule/renderer/renderer.js

@@ -20,8 +20,8 @@ var Render = /** @class */ (function () {
         if (this.parent.activeView) {
             var templates = [
                 'cellTemplate', 'eventTemplate', 'tooltipTemplate', 'majorSlotTemplate', 'minorSlotTemplate',
-                'headerTooltipTemplate', 'dateHeaderTemplate', 'dayHeaderTemplate', 'mothHeaderTemplate',
-                'headerIndentTemplate', 'resourceHeaderTemplate', 'cellHeaderTemplate'
+                'headerTooltipTemplate', 'dateHeaderTemplate', 'dayHeaderTemplate', 'monthHeaderTemplate',
+                'headerIndentTemplate', 'resourceHeaderTemplate', 'cellHeaderTemplate', 'dateRangeTemplate'
             ];
             this.parent.resetTemplates(templates);
             this.parent.activeView.removeEventListener();
@@ -125,7 +125,7 @@ var Render = /** @class */ (function () {
             else if (this.parent.element.classList.contains(cls.READ_ONLY)) {
                 removeClass([this.parent.element], cls.READ_ONLY);
             }
-            this.parent.headerModule.updateDateRange(this.parent.activeView.getDateRangeText());
+            this.parent.headerModule.updateDateRange();
             this.parent.headerModule.updateHeaderItems('remove');
         }
     };

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

@@ -13,8 +13,8 @@ var TimelineHeaderRow = /** @class */ (function () {
         for (var _i = 0, dates_1 = dates; _i < dates_1.length; _i++) {
             var d = dates_1[_i];
             var key = d.getFullYear();
-            result[key] = result[key] || [];
-            result[key].push(d);
+            result[parseInt(key.toString(), 10)] = result[parseInt(key.toString(), 10)] || [];
+            result[parseInt(key.toString(), 10)].push(d);
         }
         return result;
     };
@@ -23,8 +23,8 @@ var TimelineHeaderRow = /** @class */ (function () {
         for (var _i = 0, dates_2 = dates; _i < dates_2.length; _i++) {
             var d = dates_2[_i];
             var key = (d.getFullYear() - 1970) * 12 + d.getMonth();
-            result[key] = result[key] || [];
-            result[key].push(d);
+            result[parseInt(key.toString(), 10)] = result[parseInt(key.toString(), 10)] || [];
+            result[parseInt(key.toString(), 10)].push(d);
         }
         return result;
     };
@@ -38,8 +38,8 @@ var TimelineHeaderRow = /** @class */ (function () {
             if (this.parent.firstDayOfWeek && this.parent.firstDayOfWeek > new Date(+d).getDay()) {
                 key = key - 1;
             }
-            result[key] = result[key] || [];
-            result[key].push(d);
+            result[parseInt(key.toString(), 10)] = result[parseInt(key.toString(), 10)] || [];
+            result[parseInt(key.toString(), 10)].push(d);
         }
         return result;
     };
@@ -51,7 +51,7 @@ var TimelineHeaderRow = /** @class */ (function () {
         var tdDatas = [];
         var keys = Object.keys(data);
         for (var i = 0; i < keys.length; i++) {
-            var dates = data[keys[i]];
+            var dates = data[keys[parseInt(i.toString(), 10)]];
             var htmlCol = void 0;
             if (row.template) {
                 var args = { date: dates[0], type: type };

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

@@ -101,7 +101,7 @@ var TimelineMonth = /** @class */ (function (_super) {
                 var data = _a[_i];
                 data.className = [cls.WORK_CELLS_CLASS];
                 if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
-                    var resLevel = this.parent.resourceBase.renderedResources[row];
+                    var resLevel = this.parent.resourceBase.renderedResources[parseInt(row.toString(), 10)];
                     data.workDays = resLevel.resourceData[resLevel.resource.workDaysField] || this.parent.workDays;
                     data.className = data.className.concat(resLevel.className);
                     data.groupIndex = resLevel.groupIndex;
@@ -111,10 +111,10 @@ var TimelineMonth = /** @class */ (function (_super) {
                     date: new Date(+data.date), colSpan: data.colSpan, groupIndex: data.groupIndex, workDays: data.workDays,
                     type: 'monthCells', className: data.className
                 };
-                if (!slotDatas[row]) {
-                    slotDatas[row] = [];
+                if (!slotDatas[parseInt(row.toString(), 10)]) {
+                    slotDatas[parseInt(row.toString(), 10)] = [];
                 }
-                slotDatas[row].push(slotData);
+                slotDatas[parseInt(row.toString(), 10)].push(slotData);
             }
         }
         return slotDatas;
@@ -153,7 +153,7 @@ var TimelineMonth = /** @class */ (function (_super) {
     TimelineMonth.prototype.getAdjustedDate = function (startTime) {
         var timeSlots = this.colLevels[this.colLevels.length - 1];
         for (var i = 0; i < timeSlots.length; i++) {
-            if (timeSlots[i].date.getTime() > startTime.getTime()) {
+            if (timeSlots[parseInt(i.toString(), 10)].date.getTime() > startTime.getTime()) {
                 return timeSlots[i - 1].date;
             }
         }

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

@@ -212,7 +212,7 @@ var TimelineViews = /** @class */ (function (_super) {
         return 1;
     };
     TimelineViews.prototype.getResourceTdData = function (i, tdData) {
-        var resLevel = this.parent.resourceBase.renderedResources[i];
+        var resLevel = this.parent.resourceBase.renderedResources[parseInt(i.toString(), 10)];
         var resSHr = resLevel.resourceData[resLevel.resource.startHourField] || this.parent.workHours.start;
         var resEHr = resLevel.resourceData[resLevel.resource.endHourField] || this.parent.workHours.end;
         tdData.startHour = this.parent.getStartEndTime(resSHr);
@@ -262,7 +262,7 @@ var TimelineViews = /** @class */ (function (_super) {
         else {
             var timeSlots = this.colLevels[this.colLevels.length - 1];
             for (var i = 0; i < timeSlots.length; i++) {
-                if (timeSlots[i].date.getTime() > date.getTime()) {
+                if (timeSlots[parseInt(i.toString(), 10)].date.getTime() > date.getTime()) {
                     return timeSlots[i - 1].date;
                 }
             }

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

@@ -66,11 +66,11 @@ var TimelineYear = /** @class */ (function (_super) {
             var months = this.getMonths();
             var dayHeaderDates = this.getMonthDates(new Date(this.parent.selectedDate.getFullYear(), months[0], 1));
             for (var column = 0; column < this.columnCount; column++) {
-                var date = new Date(this.parent.selectedDate.getFullYear(), months[column], 1);
+                var date = new Date(this.parent.selectedDate.getFullYear(), months[parseInt(column.toString(), 10)], 1);
                 var innerTd = createElement('td', { className: cls.HEADER_CELLS_CLASS });
                 if (this.parent.activeViewOptions.orientation === 'Horizontal') {
                     if (this.parent.dayHeaderTemplate) {
-                        append(this.renderDayMonthHeaderTemplate(dayHeaderDates[column], column, 'dayHeaderTemplate'), innerTd);
+                        append(this.renderDayMonthHeaderTemplate(dayHeaderDates[parseInt(column.toString(), 10)], column, 'dayHeaderTemplate'), innerTd);
                     }
                     else {
                         innerTd.innerHTML = "<span>" + this.parent.getDayNames('abbreviated')[column % 7] + "</span>";
@@ -78,7 +78,7 @@ var TimelineYear = /** @class */ (function (_super) {
                 }
                 else {
                     if (this.parent.monthHeaderTemplate) {
-                        append(this.renderDayMonthHeaderTemplate(date, months[column], 'monthHeaderTemplate'), innerTd);
+                        append(this.renderDayMonthHeaderTemplate(date, months[parseInt(column.toString(), 10)], 'monthHeaderTemplate'), innerTd);
                     }
                     else {
                         innerTd.innerHTML = "<span>" + this.getMonthName(date) + "</span>";
@@ -194,7 +194,7 @@ var TimelineYear = /** @class */ (function (_super) {
         var dayHeaderDates = this.getMonthDates(new Date(this.parent.selectedDate.getFullYear(), months[0], 1));
         for (var month = 0; month < this.rowCount; month++) {
             wrapper.appendChild(createElement('div', { className: cls.APPOINTMENT_CONTAINER_CLASS }));
-            var monthDate = new Date(this.parent.selectedDate.getFullYear(), months[month], 1);
+            var monthDate = new Date(this.parent.selectedDate.getFullYear(), months[parseInt(month.toString(), 10)], 1);
             var monthStart = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
             var monthEnd = this.parent.calendarUtil.getMonthEndDate(new Date(monthDate.getTime()));
             var tr = createElement('tr');
@@ -214,7 +214,7 @@ var TimelineYear = /** @class */ (function (_super) {
             }
             else {
                 if (this.parent.dayHeaderTemplate) {
-                    append(this.renderDayMonthHeaderTemplate(dayHeaderDates[month], month, 'dayHeaderTemplate'), monthTd);
+                    append(this.renderDayMonthHeaderTemplate(dayHeaderDates[parseInt(month.toString(), 10)], month, 'dayHeaderTemplate'), monthTd);
                 }
                 else {
                     monthTd.innerHTML = "<span>" + this.parent.getDayNames('abbreviated')[month % 7] + "</span>";
@@ -226,11 +226,11 @@ var TimelineYear = /** @class */ (function (_super) {
             for (var column = 0; column < this.columnCount; column++) {
                 var isDateAvail = void 0;
                 if (this.parent.activeViewOptions.orientation === 'Vertical') {
-                    monthDate = new Date(this.parent.selectedDate.getFullYear(), months[column], 1);
+                    monthDate = new Date(this.parent.selectedDate.getFullYear(), months[parseInt(column.toString(), 10)], 1);
                     monthStart = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
                     monthEnd = this.parent.calendarUtil.getMonthEndDate(new Date(monthDate.getTime()));
                     var dayDate = (month - monthStart.getDay()) + 1;
-                    date = new Date(this.parent.selectedDate.getFullYear(), months[column], dayDate);
+                    date = new Date(this.parent.selectedDate.getFullYear(), months[parseInt(column.toString(), 10)], dayDate);
                     isDateAvail = dayDate > 0 && date.getTime() < monthEnd.getTime();
                 }
                 else {
@@ -256,6 +256,9 @@ var TimelineYear = /** @class */ (function (_super) {
                     if (this.parent.activeViewOptions.workDays.indexOf(date.getDay()) > -1) {
                         classList.push(cls.WORKDAY_CLASS);
                     }
+                    if (!this.parent.isMinMaxDate(date)) {
+                        addClass([td], cls.DISABLE_DATES);
+                    }
                     if (this.isCurrentDate(date)) {
                         classList.push(cls.CURRENT_DAY_CLASS);
                         if (this.parent.activeViewOptions.orientation === 'Horizontal') {
@@ -271,6 +274,9 @@ var TimelineYear = /** @class */ (function (_super) {
                 }
                 else {
                     addClass([td], cls.OTHERMONTH_CLASS);
+                    if (!this.parent.isMinMaxDate(date)) {
+                        addClass([td], cls.DISABLE_DATES);
+                    }
                 }
                 if (td.classList.contains(cls.OTHERMONTH_CLASS)) {
                     continue;
@@ -298,9 +304,9 @@ var TimelineYear = /** @class */ (function (_super) {
             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];
+                resData = this.parent.resourceBase.renderedResources[parseInt(row.toString(), 10)];
             }
-            var monthDate = new Date(this.parent.selectedDate.getFullYear(), monthCells[row], 1);
+            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++) {
                 var classList = [];
@@ -312,7 +318,7 @@ var TimelineYear = /** @class */ (function (_super) {
                 else {
                     classList.push(cls.WORKDAY_CLASS);
                 }
-                monthDate = new Date(this.parent.selectedDate.getFullYear(), monthCells[month], 1);
+                monthDate = new Date(this.parent.selectedDate.getFullYear(), monthCells[parseInt(month.toString(), 10)], 1);
                 date = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
                 var tdELe = createElement('td', {
                     className: cls.WORK_CELLS_CLASS,
@@ -339,9 +345,9 @@ var TimelineYear = /** @class */ (function (_super) {
             contentBody.appendChild(tr);
             var resData = void 0;
             if (this.parent.activeViewOptions.orientation === 'Vertical' && this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
-                resData = this.parent.resourceBase.renderedResources[row];
+                resData = this.parent.resourceBase.renderedResources[parseInt(row.toString(), 10)];
             }
-            var monthDate = new Date(this.parent.selectedDate.getFullYear(), months[row], 1);
+            var monthDate = new Date(this.parent.selectedDate.getFullYear(), months[parseInt(row.toString(), 10)], 1);
             var date = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
             if (this.parent.activeViewOptions.orientation === 'Horizontal') {
                 var monthTr = tr.cloneNode();
@@ -370,11 +376,11 @@ var TimelineYear = /** @class */ (function (_super) {
                     else {
                         classList.push(cls.WORKDAY_CLASS);
                     }
-                    monthDate = new Date(this.parent.selectedDate.getFullYear(), months[month], 1);
+                    monthDate = new Date(this.parent.selectedDate.getFullYear(), months[parseInt(month.toString(), 10)], 1);
                     date = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
                 }
                 else {
-                    groupIndex = this.colLevels.slice(-1)[0][month].groupIndex;
+                    groupIndex = this.colLevels.slice(-1)[0][parseInt(month.toString(), 10)].groupIndex;
                     classList.push(cls.WORKDAY_CLASS);
                 }
                 var td = createElement('td', {

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

@@ -116,6 +116,9 @@ var VerticalView = /** @class */ (function (_super) {
         }
         if (!args.isPreventScrollUpdate) {
             if (this.parent.uiStateValues.isInitial) {
+                if (this.parent.currentView.indexOf('Timeline') > -1) {
+                    content.scrollTop = this.parent.uiStateValues.top;
+                }
                 this.scrollToWorkHour();
                 this.parent.uiStateValues.isInitial = false;
             }
@@ -181,6 +184,18 @@ var VerticalView = /** @class */ (function (_super) {
         var columnLevels = [];
         if (this.parent.activeViewOptions.group.resources.length > 0) {
             columnLevels = this.parent.resourceBase.generateResourceLevels(level);
+            if (this.parent.activeViewOptions.group.hideNonWorkingDays) {
+                while (columnLevels[0].length === 0) {
+                    this.parent.setProperties({ selectedDate: this.parent.activeView.getNextPreviousDate(this.previousNextAction) }, true);
+                    this.parent.activeView.getRenderDates();
+                    if (this.parent.headerModule) {
+                        this.parent.headerModule.setCalendarDate(this.parent.selectedDate);
+                        this.parent.headerModule.updateDateRange();
+                    }
+                    level = this.getDateSlots(this.renderDates, this.parent.activeViewOptions.workDays);
+                    columnLevels = this.parent.resourceBase.generateResourceLevels(level);
+                }
+            }
             if (this.parent.uiStateValues.isGroupAdaptive && this.parent.resourceBase.lastResourceLevel.length > 0) {
                 var resourceLevel = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];
                 var resStartHour = resourceLevel.resourceData[resourceLevel.resource.startHourField];
@@ -328,11 +343,11 @@ var VerticalView = /** @class */ (function (_super) {
         }
         var curTimeWrap = [].slice.call(this.element.querySelectorAll('.' + cls.TIMELINE_WRAPPER_CLASS));
         for (var i = 0, length_1 = currentDateIndex[0]; i < length_1; i++) {
-            curTimeWrap[i].appendChild(createElement('div', { className: cls.PREVIOUS_TIMELINE_CLASS, styles: 'top:' + topInPx }));
+            curTimeWrap[parseInt(i.toString(), 10)].appendChild(createElement('div', { className: cls.PREVIOUS_TIMELINE_CLASS, styles: 'top:' + topInPx }));
         }
         for (var _i = 0, currentDateIndex_1 = currentDateIndex; _i < currentDateIndex_1.length; _i++) {
             var day = currentDateIndex_1[_i];
-            curTimeWrap[day].appendChild(createElement('div', { className: cls.CURRENT_TIMELINE_CLASS, styles: 'top:' + topInPx }));
+            curTimeWrap[parseInt(day.toString(), 10)].appendChild(createElement('div', { className: cls.CURRENT_TIMELINE_CLASS, styles: 'top:' + topInPx }));
         }
         var currentTimeEle = createElement('div', {
             innerHTML: this.parent.getTimeString(this.parent.getCurrentTime()),
@@ -341,8 +356,8 @@ var VerticalView = /** @class */ (function (_super) {
         });
         if (rowIndex <= timeTrs.length) {
             removeClass(timeCellsWrap.querySelectorAll('.' + cls.HIDE_CHILDS_CLASS), cls.HIDE_CHILDS_CLASS);
-            if (timeTrs[rowIndex]) {
-                addClass([timeTrs[rowIndex].lastElementChild], cls.HIDE_CHILDS_CLASS);
+            if (timeTrs[parseInt(rowIndex.toString(), 10)]) {
+                addClass([timeTrs[parseInt(rowIndex.toString(), 10)].lastElementChild], cls.HIDE_CHILDS_CLASS);
             }
             prepend([currentTimeEle], timeCellsWrap);
             currentTimeEle.style.top = formatUnit(currentTimeEle.offsetTop - (currentTimeEle.offsetHeight / 2));
@@ -501,7 +516,7 @@ var VerticalView = /** @class */ (function (_super) {
         var nth;
         for (var i = 0; i < rowCount; i++) {
             var ntr_1 = trEle.cloneNode();
-            var data_1 = { className: [(this.colLevels[i][0] && this.colLevels[i][0].className[0])], type: 'emptyCells' };
+            var data_1 = { className: [(this.colLevels[parseInt(i.toString(), 10)][0] && this.colLevels[parseInt(i.toString(), 10)][0].className[0])], type: 'emptyCells' };
             if (this.parent.activeViewOptions.showWeekNumber && data_1.className.indexOf(cls.HEADER_CELLS_CLASS) !== -1) {
                 data_1.className.push(cls.WEEK_NUMBER_CLASS);
                 var weekNo = this.parent.getWeekNumberContent(this.renderDates);
@@ -543,9 +558,9 @@ var VerticalView = /** @class */ (function (_super) {
         var lastLevel = this.colLevels[rowCount - 1];
         for (var i = 0; i < rowCount; i++) {
             var ntr = trEle.cloneNode();
-            var level = this.colLevels[i];
+            var level = this.colLevels[parseInt(i.toString(), 10)];
             for (var j = 0; j < level.length; j++) {
-                ntr.appendChild(this.createTd(level[j]));
+                ntr.appendChild(this.createTd(level[parseInt(j.toString(), 10)]));
             }
             tbl.querySelector('tbody').appendChild(ntr);
         }
@@ -557,7 +572,7 @@ var VerticalView = /** @class */ (function (_super) {
     VerticalView.prototype.createAllDayRow = function (table, tdData) {
         var ntr = createElement('tr', { className: cls.ALLDAY_ROW_CLASS });
         for (var j = 0; j < tdData.length; j++) {
-            var td = extend({}, tdData[j]);
+            var td = extend({}, tdData[parseInt(j.toString(), 10)]);
             td.className = [cls.ALLDAY_CELLS_CLASS];
             td.type = 'alldayCells';
             var ntd = this.createTd(td);
@@ -786,7 +801,7 @@ var VerticalView = /** @class */ (function (_super) {
             var startDate = new Date(new Date(timeSlots[0].date.getTime()).
                 setHours(startTime.getHours(), startTime.getMinutes(), startTime.getMilliseconds()));
             for (var i = 0; i < timeSlots.length; i++) {
-                if (timeSlots[i].date.getTime() > startDate.getTime()) {
+                if (timeSlots[parseInt(i.toString(), 10)].date.getTime() > startDate.getTime()) {
                     startTime.setHours(timeSlots[i - 1].date.getHours(), timeSlots[i - 1].date.getMinutes(), timeSlots[i - 1].date.getMilliseconds());
                     return new Date(startTime);
                 }

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

@@ -4,6 +4,7 @@ import { TdData } from '../base/interface';
  * view base
  */
 export declare class ViewBase {
+    previousNextAction: string;
     element: HTMLElement;
     parent: Schedule;
     renderDates: Date[];
@@ -42,6 +43,8 @@ export declare class ViewBase {
     generateColumnLevels(): TdData[][];
     getColumnLevels(): TdData[][];
     highlightCurrentTime(): void;
+    getStartDate(): Date;
+    getEndDate(): Date;
     startDate(): Date;
     endDate(): Date;
     getStartHour(): Date;

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

@@ -12,6 +12,7 @@ var ViewBase = /** @class */ (function () {
      * @param {Schedule} parent Accepts the schedule instance
      */
     function ViewBase(parent) {
+        this.previousNextAction = 'next';
         this.parent = parent;
     }
     ViewBase.prototype.isTimelineView = function () {
@@ -61,7 +62,7 @@ var ViewBase = /** @class */ (function () {
         for (var row = 0; row < trCount; row++) {
             eventContainer = createElement('div', { className: cls.APPOINTMENT_CONTAINER_CLASS });
             if (this.parent.resourceBase && !this.parent.uiStateValues.isGroupAdaptive && this.parent.resourceBase.renderedResources) {
-                eventContainer.setAttribute('data-group-index', this.parent.resourceBase.renderedResources[row].groupIndex.toString());
+                eventContainer.setAttribute('data-group-index', this.parent.resourceBase.renderedResources[parseInt(row.toString(), 10)].groupIndex.toString());
             }
             eventRows.push(eventContainer);
         }
@@ -189,6 +190,12 @@ var ViewBase = /** @class */ (function () {
     ViewBase.prototype.highlightCurrentTime = function () {
         // Here showTimeIndicator functionalities
     };
+    ViewBase.prototype.getStartDate = function () {
+        return this.renderDates[0];
+    };
+    ViewBase.prototype.getEndDate = function () {
+        return this.renderDates[this.renderDates.length - 1];
+    };
     ViewBase.prototype.startDate = function () {
         return this.renderDates[0];
     };
@@ -288,6 +295,7 @@ var ViewBase = /** @class */ (function () {
         return renderDates;
     };
     ViewBase.prototype.getNextPreviousDate = function (type) {
+        this.previousNextAction = type;
         if (this.parent.currentView === 'Day' || this.parent.currentView === 'TimelineDay') {
             if (this.parent.activeViewOptions.showWeekend) {
                 var daysCount = this.parent.activeViewOptions.interval;
@@ -558,8 +566,8 @@ var ViewBase = /** @class */ (function () {
             if (index >= renderedCount) {
                 break;
             }
-            index += lastLevel[i].colSpan;
-            this.parent.resourceBase.expandedResources.push(lastLevel[i]);
+            index += lastLevel[parseInt(i.toString(), 10)].colSpan;
+            this.parent.resourceBase.expandedResources.push(lastLevel[parseInt(i.toString(), 10)]);
         }
         if (this.parent.activeViewOptions.group.byDate) {
             this.colLevels[0] = this.parent.resourceBase.expandedResources;