@syncfusion/ej2-schedule 20.3.58 → 20.4.38

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

@@ -46,11 +46,12 @@ var InlineEdit = /** @class */ (function () {
         var start = util.resetTime(new Date('' + saveObj[this.parent.eventFields.startTime])).getTime();
         var end = util.resetTime(new Date('' + saveObj[this.parent.eventFields.endTime])).getTime();
         var resIndex = args.groupIndex || 0;
-        if (this.parent.currentView === 'Day' || this.parent.currentView === 'Week' || this.parent.currentView === 'WorkWeek') {
+        var isVertical = this.parent.currentView === 'Day' || this.parent.currentView === 'Week' || this.parent.currentView === 'WorkWeek';
+        if (this.parent.activeViewOptions.timeScale.enable && isVertical) {
             var 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 {
@@ -100,7 +101,7 @@ var InlineEdit = /** @class */ (function () {
         var count = this.getEventDaysCount(saveObj);
         var verticalEvent = new VerticalEvent(this.parent);
         verticalEvent.initializeValues();
-        var index = verticalEvent.dateRender[resIndex].map(function (date) { return date.getDay(); }).indexOf(dayIndex);
+        var index = verticalEvent.dateRender[parseInt(resIndex.toString(), 10)].map(function (date) { return date.getDay(); }).indexOf(dayIndex);
         if (count >= 1) {
             verticalEvent.allDayElement = [].slice.call(this.parent.element.querySelectorAll('.' + cls.ALLDAY_CELLS_CLASS));
             (_a = verticalEvent.slots).push.apply(_a, this.parent.activeView.renderDates.map(function (date) { return +date; }));
@@ -128,14 +129,16 @@ var InlineEdit = /** @class */ (function () {
         var monthCellSelector = '.' + cls.WORK_CELLS_CLASS;
         if (this.parent.activeViewOptions.group.resources.length > 0) {
             monthCellSelector += '[data-group-index="' + index + '"]';
-            var resourceData = this.parent.resourceBase.lastResourceLevel[index];
+            var 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 = util.getElementHeightFromClass(this.parent.monthModule.element, cls.APPOINTMENT_CLASS);
+        monthEvent.eventHeight =
+            util.getElementHeightFromClass(this.parent.monthModule.element || monthEvent.element, cls.APPOINTMENT_CLASS);
         monthEvent.getSlotDates(workDays);
         var filteredDates = monthEvent.getRenderedDates(renderDates);
         var spannedEvents = monthEvent.splitEvent(saveObject, filteredDates || renderDates);

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

@@ -44,7 +44,8 @@ var MonthEvent = /** @class */ (function (_super) {
     }
     MonthEvent.prototype.removeEventWrapper = function (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 (var _i = 0, appElement_1 = appElement; _i < appElement_1.length; _i++) {
                 var wrap = appElement_1[_i];
                 if (wrap.parentElement && wrap.parentElement.parentNode) {
@@ -67,12 +68,13 @@ var MonthEvent = /** @class */ (function (_super) {
         if (this.parent.crudModule && this.parent.crudModule.crudObj.isCrudAction) {
             for (var i = 0, len = this.parent.crudModule.crudObj.sourceEvent.length; i < len; i++) {
                 var 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) {
                     var 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);
                 }
             }
@@ -134,7 +136,7 @@ var MonthEvent = /** @class */ (function (_super) {
                 var totalCells_1 = [].slice.call(this.parent.element.querySelectorAll('.e-content-wrap table tr td:first-child'));
                 var weekNumberCells = [].slice.call(this.parent.element.querySelectorAll('.' + cls.WEEK_NUMBER_CLASS));
                 weekNumberCells.forEach(function (cell, i) {
-                    var height = totalCells_1[i].offsetHeight;
+                    var height = totalCells_1[parseInt(i.toString(), 10)].offsetHeight;
                     setStyleAttribute(cell, { 'height': height + 'px' });
                 });
                 this.parent.element.querySelector('.' + cls.WEEK_NUMBER_WRAPPER_CLASS).scrollTop =
@@ -188,7 +190,7 @@ var MonthEvent = /** @class */ (function (_super) {
         }
         for (var level = 0; level < this.slots.length; level++) {
             this.renderedEvents = [];
-            var slot = this.slots[level];
+            var slot = this.slots[parseInt(level.toString(), 10)];
             var endDate = util.addDays(new Date(slot[slot.length - 1]), 1);
             var spannedEvents = this.filterEvents(new Date(slot[0]), endDate, events);
             for (var _a = 0, spannedEvents_1 = spannedEvents; _a < spannedEvents_1.length; _a++) {
@@ -296,7 +298,7 @@ var MonthEvent = /** @class */ (function (_super) {
         return event[this.fields.endTime];
     };
     MonthEvent.prototype.getCellTd = function (day) {
-        return this.workCells[day];
+        return this.workCells[parseInt(day.toString(), 10)];
     };
     MonthEvent.prototype.getEventWidth = function (startDate, endDate, isAllDay, count) {
         return count * this.cellWidth - 1;
@@ -343,11 +345,11 @@ var MonthEvent = /** @class */ (function (_super) {
             this.parent.resourceBase.renderedResources;
         if (this.parent.crudModule && this.parent.crudModule.crudObj.isCrudAction) {
             for (var i = 0, len = this.parent.crudModule.crudObj.sourceEvent.length; i < len; i++) {
-                var sourceRes = this.parent.crudModule.crudObj.sourceEvent[i];
+                var 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) {
-                    var 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) {
+                    var target = this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)];
                     this.renderEventsHandler(target.renderDates, target.workDays, target);
                 }
             }
@@ -363,7 +365,8 @@ var MonthEvent = /** @class */ (function (_super) {
     MonthEvent.prototype.getSlotDates = function (workDays) {
         this.slots = [];
         var dates = this.dateRender.map(function (date) { return +date; });
-        var noOfDays = this.parent.activeViewOptions.showWeekend ? util.WEEK_LENGTH : workDays.length;
+        var noOfDays = !this.parent.activeViewOptions.showWeekend || (this.parent.activeViewOptions.group.byDate &&
+            this.parent.activeViewOptions.group.hideNonWorkingDays) ? workDays.length : util.WEEK_LENGTH;
         while (dates.length > 0) {
             this.slots.push(dates.splice(0, noOfDays));
         }
@@ -500,7 +503,7 @@ var MonthEvent = /** @class */ (function (_super) {
         var diffInDays = event.data.count;
         if (startTime.getTime() <= endTime.getTime()) {
             var appWidth = (diffInDays * this.cellWidth) - 5;
-            var cellTd = this.workCells[day];
+            var cellTd = this.workCells[parseInt(day.toString(), 10)];
             var appTop = (overlapCount * (this.eventHeight + EVENT_GAP));
             var height = this.monthHeaderHeight + ((overlapCount + 1) * (this.eventHeight + EVENT_GAP)) + this.moreIndicatorHeight;
             var enableAppRender = this.maxOrIndicator ? overlapCount < 1 ? true : false : this.cellHeight > height;

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

@@ -114,12 +114,12 @@ var TimelineEvent = /** @class */ (function (_super) {
             this.parent.resourceBase.renderedResources;
         if (this.parent.crudModule && this.parent.crudModule.crudObj.isCrudAction) {
             for (var i = 0, len = this.parent.crudModule.crudObj.sourceEvent.length; i < len; i++) {
-                var source = this.parent.crudModule.crudObj.sourceEvent[i];
+                var source = this.parent.crudModule.crudObj.sourceEvent[parseInt(i.toString(), 10)];
                 this.rowIndex = source.groupIndex;
                 this.renderEventsHandler(this.parent.activeView.renderDates, this.parent.activeViewOptions.workDays, source);
-                if (this.parent.crudModule.crudObj.targetEvent[i] && this.parent.crudModule.crudObj.sourceEvent[i].groupIndex !==
-                    this.parent.crudModule.crudObj.targetEvent[i].groupIndex) {
-                    var 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) {
+                    var 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);
                 }
@@ -129,7 +129,7 @@ var TimelineEvent = /** @class */ (function (_super) {
         else {
             for (var 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)]);
             }
         }
     };
@@ -175,10 +175,10 @@ var TimelineEvent = /** @class */ (function (_super) {
             var position = this.getPosition(startTime, endTime, event[this.fields.isAllDay], this.day);
             appWidth_1 = (appWidth_1 <= 0) ? this.cellWidth : appWidth_1; // 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);
             }
-            var top_1 = this.cellTops[resIndex];
+            var top_1 = this.cellTops[parseInt(resIndex.toString(), 10)];
             var appTop = (top_1 + (this.maxHeight ? 0 : EVENT_GAP)) + (overlapCount * (appHeight + EVENT_GAP));
             appLeft = (this.parent.enableRtl) ? 0 : position;
             appRight = (this.parent.enableRtl) ? position : 0;
@@ -444,7 +444,7 @@ var TimelineEvent = /** @class */ (function (_super) {
         if (this.renderType === 'day' || isAllDay) {
             return (day * this.slotsPerDay) * this.cellWidth;
         }
-        var currentDate = util.resetTime(new Date(this.dateRender[day].getTime()));
+        var currentDate = util.resetTime(new Date(this.dateRender[parseInt(day.toString(), 10)].getTime()));
         var schedule = util.getStartEndHours(currentDate, this.startHour, this.endHour);
         var cellIndex;
         if (schedule.endHour.getTime() <= endTime.getTime() && schedule.startHour.getTime() >= startTime.getTime()) {
@@ -474,7 +474,7 @@ var TimelineEvent = /** @class */ (function (_super) {
         for (var i = 0; i < moreIndicator.length; i++) {
             var indicatorPos = void 0;
             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;
@@ -491,7 +491,7 @@ var TimelineEvent = /** @class */ (function (_super) {
     };
     TimelineEvent.prototype.getCellTd = function () {
         var wrapIndex = this.parent.uiStateValues.isGroupAdaptive ? 0 : this.rowIndex;
-        return this.eventContainers[wrapIndex];
+        return this.eventContainers[parseInt(wrapIndex.toString(), 10)];
     };
     TimelineEvent.prototype.renderBlockIndicator = function (cellTd, position, resIndex) {
         // No need to render block icon for Year, Month and Week header rows

package/src/schedule/event-renderer/vertical-view.d.ts

@@ -40,6 +40,7 @@ export declare class VerticalEvent extends EventBase {
     private createMoreIndicator;
     private renderSpannedIcon;
     isSpannedEvent(record: Record<string, any>, day: number, resource: number): Record<string, any>;
+    private isWorkDayAvailable;
     renderAllDayEvents(eventObj: Record<string, any>, dayIndex: number, resource: number, dayCount: number, inline?: boolean): void;
     renderNormalEvents(eventObj: Record<string, any>, dayIndex: number, resource: number, dayCount: number, inline?: boolean): void;
     private getEventWidth;

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

@@ -60,8 +60,8 @@ var VerticalEvent = /** @class */ (function (_super) {
                 wrapper.classList.contains(cls.ROW_COUNT_WRAPPER_CLASS))) {
                 var groupIndex = parseInt(wrapper.getAttribute('data-group-index'), 10);
                 for (var 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);
                     }
                 }
@@ -116,7 +116,7 @@ var VerticalEvent = /** @class */ (function (_super) {
         this.dateRender[0] = this.parent.activeView.renderDates;
         if (this.parent.activeViewOptions.group.resources.length > 0) {
             for (var 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;
             }
         }
     };
@@ -150,11 +150,11 @@ var VerticalEvent = /** @class */ (function (_super) {
         var dateCount = this.getStartCount();
         for (var _i = 0, resources_1 = resources; _i < resources_1.length; _i++) {
             var resource = resources_1[_i];
-            var renderDates = this.dateRender[resource];
+            var renderDates = this.dateRender[parseInt(resource.toString(), 10)];
             for (var day = 0, length_1 = renderDates.length; day < length_1; day++) {
-                var startDate = new Date(renderDates[day].getTime());
-                var endDate = util.addDays(renderDates[day], 1);
-                var filterEvents = this.filterEvents(startDate, endDate, this.parent.blockProcessed, this.resources[resource]);
+                var startDate = new Date(renderDates[parseInt(day.toString(), 10)].getTime());
+                var endDate = util.addDays(renderDates[parseInt(day.toString(), 10)], 1);
+                var filterEvents = this.filterEvents(startDate, endDate, this.parent.blockProcessed, this.resources[parseInt(resource.toString(), 10)]);
                 for (var _a = 0, filterEvents_1 = filterEvents; _a < filterEvents_1.length; _a++) {
                     var event_1 = filterEvents_1[_a];
                     if (this.parent.resourceBase) {
@@ -172,9 +172,9 @@ var VerticalEvent = /** @class */ (function (_super) {
         var spannedData = this.isSpannedEvent(eventObj, dayIndex, resource);
         var eStart = spannedData[this.fields.startTime];
         var eEnd = spannedData[this.fields.endTime];
-        var currentDate = util.resetTime(new Date(this.dateRender[resource][dayIndex].getTime()));
+        var currentDate = util.resetTime(new Date(this.dateRender[parseInt(resource.toString(), 10)][parseInt(dayIndex.toString(), 10)].getTime()));
         var schedule = util.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)) {
             var blockTop = void 0;
             var blockHeight = void 0;
             if (spannedData[this.fields.isAllDay]) {
@@ -188,9 +188,7 @@ var VerticalEvent = /** @class */ (function (_super) {
             }
             var appointmentElement = this.createBlockAppointmentElement(eventObj, resource, this.isResourceEventTemplate);
             setStyleAttribute(appointmentElement, { 'width': '100%', 'height': blockHeight, 'top': blockTop });
-            var renderedIndex = this.getDayIndex(dayIndex, resource);
-            var index = this.parent.activeViewOptions.group.byDate ?
-                (this.resources.length * renderedIndex) + resource : dayCount;
+            var index = this.getDayIndex(dayIndex, resource, dayCount);
             this.appendEvent(eventObj, appointmentElement, index, '0px');
         }
     };
@@ -210,15 +208,15 @@ var VerticalEvent = /** @class */ (function (_super) {
                 }
             }
             this_1.slots = [];
-            var renderDates = this_1.dateRender[resource];
+            var renderDates = this_1.dateRender[parseInt(resource.toString(), 10)];
             var renderedDate = this_1.getRenderedDates(renderDates) || renderDates;
             this_1.slots.push(renderDates.map(function (date) { return +date; }));
             for (var day = 0, length_2 = renderDates.length; day < length_2 &&
-                renderDates[day] <= renderedDate[renderedDate.length - 1]; day++) {
+                renderDates[parseInt(day.toString(), 10)] <= renderedDate[renderedDate.length - 1]; day++) {
                 this_1.renderedEvents = [];
-                var startDate = new Date(renderDates[day].getTime());
-                var endDate = util.addDays(renderDates[day], 1);
-                var filterEvents = this_1.filterEvents(startDate, endDate, eventCollection, this_1.resources[resource]);
+                var startDate = new Date(renderDates[parseInt(day.toString(), 10)].getTime());
+                var endDate = util.addDays(renderDates[parseInt(day.toString(), 10)], 1);
+                var filterEvents = this_1.filterEvents(startDate, endDate, eventCollection, this_1.resources[parseInt(resource.toString(), 10)]);
                 if (isRender) {
                     for (var _i = 0, filterEvents_2 = filterEvents; _i < filterEvents_2.length; _i++) {
                         var event_2 = filterEvents_2[_i];
@@ -266,15 +264,37 @@ var VerticalEvent = /** @class */ (function (_super) {
         return this.parent.virtualScrollModule && this.parent.activeViewOptions.allowVirtualScrolling && this.parent.timeScale.enable ?
             parseInt(this.element.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS).getAttribute('id').split('-').slice(-1)[0], 10) : 0;
     };
-    VerticalEvent.prototype.getDayIndex = function (dayIndex, resource) {
-        return this.parent.activeViewOptions.group.byDate ?
-            this.parent.resourceBase.lastResourceLevel[0].renderDates.indexOf(this.dateRender[resource][dayIndex]) :
-            dayIndex;
+    VerticalEvent.prototype.getDayIndex = function (dayIndex, resource, dayCount) {
+        var _this = this;
+        if (!this.parent.activeViewOptions.group.byDate) {
+            return dayCount;
+        }
+        if (this.parent.activeViewOptions.group.byDate && !this.parent.activeViewOptions.group.hideNonWorkingDays) {
+            var renderedIndex = this.parent.resourceBase.lastResourceLevel[0].renderDates.indexOf(this.dateRender[parseInt(resource.toString(), 10)][parseInt(dayIndex.toString(), 10)]);
+            return (this.resources.length * renderedIndex) + resource;
+        }
+        var dateIndex = 0;
+        var firstColumn = this.parent.activeView.colLevels[0];
+        var currentDate = this.dateRender[parseInt(resource.toString(), 10)][parseInt(dayIndex.toString(), 10)].getTime();
+        var currentResources = [];
+        for (var 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;
+        }
+        var resIndex = currentResources.findIndex(function (x) { return x.groupOrder.toString() ===
+            _this.resources[parseInt(resource.toString(), 10)].groupOrder.toString(); });
+        if (resIndex < 0) {
+            return dateIndex;
+        }
+        return dateIndex + resIndex;
     };
     VerticalEvent.prototype.setValues = function (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);
@@ -387,7 +407,7 @@ var VerticalEvent = /** @class */ (function (_super) {
     };
     VerticalEvent.prototype.createMoreIndicator = function (allDayRow, count, currentDay) {
         var index = currentDay + count;
-        var countWrapper = allDayRow[index];
+        var countWrapper = allDayRow[parseInt(index.toString(), 10)];
         if (countWrapper.childElementCount <= 0) {
             var innerCountWrap = createElement('div', {
                 className: cls.ROW_COUNT_WRAPPER_CLASS,
@@ -433,8 +453,8 @@ var VerticalEvent = /** @class */ (function (_super) {
         }
     };
     VerticalEvent.prototype.isSpannedEvent = function (record, day, resource) {
-        var currentDate = util.resetTime(this.dateRender[resource][day]);
-        var renderedDate = this.getRenderedDates(this.dateRender[resource]) || [currentDate];
+        var currentDate = util.resetTime(this.dateRender[parseInt(resource.toString(), 10)][parseInt(day.toString(), 10)]);
+        var renderedDate = this.getRenderedDates(this.dateRender[parseInt(resource.toString(), 10)]) || [currentDate];
         var currentDay = renderedDate.filter(function (date) { return date.getDay() === day; });
         if (currentDay.length === 0) {
             currentDate = util.resetTime(renderedDate[0]);
@@ -456,12 +476,22 @@ var VerticalEvent = /** @class */ (function (_super) {
         event[field.endTime] = eventDates.endDate;
         return event;
     };
+    VerticalEvent.prototype.isWorkDayAvailable = function (resource, start) {
+        if (this.parent.activeViewOptions.group.hideNonWorkingDays && this.resources.length > 0) {
+            var 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;
+    };
     VerticalEvent.prototype.renderAllDayEvents = function (eventObj, dayIndex, resource, dayCount, inline) {
         var _this = this;
-        var currentDates = this.getRenderedDates(this.dateRender[resource]) || this.dateRender[resource];
+        var 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)]];
         }
         var record = this.splitEvent(eventObj, currentDates)[0];
         var allDayRowCell = this.element.querySelector('.' + cls.ALLDAY_CELLS_CLASS + ':first-child');
@@ -472,16 +502,17 @@ var VerticalEvent = /** @class */ (function (_super) {
         var topValue = 1;
         var isDateRange = currentDates[0].getTime() <= eStart.getTime() &&
             util.addDays(currentDates.slice(-1)[0], 1).getTime() >= eStart.getTime();
-        if (eStart <= eEnd && isDateRange) {
+        if (eStart <= eEnd && isDateRange && this.isWorkDayAvailable(resource, eStart)) {
             var isAlreadyRendered = [];
-            if (this.renderedAllDayEvents[resource]) {
-                isAlreadyRendered = this.renderedAllDayEvents[resource].filter(function (event) {
+            if (this.renderedAllDayEvents[parseInt(resource.toString(), 10)]) {
+                isAlreadyRendered = this.renderedAllDayEvents[parseInt(resource.toString(), 10)].filter(function (event) {
                     return event.Guid === eventObj.Guid;
                 });
                 if (this.parent.activeViewOptions.group.byDate) {
                     isAlreadyRendered = isAlreadyRendered.filter(function (event) {
-                        return event[_this.parent.eventFields.startTime] >= currentDates[dayIndex] &&
-                            event[_this.parent.eventFields.endTime] <= util.addDays(new Date(+currentDates[dayIndex]), 1);
+                        return event[_this.parent.eventFields.startTime] >= currentDates[parseInt(dayIndex.toString(), 10)] &&
+                            event[_this.parent.eventFields.endTime] <=
+                                util.addDays(new Date(+currentDates[parseInt(dayIndex.toString(), 10)]), 1);
                     });
                 }
             }
@@ -495,14 +526,12 @@ var VerticalEvent = /** @class */ (function (_super) {
                 if (allDayDifference_1 >= 0) {
                     appWidth = (allDayDifference_1 * 100) - widthAdjustment;
                 }
-                if (isNullOrUndefined(this.renderedAllDayEvents[resource])) {
-                    this.renderedAllDayEvents[resource] = [];
+                if (isNullOrUndefined(this.renderedAllDayEvents[parseInt(resource.toString(), 10)])) {
+                    this.renderedAllDayEvents[parseInt(resource.toString(), 10)] = [];
                 }
-                var renderedIndex = this.getDayIndex(dayIndex, resource);
-                this.renderedAllDayEvents[resource].push(extend({}, record, null, true));
+                this.renderedAllDayEvents[parseInt(resource.toString(), 10)].push(extend({}, record, null, true));
                 var allDayRow_1 = [].slice.call(this.element.querySelector('.' + cls.ALLDAY_ROW_CLASS).children);
-                var wIndex_1 = this.parent.activeViewOptions.group.byDate ?
-                    (this.resources.length * renderedIndex) + resource : dayCount;
+                var wIndex_1 = this.getDayIndex(dayIndex, resource, dayCount);
                 var eventWrapper_1 = this.element.querySelector('.' + cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS +
                     ':nth-child(' + (wIndex_1 + 1) + ')');
                 var appointmentElement_1;
@@ -546,13 +575,13 @@ var VerticalEvent = /** @class */ (function (_super) {
         var appWidth = '0%';
         var appLeft = '0%';
         var topValue = 0;
-        var currentDate = util.resetTime(new Date(this.dateRender[resource][dayIndex].getTime()));
+        var currentDate = util.resetTime(new Date(this.dateRender[parseInt(resource.toString(), 10)][parseInt(dayIndex.toString(), 10)].getTime()));
         var schedule = util.getStartEndHours(currentDate, this.startHour, this.endHour);
         var 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)) {
             var appHeight_1 = this.getHeight(eStart, eEnd);
             if (eStart.getTime() > schedule.startHour.getTime()) {
                 topValue = this.getTopValue(eStart, dayIndex, resource);
@@ -561,27 +590,26 @@ var VerticalEvent = /** @class */ (function (_super) {
             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();
-            var renderedIndex = this.getDayIndex(dayIndex, resource);
             var argsData = {
                 index: appIndex, left: appLeft, width: appWidth,
-                day: renderedIndex, dayIndex: dayCount, record: record, resource: resource
+                day: dayCount, dayIndex: dayIndex, record: record, resource: resource
             };
             var 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));
             var appointmentElement = void 0;
             if (inline) {
                 appointmentElement = this.parent.inlineModule.createInlineAppointmentElement(eventObj);
@@ -599,8 +627,7 @@ var VerticalEvent = /** @class */ (function (_super) {
             if (!this.parent.isAdaptive && subjectElement) {
                 subjectElement.style.maxHeight = formatUnit(maxHeight);
             }
-            var index = this.parent.activeViewOptions.group.byDate ?
-                (this.resources.length * renderedIndex) + resource : dayCount;
+            var index = this.getDayIndex(dayIndex, resource, dayCount);
             var eventData = {};
             eventData[this.fields.startTime] = eventObj[this.fields.startTime];
             eventData[this.fields.endTime] = eventObj[this.fields.endTime];
@@ -625,7 +652,7 @@ var VerticalEvent = /** @class */ (function (_super) {
         return (tempLeft > 99 ? 99 : tempLeft) + '%';
     };
     VerticalEvent.prototype.getTopValue = function (date, day, resource) {
-        var startEndHours = util.getStartEndHours(util.resetTime(this.dateRender[resource][day]), this.startHour, this.endHour);
+        var startEndHours = util.getStartEndHours(util.resetTime(this.dateRender[parseInt(resource.toString(), 10)][parseInt(day.toString(), 10)]), this.startHour, this.endHour);
         var startHour = startEndHours.startHour;
         var diffInMinutes = ((date.getHours() - startHour.getHours()) * 60) + (date.getMinutes() - startHour.getMinutes());
         return (this.parent.activeViewOptions.timeScale.enable) ? ((diffInMinutes * this.cellHeight * this.slotCount) / this.interval) : 0;
@@ -637,20 +664,20 @@ var VerticalEvent = /** @class */ (function (_super) {
         var appIndex = -1;
         this.overlapEvents = [];
         if (isAllDay) {
-            if (!isNullOrUndefined(this.renderedAllDayEvents[resource])) {
-                var date_1 = util.resetTime(new Date(this.dateRender[resource][day].getTime()));
-                eventsList = this.renderedAllDayEvents[resource].filter(function (app) {
+            if (!isNullOrUndefined(this.renderedAllDayEvents[parseInt(resource.toString(), 10)])) {
+                var date_1 = util.resetTime(new Date(this.dateRender[parseInt(resource.toString(), 10)][parseInt(day.toString(), 10)].getTime()));
+                eventsList = this.renderedAllDayEvents[parseInt(resource.toString(), 10)].filter(function (app) {
                     return util.resetTime(app[fieldMapping.startTime]).getTime() <= date_1.getTime() &&
                         util.resetTime(app[fieldMapping.endTime]).getTime() >= date_1.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 {
-            var appointmentList_1 = !isNullOrUndefined(this.renderedEvents[resource]) ?
-                this.renderedEvents[resource] : [];
+            var appointmentList_1 = !isNullOrUndefined(this.renderedEvents[parseInt(resource.toString(), 10)]) ?
+                this.renderedEvents[parseInt(resource.toString(), 10)] : [];
             var appointment_1 = [];
             var recordStart_1 = record[fieldMapping.startTime];
             var recordEnd_1 = record[fieldMapping.endTime];
@@ -661,14 +688,14 @@ var VerticalEvent = /** @class */ (function (_super) {
                         data[fieldMapping.startTime].getTime() === recordStart_1.getTime() && data[fieldMapping.endTime] < recordEnd_1);
             });
             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(function (obj) {
                 var filterList = appointmentList_1.filter(function (data) {
                     return 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);
                 }
                 var collection = filterList.filter(function (val) {
                     return _this.overlapList.indexOf(val) === -1;
@@ -679,7 +706,8 @@ var VerticalEvent = /** @class */ (function (_super) {
             });
             for (var i = 0; i < appointment_1.length - 1; i++) {
                 for (var j = i + 1; j < appointment_1.length; j++) {
-                    if (appointment_1[i][fieldMapping.id] === appointment_1[j][fieldMapping.id]) {
+                    if (appointment_1[parseInt(i.toString(), 10)][fieldMapping.id] ===
+                        appointment_1[parseInt(j.toString(), 10)][fieldMapping.id]) {
                         appointment_1.splice(j, 1);
                         j--;
                     }
@@ -691,11 +719,11 @@ var VerticalEvent = /** @class */ (function (_super) {
                 var event_4 = eventsList_1[_i];
                 var record_1 = event_4;
                 var index = record_1.Index;
-                if (isNullOrUndefined(this.overlapEvents[index])) {
-                    this.overlapEvents[index] = [event_4];
+                if (isNullOrUndefined(this.overlapEvents[parseInt(index.toString(), 10)])) {
+                    this.overlapEvents[parseInt(index.toString(), 10)] = [event_4];
                 }
                 else {
-                    this.overlapEvents[index].push(event_4);
+                    this.overlapEvents[parseInt(index.toString(), 10)].push(event_4);
                 }
             }
         }
@@ -719,13 +747,12 @@ var VerticalEvent = /** @class */ (function (_super) {
     VerticalEvent.prototype.adjustOverlapElements = function (args) {
         var data = { appWidth: args.width, appLeft: args.left };
         for (var i = 0, length1 = this.overlapEvents.length; i < length1; i++) {
-            if (!isNullOrUndefined(this.overlapEvents[i])) {
-                for (var j = 0, length2 = this.overlapEvents[i].length; j < length2; j++) {
-                    var dayCount = this.parent.activeViewOptions.group.byDate ?
-                        (this.resources.length * args.day) + args.resource : args.dayIndex;
+            if (!isNullOrUndefined(this.overlapEvents[parseInt(i.toString(), 10)])) {
+                for (var j = 0, length2 = this.overlapEvents[parseInt(i.toString(), 10)].length; j < length2; j++) {
+                    var dayCount = this.getDayIndex(args.dayIndex, args.resource, args.day);
                     var element = this.element.querySelector('#e-appointment-wrapper-' + dayCount);
                     if (element && element.childElementCount > 0) {
-                        var eleGuid = this.overlapEvents[i][j].Guid;
+                        var 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) {
                             var apps = element.querySelector('div[data-guid="' + eleGuid + '"]');
                             if (parseFloat(args.width) <= parseFloat(apps.style.width)) {