@syncfusion/ej2-schedule 20.3.61 → 20.4.38

package/src/schedule/base/resource.js

@@ -12,6 +12,7 @@ var ResourceBase = /** @class */ (function () {
     function ResourceBase(parent) {
         this.resourceCollection = [];
         this.leftPixel = 25;
+        this.resourceDateTree = [];
         this.parent = parent;
     }
     ResourceBase.prototype.renderResourceHeaderIndent = function (tr) {
@@ -34,8 +35,8 @@ var ResourceBase = /** @class */ (function () {
         }
         var trCount = this.lastResourceLevel.length;
         for (var i = 0; i < trCount; i++) {
-            var resData = this.lastResourceLevel[i].resourceData;
-            var res = this.lastResourceLevel[i].resource;
+            var resData = this.lastResourceLevel[parseInt(i.toString(), 10)].resourceData;
+            var res = this.lastResourceLevel[parseInt(i.toString(), 10)].resource;
             if (resData.ClassName === cls.RESOURCE_PARENT_CLASS && !resData[res.expandedField] &&
                 !isNullOrUndefined(resData[res.expandedField])) {
                 var trCollection = [].slice.call(tBody.children);
@@ -78,10 +79,10 @@ var ResourceBase = /** @class */ (function () {
     ResourceBase.prototype.setExpandedResources = function () {
         var resources = [];
         for (var i = 0; i < this.lastResourceLevel.length; i++) {
-            var resource = this.lastResourceLevel[i].resourceData;
+            var resource = this.lastResourceLevel[parseInt(i.toString(), 10)].resourceData;
             var count = resource.Count;
-            resources.push(this.lastResourceLevel[i]);
-            var isExpanded = resource[this.lastResourceLevel[i].resource.expandedField];
+            resources.push(this.lastResourceLevel[parseInt(i.toString(), 10)]);
+            var isExpanded = resource[this.lastResourceLevel[parseInt(i.toString(), 10)].resource.expandedField];
             if (!isNullOrUndefined(isExpanded) && !isExpanded && count > 0) {
                 i = i + count;
             }
@@ -97,21 +98,21 @@ var ResourceBase = /** @class */ (function () {
         var td = createElement('td', { attrs: { tabindex: isVirtualScroll ? '-1' : '0' } });
         for (var i = 0; i < resData.length; i++) {
             var ntd = td.cloneNode();
-            rIndex = util.findIndexInData(resColl, 'name', resData[i].resource.name);
+            rIndex = util.findIndexInData(resColl, 'name', resData[parseInt(i.toString(), 10)].resource.name);
             if (rIndex === resColl.length - 1) {
-                extend(resData[i].resourceData, { ClassName: cls.RESOURCE_CHILD_CLASS });
-                this.renderedResources[i].className = [cls.RESOURCE_CHILD_CLASS];
+                extend(resData[parseInt(i.toString(), 10)].resourceData, { ClassName: cls.RESOURCE_CHILD_CLASS });
+                this.renderedResources[parseInt(i.toString(), 10)].className = [cls.RESOURCE_CHILD_CLASS];
             }
             else {
-                extend(resData[i].resourceData, { ClassName: cls.RESOURCE_PARENT_CLASS });
-                this.renderedResources[i].className = [cls.RESOURCE_PARENT_CLASS];
+                extend(resData[parseInt(i.toString(), 10)].resourceData, { ClassName: cls.RESOURCE_PARENT_CLASS });
+                this.renderedResources[parseInt(i.toString(), 10)].className = [cls.RESOURCE_PARENT_CLASS];
             }
             left = (rIndex * this.leftPixel) + 'px';
-            if (resData[i].resourceData.ClassName === cls.RESOURCE_PARENT_CLASS
-                && !isNullOrUndefined(resData[i].resourceData.Count) && (resData[i].resourceData.Count > 0)) {
+            if (resData[parseInt(i.toString(), 10)].resourceData.ClassName === cls.RESOURCE_PARENT_CLASS
+                && !isNullOrUndefined(resData[parseInt(i.toString(), 10)].resourceData.Count) && (resData[parseInt(i.toString(), 10)].resourceData.Count > 0)) {
                 var iconClass = void 0;
-                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 = cls.RESOURCE_COLLAPSE_CLASS;
                 }
                 else {
@@ -125,15 +126,15 @@ var ResourceBase = /** @class */ (function () {
                     EventHandler.add(iconDiv, 'click', this.onTreeIconClick, this);
                 }
             }
-            this.parent.activeView.setResourceHeaderContent(ntd, resData[i], cls.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)], cls.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('.' + cls.RESOURCE_TEXT_CLASS), left);
             }
-            var classCollection = [cls.RESOURCE_CELLS_CLASS, resData[i].resourceData.ClassName];
+            var classCollection = [cls.RESOURCE_CELLS_CLASS, resData[parseInt(i.toString(), 10)].resourceData.ClassName];
             addClass([ntd], classCollection);
-            var args = { elementType: 'resourceHeader', element: ntd, groupIndex: resData[i].groupIndex };
+            var args = { elementType: 'resourceHeader', element: ntd, groupIndex: resData[parseInt(i.toString(), 10)].groupIndex };
             this.parent.trigger(events.renderCell, args);
             var ntr = tr.cloneNode();
             ntr.appendChild(ntd);
@@ -156,17 +157,17 @@ var ResourceBase = /** @class */ (function () {
             for (var x = 0; x < data.length; x++) {
                 var totalCount = 0;
                 if (this.parent.activeViewOptions.group.byGroupID) {
-                    var query = new Query().where(wholeCollection[wholeCollection.length - 1].groupIDField, 'equal', data[x][parentCollection[parentCollection.length - (y + 1)].idField]);
+                    var 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 (var 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);
         }
@@ -222,7 +223,7 @@ var ResourceBase = /** @class */ (function () {
         var workCellCollection = [];
         var headerRowCollection = [];
         var pNode;
-        var clickedRes = this.lastResourceLevel[index].resourceData;
+        var clickedRes = this.lastResourceLevel[parseInt(index.toString(), 10)].resourceData;
         var resRows = [].slice.call(this.parent.element.querySelectorAll('.' + cls.RESOURCE_COLUMN_WRAP_CLASS + ' ' + 'tr'));
         var contentRows = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CONTENT_WRAP_CLASS + ' ' + 'tbody tr'));
         var eventRows = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CONTENT_WRAP_CLASS + ' .' + cls.APPOINTMENT_CONTAINER_CLASS));
@@ -234,45 +235,45 @@ var ResourceBase = /** @class */ (function () {
         var clonedCollection = this.lastResourceLevel;
         for (var i = 0; i < rowCollection.length; i++) {
             var expanded = true;
-            pNode = rowCollection[i].children[0].classList.contains(cls.RESOURCE_PARENT_CLASS);
-            clonedCollection[index].resourceData[clonedCollection[index].resource.expandedField] = !hide;
+            pNode = rowCollection[parseInt(i.toString(), 10)].children[0].classList.contains(cls.RESOURCE_PARENT_CLASS);
+            clonedCollection[parseInt(index.toString(), 10)].resourceData[clonedCollection[parseInt(index.toString(), 10)].resource.expandedField] = !hide;
             if (hide) {
                 if (pNode) {
-                    var trElem = rowCollection[i].querySelector('.' + cls.RESOURCE_TREE_ICON_CLASS);
+                    var trElem = rowCollection[parseInt(i.toString(), 10)].querySelector('.' + cls.RESOURCE_TREE_ICON_CLASS);
                     if (trElem) {
                         classList(trElem, [cls.RESOURCE_EXPAND_CLASS], [cls.RESOURCE_COLLAPSE_CLASS]);
                     }
                 }
-                if (!rowCollection[i].classList.contains(cls.HIDDEN_CLASS)) {
-                    addClass([rowCollection[i], workCellCollection[i], headerRowCollection[i]], cls.HIDDEN_CLASS);
+                if (!rowCollection[parseInt(i.toString(), 10)].classList.contains(cls.HIDDEN_CLASS)) {
+                    addClass([rowCollection[parseInt(i.toString(), 10)], workCellCollection[parseInt(i.toString(), 10)], headerRowCollection[parseInt(i.toString(), 10)]], cls.HIDDEN_CLASS);
                 }
             }
             else {
                 if (pNode) {
-                    var 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)));
+                    var 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) {
-                        var trElem = rowCollection[i].querySelector('.' + cls.RESOURCE_TREE_ICON_CLASS);
+                        var trElem = rowCollection[parseInt(i.toString(), 10)].querySelector('.' + cls.RESOURCE_TREE_ICON_CLASS);
                         if (trElem) {
                             classList(trElem, [cls.RESOURCE_COLLAPSE_CLASS], [cls.RESOURCE_EXPAND_CLASS]);
                         }
                     }
                 }
-                if (rowCollection[i].classList.contains(cls.HIDDEN_CLASS)) {
-                    removeClass([rowCollection[i], workCellCollection[i], headerRowCollection[i]], cls.HIDDEN_CLASS);
+                if (rowCollection[parseInt(i.toString(), 10)].classList.contains(cls.HIDDEN_CLASS)) {
+                    removeClass([rowCollection[parseInt(i.toString(), 10)], workCellCollection[parseInt(i.toString(), 10)], headerRowCollection[parseInt(i.toString(), 10)]], cls.HIDDEN_CLASS);
                 }
             }
         }
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     ResourceBase.prototype.updateVirtualContent = function (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();
         var resourceCount = this.parent.virtualScrollModule.getRenderedCount();
         var startIndex = this.expandedResources.indexOf(this.renderedResources[0]);
@@ -363,7 +364,7 @@ var ResourceBase = /** @class */ (function () {
         var groupIndex = 0;
         var _loop_1 = function (i, len) {
             var treeHandler = function (treeLevel, index, levelId) {
-                var resource = _this.resourceCollection[index];
+                var resource = _this.resourceCollection[parseInt(index.toString(), 10)];
                 var treeArgs;
                 var resObj;
                 if (!isTimeLine) {
@@ -403,10 +404,10 @@ var ResourceBase = /** @class */ (function () {
                 return treeArgs;
             };
             if (!isTimeLine) {
-                treeCollection.push(treeHandler(this_1.resourceTreeLevel[i], 0, (i + 1).toString()));
+                treeCollection.push(treeHandler(this_1.resourceTreeLevel[parseInt(i.toString(), 10)], 0, (i + 1).toString()));
             }
             else {
-                treeHandler(this_1.resourceTreeLevel[i], 0, (i + 1).toString());
+                treeHandler(this_1.resourceTreeLevel[parseInt(i.toString(), 10)], 0, (i + 1).toString());
             }
         };
         var this_1 = this;
@@ -425,9 +426,9 @@ var ResourceBase = /** @class */ (function () {
         var resource = this.lastResourceLevel[this.parent.uiStateValues.groupIndex];
         var headerCollection = [];
         var _loop_2 = function (i, len) {
-            var resourceLevel = this_2.resourceCollection[i];
+            var resourceLevel = this_2.resourceCollection[parseInt(i.toString(), 10)];
             var resourceText = resourceLevel.dataSource.filter(function (resData) {
-                return resData[resourceLevel.idField] === resource.groupOrder[i];
+                return resData[resourceLevel.idField] === resource.groupOrder[parseInt(i.toString(), 10)];
             });
             var resourceName = createElement('div', {
                 className: cls.RESOURCE_NAME,
@@ -524,8 +525,8 @@ var ResourceBase = /** @class */ (function () {
         }
         this.parent.resourceCollection = [];
         for (var i = 0, length_1 = e.length; i < length_1; i++) {
-            var resource = this.parent.resources[i];
-            var resourceObj = this.getResourceModel(resource, e[i].result);
+            var resource = this.parent.resources[parseInt(i.toString(), 10)];
+            var resourceObj = this.getResourceModel(resource, e[parseInt(i.toString(), 10)].result);
             this.parent.resourceCollection.push(resourceObj);
         }
         this.refreshLayout(isSetModel);
@@ -564,7 +565,7 @@ var ResourceBase = /** @class */ (function () {
                 var resource = _a[_i];
                 var index_1 = util.findIndexInData(this.parent.resourceCollection, 'name', resource);
                 if (index_1 >= 0) {
-                    requiredResources.push(this.parent.resourceCollection[index_1]);
+                    requiredResources.push(this.parent.resourceCollection[parseInt(index_1.toString(), 10)]);
                 }
             }
         }
@@ -609,8 +610,8 @@ var ResourceBase = /** @class */ (function () {
                     if (prevOrder && prevOrder.length > 0) {
                         groupOrder = groupOrder.concat(prevOrder);
                     }
-                    groupOrder.push(data[i][resource.idField]);
-                    var items = group(resources.slice(1), index + 1, resource, data[i], groupOrder);
+                    groupOrder.push(data[parseInt(i.toString(), 10)][resource.idField]);
+                    var 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;
@@ -619,9 +620,9 @@ var ResourceBase = /** @class */ (function () {
                     var renderDates = _this.parent.activeView.renderDates;
                     var resWorkDays = void 0;
                     if (!_this.parent.activeViewOptions.group.byDate && index + 1 === _this.resourceCollection.length) {
-                        var workDays = data[i][resource.workDaysField];
-                        var resStartHour = data[i][resource.startHourField];
-                        var resEndHour = data[i][resource.endHourField];
+                        var workDays = data[parseInt(i.toString(), 10)][resource.workDaysField];
+                        var resStartHour = data[parseInt(i.toString(), 10)][resource.startHourField];
+                        var resEndHour = data[parseInt(i.toString(), 10)][resource.endHourField];
                         if (workDays && workDays.length > 0) {
                             renderDates = _this.parent.activeView.getRenderDates(workDays);
                             resWorkDays = workDays;
@@ -634,22 +635,22 @@ var ResourceBase = /** @class */ (function () {
                         var dateSlots = _this.generateCustomHours(dateCol, resStartHour, resEndHour, groupOrder);
                         lastColumnDates = lastColumnDates.concat(dateSlots);
                     }
-                    var resCssClass = data[i][resource.cssClassField];
+                    var resCssClass = data[parseInt(i.toString(), 10)][resource.cssClassField];
                     var 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;
             }
@@ -678,12 +679,12 @@ var ResourceBase = /** @class */ (function () {
         var headerLevels = [];
         for (var i = resTreeGroup.length - 1; i >= 0; i--) {
             var temp = 0;
-            for (var _i = 0, _a = resTreeGroup[i]; _i < _a.length; _i++) {
+            for (var _i = 0, _a = resTreeGroup[parseInt(i.toString(), 10)]; _i < _a.length; _i++) {
                 var currentLevelChilds = _a[_i];
                 for (var _b = 0, currentLevelChilds_1 = currentLevelChilds; _b < currentLevelChilds_1.length; _b++) {
                     var currentLevelChild = currentLevelChilds_1[_b];
                     if (resTreeGroup[i + 1] && resTreeGroup[i + 1].length > 0) {
-                        var nextLevelChilds = resTreeGroup[i + 1][temp];
+                        var nextLevelChilds = resTreeGroup[parseInt((i + 1).toString(), 10)][parseInt(temp.toString(), 10)];
                         if (!nextLevelChilds) {
                             continue;
                         }
@@ -711,7 +712,7 @@ var ResourceBase = /** @class */ (function () {
             for (var _d = 0, _e = this.lastResourceLevel; _d < _e.length; _d++) {
                 var lastLevelResource = _e[_d];
                 for (var i = 0; i < lastLevelResource.colSpan; i++) {
-                    lastColumnDates[index].groupIndex = lastLevelResource.groupIndex;
+                    lastColumnDates[parseInt(index.toString(), 10)].groupIndex = lastLevelResource.groupIndex;
                     index++;
                 }
             }
@@ -720,21 +721,106 @@ var ResourceBase = /** @class */ (function () {
         }
         var dateHeaderLevels = [];
         var levels = extend([], headerLevels, null, true);
+        var datesColumn = [];
+        if (this.parent.activeViewOptions.group.hideNonWorkingDays) {
+            var renderDates_1 = [];
+            var dateIndex = 0;
+            var _loop_3 = function (headerDate) {
+                this_3.resourceDateTree[parseInt(dateIndex.toString(), 10)] = [];
+                var currentDateLevels = [];
+                var _loop_4 = function (j) {
+                    var workDays = this_3.lastResourceLevel[parseInt(j.toString(), 10)].resourceData[this_3.lastResourceLevel[parseInt(j.toString(), 10)].resource.workDaysField];
+                    if (!workDays) {
+                        workDays = this_3.parent.activeViewOptions.workDays;
+                    }
+                    if (workDays.indexOf(headerDate.date.getDay()) !== -1) {
+                        var resTd_1 = extend({}, this_3.lastResourceLevel[parseInt(j.toString(), 10)], null, true);
+                        resTd_1.date = headerDate.date;
+                        this_3.lastResourceLevel[parseInt(j.toString(), 10)].workDays = workDays;
+                        resTd_1.startHour = this_3.parent.getStartEndTime(resTd_1.resourceData[resTd_1.resource.startHourField]) ||
+                            headerDate.startHour;
+                        resTd_1.endHour = this_3.parent.getStartEndTime(resTd_1.resourceData[resTd_1.resource.endHourField]) ||
+                            headerDate.endHour;
+                        this_3.resourceDateTree[parseInt(dateIndex.toString(), 10)].push(resTd_1);
+                        var _loop_5 = function (k) {
+                            if (!currentDateLevels[parseInt(k.toString(), 10)]) {
+                                currentDateLevels[parseInt(k.toString(), 10)] = [];
+                            }
+                            if (k === resTd_1.groupOrder.length - 1) {
+                                if (!renderDates_1[parseInt(j.toString(), 10)]) {
+                                    renderDates_1[parseInt(j.toString(), 10)] = [];
+                                }
+                                var filterDates = resTd_1.renderDates.filter(function (x) { return x.getDay() === headerDate.date.getDay(); });
+                                renderDates_1[parseInt(j.toString(), 10)] = renderDates_1[parseInt(j.toString(), 10)].concat(filterDates);
+                                currentDateLevels[parseInt(k.toString(), 10)].push(resTd_1);
+                                return "continue";
+                            }
+                            var currentLevel = levels[parseInt(k.toString(), 10)];
+                            var filteredResource = currentLevel.filter(function (data) {
+                                return data.resourceData[data.resource.idField] === resTd_1.groupOrder[parseInt(k.toString(), 10)];
+                            });
+                            if (filteredResource && filteredResource.length > 0) {
+                                var existedResource = currentDateLevels[parseInt(k.toString(), 10)].filter(function (data) {
+                                    return data.resourceData[data.resource.idField] === resTd_1.groupOrder[parseInt(k.toString(), 10)];
+                                });
+                                if (existedResource && existedResource.length > 0) {
+                                    existedResource[0].colSpan += 1;
+                                }
+                                else {
+                                    var filteredTd = extend({}, filteredResource[0], null, true);
+                                    filteredTd.colSpan = 1;
+                                    currentDateLevels[parseInt(k.toString(), 10)].push(filteredTd);
+                                }
+                            }
+                        };
+                        for (var k = 0; k < resTd_1.groupOrder.length; k++) {
+                            _loop_5(k);
+                        }
+                    }
+                };
+                for (var j = 0; j < this_3.lastResourceLevel.length; j++) {
+                    _loop_4(j);
+                }
+                if (currentDateLevels.length > 0) {
+                    for (var 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++;
+            };
+            var this_3 = this;
+            for (var _f = 0, headerDates_1 = headerDates; _f < headerDates_1.length; _f++) {
+                var headerDate = headerDates_1[_f];
+                _loop_3(headerDate);
+            }
+            this.resourceDateTree = this.resourceDateTree.filter(function (data) { return data.length > 0; });
+            this.lastResourceLevel.forEach(function (x, index) {
+                if (renderDates_1[parseInt(index.toString(), 10)]) {
+                    x.renderDates = renderDates_1[parseInt(index.toString(), 10)].sort(function (a, b) { return a.getTime() - b.getTime(); });
+                }
+            });
+            dateHeaderLevels.unshift(datesColumn);
+            return dateHeaderLevels;
+        }
         var dateColSpan = 0;
-        for (var _f = 0, _g = levels[0]; _f < _g.length; _f++) {
-            var firstRowTd = _g[_f];
+        for (var _g = 0, _h = levels[0]; _g < _h.length; _g++) {
+            var firstRowTd = _h[_g];
             dateColSpan += firstRowTd.colSpan;
         }
-        var datesColumn = [];
-        for (var _h = 0, headerDates_1 = headerDates; _h < headerDates_1.length; _h++) {
-            var headerDate = headerDates_1[_h];
+        for (var _j = 0, headerDates_2 = headerDates; _j < headerDates_2.length; _j++) {
+            var headerDate = headerDates_2[_j];
             headerDate.colSpan = dateColSpan;
             datesColumn.push(headerDate);
             var resGroup = extend([], levels, null, true);
             for (var k = 0, length_2 = resGroup.length; k < length_2; k++) {
                 if (k === resGroup.length - 1) {
-                    for (var _j = 0, _k = resGroup[k]; _j < _k.length; _j++) {
-                        var resTd = _k[_j];
+                    for (var _k = 0, _l = resGroup[parseInt(k.toString(), 10)]; _k < _l.length; _k++) {
+                        var resTd = _l[_k];
                         resTd.date = headerDate.date;
                         resTd.workDays = headerDate.workDays;
                         resTd.startHour = this.parent.getStartEndTime(resTd.resourceData[resTd.resource.startHourField]) ||
@@ -743,10 +829,10 @@ var ResourceBase = /** @class */ (function () {
                             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);
@@ -755,11 +841,11 @@ var ResourceBase = /** @class */ (function () {
     ResourceBase.prototype.setResourceValues = function (eventObj, groupIndex) {
         var _this = this;
         var setValues = function (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) {
@@ -767,16 +853,16 @@ var ResourceBase = /** @class */ (function () {
                 this.parent.activeCellsData.groupIndex;
         }
         if (this.parent.activeViewOptions.group.resources.length > 0 && !isNullOrUndefined(groupIndex)) {
-            var groupOrder = this.lastResourceLevel[groupIndex].groupOrder;
+            var groupOrder = this.lastResourceLevel[parseInt(groupIndex.toString(), 10)].groupOrder;
             for (var 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 (var index = 0; index < this.resourceCollection.length; index++) {
-                var data = this.resourceCollection[index].dataSource[0];
+                var 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]);
                 }
             }
         }
@@ -784,11 +870,11 @@ var ResourceBase = /** @class */ (function () {
     ResourceBase.prototype.getResourceColor = function (eventObj, groupOrder) {
         var colorFieldIndex = (!isNullOrUndefined(groupOrder) &&
             this.colorIndex > groupOrder.length - 1) ? groupOrder.length - 1 : this.colorIndex;
-        var resource = this.resourceCollection[colorFieldIndex];
+        var resource = this.resourceCollection[parseInt(colorFieldIndex.toString(), 10)];
         if (isNullOrUndefined(groupOrder) && this.parent.activeViewOptions.group.allowGroupEdit && resource.allowMultiple) {
             return undefined;
         }
-        var id = isNullOrUndefined(groupOrder) ? eventObj[resource.field] : groupOrder[colorFieldIndex];
+        var id = isNullOrUndefined(groupOrder) ? eventObj[resource.field] : groupOrder[parseInt(colorFieldIndex.toString(), 10)];
         var data = this.filterData(resource.dataSource, resource.idField, id);
         if (data.length > 0) {
             return data[0][resource.colorField];
@@ -817,35 +903,35 @@ var ResourceBase = /** @class */ (function () {
         return renderDates;
     };
     ResourceBase.prototype.filterData = function (dataSource, field, value) {
-        return dataSource.filter(function (data) { return data[field] === value; });
+        return dataSource.filter(function (data) { return data["" + field] === value; });
     };
     ResourceBase.prototype.getResourceData = function (eventObj, index, groupEditIndex) {
         if (this.parent.activeViewOptions.group.allowGroupEdit) {
             var resourceObj = {};
             for (var _i = 0, groupEditIndex_1 = groupEditIndex; _i < groupEditIndex_1.length; _i++) {
                 var groupIndex = groupEditIndex_1[_i];
-                var resourceLevel = this.lastResourceLevel[groupIndex].groupOrder;
+                var resourceLevel = this.lastResourceLevel[parseInt(groupIndex.toString(), 10)].groupOrder;
                 for (var level = 0, length_3 = resourceLevel.length; level < length_3; level++) {
-                    var fieldName = this.resourceCollection[level].field;
-                    if (isNullOrUndefined(resourceObj[fieldName])) {
-                        resourceObj[fieldName] = [];
+                    var 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 (var level = 0, length_4 = this.resourceCollection.length; level < length_4; 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)];
                 }
             }
         }
     };
     ResourceBase.prototype.addResource = function (resources, name, index) {
         var resourceCollection = (resources instanceof Array) ? resources : [resources];
-        var _loop_3 = function (resource) {
+        var _loop_6 = function (resource) {
             if (resource.name === name) {
                 resourceCollection.forEach(function (addObj, i) {
                     return new DataManager({ json: resource.dataSource }).insert(addObj, null, null, index + i);
@@ -855,7 +941,7 @@ var ResourceBase = /** @class */ (function () {
         };
         for (var _i = 0, _a = this.parent.resourceCollection; _i < _a.length; _i++) {
             var resource = _a[_i];
-            var state_1 = _loop_3(resource);
+            var state_1 = _loop_6(resource);
             if (state_1 === "break")
                 break;
         }
@@ -863,7 +949,7 @@ var ResourceBase = /** @class */ (function () {
     };
     ResourceBase.prototype.removeResource = function (resourceId, name) {
         var resourceCollection = (resourceId instanceof Array) ? resourceId : [resourceId];
-        var _loop_4 = function (resource) {
+        var _loop_7 = function (resource) {
             if (resource.name === name) {
                 resourceCollection.forEach(function (removeObj) {
                     return new DataManager({ json: resource.dataSource }).remove(resource.idField, removeObj);
@@ -873,7 +959,7 @@ var ResourceBase = /** @class */ (function () {
         };
         for (var _i = 0, _a = this.parent.resourceCollection; _i < _a.length; _i++) {
             var resource = _a[_i];
-            var state_2 = _loop_4(resource);
+            var state_2 = _loop_7(resource);
             if (state_2 === "break")
                 break;
         }
@@ -889,7 +975,7 @@ var ResourceBase = /** @class */ (function () {
         }
         var resource = resourceData.dataSource.filter(function (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;
@@ -992,7 +1078,7 @@ var ResourceBase = /** @class */ (function () {
             }
             var offsetTarget = this.parent.element.querySelector("." + cls.HEADER_ROW_CLASS + ":nth-child(" + (levelIndex + 1) + ")");
             var offset = [].slice.call(offsetTarget.children).map(function (node) { return node.offsetLeft; });
-            scrollElement.scrollLeft = offset[index];
+            scrollElement.scrollLeft = offset[parseInt(index.toString(), 10)];
         }
     };
     ResourceBase.prototype.destroy = function () {

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

@@ -321,6 +321,13 @@ export interface ScheduleModel extends ComponentModel{
      */
     dateHeaderTemplate?: string;
 
+    /**
+     * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the header date range.
+     *
+     * @default null
+     */
+    dateRangeTemplate?: string;
+
     /**
      * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto
      * the month date cells. This template is only applicable for month view day cells.

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

@@ -83,6 +83,7 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
     private cellHeaderTemplateFn;
     private cellTemplateFn;
     private dateHeaderTemplateFn;
+    private dateRangeTemplateFn;
     private dayHeaderTemplateFn;
     private monthHeaderTemplateFn;
     private majorSlotTemplateFn;
@@ -420,6 +421,12 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @default null
      */
     dateHeaderTemplate: string;
+    /**
+     * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto the header date range.
+     *
+     * @default null
+     */
+    dateRangeTemplate: string;
     /**
      * It accepts either the string or HTMLElement as template design content and parse it appropriately before displaying it onto
      * the month date cells. This template is only applicable for month view day cells.
@@ -1136,6 +1143,13 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @private
      */
     getDateHeaderTemplate(): CallbackFunction;
+    /**
+     * Method to process date range template
+     *
+     * @returns {CallbackFunction} Returns the callback function
+     * @private
+     */
+    getDateRangeTemplate(): CallbackFunction;
     /**
      * Method to process major slot template
      *
@@ -1669,6 +1683,15 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @returns {void}
      */
     closeQuickInfoPopup(): void;
+    /**
+     * 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(): void;
     /**
      * Select the resource based on group index in mobile mode.
      *