@syncfusion/ej2-schedule 20.3.61 → 20.4.38

package/dist/es6/ej2-schedule.es2015.js

@@ -356,8 +356,6 @@ function getDateFromString(date) {
     return date.indexOf('Date') !== -1 ? new Date(parseInt(date.match(/\d+/g).toString(), 10)) :
         date.indexOf('T') !== -1 ? new Date(date) : new Date(date.replace(/-/g, '/'));
 }
-/** @private */
-let scrollWidth = null;
 /**
  * Method to get scrollbar width
  *
@@ -373,7 +371,7 @@ function getScrollBarWidth() {
         Math.ceil(devicePixelRatio % 1) : Math.floor(devicePixelRatio % 1) : 0;
     value = (divNode.offsetWidth - divNode.clientWidth - ratio) | 0;
     document.body.removeChild(divNode);
-    return scrollWidth = value;
+    return value;
 }
 /**
  * Method to find the index from data collection
@@ -388,12 +386,12 @@ function getScrollBarWidth() {
 // eslint-disable-next-line max-len
 function findIndexInData(data, field, value, event, resourceCollection) {
     for (let i = 0, length = data.length; i < length; i++) {
-        if (data[i][field] === value) {
+        if (data[parseInt(i.toString(), 10)][`${field}`] === value) {
             if (event) {
                 const field = resourceCollection.slice(-2)[0].field;
-                const res = (event[field] instanceof Array ? event[field] : [event[field]]);
+                const res = (event[`${field}`] instanceof Array ? event[`${field}`] : [event[`${field}`]]);
                 const resData = res.join(',');
-                if (resData.includes(data[i][resourceCollection.slice(-1)[0].groupIDField])) {
+                if (resData.includes(data[parseInt(i.toString(), 10)][resourceCollection.slice(-1)[0].groupIDField])) {
                     return i;
                 }
             }
@@ -1098,13 +1096,29 @@ class HeaderRenderer {
             addClass([selEle[this.parent.viewIndex]], ['e-active-view']);
         }
     }
-    updateDateRange(text) {
+    updateDateRange(date) {
         const selEle = this.toolbarObj.element.querySelector('.e-date-range');
-        if (selEle) {
+        if (!selEle) {
+            return;
+        }
+        const textEle = selEle.querySelector('.e-tbar-btn-text');
+        if (this.parent.activeViewOptions.dateRangeTemplate) {
+            textEle.textContent = '';
+            const args = {
+                startDate: this.parent.activeView.getStartDate(),
+                endDate: this.parent.activeView.getEndDate(), currentView: this.parent.currentView
+            };
+            const viewName = this.parent.activeViewOptions.dateRangeTemplateName;
+            const templateId = this.parent.element.id + '_' + viewName + 'dateRangeTemplate';
+            const dateTemplate = [].slice.call(this.parent.getDateRangeTemplate()(args, this.parent, 'dateRangeTemplate', templateId, false));
+            append(dateTemplate, textEle);
+        }
+        else {
+            const 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();
     }
     refresh() {
         if (this.toolbarObj) {
@@ -1604,8 +1618,9 @@ class ScheduleTouch {
     }
     scrollHandler(e) {
         if (this.parent.currentView === 'Agenda' || this.parent.uiStateValues.action || !this.parent.allowSwiping ||
-            (e.originalEvent && e.originalEvent.target && (e.originalEvent.target.classList.contains(APPOINTMENT_CLASS) ||
-                closest(e.originalEvent.target, '.' + APPOINTMENT_CLASS)) && !this.parent.isAdaptive)) {
+            (e.originalEvent && e.originalEvent.target &&
+                (e.originalEvent.target.classList.contains(APPOINTMENT_CLASS) ||
+                    closest(e.originalEvent.target, '.' + APPOINTMENT_CLASS)) && !this.parent.isAdaptive)) {
             return;
         }
         if (!this.timeStampStart) {
@@ -1756,7 +1771,7 @@ class ScheduleTouch {
                 addClass([this.element], TRANSLATE_CLASS);
                 this.element.style.transform = 'translatex(' + translateX + 'px)';
                 if (this.parent.headerModule) {
-                    this.parent.headerModule.updateDateRange(this.parent.activeView.getDateRangeText());
+                    this.parent.headerModule.updateDateRange();
                 }
                 this.parent.renderTemplates();
                 this.parent.crudModule.refreshDataManager();
@@ -2329,7 +2344,7 @@ class KeyboardInteraction {
         const appointmentElements = [];
         appointments.map((value) => value.getAttribute('data-guid')).filter((value, index, self) => {
             if (self.indexOf(value) === index) {
-                appointmentElements.push(appointments[index]);
+                appointmentElements.push(appointments[parseInt(index.toString(), 10)]);
             }
         });
         return appointmentElements;
@@ -2341,7 +2356,7 @@ class KeyboardInteraction {
     processViewNavigation(e) {
         const index = parseInt(e.key, 10) - 1;
         if (index < this.parent.views.length) {
-            const view = this.parent.viewCollections[index].option;
+            const view = this.parent.viewCollections[parseInt(index.toString(), 10)].option;
             this.parent.changeView(view, e, undefined, index);
             if (this.parent.headerModule) {
                 this.parent.headerModule.element.querySelector('.e-active-view button').focus();
@@ -2454,10 +2469,11 @@ class KeyboardInteraction {
         }
     }
     getYearUpDownCell(tableRows, rowIndex, cellIndex, isUp) {
-        while (tableRows[rowIndex] && tableRows[rowIndex].cells[cellIndex].classList.contains(OTHERMONTH_CLASS)) {
+        while (tableRows[parseInt(rowIndex.toString(), 10)] &&
+            tableRows[parseInt(rowIndex.toString(), 10)].cells[parseInt(cellIndex.toString(), 10)].classList.contains(OTHERMONTH_CLASS)) {
             rowIndex = rowIndex + (isUp ? -1 : 1);
         }
-        return tableRows[rowIndex].cells[cellIndex];
+        return tableRows[parseInt(rowIndex.toString(), 10)].cells[parseInt(cellIndex.toString(), 10)];
     }
     // eslint-disable-next-line max-len
     getHorizontalUpDownCell(tableRows, target, curRowIndex, isUp) {
@@ -2476,7 +2492,7 @@ class KeyboardInteraction {
         const hasRow = isUp && curRowIndex > 0 || !isUp && curRowIndex < tableRows.length - 1;
         let targetCell = hasRow ? tableRows[curRowIndex + (isUp ? -1 : 1)].cells[target.cellIndex] : undefined;
         if (!targetCell || targetCell.classList.contains(OTHERMONTH_CLASS)) {
-            const column = tableRows[curRowIndex].cells[target.cellIndex - (isUp ? 1 : -1)];
+            const column = tableRows[parseInt(curRowIndex.toString(), 10)].cells[target.cellIndex - (isUp ? 1 : -1)];
             if (column) {
                 const dateAttr = +target.getAttribute('data-date') - (isUp ? MS_PER_DAY : -MS_PER_DAY);
                 return this.parent.getContentTable().querySelector('.' + WORK_CELLS_CLASS + '[data-date="' + dateAttr + '"]');
@@ -2492,7 +2508,7 @@ class KeyboardInteraction {
             element: tableEle,
             rowIndex: curRowIndex,
             columnIndex: target.cellIndex,
-            maxIndex: tableEle.rows[curRowIndex].cells.length
+            maxIndex: tableEle.rows[parseInt(curRowIndex.toString(), 10)].cells.length
         };
         return key;
     }
@@ -2565,7 +2581,8 @@ class KeyboardInteraction {
                     const rowIndex = this.isInverseTableSelect() ? key.rowIndex : 0;
                     this.parent.changeDate(this.parent.activeView.getNextPreviousDate('next'), e);
                     const tableEle = this.parent.getContentTable();
-                    const cell = isMonthEnd ? tableEle.rows[rowIndex].querySelector('.' + WORK_CELLS_CLASS + ':not(.' + OTHERMONTH_CLASS + ')') : tableEle.rows[rowIndex].cells[0];
+                    const cell = isMonthEnd ? tableEle.rows[parseInt(rowIndex.toString(), 10)].querySelector('.' + WORK_CELLS_CLASS + ':not(.' + OTHERMONTH_CLASS + ')')
+                        : tableEle.rows[parseInt(rowIndex.toString(), 10)].cells[0];
                     this.selectCells(false, cell);
                 }
             }
@@ -2635,7 +2652,7 @@ class KeyboardInteraction {
                     this.parent.changeDate(this.parent.activeView.getNextPreviousDate('previous'), e);
                     const tableEle = this.parent.getContentTable();
                     const rowIndex = this.isInverseTableSelect() ? key.rowIndex : tableEle.rows.length - 1;
-                    let cell = tableEle.rows[rowIndex].cells[key.maxIndex - 1];
+                    let cell = tableEle.rows[parseInt(rowIndex.toString(), 10)].cells[key.maxIndex - 1];
                     if (isMonthStart) {
                         const tbody = this.parent.element.querySelectorAll('.' + CONTENT_TABLE_CLASS + ' tbody');
                         cell = tbody.item(tbody.length - 1).querySelector(':not(.' + OTHERMONTH_CLASS + ')[data-date="' + this.parent.activeView.getEndDate().getTime() + '"]');
@@ -3158,7 +3175,7 @@ class Islamic {
         const hDate = this.getHijriDate(date);
         const day = [];
         for (let i = 0; i < days.length; i++) {
-            const gDate = HijriParser.toGregorian(hDate.year, hDate.month, days[i]);
+            const gDate = HijriParser.toGregorian(hDate.year, hDate.month, days[parseInt(i.toString(), 10)]);
             day.push(gDate.getDate());
         }
         return day;
@@ -3572,7 +3589,7 @@ function generateSummary(rule, localeObject, locale, calendarType = 'Gregorian')
         case 'WEEKLY':
             summary += localeObject.getConstant(WEEKS) + ' ' + localeObject.getConstant(ON) + ' ';
             ruleObject.day.forEach((day, index) => {
-                summary += capitalizeFirstWord(getValue(DAYINDEXOBJECT[day], cldrObj), 'single');
+                summary += capitalizeFirstWord(getValue(DAYINDEXOBJECT[`${day}`], cldrObj), 'single');
                 summary += (((ruleObject.day.length - 1) === index) ? '' : ', ');
             });
             break;
@@ -3665,7 +3682,7 @@ function generate(startDate, rule, excludeDate, startDayOfWeek, maximumCount = M
         return data;
     }
     maxOccurrence = maximumCount;
-    setFirstDayOfWeek(DAYINDEX[startDayOfWeek]);
+    setFirstDayOfWeek(DAYINDEX[parseInt(startDayOfWeek.toString(), 10)]);
     if (ruleObject.until) {
         const end = resetTime(ruleObject.until);
         ruleObject.until = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 23, 59, 59);
@@ -3941,7 +3958,7 @@ function processWeekNo(startDate, endDate, data, ruleObject) {
         startDay = dayIndex.indexOf(DAYINDEX[stDate.getDay()]);
         firstWeekSpan = (6 - startDay) + 1;
         for (let index = 0; index < weekNos.length; index++) {
-            weekNo = weekNos[index];
+            weekNo = weekNos[parseInt(index.toString(), 10)];
             weekNo = (weekNo > 0) ? weekNo : 53 + weekNo + 1;
             maxDate = (weekNo === 1) ? firstWeekSpan : firstWeekSpan + ((weekNo - 1) * 7);
             minDate = (weekNo === 1) ? firstWeekSpan - 7 : firstWeekSpan + ((weekNo - 2) * 7);
@@ -3988,7 +4005,7 @@ function processYearDay(startDate, endDate, data, ruleObject) {
     const expectedDays = ruleObject.day;
     while (compareDates(stDate, endDate)) {
         for (let index = 0; index < ruleObject.yearDay.length; index++) {
-            date = ruleObject.yearDay[index];
+            date = ruleObject.yearDay[parseInt(index.toString(), 10)];
             tempDate = new Date(stDate.getTime());
             if ((date === calendarUtil.getLeapYearDaysCount() || date === -calendarUtil.getLeapYearDaysCount()) &&
                 (!calendarUtil.isLeapYear(calendarUtil.getFullYear(tempDate), 1))) {
@@ -4148,7 +4165,7 @@ function monthlyDateTypeProcessforMonthFreq(startDate, endDate, data, ruleObject
  */
 function processDateCollectionForByMonthDay(ruleObject, recRuleVariables, endDate, isByMonth, startDate, data) {
     for (let index = 0; index < ruleObject.monthDay.length; index++) {
-        recRuleVariables.date = ruleObject.monthDay[index];
+        recRuleVariables.date = ruleObject.monthDay[parseInt(index.toString(), 10)];
         recRuleVariables.tempDate = calendarUtil.getMonthStartDate(recRuleVariables.tempDate);
         const maxDate = calendarUtil.getMonthDaysCount(recRuleVariables.tempDate);
         recRuleVariables.date = recRuleVariables.date > 0 ? recRuleVariables.date : (maxDate + recRuleVariables.date + 1);
@@ -4191,7 +4208,7 @@ function setNextValidDate(tempDate, ruleObject, monthInit, beginDate = null, int
     if (ruleObject.month.length) {
         monthInit++;
         monthInit = monthInit % ruleObject.month.length;
-        calendarUtil.setMonth(tempDate, ruleObject.month[monthInit], 1);
+        calendarUtil.setMonth(tempDate, ruleObject.month[parseInt(monthInit.toString(), 10)], 1);
         if (monthInit === 0) {
             calendarUtil.addYears(tempDate, interval, ruleObject.month[0]);
         }
@@ -4236,7 +4253,7 @@ function getMonthCollection(startDate, endDate, data, ruleObject) {
         const isHavingNumber = expectedDays.map((item) => HASNUMBER.test(item));
         if (isHavingNumber.indexOf(true) > -1) {
             for (let j = 0; j <= expectedDays.length - 1; j++) {
-                const expectedDaysArray = expectedDays[j].match(SPLITNUMBERANDSTRING);
+                const expectedDaysArray = expectedDays[parseInt(j.toString(), 10)].match(SPLITNUMBERANDSTRING);
                 const position = parseInt(expectedDaysArray[0], 10);
                 tempDate = new Date(tempDate.getTime());
                 tempDate = calendarUtil.getMonthStartDate(tempDate);
@@ -4297,8 +4314,8 @@ function getMonthCollection(startDate, endDate, data, ruleObject) {
                 index = 0;
                 const datas = [];
                 for (let week = 0; week < monthCollection.length; week++) {
-                    for (let row = 0; row < monthCollection[week].length; row++) {
-                        datas.push(monthCollection[week][row]);
+                    for (let row = 0; row < monthCollection[parseInt(week.toString(), 10)].length; row++) {
+                        datas.push(monthCollection[parseInt(week.toString(), 10)][parseInt(row.toString(), 10)]);
                     }
                 }
                 monthCollection = [datas];
@@ -4490,8 +4507,8 @@ function processDateCollectionforByDayWithInteger(startDate, endDate, data, rule
                     while (calendarUtil.isSameYear(currentMonthDate, tempDate)) {
                         currentMonthDate = new Date(tempDate.getTime());
                         if (ruleObject.month.length === 0 ||
-                            (ruleObject.month.length > 0 && ruleObject.month[i] === calendarUtil.getMonth(currentMonthDate))) {
-                            const expectedDaysArray = expectedDays[j].match(SPLITNUMBERANDSTRING);
+                            (ruleObject.month.length > 0 && ruleObject.month[parseInt(i.toString(), 10)] === calendarUtil.getMonth(currentMonthDate))) {
+                            const expectedDaysArray = expectedDays[parseInt(j.toString(), 10)].match(SPLITNUMBERANDSTRING);
                             const position = parseInt(expectedDaysArray[0], 10);
                             currentDate = new Date(tempDate.getTime());
                             while (calendarUtil.isSameYear(currentDate, tempDate)
@@ -4610,8 +4627,8 @@ function insertDataCollection(dateCollection, state, startDate, endDate, data, r
 function getDateCollectionforBySetPosNull(monthCollection) {
     const datas = [];
     for (let week = 0; week < monthCollection.length; week++) {
-        for (let row = 0; row < monthCollection[week].length; row++) {
-            datas.push(new Date(monthCollection[week][row]).getTime());
+        for (let row = 0; row < monthCollection[parseInt(week.toString(), 10)].length; row++) {
+            datas.push(new Date(monthCollection[parseInt(week.toString(), 10)][parseInt(row.toString(), 10)]).getTime());
         }
     }
     monthCollection = datas.length > 0 ? [datas] : [];
@@ -4657,8 +4674,8 @@ function insertDateCollectionBasedonIndex(monthCollection, startDate, endDate, d
  * @private
  */
 function filterDateCollectionByIndex(monthCollection, index, datas) {
-    for (let week = 0; week < monthCollection[index].length; week++) {
-        datas.push(monthCollection[index][week]);
+    for (let week = 0; week < monthCollection[parseInt(index.toString(), 10)].length; week++) {
+        datas.push(monthCollection[parseInt(index.toString(), 10)][parseInt(week.toString(), 10)]);
     }
     return datas;
 }
@@ -4702,7 +4719,7 @@ function weekCount(year, startDayOfWeek, monthCollection, week, ruleObject) {
     const firstWeekDay = (firstOfMonth.getDay() - firstDayOfWeek + 7) % 7;
     const used = firstWeekDay + numberOfDaysInMonth;
     const count = Math.ceil(used / 7) - 1;
-    const dayData = monthCollection[week][count];
+    const dayData = monthCollection[parseInt(week.toString(), 10)][parseInt(count.toString(), 10)];
     const chDate = new Date(dayData);
     const state = validateRules(chDate, ruleObject);
     return (state) ? count : count - 1;
@@ -4722,15 +4739,15 @@ function weekCount(year, startDayOfWeek, monthCollection, week, ruleObject) {
 function insertDateCollectionBasedonBySetPos(monthCollection, state, startDate, endDate, data, ruleObject) {
     if (monthCollection.length > 0) {
         for (let week = 0; week < monthCollection.length; week++) {
-            monthCollection[week].sort();
+            monthCollection[parseInt(week.toString(), 10)].sort();
             const expectedDays = ruleObject.day;
             const isHavingNumber = expectedDays.map((item) => HASNUMBER.test(item));
             const weekIndex = (ruleObject.freq === 'YEARLY' && (ruleObject.validRules.indexOf('BYMONTH') > -1) &&
                 !(isHavingNumber.indexOf(true) > -1)) ?
                 weekCount(new Date(monthCollection[0][0]).getFullYear(), 0, monthCollection, week, ruleObject)
-                : (monthCollection[week].length + ruleObject.setPosition);
+                : (monthCollection[parseInt(week.toString(), 10)].length + ruleObject.setPosition);
             const index = ((ruleObject.setPosition < 1) ? weekIndex : ruleObject.setPosition - 1);
-            const dayData = monthCollection[week][index];
+            const dayData = monthCollection[parseInt(week.toString(), 10)][parseInt(index.toString(), 10)];
             insertDateCollection(state, startDate, endDate, data, ruleObject, dayData);
         }
     }
@@ -4753,9 +4770,9 @@ function insertDatasIntoExistingCollection(monthCollection, state, startDate, en
         index = !isNullOrUndefined(index) ? index :
             ((ruleObject.setPosition < 1)
                 ? (monthCollection.length + ruleObject.setPosition) : ruleObject.setPosition - 1);
-        monthCollection[index].sort();
-        for (let week = 0; week < monthCollection[index].length; week++) {
-            const dayData = monthCollection[index][week];
+        monthCollection[parseInt(index.toString(), 10)].sort();
+        for (let week = 0; week < monthCollection[parseInt(index.toString(), 10)].length; week++) {
+            const dayData = monthCollection[parseInt(index.toString(), 10)][parseInt(week.toString(), 10)];
             insertDateCollection(state, startDate, endDate, data, ruleObject, dayData);
         }
     }
@@ -4802,7 +4819,7 @@ function checkDayIndex(day, expectedDays) {
             sortedExpectedDays.push(expectedDaysNumberSplit[0]);
         }
     });
-    return (sortedExpectedDays.indexOf(DAYINDEX[day]) === -1);
+    return (sortedExpectedDays.indexOf(DAYINDEX[parseInt(day.toString(), 10)]) === -1);
 }
 /**
  * Internal method to get start date of week
@@ -4818,7 +4835,7 @@ function getStartDateForWeek(startDate, expectedDays) {
     if (expectedDays.length > 0) {
         const expectedDaysArr = [];
         for (let i = 0; i <= expectedDays.length - 1; i++) {
-            newstr = getDayString(expectedDays[i]);
+            newstr = getDayString(expectedDays[parseInt(i.toString(), 10)]);
             expectedDaysArr.push(newstr);
         }
         if (expectedDaysArr.indexOf(DAYINDEX[tempDate.getDay()]) === -1) {
@@ -4932,10 +4949,10 @@ function processWeekDays(expectedDays) {
             while (temp % 7 !== dayIndex.indexOf(expectedDays[0])) {
                 temp++;
             }
-            dayCycle[element] = temp - startIndex;
+            dayCycle[`${element}`] = temp - startIndex;
         }
         else {
-            dayCycle[element] = dayIndex.indexOf(expectedDays[(index + 1)]) - dayIndex.indexOf(element);
+            dayCycle[`${element}`] = dayIndex.indexOf(expectedDays[(index + 1)]) - dayIndex.indexOf(element);
         }
     });
     return dayCycle;
@@ -5193,8 +5210,8 @@ class EventBase {
                 event = this.processTimezone(event);
             }
             for (let level = 0; level < resourceCollection.length; level++) {
-                if (event[resourceCollection[level].field] === null || event[resourceCollection[level].field] === 0) {
-                    event[resourceCollection[level].field] = undefined;
+                if (event[resourceCollection[parseInt(level.toString(), 10)].field] === null || event[resourceCollection[parseInt(level.toString(), 10)].field] === 0) {
+                    event[resourceCollection[parseInt(level.toString(), 10)].field] = undefined;
                 }
             }
             if (!isNullOrUndefined(event[fields.recurrenceRule]) && event[fields.recurrenceRule] === '') {
@@ -5345,7 +5362,7 @@ class EventBase {
         let resourceData;
         if (this.parent.activeViewOptions.group.resources.length > 0) {
             const data = this.getGroupIndexFromEvent(eventObj);
-            resourceData = this.parent.resourceBase.lastResourceLevel[data];
+            resourceData = this.parent.resourceBase.lastResourceLevel[parseInt(data.toString(), 10)];
         }
         const blockEvents = extend([], this.parent.blockProcessed, null, true);
         for (const eventObj of blockEvents) {
@@ -5393,15 +5410,15 @@ class EventBase {
         const predicate = {};
         const resourceCollection = this.parent.resourceBase.resourceCollection;
         for (let level = 0; level < resourceCollection.length; level++) {
-            predicate[resourceCollection[level].field] = resourceTdData.groupOrder[level];
+            predicate[resourceCollection[parseInt(level.toString(), 10)].field] = resourceTdData.groupOrder[parseInt(level.toString(), 10)];
         }
         const keys = Object.keys(predicate);
         const filteredCollection = appointments.filter((eventObj) => keys.every((key) => {
-            if (eventObj[key] instanceof Array) {
-                return eventObj[key].indexOf(predicate[key]) > -1;
+            if (eventObj[`${key}`] instanceof Array) {
+                return eventObj[`${key}`].indexOf(predicate[`${key}`]) > -1;
             }
             else {
-                return eventObj[key] === predicate[key];
+                return eventObj[`${key}`] === predicate[`${key}`];
             }
         }));
         return filteredCollection;
@@ -5506,7 +5523,7 @@ class EventBase {
             }
             let cStart = start;
             for (let level = 0; level < this.slots.length; level++) {
-                let slot = this.slots[level];
+                let slot = this.slots[parseInt(level.toString(), 10)];
                 if (this.parent.currentView === 'WorkWeek' || this.parent.currentView === 'TimelineWorkWeek'
                     || this.parent.activeViewOptions.group.byDate || this.parent.activeViewOptions.showWeekend) {
                     const slotDates = [];
@@ -5539,9 +5556,9 @@ class EventBase {
                         const hasBreak = endIndex !== -1;
                         endIndex = hasBreak ? endIndex : slot.length - 1;
                         const count = ((endIndex - startIndex) + 1);
-                        const isLeft = (slot[startIndex] !== orgStart);
-                        const isRight = (slot[endIndex] !== orgEnd);
-                        ranges.push(this.cloneEventObject(event, slot[startIndex], slot[endIndex], count, isLeft, isRight));
+                        const isLeft = (slot[parseInt(startIndex.toString(), 10)] !== orgStart);
+                        const isRight = (slot[parseInt(endIndex.toString(), 10)] !== orgEnd);
+                        ranges.push(this.cloneEventObject(event, slot[parseInt(startIndex.toString(), 10)], slot[parseInt(endIndex.toString(), 10)], count, isLeft, isRight));
                         if (hasBreak) {
                             break;
                         }
@@ -5551,8 +5568,8 @@ class EventBase {
                     if (this.dateInRange(cStart, slot[0], slot[slot.length - 1])) {
                         const availSlot = [];
                         for (let i = 0; i < slot.length; i++) {
-                            if (this.dateInRange(slot[i], orgStart, orgEnd)) {
-                                availSlot.push(slot[i]);
+                            if (this.dateInRange(slot[parseInt(i.toString(), 10)], orgStart, orgEnd)) {
+                                availSlot.push(slot[parseInt(i.toString(), 10)]);
                             }
                         }
                         if (availSlot.length > 0) {
@@ -5719,9 +5736,9 @@ class EventBase {
         let levelName;
         let idField;
         for (let i = this.parent.resourceBase.resourceCollection.length - 1; i >= 0; i--) {
-            const resourceData = eventData[this.parent.resourceBase.resourceCollection[i].field];
+            const resourceData = eventData[this.parent.resourceBase.resourceCollection[parseInt(i.toString(), 10)].field];
             if (!isNullOrUndefined(resourceData)) {
-                resource = this.parent.resourceBase.resourceCollection[i];
+                resource = this.parent.resourceBase.resourceCollection[parseInt(i.toString(), 10)];
                 levelIndex = i;
                 levelName = resource.name;
                 idField = resource.field;
@@ -5740,8 +5757,8 @@ class EventBase {
                 return null;
             })[0];
         }
-        const id = ((eventData[idField] instanceof Array) ?
-            eventData[idField][0] : eventData[idField]);
+        const id = ((eventData[`${idField}`] instanceof Array) ?
+            eventData[`${idField}`][0] : eventData[`${idField}`]);
         if (levelIndex > 0) {
             const parentField = this.parent.resourceCollection[levelIndex - 1].field;
             return this.parent.resourceBase.getIndexFromResourceId(id, levelName, resource, eventData, parentField);
@@ -6097,7 +6114,7 @@ class EventBase {
         const idField = isGuid ? 'Guid' : (isFollowing) ? this.parent.eventFields.followingID : this.parent.eventFields.recurrenceID;
         const fieldKey = isGuid ? 'Guid' : this.parent.eventFields.id;
         const dataSource = isGuid ? this.parent.eventsProcessed : this.parent.eventsData;
-        return dataSource.filter((data) => data[idField] === eventObj[fieldKey]);
+        return dataSource.filter((data) => data[`${idField}`] === eventObj[`${fieldKey}`]);
     }
     getOccurrencesByID(id) {
         const fields = this.parent.eventFields;
@@ -6134,13 +6151,13 @@ class EventBase {
         if (parentObject[fields.recurrenceException]) {
             const exDateString = parentObject[fields.recurrenceException].split(',');
             for (let i = 0, len = exDateString.length; i < len; i++) {
-                const edited = this.parent.eventsData.filter((eventObj) => eventObj[fields.recurrenceID] === parentObject[fields.id] && eventObj[fields.recurrenceException] === exDateString[i]);
+                const edited = this.parent.eventsData.filter((eventObj) => eventObj[fields.recurrenceID] === parentObject[fields.id] && eventObj[fields.recurrenceException] === exDateString[parseInt(i.toString(), 10)]);
                 if (edited.length === 0) {
-                    const exDate = getDateFromRecurrenceDateString(exDateString[i]);
+                    const exDate = getDateFromRecurrenceDateString(exDateString[parseInt(i.toString(), 10)]);
                     const childObject = extend({}, recurrenceData, null, true);
                     childObject[fields.recurrenceID] = parentObject[fields.id];
                     delete childObject[fields.followingID];
-                    childObject[fields.recurrenceException] = exDateString[i];
+                    childObject[fields.recurrenceException] = exDateString[parseInt(i.toString(), 10)];
                     const startDate = new Date(exDate.getTime());
                     const time = parentObject[fields.endTime].getTime() - parentObject[fields.startTime].getTime();
                     const endDate = new Date(startDate.getTime());
@@ -6285,14 +6302,14 @@ class EventBase {
         let filteredDates;
         if (dateRender[0] < this.parent.minDate && dateRender[dateRender.length - 1] > this.parent.maxDate) {
             for (let i = 0; i < dateRender.length; i++) {
-                if (resetTime(dateRender[i]).getTime() === resetTime(new Date(this.parent.minDate)).getTime()) {
+                if (resetTime(dateRender[parseInt(i.toString(), 10)]).getTime() === resetTime(new Date(this.parent.minDate)).getTime()) {
                     firstDate = i;
                 }
-                if (resetTime(dateRender[i]).getTime() === resetTime(new Date(this.parent.maxDate)).getTime()) {
+                if (resetTime(dateRender[parseInt(i.toString(), 10)]).getTime() === resetTime(new Date(this.parent.maxDate)).getTime()) {
                     lastDate = i;
                 }
             }
-            filteredDates = dateRender.filter((date) => date >= dateRender[firstDate] && date <= dateRender[lastDate]);
+            filteredDates = dateRender.filter((date) => date >= dateRender[parseInt(firstDate.toString(), 10)] && date <= dateRender[parseInt(lastDate.toString(), 10)]);
         }
         return filteredDates;
     }
@@ -6341,7 +6358,7 @@ class EventBase {
         const tr = createElement('tr');
         const levels = this.parent.activeView.colLevels.slice(-1)[0];
         for (let i = 0, len = levels.length; i < len; i++) {
-            const col = levels[i];
+            const col = levels[parseInt(i.toString(), 10)];
             const appointmentWrap = createElement('td', {
                 className: (type === 'allDay') ? ALLDAY_APPOINTMENT_WRAPPER_CLASS : (type === 'timeIndicator') ?
                     TIMELINE_WRAPPER_CLASS : DAY_WRAPPER_CLASS, attrs: { 'data-date': col.date.getTime().toString() }
@@ -6413,8 +6430,8 @@ class VerticalEvent extends EventBase {
                 wrapper.classList.contains(ROW_COUNT_WRAPPER_CLASS))) {
                 const groupIndex = parseInt(wrapper.getAttribute('data-group-index'), 10);
                 for (let j = 0, len = this.parent.crudModule.crudObj.sourceEvent.length; j < len; j++) {
-                    if (groupIndex === this.parent.crudModule.crudObj.sourceEvent[j].groupIndex ||
-                        groupIndex === this.parent.crudModule.crudObj.targetEvent[j].groupIndex) {
+                    if (groupIndex === this.parent.crudModule.crudObj.sourceEvent[parseInt(j.toString(), 10)].groupIndex ||
+                        groupIndex === this.parent.crudModule.crudObj.targetEvent[parseInt(j.toString(), 10)].groupIndex) {
                         remove(wrapper);
                     }
                 }
@@ -6467,7 +6484,7 @@ class VerticalEvent extends EventBase {
         this.dateRender[0] = this.parent.activeView.renderDates;
         if (this.parent.activeViewOptions.group.resources.length > 0) {
             for (let i = 0, len = this.resources.length; i < len; i++) {
-                this.dateRender[i] = this.resources[i].renderDates;
+                this.dateRender[parseInt(i.toString(), 10)] = this.resources[parseInt(i.toString(), 10)].renderDates;
             }
         }
     }
@@ -6500,11 +6517,11 @@ class VerticalEvent extends EventBase {
         const resources = this.getResourceList();
         let dateCount = this.getStartCount();
         for (const resource of resources) {
-            const renderDates = this.dateRender[resource];
+            const renderDates = this.dateRender[parseInt(resource.toString(), 10)];
             for (let day = 0, length = renderDates.length; day < length; day++) {
-                const startDate = new Date(renderDates[day].getTime());
-                const endDate = addDays(renderDates[day], 1);
-                const filterEvents = this.filterEvents(startDate, endDate, this.parent.blockProcessed, this.resources[resource]);
+                const startDate = new Date(renderDates[parseInt(day.toString(), 10)].getTime());
+                const endDate = addDays(renderDates[parseInt(day.toString(), 10)], 1);
+                const filterEvents = this.filterEvents(startDate, endDate, this.parent.blockProcessed, this.resources[parseInt(resource.toString(), 10)]);
                 for (const event of filterEvents) {
                     if (this.parent.resourceBase) {
                         this.setValues(event, resource);
@@ -6521,9 +6538,9 @@ class VerticalEvent extends EventBase {
         const spannedData = this.isSpannedEvent(eventObj, dayIndex, resource);
         const eStart = spannedData[this.fields.startTime];
         const eEnd = spannedData[this.fields.endTime];
-        const currentDate = resetTime(new Date(this.dateRender[resource][dayIndex].getTime()));
+        const currentDate = resetTime(new Date(this.dateRender[parseInt(resource.toString(), 10)][parseInt(dayIndex.toString(), 10)].getTime()));
         const schedule = getStartEndHours(currentDate, this.startHour, this.endHour);
-        if (eStart <= eEnd && this.isValidEvent(eventObj, eStart, eEnd, schedule)) {
+        if (eStart <= eEnd && this.isValidEvent(eventObj, eStart, eEnd, schedule) && this.isWorkDayAvailable(resource, eStart)) {
             let blockTop;
             let blockHeight;
             if (spannedData[this.fields.isAllDay]) {
@@ -6537,9 +6554,7 @@ class VerticalEvent extends EventBase {
             }
             const appointmentElement = this.createBlockAppointmentElement(eventObj, resource, this.isResourceEventTemplate);
             setStyleAttribute(appointmentElement, { 'width': '100%', 'height': blockHeight, 'top': blockTop });
-            const renderedIndex = this.getDayIndex(dayIndex, resource);
-            const index = this.parent.activeViewOptions.group.byDate ?
-                (this.resources.length * renderedIndex) + resource : dayCount;
+            const index = this.getDayIndex(dayIndex, resource, dayCount);
             this.appendEvent(eventObj, appointmentElement, index, '0px');
         }
     }
@@ -6559,15 +6574,15 @@ class VerticalEvent extends EventBase {
                 }
             }
             this.slots = [];
-            const renderDates = this.dateRender[resource];
+            const renderDates = this.dateRender[parseInt(resource.toString(), 10)];
             const renderedDate = this.getRenderedDates(renderDates) || renderDates;
             this.slots.push(renderDates.map((date) => { return +date; }));
             for (let day = 0, length = renderDates.length; day < length &&
-                renderDates[day] <= renderedDate[renderedDate.length - 1]; day++) {
+                renderDates[parseInt(day.toString(), 10)] <= renderedDate[renderedDate.length - 1]; day++) {
                 this.renderedEvents = [];
-                const startDate = new Date(renderDates[day].getTime());
-                const endDate = addDays(renderDates[day], 1);
-                const filterEvents = this.filterEvents(startDate, endDate, eventCollection, this.resources[resource]);
+                const startDate = new Date(renderDates[parseInt(day.toString(), 10)].getTime());
+                const endDate = addDays(renderDates[parseInt(day.toString(), 10)], 1);
+                const filterEvents = this.filterEvents(startDate, endDate, eventCollection, this.resources[parseInt(resource.toString(), 10)]);
                 if (isRender) {
                     for (const event of filterEvents) {
                         if (this.parent.resourceBase) {
@@ -6608,15 +6623,36 @@ class VerticalEvent extends EventBase {
         return this.parent.virtualScrollModule && this.parent.activeViewOptions.allowVirtualScrolling && this.parent.timeScale.enable ?
             parseInt(this.element.querySelector('.' + APPOINTMENT_WRAPPER_CLASS).getAttribute('id').split('-').slice(-1)[0], 10) : 0;
     }
-    getDayIndex(dayIndex, resource) {
-        return this.parent.activeViewOptions.group.byDate ?
-            this.parent.resourceBase.lastResourceLevel[0].renderDates.indexOf(this.dateRender[resource][dayIndex]) :
-            dayIndex;
+    getDayIndex(dayIndex, resource, dayCount) {
+        if (!this.parent.activeViewOptions.group.byDate) {
+            return dayCount;
+        }
+        if (this.parent.activeViewOptions.group.byDate && !this.parent.activeViewOptions.group.hideNonWorkingDays) {
+            const renderedIndex = this.parent.resourceBase.lastResourceLevel[0].renderDates.indexOf(this.dateRender[parseInt(resource.toString(), 10)][parseInt(dayIndex.toString(), 10)]);
+            return (this.resources.length * renderedIndex) + resource;
+        }
+        let dateIndex = 0;
+        const firstColumn = this.parent.activeView.colLevels[0];
+        const currentDate = this.dateRender[parseInt(resource.toString(), 10)][parseInt(dayIndex.toString(), 10)].getTime();
+        let currentResources = [];
+        for (let i = 0; i < firstColumn.length; i++) {
+            currentResources = this.parent.resourceBase.resourceDateTree[parseInt(i.toString(), 10)];
+            if (currentDate === firstColumn[parseInt(i.toString(), 10)].date.getTime()) {
+                break;
+            }
+            dateIndex = dateIndex + firstColumn[parseInt(i.toString(), 10)].colSpan;
+        }
+        const resIndex = currentResources.findIndex((x) => x.groupOrder.toString() ===
+            this.resources[parseInt(resource.toString(), 10)].groupOrder.toString());
+        if (resIndex < 0) {
+            return dateIndex;
+        }
+        return dateIndex + resIndex;
     }
     setValues(event, resourceIndex) {
         if (this.parent.activeViewOptions.group.resources.length > 0) {
-            this.cssClass = this.resources[resourceIndex].cssClass;
-            this.groupOrder = this.resources[resourceIndex].groupOrder;
+            this.cssClass = this.resources[parseInt(resourceIndex.toString(), 10)].cssClass;
+            this.groupOrder = this.resources[parseInt(resourceIndex.toString(), 10)].groupOrder;
         }
         else {
             this.cssClass = this.parent.resourceBase.getCssClass(event);
@@ -6729,7 +6765,7 @@ class VerticalEvent extends EventBase {
     }
     createMoreIndicator(allDayRow, count, currentDay) {
         const index = currentDay + count;
-        const countWrapper = allDayRow[index];
+        const countWrapper = allDayRow[parseInt(index.toString(), 10)];
         if (countWrapper.childElementCount <= 0) {
             const innerCountWrap = createElement('div', {
                 className: ROW_COUNT_WRAPPER_CLASS,
@@ -6775,8 +6811,8 @@ class VerticalEvent extends EventBase {
         }
     }
     isSpannedEvent(record, day, resource) {
-        let currentDate = resetTime(this.dateRender[resource][day]);
-        const renderedDate = this.getRenderedDates(this.dateRender[resource]) || [currentDate];
+        let currentDate = resetTime(this.dateRender[parseInt(resource.toString(), 10)][parseInt(day.toString(), 10)]);
+        const renderedDate = this.getRenderedDates(this.dateRender[parseInt(resource.toString(), 10)]) || [currentDate];
         const currentDay = renderedDate.filter((date) => date.getDay() === day);
         if (currentDay.length === 0) {
             currentDate = resetTime(renderedDate[0]);
@@ -6798,11 +6834,21 @@ class VerticalEvent extends EventBase {
         event[field.endTime] = eventDates.endDate;
         return event;
     }
+    isWorkDayAvailable(resource, start) {
+        if (this.parent.activeViewOptions.group.hideNonWorkingDays && this.resources.length > 0) {
+            const workDays = this.resources[parseInt(resource.toString(), 10)].
+                resourceData[this.resources[parseInt(resource.toString(), 10)].resource.workDaysField] ||
+                this.parent.activeViewOptions.workDays;
+            return workDays && workDays.indexOf(start.getDay()) >= 0;
+        }
+        return true;
+    }
     renderAllDayEvents(eventObj, dayIndex, resource, dayCount, inline) {
-        let currentDates = this.getRenderedDates(this.dateRender[resource]) || this.dateRender[resource];
+        let currentDates = this.getRenderedDates(this.dateRender[parseInt(resource.toString(), 10)]) ||
+            this.dateRender[parseInt(resource.toString(), 10)];
         if (this.parent.activeViewOptions.group.byDate) {
-            this.slots[0] = [this.dateRender[resource][dayIndex].getTime()];
-            currentDates = [this.dateRender[resource][dayIndex]];
+            this.slots[0] = [this.dateRender[parseInt(resource.toString(), 10)][parseInt(dayIndex.toString(), 10)].getTime()];
+            currentDates = [this.dateRender[parseInt(resource.toString(), 10)][parseInt(dayIndex.toString(), 10)]];
         }
         const record = this.splitEvent(eventObj, currentDates)[0];
         const allDayRowCell = this.element.querySelector('.' + ALLDAY_CELLS_CLASS + ':first-child');
@@ -6813,13 +6859,14 @@ class VerticalEvent extends EventBase {
         let topValue = 1;
         const isDateRange = currentDates[0].getTime() <= eStart.getTime() &&
             addDays(currentDates.slice(-1)[0], 1).getTime() >= eStart.getTime();
-        if (eStart <= eEnd && isDateRange) {
+        if (eStart <= eEnd && isDateRange && this.isWorkDayAvailable(resource, eStart)) {
             let isAlreadyRendered = [];
-            if (this.renderedAllDayEvents[resource]) {
-                isAlreadyRendered = this.renderedAllDayEvents[resource].filter((event) => event.Guid === eventObj.Guid);
+            if (this.renderedAllDayEvents[parseInt(resource.toString(), 10)]) {
+                isAlreadyRendered = this.renderedAllDayEvents[parseInt(resource.toString(), 10)].filter((event) => event.Guid === eventObj.Guid);
                 if (this.parent.activeViewOptions.group.byDate) {
-                    isAlreadyRendered = isAlreadyRendered.filter((event) => event[this.parent.eventFields.startTime] >= currentDates[dayIndex] &&
-                        event[this.parent.eventFields.endTime] <= addDays(new Date(+currentDates[dayIndex]), 1));
+                    isAlreadyRendered = isAlreadyRendered.filter((event) => event[this.parent.eventFields.startTime] >= currentDates[parseInt(dayIndex.toString(), 10)] &&
+                        event[this.parent.eventFields.endTime] <=
+                            addDays(new Date(+currentDates[parseInt(dayIndex.toString(), 10)]), 1));
                 }
             }
             if (isAlreadyRendered.length === 0) {
@@ -6832,14 +6879,12 @@ class VerticalEvent extends EventBase {
                 if (allDayDifference >= 0) {
                     appWidth = (allDayDifference * 100) - widthAdjustment;
                 }
-                if (isNullOrUndefined(this.renderedAllDayEvents[resource])) {
-                    this.renderedAllDayEvents[resource] = [];
+                if (isNullOrUndefined(this.renderedAllDayEvents[parseInt(resource.toString(), 10)])) {
+                    this.renderedAllDayEvents[parseInt(resource.toString(), 10)] = [];
                 }
-                const renderedIndex = this.getDayIndex(dayIndex, resource);
-                this.renderedAllDayEvents[resource].push(extend({}, record, null, true));
+                this.renderedAllDayEvents[parseInt(resource.toString(), 10)].push(extend({}, record, null, true));
                 const allDayRow = [].slice.call(this.element.querySelector('.' + ALLDAY_ROW_CLASS).children);
-                const wIndex = this.parent.activeViewOptions.group.byDate ?
-                    (this.resources.length * renderedIndex) + resource : dayCount;
+                const wIndex = this.getDayIndex(dayIndex, resource, dayCount);
                 const eventWrapper = this.element.querySelector('.' + ALLDAY_APPOINTMENT_WRAPPER_CLASS +
                     ':nth-child(' + (wIndex + 1) + ')');
                 let appointmentElement;
@@ -6883,13 +6928,13 @@ class VerticalEvent extends EventBase {
         let appWidth = '0%';
         const appLeft = '0%';
         let topValue = 0;
-        const currentDate = resetTime(new Date(this.dateRender[resource][dayIndex].getTime()));
+        const currentDate = resetTime(new Date(this.dateRender[parseInt(resource.toString(), 10)][parseInt(dayIndex.toString(), 10)].getTime()));
         const schedule = getStartEndHours(currentDate, this.startHour, this.endHour);
         const isValidEvent = this.isValidEvent(eventObj, eStart, eEnd, schedule);
         if ((eStart.getTime() < this.parent.minDate.getTime()) || (eEnd.getTime() > this.parent.maxDate.getTime())) {
             return;
         }
-        if (eStart <= eEnd && isValidEvent) {
+        if (eStart <= eEnd && isValidEvent && this.isWorkDayAvailable(resource, eStart)) {
             const appHeight = this.getHeight(eStart, eEnd);
             if (eStart.getTime() > schedule.startHour.getTime()) {
                 topValue = this.getTopValue(eStart, dayIndex, resource);
@@ -6898,27 +6943,26 @@ class VerticalEvent extends EventBase {
             record.Index = appIndex;
             this.overlapList.push(record);
             if (this.overlapList.length > 1) {
-                if (isNullOrUndefined(this.overlapEvents[appIndex])) {
-                    this.overlapEvents[appIndex] = [];
+                if (isNullOrUndefined(this.overlapEvents[parseInt(appIndex.toString(), 10)])) {
+                    this.overlapEvents[parseInt(appIndex.toString(), 10)] = [];
                 }
-                this.overlapEvents[appIndex].push(record);
+                this.overlapEvents[parseInt(appIndex.toString(), 10)].push(record);
             }
             else {
                 this.overlapEvents = [];
                 this.overlapEvents.push([record]);
             }
             appWidth = this.getEventWidth();
-            const renderedIndex = this.getDayIndex(dayIndex, resource);
             const argsData = {
                 index: appIndex, left: appLeft, width: appWidth,
-                day: renderedIndex, dayIndex: dayCount, record: record, resource: resource
+                day: dayCount, dayIndex: dayIndex, record: record, resource: resource
             };
             const tempData = this.adjustOverlapElements(argsData);
             appWidth = (tempData.appWidth);
-            if (isNullOrUndefined(this.renderedEvents[resource])) {
-                this.renderedEvents[resource] = [];
+            if (isNullOrUndefined(this.renderedEvents[parseInt(resource.toString(), 10)])) {
+                this.renderedEvents[parseInt(resource.toString(), 10)] = [];
             }
-            this.renderedEvents[resource].push(extend({}, record, null, true));
+            this.renderedEvents[parseInt(resource.toString(), 10)].push(extend({}, record, null, true));
             let appointmentElement;
             if (inline) {
                 appointmentElement = this.parent.inlineModule.createInlineAppointmentElement(eventObj);
@@ -6936,8 +6980,7 @@ class VerticalEvent extends EventBase {
             if (!this.parent.isAdaptive && subjectElement) {
                 subjectElement.style.maxHeight = formatUnit(maxHeight);
             }
-            const index = this.parent.activeViewOptions.group.byDate ?
-                (this.resources.length * renderedIndex) + resource : dayCount;
+            const index = this.getDayIndex(dayIndex, resource, dayCount);
             const eventData = {};
             eventData[this.fields.startTime] = eventObj[this.fields.startTime];
             eventData[this.fields.endTime] = eventObj[this.fields.endTime];
@@ -6962,7 +7005,7 @@ class VerticalEvent extends EventBase {
         return (tempLeft > 99 ? 99 : tempLeft) + '%';
     }
     getTopValue(date, day, resource) {
-        const startEndHours = getStartEndHours(resetTime(this.dateRender[resource][day]), this.startHour, this.endHour);
+        const startEndHours = getStartEndHours(resetTime(this.dateRender[parseInt(resource.toString(), 10)][parseInt(day.toString(), 10)]), this.startHour, this.endHour);
         const startHour = startEndHours.startHour;
         const diffInMinutes = ((date.getHours() - startHour.getHours()) * 60) + (date.getMinutes() - startHour.getMinutes());
         return (this.parent.activeViewOptions.timeScale.enable) ? ((diffInMinutes * this.cellHeight * this.slotCount) / this.interval) : 0;
@@ -6973,18 +7016,18 @@ class VerticalEvent extends EventBase {
         let appIndex = -1;
         this.overlapEvents = [];
         if (isAllDay) {
-            if (!isNullOrUndefined(this.renderedAllDayEvents[resource])) {
-                const date = resetTime(new Date(this.dateRender[resource][day].getTime()));
-                eventsList = this.renderedAllDayEvents[resource].filter((app) => resetTime(app[fieldMapping.startTime]).getTime() <= date.getTime() &&
+            if (!isNullOrUndefined(this.renderedAllDayEvents[parseInt(resource.toString(), 10)])) {
+                const date = resetTime(new Date(this.dateRender[parseInt(resource.toString(), 10)][parseInt(day.toString(), 10)].getTime()));
+                eventsList = this.renderedAllDayEvents[parseInt(resource.toString(), 10)].filter((app) => resetTime(app[fieldMapping.startTime]).getTime() <= date.getTime() &&
                     resetTime(app[fieldMapping.endTime]).getTime() >= date.getTime());
                 if (this.parent.activeViewOptions.group.resources.length > 0) {
-                    eventsList = this.filterEventsByResource(this.resources[resource], eventsList);
+                    eventsList = this.filterEventsByResource(this.resources[parseInt(resource.toString(), 10)], eventsList);
                 }
             }
         }
         else {
-            const appointmentList = !isNullOrUndefined(this.renderedEvents[resource]) ?
-                this.renderedEvents[resource] : [];
+            const appointmentList = !isNullOrUndefined(this.renderedEvents[parseInt(resource.toString(), 10)]) ?
+                this.renderedEvents[parseInt(resource.toString(), 10)] : [];
             let appointment = [];
             const recordStart = record[fieldMapping.startTime];
             const recordEnd = record[fieldMapping.endTime];
@@ -6993,12 +7036,12 @@ class VerticalEvent extends EventBase {
                 (data[fieldMapping.endTime].getTime() === data[fieldMapping.startTime].getTime() &&
                     data[fieldMapping.startTime].getTime() === recordStart.getTime() && data[fieldMapping.endTime] < recordEnd));
             if (this.parent.activeViewOptions.group.resources.length > 0) {
-                this.overlapList = this.filterEventsByResource(this.resources[resource], this.overlapList);
+                this.overlapList = this.filterEventsByResource(this.resources[parseInt(resource.toString(), 10)], this.overlapList);
             }
             this.overlapList.forEach((obj) => {
                 let filterList = appointmentList.filter((data) => data[fieldMapping.endTime] > obj[fieldMapping.startTime] && data[fieldMapping.startTime] <= obj[fieldMapping.endTime]);
                 if (this.parent.activeViewOptions.group.resources.length > 0) {
-                    filterList = this.filterEventsByResource(this.resources[resource], filterList);
+                    filterList = this.filterEventsByResource(this.resources[parseInt(resource.toString(), 10)], filterList);
                 }
                 const collection = filterList.filter((val) => this.overlapList.indexOf(val) === -1);
                 if (collection.length > 0) {
@@ -7007,7 +7050,8 @@ class VerticalEvent extends EventBase {
             });
             for (let i = 0; i < appointment.length - 1; i++) {
                 for (let j = i + 1; j < appointment.length; j++) {
-                    if (appointment[i][fieldMapping.id] === appointment[j][fieldMapping.id]) {
+                    if (appointment[parseInt(i.toString(), 10)][fieldMapping.id] ===
+                        appointment[parseInt(j.toString(), 10)][fieldMapping.id]) {
                         appointment.splice(j, 1);
                         j--;
                     }
@@ -7018,11 +7062,11 @@ class VerticalEvent extends EventBase {
             for (const event of eventsList) {
                 const record = event;
                 const index = record.Index;
-                if (isNullOrUndefined(this.overlapEvents[index])) {
-                    this.overlapEvents[index] = [event];
+                if (isNullOrUndefined(this.overlapEvents[parseInt(index.toString(), 10)])) {
+                    this.overlapEvents[parseInt(index.toString(), 10)] = [event];
                 }
                 else {
-                    this.overlapEvents[index].push(event);
+                    this.overlapEvents[parseInt(index.toString(), 10)].push(event);
                 }
             }
         }
@@ -7046,13 +7090,12 @@ class VerticalEvent extends EventBase {
     adjustOverlapElements(args) {
         const data = { appWidth: args.width, appLeft: args.left };
         for (let i = 0, length1 = this.overlapEvents.length; i < length1; i++) {
-            if (!isNullOrUndefined(this.overlapEvents[i])) {
-                for (let j = 0, length2 = this.overlapEvents[i].length; j < length2; j++) {
-                    const dayCount = this.parent.activeViewOptions.group.byDate ?
-                        (this.resources.length * args.day) + args.resource : args.dayIndex;
+            if (!isNullOrUndefined(this.overlapEvents[parseInt(i.toString(), 10)])) {
+                for (let j = 0, length2 = this.overlapEvents[parseInt(i.toString(), 10)].length; j < length2; j++) {
+                    const dayCount = this.getDayIndex(args.dayIndex, args.resource, args.day);
                     const element = this.element.querySelector('#e-appointment-wrapper-' + dayCount);
                     if (element && element.childElementCount > 0) {
-                        const eleGuid = this.overlapEvents[i][j].Guid;
+                        const eleGuid = this.overlapEvents[parseInt(i.toString(), 10)][parseInt(j.toString(), 10)].Guid;
                         if (element.querySelectorAll('div[data-guid="' + eleGuid + '"]').length > 0 && eleGuid !== args.record.Guid) {
                             const apps = element.querySelector('div[data-guid="' + eleGuid + '"]');
                             if (parseFloat(args.width) <= parseFloat(apps.style.width)) {
@@ -7212,7 +7255,8 @@ class MonthEvent extends EventBase {
     }
     removeEventWrapper(appElement) {
         if (appElement.length > 0) {
-            appElement = (this.parent.currentView === 'Month') ? appElement : [appElement[0]];
+            appElement = (this.parent.currentView === 'Month' || (!this.parent.activeView.isTimelineView() &&
+                !this.parent.activeViewOptions.timeScale.enable)) ? appElement : [appElement[0]];
             for (const wrap of appElement) {
                 if (wrap.parentElement && wrap.parentElement.parentNode) {
                     remove(wrap.parentElement);
@@ -7234,12 +7278,13 @@ class MonthEvent extends EventBase {
         if (this.parent.crudModule && this.parent.crudModule.crudObj.isCrudAction) {
             for (let i = 0, len = this.parent.crudModule.crudObj.sourceEvent.length; i < len; i++) {
                 const appElement = [].slice.call(this.element.querySelectorAll('.e-appointment-wrapper ' + '[data-group-index="' +
-                    this.parent.crudModule.crudObj.sourceEvent[i].groupIndex + '"]'));
+                    this.parent.crudModule.crudObj.sourceEvent[parseInt(i.toString(), 10)].groupIndex + '"]'));
                 this.removeEventWrapper(appElement);
-                if (this.parent.crudModule.crudObj.targetEvent[i] && this.parent.crudModule.crudObj.sourceEvent[i].groupIndex !==
-                    this.parent.crudModule.crudObj.targetEvent[i].groupIndex) {
+                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) {
                     const ele = [].slice.call(this.element.querySelectorAll('.e-appointment-wrapper ' + '[data-group-index="' +
-                        this.parent.crudModule.crudObj.targetEvent[i].groupIndex + '"]'));
+                        this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)].groupIndex + '"]'));
                     this.removeEventWrapper(ele);
                 }
             }
@@ -7300,7 +7345,7 @@ class MonthEvent extends EventBase {
                 const totalCells = [].slice.call(this.parent.element.querySelectorAll('.e-content-wrap table tr td:first-child'));
                 const weekNumberCells = [].slice.call(this.parent.element.querySelectorAll('.' + WEEK_NUMBER_CLASS));
                 weekNumberCells.forEach((cell, i) => {
-                    const height = totalCells[i].offsetHeight;
+                    const height = totalCells[parseInt(i.toString(), 10)].offsetHeight;
                     setStyleAttribute(cell, { 'height': height + 'px' });
                 });
                 this.parent.element.querySelector('.' + WEEK_NUMBER_WRAPPER_CLASS).scrollTop =
@@ -7353,7 +7398,7 @@ class MonthEvent extends EventBase {
         }
         for (let level = 0; level < this.slots.length; level++) {
             this.renderedEvents = [];
-            const slot = this.slots[level];
+            const slot = this.slots[parseInt(level.toString(), 10)];
             const endDate = addDays(new Date(slot[slot.length - 1]), 1);
             const spannedEvents = this.filterEvents(new Date(slot[0]), endDate, events);
             for (const event of spannedEvents) {
@@ -7457,7 +7502,7 @@ class MonthEvent extends EventBase {
         return event[this.fields.endTime];
     }
     getCellTd(day) {
-        return this.workCells[day];
+        return this.workCells[parseInt(day.toString(), 10)];
     }
     getEventWidth(startDate, endDate, isAllDay, count) {
         return count * this.cellWidth - 1;
@@ -7504,11 +7549,11 @@ class MonthEvent extends EventBase {
             this.parent.resourceBase.renderedResources;
         if (this.parent.crudModule && this.parent.crudModule.crudObj.isCrudAction) {
             for (let i = 0, len = this.parent.crudModule.crudObj.sourceEvent.length; i < len; i++) {
-                const sourceRes = this.parent.crudModule.crudObj.sourceEvent[i];
+                const sourceRes = this.parent.crudModule.crudObj.sourceEvent[parseInt(i.toString(), 10)];
                 this.renderEventsHandler(sourceRes.renderDates, sourceRes.workDays, sourceRes);
-                if (this.parent.crudModule.crudObj.sourceEvent[i].groupIndex !==
-                    this.parent.crudModule.crudObj.targetEvent[i].groupIndex) {
-                    const target = this.parent.crudModule.crudObj.targetEvent[i];
+                if (this.parent.crudModule.crudObj.sourceEvent[parseInt(i.toString(), 10)].groupIndex !==
+                    this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)].groupIndex) {
+                    const target = this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)];
                     this.renderEventsHandler(target.renderDates, target.workDays, target);
                 }
             }
@@ -7523,7 +7568,8 @@ class MonthEvent extends EventBase {
     getSlotDates(workDays) {
         this.slots = [];
         const dates = this.dateRender.map((date) => { return +date; });
-        const noOfDays = this.parent.activeViewOptions.showWeekend ? WEEK_LENGTH : workDays.length;
+        const noOfDays = !this.parent.activeViewOptions.showWeekend || (this.parent.activeViewOptions.group.byDate &&
+            this.parent.activeViewOptions.group.hideNonWorkingDays) ? workDays.length : WEEK_LENGTH;
         while (dates.length > 0) {
             this.slots.push(dates.splice(0, noOfDays));
         }
@@ -7659,7 +7705,7 @@ class MonthEvent extends EventBase {
         const diffInDays = event.data.count;
         if (startTime.getTime() <= endTime.getTime()) {
             const appWidth = (diffInDays * this.cellWidth) - 5;
-            const cellTd = this.workCells[day];
+            const cellTd = this.workCells[parseInt(day.toString(), 10)];
             const appTop = (overlapCount * (this.eventHeight + EVENT_GAP));
             const height = this.monthHeaderHeight + ((overlapCount + 1) * (this.eventHeight + EVENT_GAP)) + this.moreIndicatorHeight;
             const enableAppRender = this.maxOrIndicator ? overlapCount < 1 ? true : false : this.cellHeight > height;
@@ -7950,12 +7996,12 @@ class TimelineEvent extends MonthEvent {
             this.parent.resourceBase.renderedResources;
         if (this.parent.crudModule && this.parent.crudModule.crudObj.isCrudAction) {
             for (let i = 0, len = this.parent.crudModule.crudObj.sourceEvent.length; i < len; i++) {
-                const source = this.parent.crudModule.crudObj.sourceEvent[i];
+                const 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.crudModule.crudObj.targetEvent[i] && this.parent.crudModule.crudObj.sourceEvent[i].groupIndex !==
-                    this.parent.crudModule.crudObj.targetEvent[i].groupIndex) {
-                    const target = this.parent.crudModule.crudObj.targetEvent[i];
+                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) {
+                    const target = this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)];
                     this.rowIndex = target.groupIndex;
                     this.renderEventsHandler(this.parent.activeView.renderDates, this.parent.activeViewOptions.workDays, target);
                 }
@@ -7965,7 +8011,7 @@ class TimelineEvent extends MonthEvent {
         else {
             for (let i = 0; i < resources.length; i++) {
                 this.rowIndex = i;
-                this.renderEventsHandler(this.parent.activeView.renderDates, this.parent.activeViewOptions.workDays, resources[i]);
+                this.renderEventsHandler(this.parent.activeView.renderDates, this.parent.activeViewOptions.workDays, resources[parseInt(i.toString(), 10)]);
             }
         }
     }
@@ -8011,10 +8057,10 @@ class TimelineEvent extends MonthEvent {
             const position = this.getPosition(startTime, endTime, event[this.fields.isAllDay], this.day);
             appWidth = (appWidth <= 0) ? this.cellWidth : appWidth; // appWidth 0 when start and end time as same
             this.renderedEvents.push(extend({}, event, null, true));
-            if (isNullOrUndefined(this.cellTops[resIndex])) {
-                this.cellTops[resIndex] = this.getRowTop(resIndex);
+            if (isNullOrUndefined(this.cellTops[parseInt(resIndex.toString(), 10)])) {
+                this.cellTops[parseInt(resIndex.toString(), 10)] = this.getRowTop(resIndex);
             }
-            const top = this.cellTops[resIndex];
+            const top = this.cellTops[parseInt(resIndex.toString(), 10)];
             const appTop = (top + (this.maxHeight ? 0 : EVENT_GAP$1)) + (overlapCount * (appHeight + EVENT_GAP$1));
             appLeft = (this.parent.enableRtl) ? 0 : position;
             appRight = (this.parent.enableRtl) ? position : 0;
@@ -8278,7 +8324,7 @@ class TimelineEvent extends MonthEvent {
         if (this.renderType === 'day' || isAllDay) {
             return (day * this.slotsPerDay) * this.cellWidth;
         }
-        const currentDate = resetTime(new Date(this.dateRender[day].getTime()));
+        const currentDate = resetTime(new Date(this.dateRender[parseInt(day.toString(), 10)].getTime()));
         const schedule = getStartEndHours(currentDate, this.startHour, this.endHour);
         let cellIndex;
         if (schedule.endHour.getTime() <= endTime.getTime() && schedule.startHour.getTime() >= startTime.getTime()) {
@@ -8308,7 +8354,7 @@ class TimelineEvent extends MonthEvent {
         for (let i = 0; i < moreIndicator.length; i++) {
             let indicatorPos;
             if (moreIndicator) {
-                indicatorPos = (this.parent.enableRtl) ? moreIndicator[i].style.right : moreIndicator[i].style.left;
+                indicatorPos = (this.parent.enableRtl) ? moreIndicator[parseInt(i.toString(), 10)].style.right : moreIndicator[parseInt(i.toString(), 10)].style.left;
             }
             if (parseInt(indicatorPos, 10) === Math.floor(appPos)) {
                 return true;
@@ -8325,7 +8371,7 @@ class TimelineEvent extends MonthEvent {
     }
     getCellTd() {
         const wrapIndex = this.parent.uiStateValues.isGroupAdaptive ? 0 : this.rowIndex;
-        return this.eventContainers[wrapIndex];
+        return this.eventContainers[parseInt(wrapIndex.toString(), 10)];
     }
     renderBlockIndicator(cellTd, position, resIndex) {
         // No need to render block icon for Year, Month and Week header rows
@@ -8415,11 +8461,12 @@ class InlineEdit {
         const start = resetTime(new Date('' + saveObj[this.parent.eventFields.startTime])).getTime();
         const end = resetTime(new Date('' + saveObj[this.parent.eventFields.endTime])).getTime();
         const resIndex = args.groupIndex || 0;
-        if (this.parent.currentView === 'Day' || this.parent.currentView === 'Week' || this.parent.currentView === 'WorkWeek') {
+        const isVertical = this.parent.currentView === 'Day' || this.parent.currentView === 'Week' || this.parent.currentView === 'WorkWeek';
+        if (this.parent.activeViewOptions.timeScale.enable && isVertical) {
             const dayIndex = saveObj[this.parent.eventFields.startTime].getDay();
             this.createVerticalViewInline(saveObj, dayIndex, resIndex, cellIndex);
         }
-        else if (this.parent.currentView === 'Month') {
+        else if (this.parent.currentView === 'Month' || (!this.parent.activeViewOptions.timeScale.enable && isVertical)) {
             this.createMonthViewInline(saveObj, resIndex, start, end);
         }
         else {
@@ -8468,7 +8515,7 @@ class InlineEdit {
         const count = this.getEventDaysCount(saveObj);
         const verticalEvent = new VerticalEvent(this.parent);
         verticalEvent.initializeValues();
-        const index = verticalEvent.dateRender[resIndex].map((date) => date.getDay()).indexOf(dayIndex);
+        const index = verticalEvent.dateRender[parseInt(resIndex.toString(), 10)].map((date) => date.getDay()).indexOf(dayIndex);
         if (count >= 1) {
             verticalEvent.allDayElement = [].slice.call(this.parent.element.querySelectorAll('.' + ALLDAY_CELLS_CLASS));
             verticalEvent.slots.push(...this.parent.activeView.renderDates.map((date) => +date));
@@ -8496,14 +8543,16 @@ class InlineEdit {
         let monthCellSelector = '.' + WORK_CELLS_CLASS;
         if (this.parent.activeViewOptions.group.resources.length > 0) {
             monthCellSelector += '[data-group-index="' + index + '"]';
-            const resourceData = this.parent.resourceBase.lastResourceLevel[index];
+            const resourceData = this.parent.resourceBase.lastResourceLevel[parseInt(index.toString(), 10)];
             renderDates = resourceData.renderDates;
             workDays = resourceData.workDays;
         }
+        monthEvent.dateRender = renderDates;
         monthEvent.workCells = [].slice.call(this.parent.element.querySelectorAll(monthCellSelector));
         monthEvent.cellWidth = monthEvent.workCells[0].offsetWidth;
         monthEvent.cellHeight = monthEvent.workCells[0].offsetHeight;
-        monthEvent.eventHeight = getElementHeightFromClass(this.parent.monthModule.element, APPOINTMENT_CLASS);
+        monthEvent.eventHeight =
+            getElementHeightFromClass(this.parent.monthModule.element || monthEvent.element, APPOINTMENT_CLASS);
         monthEvent.getSlotDates(workDays);
         const filteredDates = monthEvent.getRenderedDates(renderDates);
         const spannedEvents = monthEvent.splitEvent(saveObject, filteredDates || renderDates);
@@ -9411,9 +9460,9 @@ class QuickPopups {
                 let resourceData;
                 let lastResource;
                 for (let i = this.parent.resourceBase.resourceCollection.length - 1; i >= 0; i--) {
-                    resourceData = eventData[this.parent.resourceBase.resourceCollection[i].field];
+                    resourceData = eventData[this.parent.resourceBase.resourceCollection[parseInt(i.toString(), 10)].field];
                     if (!isNullOrUndefined(resourceData)) {
-                        lastResource = this.parent.resourceBase.resourceCollection[i];
+                        lastResource = this.parent.resourceBase.resourceCollection[parseInt(i.toString(), 10)];
                         break;
                     }
                 }
@@ -9426,7 +9475,7 @@ class QuickPopups {
                     let text;
                     const i = findIndexInData(lastResourceData, lastResource.idField, value);
                     if (i > -1) {
-                        text = lastResourceData[i][lastResource.textField];
+                        text = lastResourceData[parseInt(i.toString(), 10)][lastResource.textField];
                     }
                     if (text) {
                         resNames.push(text);
@@ -9437,7 +9486,7 @@ class QuickPopups {
             else {
                 const argsData = args;
                 const groupIndex = !isNullOrUndefined(argsData.groupIndex) ? argsData.groupIndex : 0;
-                const resourceDetails = this.parent.resourceBase.lastResourceLevel[groupIndex];
+                const resourceDetails = this.parent.resourceBase.lastResourceLevel[parseInt(groupIndex.toString(), 10)];
                 resourceValue = resourceDetails.resourceData[resourceDetails.resource.textField];
             }
         }
@@ -9513,9 +9562,9 @@ class QuickPopups {
                         const workCells = [].slice.call(this.parent.element.querySelectorAll('.' + CONTENT_WRAP_CLASS +
                             ' tbody tr td[data-group-index="' + gIndex + '"]'));
                         for (let i = 0; i < workCells.length; i++) {
-                            const date = workCells[i].getAttribute('data-date');
+                            const date = workCells[parseInt(i.toString(), 10)].getAttribute('data-date');
                             if (date < tdDate) {
-                                this.morePopup.relateTo = workCells[i];
+                                this.morePopup.relateTo = workCells[parseInt(i.toString(), 10)];
                             }
                         }
                     }
@@ -10077,12 +10126,13 @@ class EventTooltip {
             let resCollection;
             if (this.parent.activeView.isTimelineView()) {
                 const index = parseInt(args.target.getAttribute('data-group-index'), 10);
-                resCollection = this.parent.resourceBase.lastResourceLevel[index];
+                resCollection = this.parent.resourceBase.lastResourceLevel[parseInt(index.toString(), 10)];
             }
             else {
                 const rowIndex = args.target.parentNode.sectionRowIndex;
                 const cellIndex = args.target.cellIndex;
-                resCollection = this.parent.activeView.getColumnLevels()[rowIndex][cellIndex];
+                resCollection =
+                    this.parent.activeView.getColumnLevels()[parseInt(rowIndex.toString(), 10)][parseInt(cellIndex.toString(), 10)];
             }
             const data = {
                 resource: resCollection.resource,
@@ -10818,7 +10868,7 @@ let RecurrenceEditor = class RecurrenceEditor extends Component {
         const self = this;
         const dataSource = [];
         monthpos.forEach((data) => {
-            dataSource.push({ text: self.localeObj.getConstant(data), value: monthposValue[data] });
+            dataSource.push({ text: self.localeObj.getConstant(data), value: monthposValue[`${data}`] });
         });
         return dataSource;
     }
@@ -10837,7 +10887,7 @@ let RecurrenceEditor = class RecurrenceEditor extends Component {
         }
         for (const obj of weekday) {
             const day = getValue(obj, cldrObj);
-            dayData.push({ text: format === 'narrow' ? day : capitalizeFirstWord(day, 'single'), value: valueData[obj] });
+            dayData.push({ text: format === 'narrow' ? day : capitalizeFirstWord(day, 'single'), value: valueData[`${obj}`] });
         }
         return dayData;
     }
@@ -10926,7 +10976,7 @@ let RecurrenceEditor = class RecurrenceEditor extends Component {
         const weekday = [RULESUNDAY, RULEMONDAY, RULETUESDAY, RULEWEDNESDAY, RULETHURSDAY, RULEFRIDAY, RULESATURDAY];
         this.rotateArray(weekday, this.firstDayOfWeek);
         for (let index = 0; index < elements.length; index++) {
-            ruleData += weekday[parseInt(elements[index].getAttribute('data-index'), 10)] + (index === (elements.length - 1) ? '' : COMMA);
+            ruleData += weekday[parseInt(elements[parseInt(index.toString(), 10)].getAttribute('data-index'), 10)] + (index === (elements.length - 1) ? '' : COMMA);
         }
         return ruleData + SEMICOLON;
     }
@@ -10955,7 +11005,7 @@ let RecurrenceEditor = class RecurrenceEditor extends Component {
         this.rotateArray(weekday, this.firstDayOfWeek);
         for (const obj of this.dayButtons) {
             const index = parseInt(obj.element.getAttribute('data-index'), 10);
-            if (keys.indexOf(weekday[index]) !== -1) {
+            if (keys.indexOf(weekday[parseInt(index.toString(), 10)]) !== -1) {
                 obj.setProperties({ isPrimary: true });
             }
             else {
@@ -10972,7 +11022,7 @@ let RecurrenceEditor = class RecurrenceEditor extends Component {
             this.onWeekDay.setProperties({ checked: true });
             this.monthWeekPos.setProperties({ value: this.ruleObject.setPosition });
             for (const key of Object.keys(valueData)) {
-                if (valueData[key] === this.ruleObject.day[0]) {
+                if (valueData[`${key}`] === this.ruleObject.day[0]) {
                     this.monthWeekDays.setProperties({ value: this.ruleObject.day[0] });
                     break;
                 }
@@ -11769,13 +11819,13 @@ class EventWindow {
         const resourceCollection = this.parent.resourceBase.resourceCollection;
         const fieldName = args.element.getAttribute('name') || this.getColumnName(args.element);
         for (let i = 0; i < resourceCollection.length; i++) {
-            if (resourceCollection[i].field === fieldName && i < resourceCollection.length - 1) {
+            if (resourceCollection[parseInt(i.toString(), 10)].field === fieldName && i < resourceCollection.length - 1) {
                 const resObject = this.createInstance(i);
                 let datasource = [];
                 for (let j = 0; j < args.value.length; j++) {
                     const resourceModel = resourceCollection[i + 1];
                     // eslint-disable-next-line max-len
-                    const filter = resourceModel.dataSource.filter((data) => data[resourceModel.groupIDField] === args.value[j])[0];
+                    const filter = resourceModel.dataSource.filter((data) => data[resourceModel.groupIDField] === args.value[parseInt(j.toString(), 10)])[0];
                     const groupId = (!isNullOrUndefined(filter)) ?
                         filter[resourceCollection[i + 1].groupIDField] : null;
                     const filterRes = this.filterDatasource(i, groupId);
@@ -11800,9 +11850,9 @@ class EventWindow {
         const fieldName = args.element.getAttribute('name') || this.getColumnName(args.element);
         const resourceCollection = this.parent.resourceBase.resourceCollection;
         for (let i = 0; i < resourceCollection.length; i++) {
-            if ((i < resourceCollection.length - 1) && resourceCollection[i].field === fieldName) {
+            if ((i < resourceCollection.length - 1) && resourceCollection[parseInt(i.toString(), 10)].field === fieldName) {
                 const resObj = this.createInstance(i);
-                const groupId = args.itemData[resourceCollection[i].idField];
+                const groupId = args.itemData[resourceCollection[parseInt(i.toString(), 10)].idField];
                 resObj.dataSource = this.filterDatasource(i, groupId);
                 resObj.dataBind();
                 const resValue = (resObj.dataSource.length > 0) ?
@@ -12122,7 +12172,7 @@ class EventWindow {
             const columnName = curElement.name || this.getColumnName(curElement);
             if (!isNullOrUndefined(columnName) && columnName !== '') {
                 if (keyNames.indexOf(columnName) !== -1) {
-                    this.setValueToElement(curElement, eventObj[columnName]);
+                    this.setValueToElement(curElement, eventObj[`${columnName}`]);
                 }
                 else {
                     this.setDefaultValueToElement(curElement);
@@ -12562,7 +12612,7 @@ class EventWindow {
         for (const currentElement of formElement) {
             const columnName = currentElement.name || this.getColumnName(currentElement);
             if (!isNullOrUndefined(columnName) && columnName !== '') {
-                eventObj[columnName] = this.getValueFromElement(currentElement);
+                eventObj[`${columnName}`] = this.getValueFromElement(currentElement);
             }
         }
         return eventObj;
@@ -12624,11 +12674,13 @@ class EventWindow {
                     case 'WEEKLY':
                         types = recEditor.value.split(';')[1].split('=')[1].split(',');
                         for (let index = 0; index < types.length * (interval + 1); index++) {
-                            temp[index] = (types.length > index) ? obj[types[index]] : temp[index - types.length] + (7 * interval);
+                            temp[parseInt(index.toString(), 10)] =
+                                (types.length > index) ? obj[types[parseInt(index.toString(), 10)]] :
+                                    temp[index - types.length] + (7 * interval);
                         }
                         tempValue = temp.sort((a, b) => a - b);
                         for (let index = 1; index < tempValue.length; index++) {
-                            tempDiff.push(tempValue[index] - tempValue[index - 1]);
+                            tempDiff.push(tempValue[parseInt(index.toString(), 10)] - tempValue[index - 1]);
                         }
                         if ((((endDate.getTime() - startDate.getTime()) / (1000 * 3600)) >= Math.min(...tempDiff) * 24)
                             || isNullOrUndefined(interval)) {
@@ -12664,7 +12716,7 @@ class EventWindow {
     getRecurrenceIndex(recColl, event) {
         let recIndex;
         for (let index = 0; index < recColl.length; index++) {
-            if (event[this.fields.startTime].valueOf() === recColl[index][this.fields.startTime].valueOf()) {
+            if (event[this.fields.startTime].valueOf() === recColl[parseInt(index.toString(), 10)][this.fields.startTime].valueOf()) {
                 recIndex = index;
                 break;
             }
@@ -12762,8 +12814,8 @@ class EventWindow {
                     if (temp.length > 0) {
                         temp[0][this.fields.id] = eventObj[this.fields.id];
                         for (let k = 1; k < temp.length; k++) {
-                            temp[k][this.fields.id] = this.parent.eventBase.getEventMaxID(i);
-                            eventList.push(temp[k]);
+                            temp[parseInt(k.toString(), 10)][this.fields.id] = this.parent.eventBase.getEventMaxID(i);
+                            eventList.push(temp[parseInt(k.toString(), 10)]);
                             this.parent.saveEvent(temp[0], currentAction);
                         }
                     }
@@ -12775,8 +12827,8 @@ class EventWindow {
                 else {
                     if (temp.length > 0) {
                         for (let j = 0; j < temp.length; j++) {
-                            temp[j][this.fields.id] = this.parent.eventBase.getEventMaxID(j);
-                            eventList.push(temp[j]);
+                            temp[parseInt(j.toString(), 10)][this.fields.id] = this.parent.eventBase.getEventMaxID(j);
+                            eventList.push(temp[parseInt(j.toString(), 10)]);
                         }
                     }
                     else {
@@ -12790,50 +12842,54 @@ class EventWindow {
                 const resCol = this.parent.resourceCollection;
                 let index;
                 if (resCol.length > 1) {
-                    index = findIndexInData(lastResource, lastResourceData.idField, resourceData[i], events, resCol);
+                    index =
+                        findIndexInData(lastResource, lastResourceData.idField, resourceData[parseInt(i.toString(), 10)], events, resCol);
                 }
                 else {
-                    index = findIndexInData(lastResource, lastResourceData.idField, resourceData[i]);
+                    index =
+                        findIndexInData(lastResource, lastResourceData.idField, resourceData[parseInt(i.toString(), 10)]);
                 }
                 if (index < 0) {
                     return;
                 }
-                const groupId = lastResource[index][lastResourceData.groupIDField];
-                const filter = lastLevel.filter((obj) => obj.resourceData[lastResourceData.idField] === resourceData[i]).
+                const groupId = lastResource[parseInt(index.toString(), 10)][lastResourceData.groupIDField];
+                const filter = lastLevel.filter((obj) => obj.resourceData[lastResourceData.idField] ===
+                    resourceData[parseInt(i.toString(), 10)]).
                     filter((obj) => obj.resourceData[lastResourceData.groupIDField] === groupId)[0];
                 const groupOrder = filter.groupOrder;
                 for (let index = 0; index < this.parent.resourceBase.resourceCollection.length; index++) {
-                    const field = this.parent.resourceBase.resourceCollection[index].field;
-                    events[field] = (groupOrder[index] instanceof Array) ? groupOrder[index][0] : groupOrder[index];
+                    const field = this.parent.resourceBase.resourceCollection[parseInt(index.toString(), 10)].field;
+                    events[`${field}`] = (groupOrder[parseInt(index.toString(), 10)] instanceof Array) ? groupOrder[parseInt(index.toString(), 10)][0] :
+                        groupOrder[parseInt(index.toString(), 10)];
                 }
                 addValues();
             }
             else {
                 for (let index = 0; index < this.parent.resourceBase.resourceCollection.length - 1; index++) {
-                    const field = this.parent.resourceBase.resourceCollection[index].field;
-                    if (events[field] instanceof Array && events[field].length > 1) {
-                        for (let k = 0; k < events[field].length; k++) {
+                    const field = this.parent.resourceBase.resourceCollection[parseInt(index.toString(), 10)].field;
+                    if (events[`${field}`] instanceof Array && events[`${field}`].length > 1) {
+                        for (let k = 0; k < events[`${field}`].length; k++) {
                             const event = extend({}, events, null, true);
-                            event[field] = eventObj[field][k];
-                            event[lastResourceData.field] = resourceData[i];
+                            event[`${field}`] = eventObj[`${field}`][parseInt(k.toString(), 10)];
+                            event[lastResourceData.field] = resourceData[parseInt(i.toString(), 10)];
                             temp.push(event);
                         }
                     }
                     else {
                         if (temp.length === 0) {
-                            events[field] = (eventObj[field] instanceof Array) ?
-                                eventObj[field][0] : eventObj[field];
-                            events[lastResourceData.field] = resourceData[i];
+                            events[`${field}`] = (eventObj[`${field}`] instanceof Array) ?
+                                eventObj[`${field}`][0] : eventObj[`${field}`];
+                            events[lastResourceData.field] = resourceData[parseInt(i.toString(), 10)];
                         }
                         else {
                             for (let l = 0; l < temp.length; l++) {
-                                temp[l][field] = (eventObj[field] instanceof Array) ?
-                                    eventObj[field][0] : eventObj[field];
+                                temp[parseInt(l.toString(), 10)][`${field}`] = (eventObj[`${field}`] instanceof Array) ?
+                                    eventObj[`${field}`][0] : eventObj[`${field}`];
                             }
                         }
                     }
                 }
-                events[lastResourceData.field] = resourceData[i];
+                events[lastResourceData.field] = resourceData[parseInt(i.toString(), 10)];
                 addValues();
             }
         }
@@ -13312,21 +13368,24 @@ class VirtualScroll {
         let resCollection = [];
         const index = { startIndex: 0, endIndex: 0 };
         if (this.parent.activeViewOptions.group.byDate) {
-            if (lastLevel[startIndex].date.getTime() === this.parent.resourceBase.expandedResources[0].date.getTime() &&
-                lastLevel[endIndex].date.getTime() ===
+            if (lastLevel[parseInt(startIndex.toString(), 10)].date.getTime() ===
+                this.parent.resourceBase.expandedResources[0].date.getTime() &&
+                lastLevel[parseInt(endIndex.toString(), 10)].date.getTime() ===
                     this.parent.resourceBase.expandedResources[this.parent.resourceBase.expandedResources.length - 1].date.getTime()) {
                 return this.parent.resourceBase.expandedResources;
             }
-            resCollection = this.getByDateCollection(lastLevel[startIndex], lastLevel[endIndex], index);
+            resCollection =
+                this.getByDateCollection(lastLevel[parseInt(startIndex.toString(), 10)], lastLevel[parseInt(endIndex.toString(), 10)], index);
             this.setRenderedDates(resCollection);
         }
         else {
-            if (lastLevel[startIndex].groupIndex === this.parent.resourceBase.expandedResources[0].groupIndex &&
-                lastLevel[endIndex].groupIndex ===
+            if (lastLevel[parseInt(startIndex.toString(), 10)].groupIndex === this.parent.resourceBase.expandedResources[0].groupIndex &&
+                lastLevel[parseInt(endIndex.toString(), 10)].groupIndex ===
                     this.parent.resourceBase.expandedResources[this.parent.resourceBase.expandedResources.length - 1].groupIndex) {
                 return this.parent.resourceBase.expandedResources;
             }
-            resCollection = this.getByIdCollection(lastLevel[startIndex], lastLevel[endIndex], index);
+            resCollection =
+                this.getByIdCollection(lastLevel[parseInt(startIndex.toString(), 10)], lastLevel[parseInt(endIndex.toString(), 10)], index);
         }
         if (this.parent.currentView !== 'Month') {
             this.startIndex = index.startIndex;
@@ -13402,7 +13461,7 @@ class VirtualScroll {
         else {
             const col = [].slice.call(conWrap.querySelector('colgroup').children);
             for (let i = 0; i < col.length; i++) {
-                remove(col[i]);
+                remove(col[parseInt(i.toString(), 10)]);
             }
             this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 1] = resCollection;
             const contentRows = this.parent.activeView.getContentRows();
@@ -13492,8 +13551,8 @@ class Render {
         if (this.parent.activeView) {
             const 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();
@@ -13597,7 +13656,7 @@ class Render {
             else if (this.parent.element.classList.contains(READ_ONLY)) {
                 removeClass([this.parent.element], READ_ONLY);
             }
-            this.parent.headerModule.updateDateRange(this.parent.activeView.getDateRangeText());
+            this.parent.headerModule.updateDateRange();
             this.parent.headerModule.updateHeaderItems('remove');
         }
     }
@@ -13766,10 +13825,10 @@ class Crud {
                 ['Agenda', 'MonthAgenda', 'Year', 'TimelineYear'].indexOf(this.parent.currentView) === -1) {
                 templateNames = [];
                 for (let i = 0, len = this.crudObj.sourceEvent.length; i < len; i++) {
-                    templateNames.push('eventTemplate_' + this.crudObj.sourceEvent[i].groupIndex);
-                    if (this.crudObj.targetEvent[i] && this.crudObj.sourceEvent[i].groupIndex !==
-                        this.crudObj.targetEvent[i].groupIndex) {
-                        templateNames.push('eventTemplate_' + this.crudObj.targetEvent[i].groupIndex);
+                    templateNames.push('eventTemplate_' + this.crudObj.sourceEvent[parseInt(i.toString(), 10)].groupIndex);
+                    if (this.crudObj.targetEvent[parseInt(i.toString(), 10)] && this.crudObj.sourceEvent[parseInt(i.toString(), 10)].groupIndex !==
+                        this.crudObj.targetEvent[parseInt(i.toString(), 10)].groupIndex) {
+                        templateNames.push('eventTemplate_' + this.crudObj.targetEvent[parseInt(i.toString(), 10)].groupIndex);
                     }
                 }
             }
@@ -13809,7 +13868,7 @@ class Crud {
                     const groupIndex = this.parent.eventBase.getGroupIndexFromEvent(data);
                     if (groupIndex > -1 && this.parent.crudModule.crudObj.sourceEvent.filter((tdData) => tdData.groupIndex === groupIndex).length === 0
                         && this.crudObj.isCrudAction) {
-                        this.crudObj.sourceEvent.push(this.parent.resourceBase.lastResourceLevel[groupIndex]);
+                        this.crudObj.sourceEvent.push(this.parent.resourceBase.lastResourceLevel[parseInt(groupIndex.toString(), 10)]);
                     }
                 }
                 this.crudObj.targetEvent = this.crudObj.sourceEvent;
@@ -14013,8 +14072,8 @@ class Crud {
                 const editParams = { addedRecords: [], changedRecords: [], deletedRecords: [] };
                 const occurrenceEvents = (occurrenceData instanceof Array ? occurrenceData : [occurrenceData]);
                 for (let a = 0, count = occurrenceArgs.changedRecords.length; a < count; a++) {
-                    const childEvent = occurrenceArgs.changedRecords[a];
-                    const parentEvent = occurrenceEvents[a].parent;
+                    const childEvent = occurrenceArgs.changedRecords[parseInt(a.toString(), 10)];
+                    const parentEvent = occurrenceEvents[parseInt(a.toString(), 10)].parent;
                     const parentException = parentEvent[fields.recurrenceException];
                     let editedData;
                     let exceptionDate;
@@ -14080,8 +14139,8 @@ class Crud {
                 const editParams = { addedRecords: [], changedRecords: [], deletedRecords: [] };
                 const followEvents = followData instanceof Array ? followData : [followData];
                 for (let a = 0, count = followArgs.changedRecords.length; a < count; a++) {
-                    const childEvent = followArgs.changedRecords[a];
-                    const parentEvent = followEvents[a].parent;
+                    const childEvent = followArgs.changedRecords[parseInt(a.toString(), 10)];
+                    const parentEvent = followEvents[parseInt(a.toString(), 10)].parent;
                     const followData = this.parent.eventBase.getEventCollections(parentEvent, childEvent);
                     let isSpanned;
                     switch (action) {
@@ -14150,8 +14209,8 @@ class Crud {
                 const editParams = { addedRecords: [], changedRecords: [], deletedRecords: [] };
                 const seriesEvents = seriesData instanceof Array ? seriesData : [seriesData];
                 for (let a = 0, count = seriesArgs.changedRecords.length; a < count; a++) {
-                    const childEvent = seriesArgs.changedRecords[a];
-                    const parentEvent = seriesEvents[a];
+                    const childEvent = seriesArgs.changedRecords[parseInt(a.toString(), 10)];
+                    const parentEvent = seriesEvents[parseInt(a.toString(), 10)];
                     const eventCollections = this.parent.eventBase.getEventCollections(parentEvent);
                     const deletedEvents = eventCollections.follow.concat(eventCollections.occurrence);
                     switch (action) {
@@ -14209,11 +14268,11 @@ class Crud {
                 const fields = this.parent.eventFields;
                 const editParams = { addedRecords: [], changedRecords: [], deletedRecords: [] };
                 for (let a = 0, count = deleteArgs.deletedRecords.length; a < count; a++) {
-                    let isDelete = isNullOrUndefined(deleteArgs.deletedRecords[a][this.parent.eventFields.recurrenceRule]);
+                    let isDelete = isNullOrUndefined(deleteArgs.deletedRecords[parseInt(a.toString(), 10)][this.parent.eventFields.recurrenceRule]);
                     if (!isDelete) {
-                        const parentEvent = deleteData[a].parent;
+                        const parentEvent = deleteData[parseInt(a.toString(), 10)].parent;
                         const isEdited = editParams.changedRecords.filter((obj) => obj[fields.id] === parentEvent[fields.id]);
-                        const editedDate = deleteArgs.deletedRecords[a][fields.startTime];
+                        const editedDate = deleteArgs.deletedRecords[parseInt(a.toString(), 10)][fields.startTime];
                         if (isEdited.length > 0) {
                             const editedData = isEdited[0];
                             editedData[fields.recurrenceException] =
@@ -14226,10 +14285,10 @@ class Crud {
                         if (isEdited.length === 0) {
                             editParams.changedRecords.push(this.parent.eventBase.processTimezone(parentEvent, true));
                         }
-                        isDelete = deleteArgs.deletedRecords[a][fields.id] !== parentEvent[fields.id];
+                        isDelete = deleteArgs.deletedRecords[parseInt(a.toString(), 10)][fields.id] !== parentEvent[fields.id];
                     }
                     if (isDelete) {
-                        editParams.deletedRecords.push(deleteArgs.deletedRecords[a]);
+                        editParams.deletedRecords.push(deleteArgs.deletedRecords[parseInt(a.toString(), 10)]);
                     }
                 }
                 const promise = this.parent.dataModule.dataManager.saveChanges(editParams, fields.id, this.getTable(), this.getQuery());
@@ -14669,6 +14728,9 @@ __decorate$9([
 __decorate$9([
     Property()
 ], Group.prototype, "headerTooltipTemplate", void 0);
+__decorate$9([
+    Property(false)
+], Group.prototype, "hideNonWorkingDays", void 0);
 
 var __decorate$10 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -14734,6 +14796,7 @@ class ResourceBase {
     constructor(parent) {
         this.resourceCollection = [];
         this.leftPixel = 25;
+        this.resourceDateTree = [];
         this.parent = parent;
     }
     renderResourceHeaderIndent(tr) {
@@ -14756,8 +14819,8 @@ class ResourceBase {
         }
         const trCount = this.lastResourceLevel.length;
         for (let i = 0; i < trCount; i++) {
-            const resData = this.lastResourceLevel[i].resourceData;
-            const res = this.lastResourceLevel[i].resource;
+            const resData = this.lastResourceLevel[parseInt(i.toString(), 10)].resourceData;
+            const res = this.lastResourceLevel[parseInt(i.toString(), 10)].resource;
             if (resData.ClassName === RESOURCE_PARENT_CLASS && !resData[res.expandedField] &&
                 !isNullOrUndefined(resData[res.expandedField])) {
                 const trCollection = [].slice.call(tBody.children);
@@ -14800,10 +14863,10 @@ class ResourceBase {
     setExpandedResources() {
         const resources = [];
         for (let i = 0; i < this.lastResourceLevel.length; i++) {
-            const resource = this.lastResourceLevel[i].resourceData;
+            const resource = this.lastResourceLevel[parseInt(i.toString(), 10)].resourceData;
             const count = resource.Count;
-            resources.push(this.lastResourceLevel[i]);
-            const isExpanded = resource[this.lastResourceLevel[i].resource.expandedField];
+            resources.push(this.lastResourceLevel[parseInt(i.toString(), 10)]);
+            const isExpanded = resource[this.lastResourceLevel[parseInt(i.toString(), 10)].resource.expandedField];
             if (!isNullOrUndefined(isExpanded) && !isExpanded && count > 0) {
                 i = i + count;
             }
@@ -14819,21 +14882,21 @@ class ResourceBase {
         const td = createElement('td', { attrs: { tabindex: isVirtualScroll ? '-1' : '0' } });
         for (let i = 0; i < resData.length; i++) {
             const ntd = td.cloneNode();
-            rIndex = findIndexInData(resColl, 'name', resData[i].resource.name);
+            rIndex = findIndexInData(resColl, 'name', resData[parseInt(i.toString(), 10)].resource.name);
             if (rIndex === resColl.length - 1) {
-                extend(resData[i].resourceData, { ClassName: RESOURCE_CHILD_CLASS });
-                this.renderedResources[i].className = [RESOURCE_CHILD_CLASS];
+                extend(resData[parseInt(i.toString(), 10)].resourceData, { ClassName: RESOURCE_CHILD_CLASS });
+                this.renderedResources[parseInt(i.toString(), 10)].className = [RESOURCE_CHILD_CLASS];
             }
             else {
-                extend(resData[i].resourceData, { ClassName: RESOURCE_PARENT_CLASS });
-                this.renderedResources[i].className = [RESOURCE_PARENT_CLASS];
+                extend(resData[parseInt(i.toString(), 10)].resourceData, { ClassName: RESOURCE_PARENT_CLASS });
+                this.renderedResources[parseInt(i.toString(), 10)].className = [RESOURCE_PARENT_CLASS];
             }
             left = (rIndex * this.leftPixel) + 'px';
-            if (resData[i].resourceData.ClassName === RESOURCE_PARENT_CLASS
-                && !isNullOrUndefined(resData[i].resourceData.Count) && (resData[i].resourceData.Count > 0)) {
+            if (resData[parseInt(i.toString(), 10)].resourceData.ClassName === RESOURCE_PARENT_CLASS
+                && !isNullOrUndefined(resData[parseInt(i.toString(), 10)].resourceData.Count) && (resData[parseInt(i.toString(), 10)].resourceData.Count > 0)) {
                 let iconClass;
-                if (resData[i].resourceData[resColl[rIndex].expandedField] ||
-                    isNullOrUndefined(resData[i].resourceData[resColl[rIndex].expandedField])) {
+                if (resData[parseInt(i.toString(), 10)].resourceData[resColl[parseInt(rIndex.toString(), 10)].expandedField] ||
+                    isNullOrUndefined(resData[parseInt(i.toString(), 10)].resourceData[resColl[parseInt(rIndex.toString(), 10)].expandedField])) {
                     iconClass = RESOURCE_COLLAPSE_CLASS;
                 }
                 else {
@@ -14847,15 +14910,15 @@ class ResourceBase {
                     EventHandler.add(iconDiv, 'click', this.onTreeIconClick, this);
                 }
             }
-            this.parent.activeView.setResourceHeaderContent(ntd, resData[i], RESOURCE_TEXT_CLASS);
-            ntd.setAttribute('data-group-index', resData[i].groupIndex.toString());
-            ntd.setAttribute('aria-label', resData[i].resourceData[resData[i].resource.textField] + ' resource');
+            this.parent.activeView.setResourceHeaderContent(ntd, resData[parseInt(i.toString(), 10)], RESOURCE_TEXT_CLASS);
+            ntd.setAttribute('data-group-index', resData[parseInt(i.toString(), 10)].groupIndex.toString());
+            ntd.setAttribute('aria-label', resData[parseInt(i.toString(), 10)].resourceData[resData[parseInt(i.toString(), 10)].resource.textField] + ' resource');
             if (!this.parent.activeViewOptions.resourceHeaderTemplate) {
                 this.setMargin(ntd.querySelector('.' + RESOURCE_TEXT_CLASS), left);
             }
-            const classCollection = [RESOURCE_CELLS_CLASS, resData[i].resourceData.ClassName];
+            const classCollection = [RESOURCE_CELLS_CLASS, resData[parseInt(i.toString(), 10)].resourceData.ClassName];
             addClass([ntd], classCollection);
-            const args = { elementType: 'resourceHeader', element: ntd, groupIndex: resData[i].groupIndex };
+            const args = { elementType: 'resourceHeader', element: ntd, groupIndex: resData[parseInt(i.toString(), 10)].groupIndex };
             this.parent.trigger(renderCell, args);
             const ntr = tr.cloneNode();
             ntr.appendChild(ntd);
@@ -14878,17 +14941,17 @@ class ResourceBase {
             for (let x = 0; x < data.length; x++) {
                 let totalCount = 0;
                 if (this.parent.activeViewOptions.group.byGroupID) {
-                    const query = new Query().where(wholeCollection[wholeCollection.length - 1].groupIDField, 'equal', data[x][parentCollection[parentCollection.length - (y + 1)].idField]);
+                    const query = new Query().where(wholeCollection[wholeCollection.length - 1].groupIDField, 'equal', data[parseInt(x.toString(), 10)][parentCollection[parentCollection.length - (y + 1)].idField]);
                     collection = new DataManager(wholeCollection[wholeCollection.length - 1].dataSource).executeLocal(query);
                 }
                 else {
                     collection = wholeCollection[wholeCollection.length - 1].dataSource;
                 }
                 for (let z = 0; z < collection.length; z++) {
-                    totalCount = totalCount + parseInt(collection[z].Count, 10);
+                    totalCount = totalCount + parseInt(collection[parseInt(z.toString(), 10)].Count, 10);
                 }
-                totalCount = totalCount + parseInt(data[x].Count, 10);
-                extend(data[x], { Count: totalCount });
+                totalCount = totalCount + parseInt(data[parseInt(x.toString(), 10)].Count, 10);
+                extend(data[parseInt(x.toString(), 10)], { Count: totalCount });
             }
             wholeCollection = wholeCollection.slice(0, -1);
         }
@@ -14942,7 +15005,7 @@ class ResourceBase {
         const workCellCollection = [];
         const headerRowCollection = [];
         let pNode;
-        const clickedRes = this.lastResourceLevel[index].resourceData;
+        const clickedRes = this.lastResourceLevel[parseInt(index.toString(), 10)].resourceData;
         const resRows = [].slice.call(this.parent.element.querySelectorAll('.' + RESOURCE_COLUMN_WRAP_CLASS + ' ' + 'tr'));
         const contentRows = [].slice.call(this.parent.element.querySelectorAll('.' + CONTENT_WRAP_CLASS + ' ' + 'tbody tr'));
         const eventRows = [].slice.call(this.parent.element.querySelectorAll('.' + CONTENT_WRAP_CLASS + ' .' + APPOINTMENT_CONTAINER_CLASS));
@@ -14954,45 +15017,45 @@ class ResourceBase {
         const clonedCollection = this.lastResourceLevel;
         for (let i = 0; i < rowCollection.length; i++) {
             let expanded = true;
-            pNode = rowCollection[i].children[0].classList.contains(RESOURCE_PARENT_CLASS);
-            clonedCollection[index].resourceData[clonedCollection[index].resource.expandedField] = !hide;
+            pNode = rowCollection[parseInt(i.toString(), 10)].children[0].classList.contains(RESOURCE_PARENT_CLASS);
+            clonedCollection[parseInt(index.toString(), 10)].resourceData[clonedCollection[parseInt(index.toString(), 10)].resource.expandedField] = !hide;
             if (hide) {
                 if (pNode) {
-                    const trElem = rowCollection[i].querySelector('.' + RESOURCE_TREE_ICON_CLASS);
+                    const trElem = rowCollection[parseInt(i.toString(), 10)].querySelector('.' + RESOURCE_TREE_ICON_CLASS);
                     if (trElem) {
                         classList(trElem, [RESOURCE_EXPAND_CLASS], [RESOURCE_COLLAPSE_CLASS]);
                     }
                 }
-                if (!rowCollection[i].classList.contains(HIDDEN_CLASS)) {
-                    addClass([rowCollection[i], workCellCollection[i], headerRowCollection[i]], HIDDEN_CLASS);
+                if (!rowCollection[parseInt(i.toString(), 10)].classList.contains(HIDDEN_CLASS)) {
+                    addClass([rowCollection[parseInt(i.toString(), 10)], workCellCollection[parseInt(i.toString(), 10)], headerRowCollection[parseInt(i.toString(), 10)]], HIDDEN_CLASS);
                 }
             }
             else {
                 if (pNode) {
-                    const rowIndex = rowCollection[i].rowIndex;
-                    if (!clonedCollection[rowIndex].resourceData[clonedCollection[rowIndex].resource.expandedField]
-                        && !isNullOrUndefined(clonedCollection[rowIndex].resourceData[clonedCollection[rowIndex].resource.expandedField])) {
-                        rowCollection.splice(i + 1, (parseInt(clonedCollection[rowIndex].resourceData.Count, 10)));
-                        workCellCollection.splice(i + 1, (parseInt(clonedCollection[rowIndex].resourceData.Count, 10)));
-                        headerRowCollection.splice(i + 1, (parseInt(clonedCollection[rowIndex].resourceData.Count, 10)));
+                    const rowIndex = rowCollection[parseInt(i.toString(), 10)].rowIndex;
+                    if (!clonedCollection[parseInt(rowIndex.toString(), 10)].resourceData[clonedCollection[parseInt(rowIndex.toString(), 10)].resource.expandedField]
+                        && !isNullOrUndefined(clonedCollection[parseInt(rowIndex.toString(), 10)].resourceData[clonedCollection[parseInt(rowIndex.toString(), 10)].resource.expandedField])) {
+                        rowCollection.splice(i + 1, (parseInt(clonedCollection[parseInt(rowIndex.toString(), 10)].resourceData.Count, 10)));
+                        workCellCollection.splice(i + 1, (parseInt(clonedCollection[parseInt(rowIndex.toString(), 10)].resourceData.Count, 10)));
+                        headerRowCollection.splice(i + 1, (parseInt(clonedCollection[parseInt(rowIndex.toString(), 10)].resourceData.Count, 10)));
                         expanded = false;
                     }
                     if (expanded) {
-                        const trElem = rowCollection[i].querySelector('.' + RESOURCE_TREE_ICON_CLASS);
+                        const trElem = rowCollection[parseInt(i.toString(), 10)].querySelector('.' + RESOURCE_TREE_ICON_CLASS);
                         if (trElem) {
                             classList(trElem, [RESOURCE_COLLAPSE_CLASS], [RESOURCE_EXPAND_CLASS]);
                         }
                     }
                 }
-                if (rowCollection[i].classList.contains(HIDDEN_CLASS)) {
-                    removeClass([rowCollection[i], workCellCollection[i], headerRowCollection[i]], HIDDEN_CLASS);
+                if (rowCollection[parseInt(i.toString(), 10)].classList.contains(HIDDEN_CLASS)) {
+                    removeClass([rowCollection[parseInt(i.toString(), 10)], workCellCollection[parseInt(i.toString(), 10)], headerRowCollection[parseInt(i.toString(), 10)]], HIDDEN_CLASS);
                 }
             }
         }
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     updateVirtualContent(index, expand, e, target) {
-        this.lastResourceLevel[index].resourceData[this.lastResourceLevel[index].resource.expandedField] = !expand;
+        this.lastResourceLevel[parseInt(index.toString(), 10)].resourceData[this.lastResourceLevel[parseInt(index.toString(), 10)].resource.expandedField] = !expand;
         this.setExpandedResources();
         const resourceCount = this.parent.virtualScrollModule.getRenderedCount();
         const startIndex = this.expandedResources.indexOf(this.renderedResources[0]);
@@ -15082,7 +15145,7 @@ class ResourceBase {
         let groupIndex = 0;
         for (let i = 0, len = this.resourceTreeLevel.length; i < len; i++) {
             const treeHandler = (treeLevel, index, levelId) => {
-                const resource = this.resourceCollection[index];
+                const resource = this.resourceCollection[parseInt(index.toString(), 10)];
                 let treeArgs;
                 let resObj;
                 if (!isTimeLine) {
@@ -15121,10 +15184,10 @@ class ResourceBase {
                 return treeArgs;
             };
             if (!isTimeLine) {
-                treeCollection.push(treeHandler(this.resourceTreeLevel[i], 0, (i + 1).toString()));
+                treeCollection.push(treeHandler(this.resourceTreeLevel[parseInt(i.toString(), 10)], 0, (i + 1).toString()));
             }
             else {
-                treeHandler(this.resourceTreeLevel[i], 0, (i + 1).toString());
+                treeHandler(this.resourceTreeLevel[parseInt(i.toString(), 10)], 0, (i + 1).toString());
             }
         }
         if (isTimeLine) {
@@ -15139,8 +15202,8 @@ class ResourceBase {
         const resource = this.lastResourceLevel[this.parent.uiStateValues.groupIndex];
         const headerCollection = [];
         for (let i = 0, len = resource.groupOrder.length; i < len; i++) {
-            const resourceLevel = this.resourceCollection[i];
-            const resourceText = resourceLevel.dataSource.filter((resData) => resData[resourceLevel.idField] === resource.groupOrder[i]);
+            const resourceLevel = this.resourceCollection[parseInt(i.toString(), 10)];
+            const resourceText = resourceLevel.dataSource.filter((resData) => resData[resourceLevel.idField] === resource.groupOrder[parseInt(i.toString(), 10)]);
             const resourceName = createElement('div', {
                 className: RESOURCE_NAME,
                 innerHTML: resourceText[0][resourceLevel.textField]
@@ -15228,8 +15291,8 @@ class ResourceBase {
         }
         this.parent.resourceCollection = [];
         for (let i = 0, length = e.length; i < length; i++) {
-            const resource = this.parent.resources[i];
-            const resourceObj = this.getResourceModel(resource, e[i].result);
+            const resource = this.parent.resources[parseInt(i.toString(), 10)];
+            const resourceObj = this.getResourceModel(resource, e[parseInt(i.toString(), 10)].result);
             this.parent.resourceCollection.push(resourceObj);
         }
         this.refreshLayout(isSetModel);
@@ -15267,7 +15330,7 @@ class ResourceBase {
             for (const resource of this.parent.activeViewOptions.group.resources) {
                 const index = findIndexInData(this.parent.resourceCollection, 'name', resource);
                 if (index >= 0) {
-                    requiredResources.push(this.parent.resourceCollection[index]);
+                    requiredResources.push(this.parent.resourceCollection[parseInt(index.toString(), 10)]);
                 }
             }
         }
@@ -15308,8 +15371,8 @@ class ResourceBase {
                     if (prevOrder && prevOrder.length > 0) {
                         groupOrder = groupOrder.concat(prevOrder);
                     }
-                    groupOrder.push(data[i][resource.idField]);
-                    const items = group(resources.slice(1), index + 1, resource, data[i], groupOrder);
+                    groupOrder.push(data[parseInt(i.toString(), 10)][resource.idField]);
+                    const items = group(resources.slice(1), index + 1, resource, data[parseInt(i.toString(), 10)], groupOrder);
                     // Here validate child item empty top level resource only
                     if (index === 0 && items.length === 0 && this.resourceCollection.length > 1) {
                         continue;
@@ -15318,9 +15381,9 @@ class ResourceBase {
                     let renderDates = this.parent.activeView.renderDates;
                     let resWorkDays;
                     if (!this.parent.activeViewOptions.group.byDate && index + 1 === this.resourceCollection.length) {
-                        const workDays = data[i][resource.workDaysField];
-                        const resStartHour = data[i][resource.startHourField];
-                        const resEndHour = data[i][resource.endHourField];
+                        const workDays = data[parseInt(i.toString(), 10)][resource.workDaysField];
+                        const resStartHour = data[parseInt(i.toString(), 10)][resource.startHourField];
+                        const resEndHour = data[parseInt(i.toString(), 10)][resource.endHourField];
                         if (workDays && workDays.length > 0) {
                             renderDates = this.parent.activeView.getRenderDates(workDays);
                             resWorkDays = workDays;
@@ -15333,22 +15396,22 @@ class ResourceBase {
                         const dateSlots = this.generateCustomHours(dateCol, resStartHour, resEndHour, groupOrder);
                         lastColumnDates = lastColumnDates.concat(dateSlots);
                     }
-                    const resCssClass = data[i][resource.cssClassField];
+                    const resCssClass = data[parseInt(i.toString(), 10)][resource.cssClassField];
                     const slotData = {
                         type: 'resourceHeader', className: ['e-resource-cells'],
                         resourceLevelIndex: index, groupOrder: groupOrder,
-                        resource: resource, resourceData: data[i],
+                        resource: resource, resourceData: data[parseInt(i.toString(), 10)],
                         colSpan: this.parent.activeViewOptions.group.byDate ? 1 : dateCol.length,
                         renderDates: renderDates, workDays: resWorkDays, cssClass: resCssClass,
                         child: items
                     };
                     resTree.push(slotData);
                 }
-                if (!resTreeGroup[index]) {
-                    resTreeGroup[index] = [];
+                if (!resTreeGroup[parseInt(index.toString(), 10)]) {
+                    resTreeGroup[parseInt(index.toString(), 10)] = [];
                 }
                 if (resTree.length > 0) {
-                    resTreeGroup[index].push(resTree);
+                    resTreeGroup[parseInt(index.toString(), 10)].push(resTree);
                 }
                 return resTree;
             }
@@ -15376,10 +15439,10 @@ class ResourceBase {
         const headerLevels = [];
         for (let i = resTreeGroup.length - 1; i >= 0; i--) {
             let temp = 0;
-            for (const currentLevelChilds of resTreeGroup[i]) {
+            for (const currentLevelChilds of resTreeGroup[parseInt(i.toString(), 10)]) {
                 for (const currentLevelChild of currentLevelChilds) {
                     if (resTreeGroup[i + 1] && resTreeGroup[i + 1].length > 0) {
-                        const nextLevelChilds = resTreeGroup[i + 1][temp];
+                        const nextLevelChilds = resTreeGroup[parseInt((i + 1).toString(), 10)][parseInt(temp.toString(), 10)];
                         if (!nextLevelChilds) {
                             continue;
                         }
@@ -15405,7 +15468,7 @@ class ResourceBase {
             let index = 0;
             for (const lastLevelResource of this.lastResourceLevel) {
                 for (let i = 0; i < lastLevelResource.colSpan; i++) {
-                    lastColumnDates[index].groupIndex = lastLevelResource.groupIndex;
+                    lastColumnDates[parseInt(index.toString(), 10)].groupIndex = lastLevelResource.groupIndex;
                     index++;
                 }
             }
@@ -15414,18 +15477,88 @@ class ResourceBase {
         }
         const dateHeaderLevels = [];
         const levels = extend([], headerLevels, null, true);
+        const datesColumn = [];
+        if (this.parent.activeViewOptions.group.hideNonWorkingDays) {
+            const renderDates = [];
+            let dateIndex = 0;
+            for (const headerDate of headerDates) {
+                this.resourceDateTree[parseInt(dateIndex.toString(), 10)] = [];
+                const currentDateLevels = [];
+                for (let j = 0; j < this.lastResourceLevel.length; j++) {
+                    let workDays = this.lastResourceLevel[parseInt(j.toString(), 10)].resourceData[this.lastResourceLevel[parseInt(j.toString(), 10)].resource.workDaysField];
+                    if (!workDays) {
+                        workDays = this.parent.activeViewOptions.workDays;
+                    }
+                    if (workDays.indexOf(headerDate.date.getDay()) !== -1) {
+                        const resTd = extend({}, this.lastResourceLevel[parseInt(j.toString(), 10)], null, true);
+                        resTd.date = headerDate.date;
+                        this.lastResourceLevel[parseInt(j.toString(), 10)].workDays = workDays;
+                        resTd.startHour = this.parent.getStartEndTime(resTd.resourceData[resTd.resource.startHourField]) ||
+                            headerDate.startHour;
+                        resTd.endHour = this.parent.getStartEndTime(resTd.resourceData[resTd.resource.endHourField]) ||
+                            headerDate.endHour;
+                        this.resourceDateTree[parseInt(dateIndex.toString(), 10)].push(resTd);
+                        for (let k = 0; k < resTd.groupOrder.length; k++) {
+                            if (!currentDateLevels[parseInt(k.toString(), 10)]) {
+                                currentDateLevels[parseInt(k.toString(), 10)] = [];
+                            }
+                            if (k === resTd.groupOrder.length - 1) {
+                                if (!renderDates[parseInt(j.toString(), 10)]) {
+                                    renderDates[parseInt(j.toString(), 10)] = [];
+                                }
+                                const filterDates = resTd.renderDates.filter((x) => x.getDay() === headerDate.date.getDay());
+                                renderDates[parseInt(j.toString(), 10)] = renderDates[parseInt(j.toString(), 10)].concat(filterDates);
+                                currentDateLevels[parseInt(k.toString(), 10)].push(resTd);
+                                continue;
+                            }
+                            const currentLevel = levels[parseInt(k.toString(), 10)];
+                            const filteredResource = currentLevel.filter((data) => data.resourceData[data.resource.idField] === resTd.groupOrder[parseInt(k.toString(), 10)]);
+                            if (filteredResource && filteredResource.length > 0) {
+                                const existedResource = currentDateLevels[parseInt(k.toString(), 10)].filter((data) => data.resourceData[data.resource.idField] === resTd.groupOrder[parseInt(k.toString(), 10)]);
+                                if (existedResource && existedResource.length > 0) {
+                                    existedResource[0].colSpan += 1;
+                                }
+                                else {
+                                    const filteredTd = extend({}, filteredResource[0], null, true);
+                                    filteredTd.colSpan = 1;
+                                    currentDateLevels[parseInt(k.toString(), 10)].push(filteredTd);
+                                }
+                            }
+                        }
+                    }
+                }
+                if (currentDateLevels.length > 0) {
+                    for (let l = 0; l < levels.length; l++) {
+                        if (!dateHeaderLevels[parseInt(l.toString(), 10)]) {
+                            dateHeaderLevels[parseInt(l.toString(), 10)] = [];
+                        }
+                        dateHeaderLevels[parseInt(l.toString(), 10)] = dateHeaderLevels[parseInt(l.toString(), 10)].concat(currentDateLevels[parseInt(l.toString(), 10)]);
+                    }
+                    headerDate.colSpan = currentDateLevels[currentDateLevels.length - 1].length;
+                    datesColumn.push(headerDate);
+                }
+                dateIndex++;
+            }
+            this.resourceDateTree = this.resourceDateTree.filter((data) => data.length > 0);
+            this.lastResourceLevel.forEach((x, index) => {
+                if (renderDates[parseInt(index.toString(), 10)]) {
+                    x.renderDates = renderDates[parseInt(index.toString(), 10)].sort((a, b) => a.getTime() - b.getTime());
+                }
+            });
+            dateHeaderLevels.unshift(datesColumn);
+            return dateHeaderLevels;
+        }
         let dateColSpan = 0;
         for (const firstRowTd of levels[0]) {
             dateColSpan += firstRowTd.colSpan;
         }
-        const datesColumn = [];
         for (const headerDate of headerDates) {
             headerDate.colSpan = dateColSpan;
             datesColumn.push(headerDate);
             const resGroup = extend([], levels, null, true);
             for (let k = 0, length = resGroup.length; k < length; k++) {
                 if (k === resGroup.length - 1) {
-                    for (const resTd of resGroup[k]) {
+                    for (const resTd of resGroup[parseInt(k.toString(), 10)]) {
                         resTd.date = headerDate.date;
                         resTd.workDays = headerDate.workDays;
                         resTd.startHour = this.parent.getStartEndTime(resTd.resourceData[resTd.resource.startHourField]) ||
@@ -15434,10 +15567,10 @@ class ResourceBase {
                             headerDate.endHour;
                     }
                 }
-                if (!dateHeaderLevels[k]) {
-                    dateHeaderLevels[k] = [];
+                if (!dateHeaderLevels[parseInt(k.toString(), 10)]) {
+                    dateHeaderLevels[parseInt(k.toString(), 10)] = [];
                 }
-                dateHeaderLevels[k] = dateHeaderLevels[k].concat(resGroup[k]);
+                dateHeaderLevels[parseInt(k.toString(), 10)] = dateHeaderLevels[parseInt(k.toString(), 10)].concat(resGroup[parseInt(k.toString(), 10)]);
             }
         }
         dateHeaderLevels.unshift(datesColumn);
@@ -15445,11 +15578,11 @@ class ResourceBase {
     }
     setResourceValues(eventObj, groupIndex) {
         const setValues = (index, field, value) => {
-            if (this.resourceCollection[index].allowMultiple && this.parent.activeViewOptions.group.allowGroupEdit) {
-                eventObj[field] = [value];
+            if (this.resourceCollection[parseInt(index.toString(), 10)].allowMultiple && this.parent.activeViewOptions.group.allowGroupEdit) {
+                eventObj[`${field}`] = [value];
             }
             else {
-                eventObj[field] = value;
+                eventObj[`${field}`] = value;
             }
         };
         if (groupIndex === void 0) {
@@ -15457,16 +15590,16 @@ class ResourceBase {
                 this.parent.activeCellsData.groupIndex;
         }
         if (this.parent.activeViewOptions.group.resources.length > 0 && !isNullOrUndefined(groupIndex)) {
-            const groupOrder = this.lastResourceLevel[groupIndex].groupOrder;
+            const groupOrder = this.lastResourceLevel[parseInt(groupIndex.toString(), 10)].groupOrder;
             for (let index = 0; index < this.resourceCollection.length; index++) {
-                setValues(index, this.resourceCollection[index].field, groupOrder[index]);
+                setValues(index, this.resourceCollection[parseInt(index.toString(), 10)].field, groupOrder[parseInt(index.toString(), 10)]);
             }
         }
         else if (this.parent.resourceCollection.length > 0) {
             for (let index = 0; index < this.resourceCollection.length; index++) {
-                const data = this.resourceCollection[index].dataSource[0];
+                const data = this.resourceCollection[parseInt(index.toString(), 10)].dataSource[0];
                 if (data) {
-                    setValues(index, this.resourceCollection[index].field, data[this.resourceCollection[index].idField]);
+                    setValues(index, this.resourceCollection[parseInt(index.toString(), 10)].field, data[this.resourceCollection[parseInt(index.toString(), 10)].idField]);
                 }
             }
         }
@@ -15474,11 +15607,11 @@ class ResourceBase {
     getResourceColor(eventObj, groupOrder) {
         const colorFieldIndex = (!isNullOrUndefined(groupOrder) &&
             this.colorIndex > groupOrder.length - 1) ? groupOrder.length - 1 : this.colorIndex;
-        const resource = this.resourceCollection[colorFieldIndex];
+        const resource = this.resourceCollection[parseInt(colorFieldIndex.toString(), 10)];
         if (isNullOrUndefined(groupOrder) && this.parent.activeViewOptions.group.allowGroupEdit && resource.allowMultiple) {
             return undefined;
         }
-        const id = isNullOrUndefined(groupOrder) ? eventObj[resource.field] : groupOrder[colorFieldIndex];
+        const id = isNullOrUndefined(groupOrder) ? eventObj[resource.field] : groupOrder[parseInt(colorFieldIndex.toString(), 10)];
         const data = this.filterData(resource.dataSource, resource.idField, id);
         if (data.length > 0) {
             return data[0][resource.colorField];
@@ -15505,27 +15638,27 @@ class ResourceBase {
         return renderDates;
     }
     filterData(dataSource, field, value) {
-        return dataSource.filter((data) => data[field] === value);
+        return dataSource.filter((data) => data[`${field}`] === value);
     }
     getResourceData(eventObj, index, groupEditIndex) {
         if (this.parent.activeViewOptions.group.allowGroupEdit) {
             const resourceObj = {};
             for (const groupIndex of groupEditIndex) {
-                const resourceLevel = this.lastResourceLevel[groupIndex].groupOrder;
+                const resourceLevel = this.lastResourceLevel[parseInt(groupIndex.toString(), 10)].groupOrder;
                 for (let level = 0, length = resourceLevel.length; level < length; level++) {
-                    const fieldName = this.resourceCollection[level].field;
-                    if (isNullOrUndefined(resourceObj[fieldName])) {
-                        resourceObj[fieldName] = [];
+                    const fieldName = this.resourceCollection[parseInt(level.toString(), 10)].field;
+                    if (isNullOrUndefined(resourceObj[`${fieldName}`])) {
+                        resourceObj[`${fieldName}`] = [];
                     }
-                    resourceObj[fieldName].push(resourceLevel[level]);
+                    resourceObj[`${fieldName}`].push(resourceLevel[parseInt(level.toString(), 10)]);
                 }
             }
             eventObj = extend(eventObj, resourceObj);
         }
         else {
             for (let level = 0, length = this.resourceCollection.length; level < length; level++) {
-                if (this.lastResourceLevel[index]) {
-                    eventObj[this.resourceCollection[level].field] = this.lastResourceLevel[index].groupOrder[level];
+                if (this.lastResourceLevel[parseInt(index.toString(), 10)]) {
+                    eventObj[this.resourceCollection[parseInt(level.toString(), 10)].field] = this.lastResourceLevel[parseInt(index.toString(), 10)].groupOrder[parseInt(level.toString(), 10)];
                 }
             }
         }
@@ -15560,7 +15693,7 @@ class ResourceBase {
         }
         const resource = resourceData.dataSource.filter((e) => {
             if (event && e[resourceData.idField] === id) {
-                if (e[resourceData.groupIDField] === event[parentField]) {
+                if (e[resourceData.groupIDField] === event[`${parentField}`]) {
                     return e[resourceData.idField] === id;
                 }
                 return null;
@@ -15661,7 +15794,7 @@ class ResourceBase {
             }
             const offsetTarget = this.parent.element.querySelector(`.${HEADER_ROW_CLASS}:nth-child(${levelIndex + 1})`);
             const offset = [].slice.call(offsetTarget.children).map((node) => node.offsetLeft);
-            scrollElement.scrollLeft = offset[index];
+            scrollElement.scrollLeft = offset[parseInt(index.toString(), 10)];
         }
     }
     destroy() {
@@ -15859,7 +15992,7 @@ let Schedule = class Schedule extends Component {
     }
     getViewIndex(viewName) {
         for (let item = 0; item < this.viewCollections.length; item++) {
-            const checkIndex = this.viewCollections[item].option;
+            const checkIndex = this.viewCollections[parseInt(item.toString(), 10)].option;
             if (checkIndex === viewName) {
                 return item;
             }
@@ -15894,6 +16027,7 @@ let Schedule = class Schedule extends Component {
             const fieldViewName = viewName.charAt(0).toLowerCase() + viewName.slice(1);
             obj.cellHeaderTemplateName = obj.cellHeaderTemplate ? obj.option : '';
             obj.dateHeaderTemplateName = obj.dateHeaderTemplate ? obj.option : '';
+            obj.dateRangeTemplateName = obj.dateRangeTemplate ? obj.option : '';
             obj.cellTemplateName = obj.cellTemplate ? obj.option : '';
             obj.dayHeaderTemplateName = obj.dayHeaderTemplate ? obj.option : '';
             obj.monthHeaderTemplateName = obj.monthHeaderTemplate ? obj.option : '';
@@ -15907,11 +16041,11 @@ let Schedule = class Schedule extends Component {
                 delete obj.interval;
             }
             this.viewCollections.push(obj);
-            if (isNullOrUndefined(this.viewOptions[fieldViewName])) {
-                this.viewOptions[fieldViewName] = [obj];
+            if (isNullOrUndefined(this.viewOptions[`${fieldViewName}`])) {
+                this.viewOptions[`${fieldViewName}`] = [obj];
             }
             else {
-                this.viewOptions[fieldViewName].push(obj);
+                this.viewOptions[`${fieldViewName}`].push(obj);
             }
             count++;
         }
@@ -15939,7 +16073,8 @@ let Schedule = class Schedule extends Component {
             allowGroupEdit: this.group.allowGroupEdit,
             resources: this.group.resources,
             headerTooltipTemplate: this.group.headerTooltipTemplate,
-            enableCompactView: this.group.enableCompactView
+            enableCompactView: this.group.enableCompactView,
+            hideNonWorkingDays: ['Day', 'Week', 'WorkWeek', 'Month'].indexOf(this.currentView) > -1 ? this.group.hideNonWorkingDays : false
         };
         const workDays = this.viewCollections[this.viewIndex].workDays ? [] : this.workDays;
         const scheduleOptions = {
@@ -15956,6 +16091,7 @@ let Schedule = class Schedule extends Component {
             cellTemplate: this.cellTemplate,
             eventTemplate: this.eventSettings.template,
             dateHeaderTemplate: this.dateHeaderTemplate,
+            dateRangeTemplate: this.dateRangeTemplate,
             resourceHeaderTemplate: this.resourceHeaderTemplate,
             headerIndentTemplate: this.headerIndentTemplate,
             firstMonthOfYear: this.firstMonthOfYear,
@@ -16035,6 +16171,7 @@ let Schedule = class Schedule extends Component {
         this.monthHeaderTemplateFn = this.templateParser(this.activeViewOptions.monthHeaderTemplate);
         this.cellTemplateFn = this.templateParser(this.activeViewOptions.cellTemplate);
         this.dateHeaderTemplateFn = this.templateParser(this.activeViewOptions.dateHeaderTemplate);
+        this.dateRangeTemplateFn = this.templateParser(this.activeViewOptions.dateRangeTemplate);
         this.majorSlotTemplateFn = this.templateParser(this.activeViewOptions.timeScale.majorSlotTemplate);
         this.minorSlotTemplateFn = this.templateParser(this.activeViewOptions.timeScale.minorSlotTemplate);
         this.appointmentTemplateFn = this.templateParser(this.activeViewOptions.eventTemplate);
@@ -16145,16 +16282,18 @@ let Schedule = class Schedule extends Component {
         if (!muteOnChange && index === this.viewIndex && this.currentView === view || index < 0) {
             return;
         }
-        this.viewIndex = index;
+        const previousView = this.activeViewOptions ? this.activeViewOptions.option : this.currentView;
         let args = { requestType: 'viewNavigate', cancel: false, event: event };
         this.trigger(actionBegin, args, (actionArgs) => {
             if (!actionArgs.cancel) {
                 const navArgs = {
-                    action: 'view', cancel: false, currentDate: this.selectedDate, previousView: this.currentView, currentView: view, viewIndex: this.viewIndex
+                    action: 'view', cancel: false, currentDate: this.selectedDate, previousView: previousView, currentView: view, viewIndex: index
                 };
                 this.trigger(navigating, navArgs, (navigationArgs) => {
                     if (!navigationArgs.cancel) {
-                        this.uiStateValues.isInitial = view.indexOf('Timeline') > -1 || this.currentView.indexOf('Timeline') > -1 ? true : this.uiStateValues.isInitial;
+                        const isVertical = ['Day', 'Week', 'WorkWeek'].indexOf(view) > -1 && ['Day', 'Week', 'WorkWeek'].indexOf(previousView) < 0;
+                        this.uiStateValues.isInitial = isVertical || view.indexOf('Timeline') > -1 || view.indexOf('Year') > -1;
+                        this.uiStateValues.top = view.indexOf('Timeline') > -1 && previousView.indexOf('Timeline') < 0 ? 0 : this.uiStateValues.top;
                         this.viewIndex = navigationArgs.viewIndex;
                         this.setProperties({ currentView: view }, true);
                         if (this.headerModule) {
@@ -16167,8 +16306,14 @@ let Schedule = class Schedule extends Component {
                         args = { requestType: 'viewNavigate', cancel: false, event: event };
                         this.trigger(actionComplete, args);
                     }
+                    else {
+                        this.currentView = previousView;
+                    }
                 });
             }
+            else {
+                this.currentView = previousView;
+            }
         });
     }
     /**
@@ -16188,7 +16333,7 @@ let Schedule = class Schedule extends Component {
                 };
                 this.trigger(navigating, navArgs, (navigationArgs) => {
                     if (!navigationArgs.cancel) {
-                        this.uiStateValues.isInitial = this.activeView.isTimelineView() ? true : this.uiStateValues.isInitial;
+                        this.uiStateValues.isInitial = this.activeView.isTimelineView() && this.currentView !== 'TimelineYear';
                         this.validateDate(navigationArgs.currentDate);
                         if (this.headerModule) {
                             this.headerModule.setCalendarDate(navigationArgs.currentDate);
@@ -16590,6 +16735,15 @@ let Schedule = class Schedule extends Component {
     getDateHeaderTemplate() {
         return this.dateHeaderTemplateFn;
     }
+    /**
+     * Method to process date range template
+     *
+     * @returns {CallbackFunction} Returns the callback function
+     * @private
+     */
+    getDateRangeTemplate() {
+        return this.dateRangeTemplateFn;
+    }
     /**
      * Method to process major slot template
      *
@@ -16948,14 +17102,14 @@ let Schedule = class Schedule extends Component {
                 case 'dateFormat':
                     this.activeViewOptions = this.getActiveViewOptions();
                     if (this.headerModule) {
-                        this.headerModule.updateDateRange(this.activeView.getDateRangeText());
+                        this.headerModule.updateDateRange();
                     }
                     break;
                 case 'showHeaderBar':
                     this.destroyHeaderModule();
                     if (newProp.showHeaderBar) {
                         this.headerModule = new HeaderRenderer(this);
-                        this.headerModule.updateDateRange(this.activeView.getDateRangeText());
+                        this.headerModule.updateDateRange();
                     }
                     this.notify(scrollUiUpdate, { cssProperties: this.getCssProperties() });
                     if (this.activeView.isTimelineView()) {
@@ -17012,6 +17166,13 @@ let Schedule = class Schedule extends Component {
                     this.dateHeaderTemplateFn = this.templateParser(this.activeViewOptions.dateHeaderTemplate);
                     state.isLayout = true;
                     break;
+                case 'dateRangeTemplate':
+                    this.activeViewOptions.dateRangeTemplate = newProp.dateRangeTemplate;
+                    this.dateRangeTemplateFn = this.templateParser(this.activeViewOptions.dateRangeTemplate);
+                    if (this.headerModule) {
+                        this.headerModule.updateDateRange();
+                    }
+                    break;
                 case 'dayHeaderTemplate':
                     this.activeViewOptions.dayHeaderTemplate = newProp.dayHeaderTemplate;
                     this.dayHeaderTemplateFn = this.templateParser(this.activeViewOptions.dayHeaderTemplate);
@@ -17191,7 +17352,7 @@ let Schedule = class Schedule extends Component {
                 if (this.showHeaderBar && this.headerModule) {
                     this.destroyHeaderModule();
                     this.headerModule = new HeaderRenderer(this);
-                    this.headerModule.updateDateRange(this.activeView.getDateRangeText());
+                    this.headerModule.updateDateRange();
                 }
                 state.isLayout = true;
                 break;
@@ -17213,7 +17374,7 @@ let Schedule = class Schedule extends Component {
     onGroupSettingsPropertyChanged(newProp, oldProp, state) {
         for (const prop of Object.keys(newProp)) {
             if (prop === 'headerTooltipTemplate') {
-                this.headerTooltipTemplateFn = this.templateParser(newProp[prop]);
+                this.headerTooltipTemplateFn = this.templateParser(newProp.headerTooltipTemplate);
             }
             else {
                 state.isLayout = true;
@@ -17385,7 +17546,7 @@ let Schedule = class Schedule extends Component {
             resetTime(date);
             let renderDates = this.activeView.renderDates;
             if (!isNullOrUndefined(groupIndex) && this.resourceBase && !this.activeView.isTimelineView()) {
-                renderDates = this.resourceBase.lastResourceLevel[groupIndex].renderDates;
+                renderDates = this.resourceBase.lastResourceLevel[parseInt(groupIndex.toString(), 10)].renderDates;
             }
             const colIndex = this.getIndexOfDate(renderDates, date);
             if (colIndex >= 0) {
@@ -17397,16 +17558,16 @@ let Schedule = class Schedule extends Component {
                 for (let i = startIndex; i < endIndex; i++) {
                     if (this.activeView.isTimelineView()) {
                         const rowIndex = (!isNullOrUndefined(groupIndex)) ? groupIndex : 0;
-                        cells.push(tableEle.rows[rowIndex].cells[i]);
+                        cells.push(tableEle.rows[parseInt(rowIndex.toString(), 10)].cells[parseInt(i.toString(), 10)]);
                     }
                     else {
                         if (!isNullOrUndefined(groupIndex)) {
                             const selector = '.' + WORK_CELLS_CLASS + '[data-group-index="' + groupIndex + '"]';
-                            const tds = [].slice.call(tableEle.rows[i].querySelectorAll(selector));
-                            cells.push(tds[colIndex]);
+                            const tds = [].slice.call(tableEle.rows[parseInt(i.toString(), 10)].querySelectorAll(selector));
+                            cells.push(tds[parseInt(colIndex.toString(), 10)]);
                         }
                         else {
-                            cells.push(tableEle.rows[i].cells[colIndex]);
+                            cells.push(tableEle.rows[parseInt(i.toString(), 10)].cells[parseInt(colIndex.toString(), 10)]);
                         }
                     }
                 }
@@ -17491,7 +17652,7 @@ let Schedule = class Schedule extends Component {
     changeCurrentView(viewName, viewIndex) {
         let index = this.getViewIndex(viewName);
         const view = viewName.charAt(0).toLowerCase() + viewName.slice(1);
-        const viewOptions = this.viewOptions[view];
+        const viewOptions = this.viewOptions[`${view}`];
         if (viewOptions) {
             index = this.viewCollections.indexOf(viewOptions[viewIndex || 0]);
         }
@@ -17520,7 +17681,7 @@ let Schedule = class Schedule extends Component {
             if (index < 0 || index >= this.resourceBase.lastResourceLevel.length) {
                 return undefined;
             }
-            const data = this.resourceBase.lastResourceLevel[index];
+            const data = this.resourceBase.lastResourceLevel[parseInt(index.toString(), 10)];
             const groupData = {};
             this.resourceBase.setResourceValues(groupData, index);
             return { resource: data.resource, resourceData: data.resourceData, groupData: groupData };
@@ -17861,6 +18022,12 @@ let Schedule = class Schedule extends Component {
                 this.dateHeaderTemplateFn = this.templateParser(this.activeViewOptions.dateHeaderTemplate);
                 this.activeView.refreshHeader();
                 break;
+            case 'dateRangeTemplate':
+                this.dateRangeTemplateFn = this.templateParser(this.activeViewOptions.dateRangeTemplate);
+                if (this.headerModule) {
+                    this.headerModule.refresh();
+                }
+                break;
             case 'resourceHeaderTemplate':
                 this.resourceHeaderTemplateFn = this.templateParser(this.activeViewOptions.resourceHeaderTemplate);
                 if (this.activeView.isTimelineView()) {
@@ -17965,7 +18132,8 @@ let Schedule = class Schedule extends Component {
         eventEnd = this.getDateTime(eventEnd);
         let eventCollection = this.eventBase.filterEvents(eventStart, eventEnd);
         if (!isNullOrUndefined(groupIndex) && this.resourceBase && this.resourceBase.lastResourceLevel.length > 0) {
-            eventCollection = this.eventBase.filterEventsByResource(this.resourceBase.lastResourceLevel[groupIndex], eventCollection);
+            eventCollection =
+                this.eventBase.filterEventsByResource(this.resourceBase.lastResourceLevel[parseInt(groupIndex.toString(), 10)], eventCollection);
         }
         if (eventObj) {
             if (eventObj.Guid) {
@@ -18091,6 +18259,19 @@ let Schedule = class Schedule extends Component {
             this.quickPopup.quickPopupHide(true);
         }
     }
+    /**
+     * Closes the tooltip.
+     * For example, when the context menu is opened for an event,
+     * the tooltip can be closed by calling this method.
+     *
+     * @function closeTooltip
+     * @returns {void}
+     */
+    closeTooltip() {
+        if (this.eventTooltip) {
+            this.eventTooltip.close();
+        }
+    }
     /**
      * Select the resource based on group index in mobile mode.
      *
@@ -18202,7 +18383,7 @@ let Schedule = class Schedule extends Component {
             'activeEventData', 'activeCellsData', 'renderModule'
         ];
         for (const module of modules) {
-            this[module] = null;
+            this[`${module}`] = null;
         }
         removeChildren(this.element);
         let removeClasses = [ROOT, RTL, DEVICE_CLASS, MULTI_DRAG];
@@ -18296,6 +18477,9 @@ __decorate([
 __decorate([
     Property()
 ], Schedule.prototype, "dateHeaderTemplate", void 0);
+__decorate([
+    Property()
+], Schedule.prototype, "dateRangeTemplate", void 0);
 __decorate([
     Property()
 ], Schedule.prototype, "cellHeaderTemplate", void 0);
@@ -18593,8 +18777,8 @@ class ActionBase {
                 let startTime = this.actionObj.start;
                 let endTime = this.actionObj.end;
                 if (multiData && multiData.length > 0) {
-                    startTime = multiData[index][this.parent.eventFields.startTime];
-                    endTime = multiData[index][this.parent.eventFields.endTime];
+                    startTime = multiData[parseInt(index.toString(), 10)][this.parent.eventFields.startTime];
+                    endTime = multiData[parseInt(index.toString(), 10)][this.parent.eventFields.endTime];
                 }
                 timeElement.innerHTML = this.parent.getTimeString(startTime) + ' - ' +
                     this.parent.getTimeString(endTime);
@@ -18881,7 +19065,7 @@ class ActionBase {
             addClass([appointmentElement], CLONE_ELEMENT_CLASS);
             this.monthEvent.applyResourceColor(appointmentElement, event, 'backgroundColor', groupOrder);
             setStyleAttribute(appointmentElement, { 'width': appWidth + 'px', 'border': '0px', 'pointer-events': 'none' });
-            const cellTd = workCells[day];
+            const cellTd = workCells[parseInt(day.toString(), 10)];
             if (cellTd && isNullOrUndefined(this.parent.eventDragArea)) {
                 this.monthEvent.renderElement(cellTd, appointmentElement, true);
                 this.actionObj.cloneElement.push(appointmentElement);
@@ -18913,9 +19097,9 @@ class Resize extends ActionBase {
     resizeHelper() {
         if (this.parent.activeViewOptions.group.resources.length > 0 && this.parent.activeViewOptions.group.allowGroupEdit) {
             for (let i = 0, len = this.actionObj.originalElement.length; i < len; i++) {
-                const cloneElement = this.createCloneElement(this.actionObj.originalElement[i]);
-                this.actionObj.cloneElement[i] = cloneElement;
-                if (this.actionObj.element === this.actionObj.originalElement[i]) {
+                const cloneElement = this.createCloneElement(this.actionObj.originalElement[parseInt(i.toString(), 10)]);
+                this.actionObj.cloneElement[parseInt(i.toString(), 10)] = cloneElement;
+                if (this.actionObj.element === this.actionObj.originalElement[parseInt(i.toString(), 10)]) {
                     this.actionObj.clone = cloneElement;
                 }
             }
@@ -19271,10 +19455,10 @@ class Resize extends ActionBase {
             }
             let resizeDate;
             if (['Year', 'Month', 'Week', 'Date'].indexOf(headerName) !== -1) {
-                resizeDate = new Date(this.parent.activeView.renderDates[cellIndex].getTime());
+                resizeDate = new Date(this.parent.activeView.renderDates[parseInt(cellIndex.toString(), 10)].getTime());
             }
             else {
-                resizeDate = this.parent.getDateFromElement(tr.children[cellIndex]);
+                resizeDate = this.parent.getDateFromElement(tr.children[parseInt(cellIndex.toString(), 10)]);
             }
             if (['TimelineMonth', 'Year', 'Month', 'Week', 'Date'].indexOf(headerName) !== -1 ||
                 !this.parent.activeViewOptions.timeScale.enable) {
@@ -19301,7 +19485,7 @@ class Resize extends ActionBase {
             const tr = closest(this.actionObj.clone, 'tr');
             let dayIndex = isLeft ? cloneIndex - noOfDays : cloneIndex + noOfDays - 1;
             dayIndex = this.getIndex(dayIndex);
-            resizeTime = this.parent.getDateFromElement(tr.children[dayIndex]);
+            resizeTime = this.parent.getDateFromElement(tr.children[parseInt(dayIndex.toString(), 10)]);
             if (isLeft) {
                 resizeTime.setHours(eventStart.getHours(), eventStart.getMinutes(), eventStart.getSeconds());
             }
@@ -19501,14 +19685,17 @@ class YearEvent extends TimelineEvent {
             for (let index = 0; startDate.getTime() < endDate.getTime(); index++) {
                 const start = resetTime(new Date(startDate.getTime()));
                 const end = addDays(new Date(start.getTime()), 1);
+                startDate = addDays(new Date(startDate.getTime()), 1);
+                if (!this.parent.isMinMaxDate(start)) {
+                    continue;
+                }
                 const filterEvents = this.parent.eventBase.filterEvents(start, end);
                 if (filterEvents.length > 0) {
-                    const workCell = workCells[index];
+                    const workCell = workCells[parseInt(index.toString(), 10)];
                     if (workCell) {
                         workCell.appendChild(createElement('div', { className: APPOINTMENT_CLASS }));
                     }
                 }
-                startDate = addDays(new Date(startDate.getTime()), 1);
             }
         }
     }
@@ -19520,12 +19707,14 @@ class YearEvent extends TimelineEvent {
         this.eventHeight = getElementHeightFromClass(eventTable, APPOINTMENT_CLASS);
         const wrapperCollection = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CONTAINER_CLASS));
         const months = this.getMonths();
+        const groupIndex = (this.parent.activeViewOptions.group.resources.length > 0 && this.parent.uiStateValues.isGroupAdaptive) ?
+            this.parent.uiStateValues.groupIndex : undefined;
         for (let row = 0; row < months.length; row++) {
-            const wrapper = wrapperCollection[row];
+            const wrapper = wrapperCollection[parseInt(row.toString(), 10)];
             let td = row + 1;
             const eventWrapper = createElement('div', { className: APPOINTMENT_WRAPPER_CLASS });
             wrapper.appendChild(eventWrapper);
-            let monthStart = new Date(this.parent.selectedDate.getFullYear(), months[row], 1);
+            let monthStart = new Date(this.parent.selectedDate.getFullYear(), months[parseInt(row.toString(), 10)], 1);
             const monthEnd = new Date(monthStart.getFullYear(), monthStart.getMonth() + 1, 0);
             let dayIndex = monthStart.getDay();
             const isSpannedCollection = [];
@@ -19536,7 +19725,7 @@ class YearEvent extends TimelineEvent {
                 let leftValue;
                 let rightValue;
                 if (this.parent.activeViewOptions.orientation === 'Vertical') {
-                    const wrapper = wrapperCollection[dayIndex];
+                    const wrapper = wrapperCollection[parseInt(dayIndex.toString(), 10)];
                     td = dayIndex + 1;
                     let eventWrapper = wrapper.querySelector('.' + APPOINTMENT_WRAPPER_CLASS);
                     if (!eventWrapper) {
@@ -19569,7 +19758,7 @@ class YearEvent extends TimelineEvent {
                 let dayEvents = this.parent.eventBase.filterEvents(dayStart, dayEnd, undefined, resource);
                 dayEvents = this.parent.eventBase.sortByDateTime(dayEvents);
                 for (let index = 0, count = dayEvents.length; index < count; index++) {
-                    const eventData = extend({}, dayEvents[index], null, true);
+                    const eventData = extend({}, dayEvents[parseInt(index.toString(), 10)], null, true);
                     this.updateSpannedEvents(eventData, dayStart, dayEnd);
                     const overlapIndex = this.getIndex(dayStart);
                     eventData.Index = overlapIndex;
@@ -19583,7 +19772,7 @@ class YearEvent extends TimelineEvent {
                         const isSpanned = isSpannedCollection.filter((eventObj) => eventObj.Guid === eventData.Guid);
                         if (isRendered.length > 0 && isRendered[0].MoreIndicator || isSpanned.length > 0 && isSpanned[0].MoreIndicator) {
                             const moreIndex = this.parent.activeViewOptions.orientation === 'Horizontal' ? row : dayIndex;
-                            this.renderMoreIndicator(eventWrapper, moreIndicatorCount, dayStart, moreIndex, leftValue, rightValue);
+                            this.renderMoreIndicator(eventWrapper, moreIndicatorCount, dayStart, moreIndex, leftValue, rightValue, groupIndex);
                             continue;
                         }
                         else if (isRendered.length > 0 || isSpanned.length > 0) {
@@ -19598,7 +19787,7 @@ class YearEvent extends TimelineEvent {
                     }
                     else {
                         const moreIndex = this.parent.activeViewOptions.orientation === 'Horizontal' ? row : dayIndex;
-                        this.renderMoreIndicator(eventWrapper, moreIndicatorCount, dayStart, moreIndex, leftValue, rightValue);
+                        this.renderMoreIndicator(eventWrapper, moreIndicatorCount, dayStart, moreIndex, leftValue, rightValue, groupIndex);
                         if (this.parent.activeViewOptions.orientation === 'Horizontal') {
                             eventData.MoreIndicator = true;
                             this.renderedEvents.push(eventData);
@@ -19651,10 +19840,10 @@ class YearEvent extends TimelineEvent {
         const months = this.getMonths();
         if (this.parent.activeViewOptions.orientation === 'Horizontal') {
             for (let month = 0; month < months.length; month++) {
-                const monthStart = new Date(this.parent.selectedDate.getFullYear(), months[month], 1);
+                const monthStart = new Date(this.parent.selectedDate.getFullYear(), months[parseInt(month.toString(), 10)], 1);
                 for (let i = 0, len = resources.length; i < len; i++) {
                     this.renderedEvents = [];
-                    this.renderResourceEvent(wrapperCollection[month], resources[i], month, i, monthStart);
+                    this.renderResourceEvent(wrapperCollection[parseInt(month.toString(), 10)], resources[parseInt(i.toString(), 10)], month, i, monthStart);
                 }
             }
         }
@@ -19662,8 +19851,8 @@ class YearEvent extends TimelineEvent {
             for (let i = 0, len = resources.length; i < len; i++) {
                 this.renderedEvents = [];
                 for (let month = 0; month < months.length; month++) {
-                    const monthStart = new Date(this.parent.selectedDate.getFullYear(), months[month], 1);
-                    this.renderResourceEvent(wrapperCollection[i], resources[i], month, i, monthStart);
+                    const monthStart = new Date(this.parent.selectedDate.getFullYear(), months[parseInt(month.toString(), 10)], 1);
+                    this.renderResourceEvent(wrapperCollection[parseInt(i.toString(), 10)], resources[parseInt(i.toString(), 10)], month, i, monthStart);
                 }
             }
         }
@@ -19678,7 +19867,7 @@ class YearEvent extends TimelineEvent {
         this.cellHeight = td.offsetHeight;
         this.groupOrder = resource.groupOrder;
         for (let a = 0; a < eventDatas.length; a++) {
-            const data = eventDatas[a];
+            const data = eventDatas[parseInt(a.toString(), 10)];
             let overlapIndex;
             const eventData = extend({}, data, null, true);
             if (this.parent.activeViewOptions.group.resources.length > 0) {
@@ -19693,6 +19882,9 @@ class YearEvent extends TimelineEvent {
             const availedHeight = this.cellHeader + (this.eventHeight * (a + 1)) + EVENT_GAP$2 + this.moreIndicatorHeight;
             const leftValue = (this.parent.activeViewOptions.orientation === 'Vertical') ?
                 month * this.cellWidth : index * this.cellWidth;
+            if (!this.parent.isMinMaxDate(eventData[this.fields.startTime])) {
+                return;
+            }
             if (this.parent.rowAutoHeight || this.cellHeight > availedHeight) {
                 this.renderEvent(eventWrapper, eventData, month, leftValue, leftValue, monthStart, index);
                 this.updateCellHeight(td, availedHeight);
@@ -19702,7 +19894,7 @@ class YearEvent extends TimelineEvent {
                 this.renderMoreIndicator(eventWrapper, eventDatas.length - a, monthStart, moreIndex, leftValue, leftValue, index);
                 if (this.parent.activeViewOptions.orientation === 'Horizontal') {
                     for (let i = index; i < eventDatas.length; i++) {
-                        this.renderedEvents.push(extend({}, eventDatas[i], { Index: overlapIndex + i }, true));
+                        this.renderedEvents.push(extend({}, eventDatas[parseInt(i.toString(), 10)], { Index: overlapIndex + i }, true));
                     }
                 }
                 break;
@@ -19762,7 +19954,7 @@ class YearEvent extends TimelineEvent {
             return;
         }
         let endDate;
-        if (this.parent.activeViewOptions.group.resources.length > 0) {
+        if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
             endDate = addDays(lastDateOfMonth(new Date(startDate.getTime())), 1);
         }
         else {
@@ -19865,7 +20057,7 @@ class YearEvent extends TimelineEvent {
             eventData[this.fields.endTime] = monthEnd;
             isSpanned.isRight = true;
         }
-        if (this.parent.activeViewOptions.group.resources.length === 0) {
+        if (this.parent.activeViewOptions.group.resources.length === 0 || this.parent.uiStateValues.isGroupAdaptive) {
             let end = resetTime(eventData[this.fields.endTime]).getTime();
             const start = resetTime(eventData[this.fields.startTime]).getTime();
             if (eventObj[this.fields.isAllDay] && end === eventObj[this.fields.endTime].getTime() || isSpanned.isRight) {
@@ -19886,7 +20078,7 @@ class YearEvent extends TimelineEvent {
         const appointmentsList = [];
         let dateStart;
         let dateEnd;
-        if (this.parent.activeViewOptions.group.resources.length > 0) {
+        if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
             const monthStart = this.parent.calendarUtil.getMonthStartDate(new Date(date.getTime()));
             const monthEnd = addDays(this.parent.calendarUtil.getMonthEndDate(new Date(date.getTime())), -1);
             dateStart = resetTime(new Date(monthStart.getTime())).getTime();
@@ -20306,7 +20498,8 @@ class DragAndDrop extends ActionBase {
                 this.parent.crudModule.crudObj.sourceEvent =
                     [this.parent.resourceBase.lastResourceLevel[parseInt(dragArgs.element.getAttribute('data-group-index'), 10)]];
                 const currentGroupIndex = parseInt(dragArgs.target.getAttribute('data-group-index'), 10) || this.actionObj.groupIndex;
-                this.parent.crudModule.crudObj.targetEvent = [this.parent.resourceBase.lastResourceLevel[currentGroupIndex]];
+                this.parent.crudModule.crudObj.targetEvent =
+                    [this.parent.resourceBase.lastResourceLevel[parseInt(currentGroupIndex.toString(), 10)]];
             }
             this.saveChangedData(dragEventArgs, this.isMultiSelect);
         });
@@ -20498,7 +20691,7 @@ class DragAndDrop extends ActionBase {
         }
         else {
             const trCollections = [].slice.call(this.parent.getContentTable().querySelectorAll('tr'));
-            tr = trCollections[rowIndex];
+            tr = trCollections[parseInt(rowIndex.toString(), 10)];
         }
         let index;
         if (closest(this.actionObj.target, 'td').classList.contains(WORK_CELLS_CLASS) ||
@@ -20510,7 +20703,7 @@ class DragAndDrop extends ActionBase {
         if (isNullOrUndefined(tr)) {
             return;
         }
-        const td = tr.children[colIndex];
+        const td = tr.children[parseInt(colIndex.toString(), 10)];
         if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
             this.actionObj.groupIndex = parseInt(td.getAttribute('data-group-index'), 10);
         }
@@ -20574,16 +20767,17 @@ class DragAndDrop extends ActionBase {
             }
             const startTimeDiff = event[this.parent.eventFields.startTime].getTime() - this.startTime;
             for (let index = 0; index < this.multiData.length; index++) {
-                this.updatedData[index] = this.updateMultipleData(this.multiData[index], startTimeDiff);
-                const dayIndex = this.getDayIndex(this.updatedData[index]);
+                this.updatedData[parseInt(index.toString(), 10)] =
+                    this.updateMultipleData(this.multiData[parseInt(index.toString(), 10)], startTimeDiff);
+                const dayIndex = this.getDayIndex(this.updatedData[parseInt(index.toString(), 10)]);
                 if (dayIndex >= 0) {
-                    const wrapper = this.getEventWrapper(dayIndex, this.updatedData[index][this.parent.eventFields.isAllDay]);
-                    this.appendCloneElement(wrapper, this.actionObj.cloneElement[index]);
-                    this.updateEventHeight(this.updatedData[index], index, dayIndex);
+                    const wrapper = this.getEventWrapper(dayIndex, this.updatedData[parseInt(index.toString(), 10)][this.parent.eventFields.isAllDay]);
+                    this.appendCloneElement(wrapper, this.actionObj.cloneElement[parseInt(index.toString(), 10)]);
+                    this.updateEventHeight(this.updatedData[parseInt(index.toString(), 10)], index, dayIndex);
                 }
                 else {
-                    if (!isNullOrUndefined(this.actionObj.cloneElement[index].parentNode)) {
-                        remove(this.actionObj.cloneElement[index]);
+                    if (!isNullOrUndefined(this.actionObj.cloneElement[parseInt(index.toString(), 10)].parentNode)) {
+                        remove(this.actionObj.cloneElement[parseInt(index.toString(), 10)]);
                     }
                 }
             }
@@ -20611,7 +20805,7 @@ class DragAndDrop extends ActionBase {
             }
             const index = eventData.length - 1;
             eventData[0][eventFields.startTime] = startTime;
-            eventData[index][eventFields.endTime] = endTime;
+            eventData[parseInt(index.toString(), 10)][eventFields.endTime] = endTime;
         }
         else {
             eventData.push(event);
@@ -20668,8 +20862,8 @@ class DragAndDrop extends ActionBase {
         let datesCount = this.verticalEvent.getStartCount();
         if (!this.parent.uiStateValues.isGroupAdaptive) {
             for (let i = 0; i < this.actionObj.groupIndex; i++) {
-                if (this.verticalEvent.dateRender[i]) {
-                    datesCount = datesCount + this.verticalEvent.dateRender[i].length;
+                if (this.verticalEvent.dateRender[parseInt(i.toString(), 10)]) {
+                    datesCount = datesCount + this.verticalEvent.dateRender[parseInt(i.toString(), 10)].length;
                 }
             }
         }
@@ -20680,7 +20874,7 @@ class DragAndDrop extends ActionBase {
             let dynamicIndex = -1;
             let dayIndex = !this.parent.activeViewOptions.group.byDate ?
                 isNullOrUndefined(index) ? this.actionObj.index - datesCount : colIndex - datesCount
-                : this.parent.getIndexOfDate(this.verticalEvent.dateRender[indexGroup], resetTime(
+                : this.parent.getIndexOfDate(this.verticalEvent.dateRender[parseInt(indexGroup.toString(), 10)], resetTime(
                 // eslint-disable-next-line max-len
                 this.parent.getDateFromElement(isNullOrUndefined(index) ? this.actionObj.target : this.targetTd)));
             const splitEvents = this.splitEvent(event);
@@ -20688,7 +20882,7 @@ class DragAndDrop extends ActionBase {
                 this.parent.eventSettings.spannedEventPlacement !== 'TimeSlot' ? [event] : splitEvents;
             for (let i = 0; i < events.length; i++) {
                 if (i > 0) {
-                    let filterQuery = `.e-day-wrapper[data-date="${resetTime(events[i][this.parent.eventFields.startTime]).getTime()}"]`;
+                    let filterQuery = `.e-day-wrapper[data-date="${resetTime(events[parseInt(i.toString(), 10)][this.parent.eventFields.startTime]).getTime()}"]`;
                     if (this.parent.activeViewOptions.group.resources.length > 0) {
                         filterQuery = filterQuery.concat('[data-group-index = "' + this.actionObj.groupIndex + '"]');
                     }
@@ -20702,7 +20896,7 @@ class DragAndDrop extends ActionBase {
                     }
                 }
                 if (dayIndex >= 0) {
-                    const record = this.verticalEvent.isSpannedEvent(events[i], dayIndex, indexGroup);
+                    const record = this.verticalEvent.isSpannedEvent(events[parseInt(i.toString(), 10)], dayIndex, indexGroup);
                     const eStart = record[this.verticalEvent.fields.startTime];
                     const eEnd = record[this.verticalEvent.fields.endTime];
                     let appHeight = this.parent.activeViewOptions.timeScale.enable ? this.verticalEvent.getHeight(eStart, eEnd) :
@@ -20730,12 +20924,12 @@ class DragAndDrop extends ActionBase {
                                 appWidth = (allDayDifference * this.actionObj.cellWidth);
                             }
                         }
-                        if (this.actionObj.cloneElement[index]) {
+                        if (this.actionObj.cloneElement[parseInt(index.toString(), 10)]) {
                             if (i === 0) {
-                                this.actionObj.cloneElement[index].style.top = formatUnit(topValue);
-                                this.actionObj.cloneElement[index].style.height = formatUnit(appHeight);
-                                this.actionObj.cloneElement[index].style.width = formatUnit(appWidth);
-                                this.actionObj.cloneElement[index].style.left = formatUnit(0);
+                                this.actionObj.cloneElement[parseInt(index.toString(), 10)].style.top = formatUnit(topValue);
+                                this.actionObj.cloneElement[parseInt(index.toString(), 10)].style.height = formatUnit(appHeight);
+                                this.actionObj.cloneElement[parseInt(index.toString(), 10)].style.width = formatUnit(appWidth);
+                                this.actionObj.cloneElement[parseInt(index.toString(), 10)].style.left = formatUnit(0);
                             }
                             else {
                                 this.renderSpannedEvents(record, dynamicIndex, topValue, appHeight);
@@ -20760,7 +20954,7 @@ class DragAndDrop extends ActionBase {
                 'border': '0px'
             });
             const appointmentWrap = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_WRAPPER_CLASS));
-            appointmentWrap[index].appendChild(appointmentElement);
+            appointmentWrap[parseInt(index.toString(), 10)].appendChild(appointmentElement);
         }
     }
     getRenderedDates() {
@@ -20874,12 +21068,13 @@ class DragAndDrop extends ActionBase {
                 startTimeDiff += startTime.getMonth();
             }
             for (let index = 0; index < this.multiData.length; index++) {
-                this.updatedData[index] = this.updateMultipleVerticalDate(this.multiData[index], startTimeDiff);
+                this.updatedData[parseInt(index.toString(), 10)] =
+                    this.updateMultipleVerticalDate(this.multiData[parseInt(index.toString(), 10)], startTimeDiff);
                 if (this.parent.currentView === 'TimelineYear') {
-                    this.dynamicYearlyEventsRendering(this.updatedData[index]);
+                    this.dynamicYearlyEventsRendering(this.updatedData[parseInt(index.toString(), 10)]);
                 }
                 else {
-                    this.dynamicEventsRendering(this.updatedData[index]);
+                    this.dynamicEventsRendering(this.updatedData[parseInt(index.toString(), 10)]);
                 }
             }
         }
@@ -20942,8 +21137,8 @@ class DragAndDrop extends ActionBase {
         const tr = this.parent.getContentTable().querySelector('tr');
         let index = this.getCursorCurrentIndex(colIndex, cloneIndex, tr);
         index = index < 0 ? 0 : index;
-        let eventStart = this.isHeaderRows ? new Date(this.timelineEventModule.dateRender[index].getTime()) :
-            this.parent.getDateFromElement(tr.children[index]);
+        let eventStart = this.isHeaderRows ? new Date(this.timelineEventModule.dateRender[parseInt(index.toString(), 10)].getTime()) :
+            this.parent.getDateFromElement(tr.children[parseInt(index.toString(), 10)]);
         if (this.isStepDragging) {
             const widthDiff = this.getWidthDiff(tr, index);
             if (widthDiff !== 0) {
@@ -20994,12 +21189,13 @@ class DragAndDrop extends ActionBase {
         if (this.multiData.length > 0) {
             const startTimeDiff = eventsData[0][this.parent.eventFields.startTime].getTime() - this.startTime;
             for (let i = 0; i < this.multiData.length; i++) {
-                this.updatedData[i] = this.updateMultipleData(this.multiData[i], startTimeDiff);
+                this.updatedData[parseInt(i.toString(), 10)] =
+                    this.updateMultipleData(this.multiData[parseInt(i.toString(), 10)], startTimeDiff);
             }
             eventsData = this.updatedData;
         }
         for (let dataIndex = 0; dataIndex < eventsData.length; dataIndex++) {
-            const events = this.timelineEventModule.splitEvent(eventsData[dataIndex], this.timelineEventModule.dateRender);
+            const events = this.timelineEventModule.splitEvent(eventsData[parseInt(dataIndex.toString(), 10)], this.timelineEventModule.dateRender);
             const eventData = events[0].data;
             const startTime = this.timelineEventModule.getStartTime(events[0], eventData);
             const endTime = this.timelineEventModule.getEndTime(events[0], eventData);
@@ -21009,7 +21205,7 @@ class DragAndDrop extends ActionBase {
             let day = this.parent.getIndexOfDate(this.timelineEventModule.dateRender, resetTime(new Date(startTime.getTime())));
             day = day < 0 ? 0 : day;
             const left = this.timelineEventModule.getPosition(startTime, endTime, eventObj[this.parent.eventFields.isAllDay], day);
-            const cloneElement = this.multiData.length > 0 ? this.actionObj.cloneElement[dataIndex] : this.actionObj.clone;
+            const cloneElement = this.multiData.length > 0 ? this.actionObj.cloneElement[parseInt(dataIndex.toString(), 10)] : this.actionObj.clone;
             if (this.parent.enableRtl) {
                 cloneElement.style.right = formatUnit(left);
             }
@@ -21069,7 +21265,7 @@ class DragAndDrop extends ActionBase {
     getWidthDiff(tr, index) {
         const pages = this.scrollArgs.element.getBoundingClientRect();
         if (pages.left <= this.actionObj.pageX && pages.right >= this.actionObj.pageX) {
-            const targetLeft = tr.children[index].offsetLeft;
+            const targetLeft = tr.children[parseInt(index.toString(), 10)].offsetLeft;
             const pageX = this.actionObj.pageX - pages.left;
             if (this.parent.enableRtl) {
                 return (targetLeft + this.actionObj.cellWidth) - (this.scrollArgs.element.scrollLeft + pageX);
@@ -21139,7 +21335,7 @@ class DragAndDrop extends ActionBase {
         const td = closest(this.actionObj.target, 'td');
         this.actionObj.groupIndex = (td && !isNaN(parseInt(td.getAttribute('data-group-index'), 10)))
             ? parseInt(td.getAttribute('data-group-index'), 10) : this.actionObj.groupIndex;
-        let top = trCollection[rowIndex].getBoundingClientRect().height * rowIndex;
+        let top = trCollection[parseInt(rowIndex.toString(), 10)].getBoundingClientRect().height * rowIndex;
         if (this.parent.rowAutoHeight) {
             const cursorElement = this.getCursorElement(e);
             if (cursorElement) {
@@ -21220,6 +21416,7 @@ class ViewBase {
      * @param {Schedule} parent Accepts the schedule instance
      */
     constructor(parent) {
+        this.previousNextAction = 'next';
         this.parent = parent;
     }
     isTimelineView() {
@@ -21269,7 +21466,7 @@ class ViewBase {
         for (let row = 0; row < trCount; row++) {
             eventContainer = createElement('div', { className: 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);
         }
@@ -21394,6 +21591,12 @@ class ViewBase {
     highlightCurrentTime() {
         // Here showTimeIndicator functionalities
     }
+    getStartDate() {
+        return this.renderDates[0];
+    }
+    getEndDate() {
+        return this.renderDates[this.renderDates.length - 1];
+    }
     startDate() {
         return this.renderDates[0];
     }
@@ -21492,6 +21695,7 @@ class ViewBase {
         return renderDates;
     }
     getNextPreviousDate(type) {
+        this.previousNextAction = type;
         if (this.parent.currentView === 'Day' || this.parent.currentView === 'TimelineDay') {
             if (this.parent.activeViewOptions.showWeekend) {
                 const daysCount = this.parent.activeViewOptions.interval;
@@ -21759,8 +21963,8 @@ class ViewBase {
             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;
@@ -21880,6 +22084,9 @@ class VerticalView extends ViewBase {
         }
         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;
             }
@@ -21941,10 +22148,22 @@ class VerticalView extends ViewBase {
         this.scrollToHour(null, scrollDate);
     }
     generateColumnLevels() {
-        const level = this.getDateSlots(this.renderDates, this.parent.activeViewOptions.workDays);
+        let level = this.getDateSlots(this.renderDates, this.parent.activeViewOptions.workDays);
         let 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) {
                 const resourceLevel = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];
                 const resStartHour = resourceLevel.resourceData[resourceLevel.resource.startHourField];
@@ -22084,10 +22303,10 @@ class VerticalView extends ViewBase {
         }
         const curTimeWrap = [].slice.call(this.element.querySelectorAll('.' + TIMELINE_WRAPPER_CLASS));
         for (let i = 0, length = currentDateIndex[0]; i < length; i++) {
-            curTimeWrap[i].appendChild(createElement('div', { className: PREVIOUS_TIMELINE_CLASS, styles: 'top:' + topInPx }));
+            curTimeWrap[parseInt(i.toString(), 10)].appendChild(createElement('div', { className: PREVIOUS_TIMELINE_CLASS, styles: 'top:' + topInPx }));
         }
         for (const day of currentDateIndex) {
-            curTimeWrap[day].appendChild(createElement('div', { className: CURRENT_TIMELINE_CLASS, styles: 'top:' + topInPx }));
+            curTimeWrap[parseInt(day.toString(), 10)].appendChild(createElement('div', { className: CURRENT_TIMELINE_CLASS, styles: 'top:' + topInPx }));
         }
         const currentTimeEle = createElement('div', {
             innerHTML: this.parent.getTimeString(this.parent.getCurrentTime()),
@@ -22096,8 +22315,8 @@ class VerticalView extends ViewBase {
         });
         if (rowIndex <= timeTrs.length) {
             removeClass(timeCellsWrap.querySelectorAll('.' + HIDE_CHILDS_CLASS), HIDE_CHILDS_CLASS);
-            if (timeTrs[rowIndex]) {
-                addClass([timeTrs[rowIndex].lastElementChild], HIDE_CHILDS_CLASS);
+            if (timeTrs[parseInt(rowIndex.toString(), 10)]) {
+                addClass([timeTrs[parseInt(rowIndex.toString(), 10)].lastElementChild], HIDE_CHILDS_CLASS);
             }
             prepend([currentTimeEle], timeCellsWrap);
             currentTimeEle.style.top = formatUnit(currentTimeEle.offsetTop - (currentTimeEle.offsetHeight / 2));
@@ -22256,7 +22475,7 @@ class VerticalView extends ViewBase {
         let nth;
         for (let i = 0; i < rowCount; i++) {
             const ntr = trEle.cloneNode();
-            const data = { className: [(this.colLevels[i][0] && this.colLevels[i][0].className[0])], type: 'emptyCells' };
+            const data = { 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.className.indexOf(HEADER_CELLS_CLASS) !== -1) {
                 data.className.push(WEEK_NUMBER_CLASS);
                 const weekNo = this.parent.getWeekNumberContent(this.renderDates);
@@ -22298,9 +22517,9 @@ class VerticalView extends ViewBase {
         const lastLevel = this.colLevels[rowCount - 1];
         for (let i = 0; i < rowCount; i++) {
             const ntr = trEle.cloneNode();
-            const level = this.colLevels[i];
+            const level = this.colLevels[parseInt(i.toString(), 10)];
             for (let 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);
         }
@@ -22312,7 +22531,7 @@ class VerticalView extends ViewBase {
     createAllDayRow(table, tdData) {
         const ntr = createElement('tr', { className: ALLDAY_ROW_CLASS });
         for (let j = 0; j < tdData.length; j++) {
-            const td = extend({}, tdData[j]);
+            const td = extend({}, tdData[parseInt(j.toString(), 10)]);
             td.className = [ALLDAY_CELLS_CLASS];
             td.type = 'alldayCells';
             const ntd = this.createTd(td);
@@ -22538,7 +22757,7 @@ class VerticalView extends ViewBase {
             const startDate = new Date(new Date(timeSlots[0].date.getTime()).
                 setHours(startTime.getHours(), startTime.getMinutes(), startTime.getMilliseconds()));
             for (let 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);
                 }
@@ -22767,7 +22986,9 @@ class Month extends ViewBase {
         }
         if (leftPanelElement) {
             if (this.parent.currentView === 'MonthAgenda') {
-                height = this.element.querySelector('.' + CONTENT_TABLE_CLASS).offsetHeight;
+                height = (this.parent.activeViewOptions.interval > 1) ?
+                    this.getContentAreaElement().firstElementChild.offsetHeight :
+                    this.element.querySelector('.' + CONTENT_TABLE_CLASS).offsetHeight;
             }
             leftPanelElement.style.height = 'auto';
             leftPanelElement.style.height = formatUnit(height - this.getScrollXIndent(content));
@@ -22783,7 +23004,12 @@ class Month extends ViewBase {
             }
             if (this.parent.uiStateValues.isGroupAdaptive && this.parent.resourceBase.lastResourceLevel.length > 0) {
                 const resourceLevel = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];
-                colLevels = [this.getDateSlots(resourceLevel.renderDates, resourceLevel.workDays)];
+                let levels = this.getDateSlots(resourceLevel.renderDates, resourceLevel.workDays);
+                if (this.parent.activeViewOptions.group.byDate && this.parent.activeViewOptions.group.hideNonWorkingDays) {
+                    const index = levels.findIndex((x, index) => index !== 0 && x.date.getDay() === levels[0].date.getDay());
+                    levels = index > -1 ? levels.slice(0, index) : levels;
+                }
+                colLevels = [levels];
             }
         }
         else {
@@ -22802,7 +23028,7 @@ class Month extends ViewBase {
             if (isCurrentMonth && currentDateIndex.indexOf(this.parent.getCurrentTime().getDay()) === col) {
                 classList$$1.push(CURRENT_DAY_CLASS);
             }
-            dateSlots.push({ date: renderDates[col], type: 'monthDay', className: classList$$1, colSpan: 1, workDays: workDays });
+            dateSlots.push({ date: renderDates[parseInt(col.toString(), 10)], type: 'monthDay', className: classList$$1, colSpan: 1, workDays: workDays });
         }
         return dateSlots;
     }
@@ -22819,6 +23045,9 @@ class Month extends ViewBase {
         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(VIRTUAL_SCROLL_CLASS);
@@ -22932,10 +23161,10 @@ class Month extends ViewBase {
         this.createColGroup(table, this.colLevels[this.colLevels.length - 1]);
         const trEle = createElement('tr');
         for (let i = 0; i < this.colLevels.length; i++) {
-            const level = this.colLevels[i];
+            const level = this.colLevels[parseInt(i.toString(), 10)];
             const ntr = trEle.cloneNode();
             for (let j = 0; j < level.length; j++) {
-                const td = level[j];
+                const td = level[parseInt(j.toString(), 10)];
                 ntr.appendChild(this.createHeaderCell(td));
             }
             table.querySelector('tbody').appendChild(ntr);
@@ -22993,10 +23222,10 @@ class Month extends ViewBase {
                 date: new Date(+renderDate), groupIndex: resData.groupIndex, workDays: resData.workDays,
                 type: 'monthCells', className: classList$$1 || [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);
         };
         const includeResource = this.parent.currentView !== 'MonthAgenda' &&
             this.parent.activeViewOptions.group.resources.length > 0;
@@ -23020,17 +23249,27 @@ class Month extends ViewBase {
             const startIndex = this.renderDates.map(Number).indexOf(+level[0].date);
             for (let i = 0; i < (this.renderDates.length / count); i++) {
                 const colDates = dates.splice(0, count);
+                let k = startIndex;
                 for (let j = startIndex; j < (this.colLevels[0].length + startIndex) && j < colDates.length; j++) {
-                    const colDate = colDates[j];
+                    const colDate = colDates[parseInt(k.toString(), 10)];
+                    k++;
                     if (includeResource) {
                         const lastRow = this.colLevels[(this.colLevels.length - 1)];
-                        const resourcesTd = lastRow.slice(0, lastRow.length / count);
+                        const rowCount = lastRow.length / count;
+                        let resourcesTd = lastRow.slice(0, rowCount);
+                        if (this.parent.activeViewOptions.group.hideNonWorkingDays) {
+                            resourcesTd = lastRow.filter((x) => x.date.getDay() === colDate.getDay());
+                            if (resourcesTd.length === 0) {
+                                j = j - 1;
+                                continue;
+                            }
+                        }
                         for (let resIndex = 0; resIndex < resourcesTd.length; resIndex++) {
                             let clsList;
                             if (resIndex !== 0) {
                                 clsList = [WORK_CELLS_CLASS, DISABLE_DATE];
                             }
-                            prepareSlots(i, colDate, resourcesTd[resIndex], clsList);
+                            prepareSlots(i, colDate, resourcesTd[parseInt(resIndex.toString(), 10)], clsList);
                         }
                     }
                     else {
@@ -23079,8 +23318,8 @@ class Month extends ViewBase {
         const slotDatas = this.getContentSlots();
         for (let row = 0; row < slotDatas.length; row++) {
             const ntr = tr.cloneNode();
-            for (let col = 0; col < slotDatas[row].length; col++) {
-                const ntd = this.createContentTd(slotDatas[row][col], td);
+            for (let col = 0; col < slotDatas[parseInt(row.toString(), 10)].length; col++) {
+                const ntd = this.createContentTd(slotDatas[parseInt(row.toString(), 10)][parseInt(col.toString(), 10)], td);
                 ntr.appendChild(ntd);
             }
             trows.push(ntr);
@@ -23385,7 +23624,7 @@ class Year extends ViewBase {
     renderCalendarHeader(currentDate) {
         const headerWrapper = createElement('div', { className: 'e-header e-month' });
         const headerContent = createElement('div', { className: 'e-day e-title' });
-        if (this.parent.monthHeaderTemplate) {
+        if (this.parent.activeViewOptions.monthHeaderTemplate) {
             const args = { date: currentDate, type: 'monthHeader' };
             this.renderTemplates(this.parent.getMonthHeaderTemplate(), args, 'monthHeaderTemplate', this.parent.activeViewOptions.monthHeaderTemplateName, headerContent);
         }
@@ -23409,7 +23648,7 @@ class Year extends ViewBase {
             tr.appendChild(createElement('th'));
         }
         for (let i = 0; i < WEEK_LENGTH; i++) {
-            if (this.parent.dayHeaderTemplate) {
+            if (this.parent.activeViewOptions.dayHeaderTemplate) {
                 const th = createElement('th');
                 const args = { date: currentWeek, type: 'dayHeader' };
                 this.renderTemplates(this.parent.getDayHeaderTemplate(), args, 'dayHeaderTemplate', this.parent.activeViewOptions.dayHeaderTemplateName, th);
@@ -23467,9 +23706,14 @@ class Year extends ViewBase {
                     addClass([td], classList$$1);
                 }
                 tr.appendChild(td);
-                EventHandler.add(td, 'click', this.onCellClick, this);
-                if (!this.parent.isAdaptive) {
-                    EventHandler.add(td, 'dblclick', this.parent.workCellAction.cellDblClick, this.parent.workCellAction);
+                if (!this.parent.isMinMaxDate(date)) {
+                    addClass([td], DISABLE_DATES);
+                }
+                else {
+                    EventHandler.add(td, 'click', this.onCellClick, this);
+                    if (!this.parent.isAdaptive) {
+                        EventHandler.add(td, 'dblclick', this.parent.workCellAction.cellDblClick, this.parent.workCellAction);
+                    }
                 }
                 this.parent.trigger(renderCell, { elementType: 'workCells', element: td, date: date });
             }
@@ -23631,6 +23875,7 @@ class Year extends ViewBase {
         if (!args.isPreventScrollUpdate) {
             if (this.parent.uiStateValues.isInitial) {
                 this.parent.uiStateValues.isInitial = false;
+                this.parent.uiStateValues.top = this.parent.uiStateValues.left = 0;
             }
             else {
                 if (leftPanelElement) {
@@ -23750,40 +23995,41 @@ class AgendaBase extends ViewBase {
             listElements.forEach((element, li) => {
                 const appWrapper = createElement('div', {
                     className: APPOINTMENT_CLASS, attrs: {
-                        'data-id': 'Appointment_' + listData[li][this.parent.eventFields.id],
-                        'data-guid': listData[li].Guid,
+                        'data-id': 'Appointment_' + listData[parseInt(li.toString(), 10)][`${this.parent.eventFields.id}`],
+                        'data-guid': listData[parseInt(li.toString(), 10)].Guid,
                         'role': 'button',
                         'tabindex': '0',
-                        'aria-disabled': this.parent.eventBase.getReadonlyAttribute(listData[li]),
+                        'aria-disabled': this.parent.eventBase.getReadonlyAttribute(listData[parseInt(li.toString(), 10)]),
                         'aria-pressed': 'false',
-                        'aria-label': this.parent.getAnnouncementString(listData[li])
+                        'aria-label': this.parent.getAnnouncementString(listData[parseInt(li.toString(), 10)])
                     }
                 });
                 if (!isNullOrUndefined(groupIndex)) {
                     appWrapper.setAttribute('data-group-index', groupIndex.toString());
                 }
-                this.parent.eventBase.applyResourceColor(appWrapper, listData[li], 'borderColor', groupOrder);
+                this.parent.eventBase.applyResourceColor(appWrapper, listData[parseInt(li.toString(), 10)], 'borderColor', groupOrder);
                 let templateEle;
                 if (!isNullOrUndefined(this.parent.activeViewOptions.eventTemplate)) {
                     addClass([appWrapper], EVENT_TEMPLATE);
                     const scheduleId = this.parent.element.id + '_';
                     const viewName = this.parent.activeViewOptions.eventTemplateName;
                     const templateId = scheduleId + viewName + 'eventTemplate';
-                    templateEle = this.parent.getAppointmentTemplate()(listData[li], this.parent, 'eventTemplate', templateId, false);
-                    if (!isNullOrUndefined(listData[li][fieldMapping.recurrenceRule])) {
-                        const iconClass = (listData[li][fieldMapping.id] === listData[li][fieldMapping.recurrenceID]) ?
+                    templateEle = this.parent.getAppointmentTemplate()(listData[parseInt(li.toString(), 10)], this.parent, 'eventTemplate', templateId, false);
+                    if (!isNullOrUndefined(listData[parseInt(li.toString(), 10)][fieldMapping.recurrenceRule])) {
+                        const iconClass = (listData[parseInt(li.toString(), 10)][fieldMapping.id] ===
+                            listData[parseInt(li.toString(), 10)][fieldMapping.recurrenceID]) ?
                             EVENT_RECURRENCE_ICON_CLASS : EVENT_RECURRENCE_EDIT_ICON_CLASS;
                         appWrapper.appendChild(createElement('div', { className: ICON + ' ' + iconClass }));
                     }
                 }
                 else {
-                    templateEle = this.createAppointment(listData[li]);
+                    templateEle = this.createAppointment(listData[parseInt(li.toString(), 10)]);
                 }
                 append([].slice.call(templateEle), appWrapper);
                 removeChildren(element);
                 element.appendChild(appWrapper);
                 const args = {
-                    data: extend({}, listData[li], null, true),
+                    data: extend({}, listData[parseInt(li.toString(), 10)], null, true),
                     element: element, cancel: false
                 };
                 this.parent.trigger(eventRendered, args, (eventArgs) => {
@@ -23882,7 +24128,7 @@ class AgendaBase extends ViewBase {
                     const data = [];
                     agendaDate = firstDate;
                     // eslint-disable-next-line max-len
-                    const resDataCollection = this.parent.eventBase.filterEvents(agendaDate, agendaLastDate, agendaCollection, resData[res]);
+                    const resDataCollection = this.parent.eventBase.filterEvents(agendaDate, agendaLastDate, agendaCollection, resData[parseInt(res.toString(), 10)]);
                     if (resDataCollection.length > 0 || !this.parent.hideEmptyAgendaDays || this.parent.currentView === 'MonthAgenda') {
                         for (let r = 0; r < noOfDays; r++) {
                             // eslint-disable-next-line max-len
@@ -23892,19 +24138,22 @@ class AgendaBase extends ViewBase {
                                 data.push(resDayCollection[0]);
                                 eventObj = {
                                     rowSpan: 1, type: 'eventColumn', resource: resColl[resColl.length - 1],
-                                    groupIndex: resData[res].groupIndex, groupOrder: resData[res].groupOrder,
-                                    resourceData: resData[res].resourceData, eventData: resDayCollection, date: agendaDate
+                                    groupIndex: resData[parseInt(res.toString(), 10)].groupIndex,
+                                    groupOrder: resData[parseInt(res.toString(), 10)].groupOrder,
+                                    resourceData: resData[parseInt(res.toString(), 10)].resourceData,
+                                    eventData: resDayCollection, date: agendaDate
                                 };
                                 dateObj = {
-                                    rowSpan: 1, type: 'dateColumn', resource: resColl[resColl.length - 1],
-                                    groupOrder: resData[res].groupOrder, resourceData: resData[res].resourceData,
+                                    rowSpan: 1, type: 'dateColumn', resource: resColl[parseInt((resColl.length - 1).toString(), 10)],
+                                    groupOrder: resData[parseInt(res.toString(), 10)].groupOrder,
+                                    resourceData: resData[parseInt(res.toString(), 10)].resourceData,
                                     date: agendaDate
                                 };
-                                if (!lastLevelInfo[tempIndex]) {
-                                    lastLevelInfo[tempIndex] = [];
+                                if (!lastLevelInfo[parseInt(tempIndex.toString(), 10)]) {
+                                    lastLevelInfo[parseInt(tempIndex.toString(), 10)] = [];
                                 }
-                                lastLevelInfo[tempIndex].push(eventObj);
-                                lastLevelInfo[tempIndex].push(dateObj);
+                                lastLevelInfo[parseInt(tempIndex.toString(), 10)].push(eventObj);
+                                lastLevelInfo[parseInt(tempIndex.toString(), 10)].push(dateObj);
                                 tempIndex++;
                             }
                             agendaDate = addDays(agendaDate, 1);
@@ -23912,12 +24161,13 @@ class AgendaBase extends ViewBase {
                                 || this.parent.currentView === 'MonthAgenda') {
                                 lastLevelInfo[lastLevelInfo.length - 1][1].cssClass = AGENDA_DAY_BORDER_CLASS;
                                 const tempObj = {
-                                    rowSpan: data.length, type: 'resourceColumn', resource: resColl[resColl.length - 1],
-                                    groupOrder: resData[res].groupOrder.slice(0, -1), resourceData: resData[res].resourceData,
+                                    rowSpan: data.length, type: 'resourceColumn', resource: resColl[parseInt((resColl.length - 1).toString(), 10)],
+                                    groupOrder: resData[parseInt(res.toString(), 10)].groupOrder.slice(0, -1),
+                                    resourceData: resData[parseInt(res.toString(), 10)].resourceData,
                                     groupIndex: (lastLevelInfo.length - data.length), className: [RESOURCE_NAME],
                                     date: agendaDate
                                 };
-                                lastLevelInfo[lastLevelInfo.length - data.length].push(tempObj);
+                                lastLevelInfo[parseInt((lastLevelInfo.length - data.length).toString(), 10)].push(tempObj);
                                 tempLastLevelInfo.push(extend({}, tempObj, null, true));
                                 break;
                             }
@@ -23933,15 +24183,15 @@ class AgendaBase extends ViewBase {
                         let z = 0;
                         for (let u = 0; u < tempLastLevelInfo.length; u++) {
                             // eslint-disable-next-line max-len
-                            if (tempLastLevelInfo[u].groupOrder[topResources.length - (y + 1)] === data[x][topResources[topResources.length - (y + 1)].idField]) {
-                                totalRowSpan = totalRowSpan + tempLastLevelInfo[u].rowSpan;
-                                tempGroupedData.push(extend({}, tempLastLevelInfo[u], null, true));
+                            if (tempLastLevelInfo[parseInt(u.toString(), 10)].groupOrder[topResources.length - (y + 1)] === data[parseInt(x.toString(), 10)][topResources[topResources.length - (y + 1)].idField]) {
+                                totalRowSpan = totalRowSpan + tempLastLevelInfo[parseInt(u.toString(), 10)].rowSpan;
+                                tempGroupedData.push(extend({}, tempLastLevelInfo[parseInt(u.toString(), 10)], null, true));
                             }
                             if (++z === tempLastLevelInfo.length && tempGroupedData.length > 0) {
                                 tempGroupedData[0].rowSpan = totalRowSpan;
                                 tempGroupedData[0].type = 'parentColumnLevel_' + (y + 1);
                                 tempGroupedData[0].resource = topResources[topResources.length - (y + 1)];
-                                tempGroupedData[0].resourceData = data[x];
+                                tempGroupedData[0].resourceData = data[parseInt(x.toString(), 10)];
                                 tempGroupedData[0].date = agendaDate;
                                 lastLevelInfo[tempGroupedData[0].groupIndex].push(tempGroupedData[0]);
                                 tempGroupedData = [];
@@ -23969,22 +24219,22 @@ class AgendaBase extends ViewBase {
             let tContentCollection = [];
             const parentCollection = this.parent.resourceBase.resourceCollection.slice(0, -1);
             for (let w = 0; w < tContent.length; w++) {
-                tContentCollection = tContentCollection.concat(tContent[w]);
+                tContentCollection = tContentCollection.concat(tContent[parseInt(w.toString(), 10)]);
             }
             level = (parentCollection.length > 0) ? 'parentColumnLevel_' + parentCollection.length : 'resourceColumn';
             const rowSpanCollection = tContentCollection.filter((data) => data.type === level);
             for (let x = 0; x < rowSpanCollection.length; x++) {
-                rowSpan = rowSpan + rowSpanCollection[x].rowSpan;
+                rowSpan = rowSpan + rowSpanCollection[parseInt(x.toString(), 10)].rowSpan;
             }
         }
         for (let row = 0; row < tContent.length; row++) {
             ntr = tr.cloneNode();
-            for (let col = tContent[row].length - 1; col >= 0; col--) {
-                const data = tContent[row][col];
+            for (let col = tContent[parseInt(row.toString(), 10)].length - 1; col >= 0; col--) {
+                const data = tContent[parseInt(row.toString(), 10)][parseInt(col.toString(), 10)];
                 let ntd = td.cloneNode();
                 if (data.type === 'dateColumn') {
                     if (this.parent.activeViewOptions.group.byDate || this.parent.currentView === 'MonthAgenda') {
-                        tempData = tContent[row][col];
+                        tempData = tContent[parseInt(row.toString(), 10)][parseInt(col.toString(), 10)];
                         continue;
                     }
                     ntd.setAttribute('data-date', data.date.getTime().toString());
@@ -24219,7 +24469,7 @@ class Agenda extends AgendaBase {
                     this.parent.activeViewOptions.allowVirtualScrolling = false;
                     date = firstDate;
                     if (this.parent.headerModule) {
-                        this.parent.headerModule.updateDateRange(this.parent.activeView.getDateRangeText());
+                        this.parent.headerModule.updateDateRange();
                         this.parent.headerModule.updateHeaderItems('remove');
                     }
                 }
@@ -24293,8 +24543,8 @@ class Agenda extends AgendaBase {
                 prepend([].slice.call(emptyTBody.childNodes), tBody);
                 this.wireEventActions();
                 for (let s = 0, element = tBody.children; s < element.length; s++) {
-                    if (element[s].getAttribute('data-row-index') === topElement.getAttribute('data-column-index')) {
-                        const scrollToValue = element[s].offsetTop -
+                    if (element[parseInt(s.toString(), 10)].getAttribute('data-row-index') === topElement.getAttribute('data-column-index')) {
+                        const scrollToValue = element[parseInt(s.toString(), 10)].offsetTop -
                             this.element.querySelector('.e-agenda-item').offsetHeight;
                         target.scrollTop = scrollToValue;
                         break;
@@ -24343,7 +24593,7 @@ class Agenda extends AgendaBase {
             }
             else {
                 for (let a = 0, length = liCollection.length; a < length; a++) {
-                    li = liCollection[a];
+                    li = liCollection[parseInt(a.toString(), 10)];
                     liDetails = li.getBoundingClientRect();
                     if (liDetails.top >= 0) {
                         filterElement = closest(li, '.' + AGENDA_CELLS_CLASS);
@@ -24356,7 +24606,7 @@ class Agenda extends AgendaBase {
     }
     updateHeaderText(date) {
         if (this.parent.showHeaderBar) {
-            this.parent.headerModule.updateDateRange(this.getDateRangeText(date));
+            this.parent.headerModule.updateDateRange(date);
         }
     }
     getPreviousNextDate(date, type) {
@@ -24557,11 +24807,18 @@ class MonthAgenda extends Month {
         }
         const contentArea = this.getContentAreaElement().firstElementChild;
         const dateHeader = this.element.querySelector('.' + DATE_HEADER_WRAP_CLASS);
-        const availHeight = this.parent.element.offsetHeight - headerHeight - dateHeader.offsetHeight - contentArea.offsetHeight;
+        const availHeight = this.parent.element.offsetHeight - headerHeight - dateHeader.offsetHeight;
+        const contentAreaHeight = (this.parent.activeViewOptions.interval > 1) ?
+            Math.round(availHeight * 0.8) : contentArea.offsetHeight;
+        const appContainerHeight = availHeight - contentAreaHeight;
         const wrapperContainer = this.element.querySelector('.' + WRAPPER_CONTAINER_CLASS);
         const eventWrapper = this.element.querySelector('.' + 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);
         }
     }
     onDataReady(args) {
@@ -24577,7 +24834,7 @@ class MonthAgenda extends Month {
         let count = 0;
         for (const date of this.renderDates) {
             const filterData = this.appointmentFiltering(date);
-            const workCell = this.element.querySelectorAll('.' + WORK_CELLS_CLASS)[count];
+            const workCell = this.element.querySelectorAll('.' + WORK_CELLS_CLASS)[parseInt(count.toString(), 10)];
             if (filterData.length > 0) {
                 if (!workCell.querySelector('.' + APPOINTMENT_INDICATOR_CLASS)) {
                     workCell.appendChild(createElement('div', { className: APPOINTMENT_INDICATOR_CLASS }));
@@ -24679,8 +24936,8 @@ class TimelineHeaderRow {
         const result = {};
         for (const d of dates) {
             const 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;
     }
@@ -24688,8 +24945,8 @@ class TimelineHeaderRow {
         const result = {};
         for (const d of dates) {
             const 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;
     }
@@ -24702,8 +24959,8 @@ class TimelineHeaderRow {
             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;
     }
@@ -24712,7 +24969,7 @@ class TimelineHeaderRow {
         const tdDatas = [];
         const keys = Object.keys(data);
         for (let i = 0; i < keys.length; i++) {
-            const dates = data[keys[i]];
+            const dates = data[keys[parseInt(i.toString(), 10)]];
             let htmlCol;
             if (row.template) {
                 const args = { date: dates[0], type: type };
@@ -24974,7 +25231,7 @@ class TimelineViews extends VerticalView {
         return 1;
     }
     getResourceTdData(i, tdData) {
-        const resLevel = this.parent.resourceBase.renderedResources[i];
+        const resLevel = this.parent.resourceBase.renderedResources[parseInt(i.toString(), 10)];
         const resSHr = resLevel.resourceData[resLevel.resource.startHourField] || this.parent.workHours.start;
         const resEHr = resLevel.resourceData[resLevel.resource.endHourField] || this.parent.workHours.end;
         tdData.startHour = this.parent.getStartEndTime(resSHr);
@@ -25023,7 +25280,7 @@ class TimelineViews extends VerticalView {
         else {
             const timeSlots = this.colLevels[this.colLevels.length - 1];
             for (let 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;
                 }
             }
@@ -25121,7 +25378,7 @@ class TimelineMonth extends Month {
             for (const data of this.colLevels[this.colLevels.length - 1]) {
                 data.className = [WORK_CELLS_CLASS];
                 if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
-                    const resLevel = this.parent.resourceBase.renderedResources[row];
+                    const 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;
@@ -25131,10 +25388,10 @@ class TimelineMonth extends Month {
                     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;
@@ -25173,7 +25430,7 @@ class TimelineMonth extends Month {
     getAdjustedDate(startTime) {
         const timeSlots = this.colLevels[this.colLevels.length - 1];
         for (let 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;
             }
         }
@@ -25245,11 +25502,11 @@ class TimelineYear extends Year {
             const months = this.getMonths();
             const dayHeaderDates = this.getMonthDates(new Date(this.parent.selectedDate.getFullYear(), months[0], 1));
             for (let column = 0; column < this.columnCount; column++) {
-                const date = new Date(this.parent.selectedDate.getFullYear(), months[column], 1);
+                const date = new Date(this.parent.selectedDate.getFullYear(), months[parseInt(column.toString(), 10)], 1);
                 const innerTd = createElement('td', { className: 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>`;
@@ -25257,7 +25514,7 @@ class TimelineYear extends Year {
                 }
                 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>`;
@@ -25371,7 +25628,7 @@ class TimelineYear extends Year {
         const dayHeaderDates = this.getMonthDates(new Date(this.parent.selectedDate.getFullYear(), months[0], 1));
         for (let month = 0; month < this.rowCount; month++) {
             wrapper.appendChild(createElement('div', { className: APPOINTMENT_CONTAINER_CLASS }));
-            let monthDate = new Date(this.parent.selectedDate.getFullYear(), months[month], 1);
+            let monthDate = new Date(this.parent.selectedDate.getFullYear(), months[parseInt(month.toString(), 10)], 1);
             let monthStart = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
             let monthEnd = this.parent.calendarUtil.getMonthEndDate(new Date(monthDate.getTime()));
             const tr = createElement('tr');
@@ -25391,7 +25648,7 @@ class TimelineYear extends Year {
             }
             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>`;
@@ -25403,11 +25660,11 @@ class TimelineYear extends Year {
             for (let column = 0; column < this.columnCount; column++) {
                 let isDateAvail;
                 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()));
                     const 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 {
@@ -25433,6 +25690,9 @@ class TimelineYear extends Year {
                     if (this.parent.activeViewOptions.workDays.indexOf(date.getDay()) > -1) {
                         classList$$1.push(WORKDAY_CLASS);
                     }
+                    if (!this.parent.isMinMaxDate(date)) {
+                        addClass([td], DISABLE_DATES);
+                    }
                     if (this.isCurrentDate(date)) {
                         classList$$1.push(CURRENT_DAY_CLASS);
                         if (this.parent.activeViewOptions.orientation === 'Horizontal') {
@@ -25448,6 +25708,9 @@ class TimelineYear extends Year {
                 }
                 else {
                     addClass([td], OTHERMONTH_CLASS);
+                    if (!this.parent.isMinMaxDate(date)) {
+                        addClass([td], DISABLE_DATES);
+                    }
                 }
                 if (td.classList.contains(OTHERMONTH_CLASS)) {
                     continue;
@@ -25475,9 +25738,9 @@ class TimelineYear extends Year {
             tRow.push(tr);
             let resData;
             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)];
             }
-            let monthDate = new Date(this.parent.selectedDate.getFullYear(), monthCells[row], 1);
+            let monthDate = new Date(this.parent.selectedDate.getFullYear(), monthCells[parseInt(row.toString(), 10)], 1);
             let date = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
             for (let month = 0; month < this.columnCount; month++) {
                 let classList$$1 = [];
@@ -25489,7 +25752,7 @@ class TimelineYear extends Year {
                 else {
                     classList$$1.push(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()));
                 const tdELe = createElement('td', {
                     className: WORK_CELLS_CLASS,
@@ -25516,9 +25779,9 @@ class TimelineYear extends Year {
             contentBody.appendChild(tr);
             let resData;
             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)];
             }
-            let monthDate = new Date(this.parent.selectedDate.getFullYear(), months[row], 1);
+            let monthDate = new Date(this.parent.selectedDate.getFullYear(), months[parseInt(row.toString(), 10)], 1);
             let date = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
             if (this.parent.activeViewOptions.orientation === 'Horizontal') {
                 const monthTr = tr.cloneNode();
@@ -25547,11 +25810,11 @@ class TimelineYear extends Year {
                     else {
                         classList$$1.push(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$$1.push(WORKDAY_CLASS);
                 }
                 const td = createElement('td', {
@@ -25707,7 +25970,7 @@ class ICalendarExport {
                 const exDate = eventObj[fields.recurrenceException].split(',');
                 for (let i = 0; i < exDate.length - 1; i++) {
                     calendarEvent.splice(5, 0, 'EXDATE:' +
-                        this.convertDateToString(getDateFromRecurrenceDateString(exDate[i]), eventObj[fields.isAllDay]));
+                        this.convertDateToString(getDateFromRecurrenceDateString(exDate[parseInt(i.toString(), 10)]), eventObj[fields.isAllDay]));
                 }
             }
             if (eventObj[fields.recurrenceID]) {
@@ -25716,7 +25979,7 @@ class ICalendarExport {
             }
             const customFields = this.customFieldFilter(eventObj, fields);
             if (customFields.length > 0) {
-                customFields.forEach((customField) => calendarEvent.splice(4, 0, customField + ':' + (eventObj[customField] || '')));
+                customFields.forEach((customField) => calendarEvent.splice(4, 0, customField + ':' + (eventObj[`${customField}`] || '')));
             }
             const app = extend({}, eventObj);
             app.UID = uId;
@@ -25736,7 +25999,7 @@ class ICalendarExport {
         return icsString;
     }
     customFieldFilter(eventObj, fields) {
-        const defaultFields = Object.keys(fields).map((key) => fields[key]);
+        const defaultFields = Object.keys(fields).map((key) => fields[`${key}`]);
         const eventFields = Object.keys(eventObj);
         return eventFields.filter((value) => (defaultFields.indexOf(value) === -1) && (value !== 'Guid'));
     }
@@ -25770,7 +26033,7 @@ class ICalendarExport {
         }
     }
     filterEvents(data, field, value) {
-        return data.filter((e) => e[field] === value);
+        return data.filter((e) => e[`${field}`] === value);
     }
     getModuleName() {
         return 'iCalendarExport';
@@ -25858,7 +26121,7 @@ class ICalendarImport {
                         case 'BEGIN':
                             break;
                         case 'UID':
-                            curEvent[uId] = value;
+                            curEvent[`${uId}`] = value;
                             if (typeof (id) == 'number') {
                                 curEvent[fields.id] = parseInt(value, 10);
                                 if (isNaN(curEvent[fields.id])) {
@@ -25888,10 +26151,10 @@ class ICalendarImport {
                         default:
                             if (this.parent.resourceCollection.length > 0) {
                                 const resData = this.parent.resourceCollection.filter((data) => data.field === type);
-                                curEvent[type] = (resData.length > 0 && (typeof (resData[0].dataSource[0][resData[0].idField]) == 'number')) ? parseInt(value, 10) : value;
+                                curEvent[`${type}`] = (resData.length > 0 && (typeof (resData[0].dataSource[0][resData[0].idField]) == 'number')) ? parseInt(value, 10) : value;
                             }
                             else {
-                                curEvent[type] = value;
+                                curEvent[`${type}`] = value;
                             }
                     }
                 }
@@ -25917,29 +26180,29 @@ class ICalendarImport {
                 id = eventObj[fields.id];
             }
             if (appointmentIds.indexOf(eventObj[fields.id]) < 0) {
-                const data = app.filter((data) => data.UID === eventObj[uId]);
+                const data = app.filter((data) => data.UID === eventObj[`${uId}`]);
                 if (data.length > 1 && isNullOrUndefined(eventObj[fields.recurrenceID])) {
                     id = typeof (maxId) === 'number' ? maxId++ : id;
                     for (let i = 0; i < data.length; i++) {
                         // eslint-disable-next-line no-prototype-builtins
-                        if (data[i].hasOwnProperty(fields.recurrenceID)) {
-                            const exdate = data[i][fields.recurrenceID];
-                            data[i][fields.id] = typeof (maxId) === 'number' ? maxId++ : this.parent.eventBase.generateGuid();
-                            data[i][fields.recurrenceID] = id;
-                            data[i][fields.recurrenceException] = null;
+                        if (data[parseInt(i.toString(), 10)].hasOwnProperty(fields.recurrenceID)) {
+                            const exdate = data[parseInt(i.toString(), 10)][fields.recurrenceID];
+                            data[parseInt(i.toString(), 10)][fields.id] = typeof (maxId) === 'number' ? maxId++ : this.parent.eventBase.generateGuid();
+                            data[parseInt(i.toString(), 10)][fields.recurrenceID] = id;
+                            data[parseInt(i.toString(), 10)][fields.recurrenceException] = null;
                             parentObj[fields.recurrenceException] =
                                 this.getExcludeDateString(parentObj[fields.recurrenceException], exdate);
-                            delete data[i][uId];
-                            appoint.push(data[i]);
+                            delete data[parseInt(i.toString(), 10)][`${uId}`];
+                            appoint.push(data[parseInt(i.toString(), 10)]);
                         }
                     }
-                    delete parentObj[uId];
+                    delete parentObj[`${uId}`];
                     parentObj[fields.id] = id;
                     appoint.push(parentObj);
                     // eslint-disable-next-line no-prototype-builtins
                 }
                 else if (!eventObj.hasOwnProperty(fields.recurrenceID)) {
-                    delete eventObj[uId];
+                    delete eventObj[`${uId}`];
                     eventObj[fields.id] = typeof (maxId) === 'number' ? maxId++ : id;
                     appoint.push(eventObj);
                 }
@@ -25968,8 +26231,7 @@ class ICalendarImport {
         return (value.replace(/\\\,/g, ',').replace(/\\\;/g, ';').replace(/\\[nN]/g, '\n').replace(/\\\\/g, '\\'));
     }
     dateParsing(element) {
-        const expression = /([^':;]+)((?:;(?:[^':;]+)(?:=(?:(?:'[^']*')|(?:[^':;]+))))*):(.*)/;
-        const split = (element.match(expression)).slice(1);
+        const split = element.split(':');
         const value = split[split.length - 1];
         let newDate = new Date(this.getDateString(value));
         if (element && (element.indexOf('VALUE=DATE') > -1 || element.indexOf('RECURRENCE-ID;TZID') > -1)) {
@@ -26056,7 +26318,7 @@ class ExcelExport {
     getExportColumns(exportOptions) {
         const exportColumns = exportOptions.fieldsInfo || [];
         if (exportColumns.length === 0) {
-            const fields = exportOptions.fields || Object.keys(this.parent.eventFields).map((field) => this.parent.eventFields[field]);
+            const fields = exportOptions.fields || Object.keys(this.parent.eventFields).map((field) => this.parent.eventFields[`${field}`]);
             fields.forEach((field) => { exportColumns.push({ name: field, text: field }); });
         }
         return exportColumns;