@syncfusion/ej2-schedule 20.1.52 → 20.1.57

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

@@ -3631,6 +3631,10 @@ function generate(startDate, rule, excludeDate, startDayOfWeek, maximumCount = M
     }
     maxOccurrence = maximumCount;
     setFirstDayOfWeek(DAYINDEX[startDayOfWeek]);
+    if (ruleObject.until) {
+        const end = resetTime(ruleObject.until);
+        ruleObject.until = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 23, 59, 59);
+    }
     switch (ruleObject.freq) {
         case 'DAILY':
             dailyType(modifiedDate, ruleObject.until, data, ruleObject);
@@ -3727,6 +3731,9 @@ function dailyType(startDate, endDate, data, ruleObject) {
             }
         }
         tempDate.setDate(tempDate.getDate() + interval);
+        if (tempDate.getHours() !== startDate.getHours()) {
+            tempDate.setHours(startDate.getHours());
+        }
     }
 }
 /**
@@ -3771,6 +3778,9 @@ function weeklyType(startDate, endDate, data, ruleObject) {
                     break;
                 }
                 tempDate.setDate(tempDate.getDate() + 1);
+                if (tempDate.getHours() !== startDate.getHours()) {
+                    tempDate.setHours(startDate.getHours());
+                }
                 compareTempDate = new Date(tempDate.getTime());
                 compareTempDate = resetTime(compareTempDate);
             }
@@ -4652,7 +4662,7 @@ function insertDateCollection(state, startDate, endDate, data, ruleObject, dayDa
 function weekCount(year, startDayOfWeek, monthCollection, week, ruleObject) {
     const firstDayOfWeek = startDayOfWeek || 0;
     const firstOfMonth = new Date(year, ruleObject.month[0] - 1, 1);
-    const lastOfMonth = new Date(year, ruleObject.month[0] - 1, 0);
+    const lastOfMonth = new Date(year, ruleObject.month[0], 0);
     const numberOfDaysInMonth = lastOfMonth.getDate();
     const firstWeekDay = (firstOfMonth.getDay() - firstDayOfWeek + 7) % 7;
     const used = firstWeekDay + numberOfDaysInMonth;
@@ -5605,6 +5615,9 @@ class EventBase {
             this.parent.removeSelectedClass();
         }
         addClass(cells, APPOINTMENT_BORDER);
+        if (cells.length > 0) {
+            cells[cells.length - 1].focus();
+        }
     }
     getSelectedAppointments() {
         return [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_BORDER + ',.' + APPOINTMENT_CLASS + ':focus'));
@@ -5705,7 +5718,7 @@ class EventBase {
     isAllDayAppointment(event) {
         const fieldMapping = this.parent.eventFields;
         const isAllDay = event[fieldMapping.isAllDay];
-        const isFullDay = ((event[fieldMapping.endTime].getTime() - event[fieldMapping.startTime].getTime())
+        const isFullDay = ((getUniversalTime(event[fieldMapping.endTime]) - getUniversalTime(event[fieldMapping.startTime]))
             / MS_PER_DAY) >= 1;
         return (isAllDay || (this.parent.eventSettings.spannedEventPlacement !== 'TimeSlot' && isFullDay)) ? true : false;
     }
@@ -6252,16 +6265,18 @@ class EventBase {
         }
     }
     updateEventMinimumDuration(startEndHours, startTime, endTime) {
-        const eventDuration = (getUniversalTime(endTime) - getUniversalTime(startTime)) / MS_PER_MINUTE;
-        if (eventDuration < this.parent.eventSettings.minimumEventDuration) {
-            const tempEnd = new Date(startTime);
-            tempEnd.setMinutes(tempEnd.getMinutes() + this.parent.eventSettings.minimumEventDuration);
-            endTime = tempEnd;
-            if (endTime.getTime() > startEndHours.endHour.getTime()) {
-                const tempStart = new Date(startEndHours.endHour.getTime());
-                tempStart.setMinutes(tempStart.getMinutes() - this.parent.eventSettings.minimumEventDuration);
-                startTime = tempStart;
-                endTime = startEndHours.endHour;
+        if (startTime.getTime() < endTime.getTime()) {
+            const eventDuration = (getUniversalTime(endTime) - getUniversalTime(startTime)) / MS_PER_MINUTE;
+            if (eventDuration < this.parent.eventSettings.minimumEventDuration) {
+                const tempEnd = new Date(startTime);
+                tempEnd.setMinutes(tempEnd.getMinutes() + this.parent.eventSettings.minimumEventDuration);
+                endTime = tempEnd;
+                if (endTime.getTime() > startEndHours.endHour.getTime()) {
+                    const tempStart = new Date(startEndHours.endHour.getTime());
+                    tempStart.setMinutes(tempStart.getMinutes() - this.parent.eventSettings.minimumEventDuration);
+                    startTime = tempStart;
+                    endTime = startEndHours.endHour;
+                }
             }
         }
         return { startDate: startTime, endDate: endTime };
@@ -6773,6 +6788,9 @@ class VerticalEvent extends EventBase {
         const currentDate = resetTime(new Date(this.dateRender[resource][dayIndex].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) {
             const appHeight = this.getHeight(eStart, eEnd);
             if (eStart.getTime() > schedule.startHour.getTime()) {
@@ -7096,7 +7114,7 @@ class MonthEvent extends EventBase {
         if (appElement.length > 0) {
             appElement = (this.parent.currentView === 'Month') ? appElement : [appElement[0]];
             for (const wrap of appElement) {
-                if (!wrap.classList.contains('e-more-indicator') && wrap.parentElement && wrap.parentElement.parentNode) {
+                if (wrap.parentElement && wrap.parentElement.parentNode) {
                     remove(wrap.parentElement);
                 }
             }
@@ -7226,11 +7244,18 @@ class MonthEvent extends EventBase {
         const filteredDates = this.getRenderedDates(dateRender);
         this.getSlotDates(workDays || this.parent.activeViewOptions.workDays);
         this.processBlockEvents(blockList, resIndex, resData);
+        let events = [];
         for (const event of eventsList) {
             if (this.parent.resourceBase && !resData) {
                 this.cssClass = this.parent.resourceBase.getCssClass(event);
             }
-            const spannedEvents = this.splitEvent(event, filteredDates || this.dateRender);
+            events = events.concat(this.splitEvent(event, filteredDates || this.dateRender));
+        }
+        for (let level = 0; level < this.slots.length; level++) {
+            this.renderedEvents = [];
+            const slot = this.slots[level];
+            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) {
                 if (this.maxHeight) {
                     const sDate = this.parent.currentView === 'Month' ? event[this.fields.startTime] :
@@ -7526,24 +7551,20 @@ class MonthEvent extends EventBase {
         const startTime = event[this.fields.startTime];
         const endTime = event[this.fields.endTime];
         const day = this.parent.getIndexOfDate(this.dateRender, resetTime(startTime));
-        if (day < 0) {
-            return;
-        }
-        if ((startTime.getTime() < this.parent.minDate.getTime()) || (endTime.getTime() > this.parent.maxDate.getTime())) {
+        if ((day < 0) || (startTime.getTime() < this.parent.minDate.getTime()) || (endTime.getTime() > this.parent.maxDate.getTime())) {
             return;
         }
         const overlapCount = this.getIndex(startTime);
         event.Index = overlapCount;
-        let appHeight = this.eventHeight;
-        this.renderedEvents.push(extend({}, event, null, true));
         const diffInDays = event.data.count;
         if (startTime.getTime() <= endTime.getTime()) {
             const appWidth = (diffInDays * this.cellWidth) - 5;
             const cellTd = this.workCells[day];
-            const appTop = (overlapCount * (appHeight + EVENT_GAP));
-            const height = this.monthHeaderHeight + ((overlapCount + 1) * (appHeight + EVENT_GAP)) + this.moreIndicatorHeight;
+            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;
             if (this.parent.rowAutoHeight || enableAppRender) {
+                this.renderedEvents.push(extend({}, event, null, true));
                 let appointmentElement;
                 if (this.inlineValue) {
                     appointmentElement = this.parent.inlineModule.createInlineAppointmentElement();
@@ -7562,24 +7583,26 @@ class MonthEvent extends EventBase {
             }
             else {
                 for (let i = 0; i < diffInDays; i++) {
-                    const cellTd = this.workCells[day + i];
-                    if (cellTd && isNullOrUndefined(cellTd.querySelector('.' + MORE_INDICATOR_CLASS))) {
-                        const startDate = new Date(this.dateRender[day + i].getTime());
-                        const endDate = addDays(this.dateRender[day + i], 1);
-                        const groupIndex = cellTd.getAttribute('data-group-index');
-                        const filterEvents = this.getFilteredEvents(startDate, endDate, groupIndex);
-                        const appArea = this.cellHeight - this.monthHeaderHeight - this.moreIndicatorHeight;
-                        appHeight = this.withIndicator ? appArea : appHeight;
-                        const renderedAppCount = Math.floor(appArea / (appHeight + EVENT_GAP));
-                        const count = (filterEvents.length - renderedAppCount) <= 0 ? 1 : (filterEvents.length - renderedAppCount);
-                        const moreIndicatorElement = this.getMoreIndicatorElement(count, startDate, endDate);
-                        if (!isNullOrUndefined(groupIndex)) {
-                            moreIndicatorElement.setAttribute('data-group-index', groupIndex);
+                    if (this.workCells[day + i]) {
+                        const indicator = this.workCells[day + i].querySelector('.' + MORE_INDICATOR_CLASS);
+                        if (indicator) {
+                            const count = parseInt(indicator.getAttribute('data-count'), 10) + 1;
+                            indicator.setAttribute('data-count', count.toString());
+                            indicator.innerHTML = this.getMoreIndicatorText(count);
+                        }
+                        else {
+                            const startDate = new Date(this.dateRender[day + i].getTime());
+                            const endDate = addDays(this.dateRender[day + i], 1);
+                            const groupIndex = this.workCells[day + i].getAttribute('data-group-index');
+                            const moreIndicatorElement = this.getMoreIndicatorElement(1, startDate, endDate);
+                            if (!isNullOrUndefined(groupIndex)) {
+                                moreIndicatorElement.setAttribute('data-group-index', groupIndex);
+                            }
+                            moreIndicatorElement.style.top = (this.cellHeight - this.monthHeaderHeight - this.moreIndicatorHeight) + 'px';
+                            moreIndicatorElement.style.width = this.cellWidth - 2 + 'px';
+                            this.renderElement(this.workCells[day + i], moreIndicatorElement);
+                            EventHandler.add(moreIndicatorElement, 'click', this.moreIndicatorClick, this);
                         }
-                        moreIndicatorElement.style.top = appArea + 'px';
-                        moreIndicatorElement.style.width = this.cellWidth - 2 + 'px';
-                        this.renderElement(cellTd, moreIndicatorElement);
-                        EventHandler.add(moreIndicatorElement, 'click', this.moreIndicatorClick, this);
                     }
                 }
             }
@@ -7615,8 +7638,8 @@ class MonthEvent extends EventBase {
     }
     getOverlapEvents(date, appointments) {
         const appointmentsList = [];
+        const dateTime = resetTime(date).getTime();
         for (const app of appointments) {
-            const dateTime = resetTime(date).getTime();
             if ((resetTime(app[this.fields.startTime]).getTime() <= dateTime) &&
                 (resetTime(app[this.fields.endTime]).getTime() >= dateTime)) {
                 appointmentsList.push(app);
@@ -7697,9 +7720,10 @@ class MonthEvent extends EventBase {
     getMoreIndicatorElement(count, startDate, endDate) {
         const moreIndicatorElement = createElement('div', {
             className: MORE_INDICATOR_CLASS,
-            innerHTML: '+' + this.parent.globalize.formatNumber(count) + '&nbsp;' + (this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant('more')),
+            innerHTML: this.getMoreIndicatorText(count),
             attrs: {
                 'tabindex': '0',
+                'data-count': count.toString(),
                 'data-start-date': startDate.getTime().toString(),
                 'data-end-date': endDate.getTime().toString(),
                 'role': 'list'
@@ -7707,6 +7731,9 @@ class MonthEvent extends EventBase {
         });
         return moreIndicatorElement;
     }
+    getMoreIndicatorText(count) {
+        return '+' + this.parent.globalize.formatNumber(count) + '&nbsp;' + (this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant('more'));
+    }
     removeHeightProperty(selector) {
         const rows = [].slice.call(this.element.querySelectorAll('.' + selector + ' tbody tr'));
         for (const row of rows) {
@@ -9300,11 +9327,11 @@ class QuickPopups {
             (endDate.getTime() - startDate.getTime()) / (60 * 60 * 1000) < 24 ? 1 : 0;
         if (eventData[fields.isAllDay]) {
             details = startDateDetails + ' (' + this.l10n.getConstant('allDay') + ')';
-            if (((endDate.getTime() - startDate.getTime()) / MS_PER_DAY) > 1) {
+            if (((getUniversalTime(endDate) - getUniversalTime(startDate)) / MS_PER_DAY) > 1) {
                 details += '&nbsp;-&nbsp;' + endDateDetails + ' (' + this.l10n.getConstant('allDay') + ')';
             }
         }
-        else if ((((endDate.getTime() - startDate.getTime()) / MS_PER_DAY) >= 1) || spanLength > 0) {
+        else if ((((getUniversalTime(endDate) - getUniversalTime(startDate)) / MS_PER_DAY) >= 1) || spanLength > 0) {
             details = startDateDetails + ' (' + startTimeDetail + ')' + '&nbsp;-&nbsp;' + endDateDetails + ' (' + endTimeDetail + ')';
         }
         else {
@@ -11731,7 +11758,8 @@ class EventWindow {
         return labelText;
     }
     onChange(args) {
-        const target = args.event.currentTarget.querySelector('input');
+        const targetSelector = `.${EVENT_WINDOW_ALL_DAY_CLASS},.${TIME_ZONE_CLASS},.${EVENT_WINDOW_REPEAT_CLASS}`;
+        const target = closest(args.event.target, targetSelector);
         if (target.classList.contains(EVENT_WINDOW_ALL_DAY_CLASS)) {
             this.onAllDayChange(args.checked);
         }
@@ -11895,7 +11923,8 @@ class EventWindow {
     }
     showDetails(eventData) {
         const eventObj = extend({}, eventData, null, true);
-        if (eventObj[this.fields.endTime].getHours() === 0 && eventObj[this.fields.endTime].getMinutes() === 0) {
+        if ((!this.cellClickAction || this.cellClickAction && !isNullOrUndefined(this.parent.editorTemplate)) &&
+            eventObj[this.fields.endTime].getHours() === 0 && eventObj[this.fields.endTime].getMinutes() === 0) {
             this.trimAllDay(eventObj);
         }
         this.eventData = eventObj;
@@ -13183,7 +13212,8 @@ class Render {
             this.parent.virtualScrollModule.destroy();
             this.parent.virtualScrollModule = null;
         }
-        if (this.parent.currentView.indexOf('Timeline') !== -1 && this.parent.currentView.indexOf('Year') === -1
+        if (this.parent.currentView.indexOf('Timeline') !== -1 && (this.parent.currentView.indexOf('Year') === -1 ||
+            (this.parent.currentView === 'TimelineYear' && this.parent.activeViewOptions.orientation === 'Vertical'))
             && this.parent.activeViewOptions.allowVirtualScrolling
             && this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
             this.parent.virtualScrollModule = new VirtualScroll(this.parent);
@@ -15729,6 +15759,7 @@ let Schedule = class Schedule extends Component {
                 };
                 this.trigger(navigating, navArgs, (navigationArgs) => {
                     if (!navigationArgs.cancel) {
+                        this.uiStateValues.isInitial = view.indexOf('Timeline') > -1 || this.currentView.indexOf('Timeline') > -1 ? true : this.uiStateValues.isInitial;
                         this.viewIndex = navigationArgs.viewIndex;
                         this.setProperties({ currentView: view }, true);
                         if (this.headerModule) {
@@ -16347,6 +16378,9 @@ let Schedule = class Schedule extends Component {
                 if (document.querySelectorAll(template).length) {
                     return compile(document.querySelector(template).innerHTML.trim());
                 }
+                else {
+                    return compile(template);
+                }
             }
             catch (error) {
                 return compile(template);
@@ -16525,8 +16559,12 @@ let Schedule = class Schedule extends Component {
                         this.refreshEvents(false);
                     }
                     break;
-                case 'showWeekend':
                 case 'workDays':
+                    if (JSON.stringify(oldProp.workDays) !== JSON.stringify(newProp.workDays)) {
+                        state.isLayout = true;
+                    }
+                    break;
+                case 'showWeekend':
                 case 'startHour':
                 case 'endHour':
                 case 'workHours':
@@ -19152,7 +19190,9 @@ class YearEvent extends TimelineEvent {
         this.eventHeight = getElementHeightFromClass(eventTable, APPOINTMENT_CLASS);
         const wrapperCollection = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CONTAINER_CLASS));
         const resources = this.parent.uiStateValues.isGroupAdaptive ?
-            [this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex]] : this.parent.resourceBase.lastResourceLevel;
+            [this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex]] :
+            this.parent.activeViewOptions.allowVirtualScrolling ? this.parent.resourceBase.renderedResources :
+                this.parent.resourceBase.lastResourceLevel;
         const months = this.getMonths();
         if (this.parent.activeViewOptions.orientation === 'Horizontal') {
             for (let month = 0; month < months.length; month++) {
@@ -19983,7 +20023,7 @@ class DragAndDrop extends ActionBase {
         const eventObj = extend({}, this.actionObj.event, null, true);
         const eventStart = eventObj[this.parent.eventFields.startTime];
         const eventEnd = eventObj[this.parent.eventFields.endTime];
-        const eventDuration = eventEnd.getTime() - eventStart.getTime();
+        const eventDuration = getUniversalTime(eventEnd) - getUniversalTime(eventStart);
         let offsetTop = Math.floor(parseInt(this.actionObj.clone.style.top, 10) / this.actionObj.cellHeight)
             * this.actionObj.cellHeight;
         offsetTop = offsetTop < 0 ? 0 : offsetTop;
@@ -20338,8 +20378,8 @@ class DragAndDrop extends ActionBase {
         if (isNullOrUndefined(this.parent.eventDragArea)) {
             this.removeCloneElement();
         }
-        const eventDuration = eventObj[this.parent.eventFields.endTime].getTime() -
-            eventObj[this.parent.eventFields.startTime].getTime();
+        const eventDuration = getUniversalTime(eventObj[this.parent.eventFields.endTime]) -
+            getUniversalTime(eventObj[this.parent.eventFields.startTime]);
         let td = closest(this.actionObj.target, 'td');
         if (!isNullOrUndefined(td)) {
             const tr = td.parentElement;
@@ -20352,12 +20392,12 @@ class DragAndDrop extends ActionBase {
                     this.actionObj.groupIndex = parseInt(td.getAttribute('data-group-index'), 10);
                 }
                 const timeString = new Date(currentDate.setDate(currentDate.getDate() - this.daysVariation));
-                let dragStart$$1 = new Date(timeString.getTime());
-                let dragEnd = new Date(dragStart$$1.getTime());
-                const startTimeDiff = eventObj[this.parent.eventFields.startTime].getTime() -
-                    (resetTime(new Date(+eventObj[this.parent.eventFields.startTime]))).getTime();
-                dragStart$$1 = new Date(dragStart$$1.getTime() + startTimeDiff);
-                dragEnd = new Date(dragStart$$1.getTime() + eventDuration);
+                const dragStart$$1 = new Date(timeString.getTime());
+                const startTimeDiff = getUniversalTime(eventObj[this.parent.eventFields.startTime]) -
+                    getUniversalTime(resetTime(new Date(+eventObj[this.parent.eventFields.startTime])));
+                dragStart$$1.setMilliseconds(startTimeDiff);
+                const dragEnd = new Date(dragStart$$1.getTime());
+                dragEnd.setMilliseconds(eventDuration);
                 this.actionObj.start = new Date(dragStart$$1.getTime());
                 this.actionObj.end = new Date(dragEnd.getTime());
             }
@@ -20412,8 +20452,8 @@ class DragAndDrop extends ActionBase {
     }
     calculateTimelineTime(e) {
         const eventObj = extend({}, this.actionObj.event, null, true);
-        const eventDuration = eventObj[this.parent.eventFields.endTime].getTime() -
-            eventObj[this.parent.eventFields.startTime].getTime();
+        const eventDuration = getUniversalTime(eventObj[this.parent.eventFields.endTime]) -
+            getUniversalTime(eventObj[this.parent.eventFields.startTime]);
         let offsetLeft = this.parent.enableRtl ? Math.abs(this.actionObj.clone.offsetLeft) - this.actionObj.clone.offsetWidth :
             parseInt(this.actionObj.clone.style.left, 10);
         offsetLeft = Math.floor(offsetLeft / this.actionObj.cellWidth) * this.actionObj.cellWidth;
@@ -21931,8 +21971,9 @@ class VerticalView extends ViewBase {
         const msStartHour = startHour.getTime();
         const msEndHour = endHour.getTime();
         if (msStartHour !== msEndHour) {
+            const duration = this.parent.activeViewOptions.timeScale.interval / this.parent.activeViewOptions.timeScale.slotCount;
             length = (Math.abs(msEndHour - msStartHour) / msInterval) - ((new Date(msEndHour).getTimezoneOffset()
-                - new Date(msStartHour).getTimezoneOffset()) / (60 / this.parent.activeViewOptions.timeScale.slotCount));
+                - new Date(msStartHour).getTimezoneOffset()) / duration);
         }
         if (!this.parent.activeViewOptions.timeScale.enable) {
             length = 1;
@@ -22142,16 +22183,16 @@ class Month extends ViewBase {
         }
         this.setColWidth(content);
         if (args.scrollPosition || !args.isPreventScrollUpdate && this.parent.currentView === 'TimelineMonth') {
+            const top = this.parent.currentView === 'TimelineMonth' ? this.parent.uiStateValues.top : args.scrollPosition.top;
+            if (leftPanel) {
+                leftPanel.scrollTop = top;
+            }
+            content.scrollTop = top;
             if (this.parent.uiStateValues.isInitial) {
                 this.scrollToSelectedDate();
                 this.parent.uiStateValues.isInitial = false;
             }
             else {
-                const top = this.parent.currentView === 'TimelineMonth' ? this.parent.uiStateValues.top : args.scrollPosition.top;
-                if (leftPanel) {
-                    leftPanel.scrollTop = top;
-                }
-                content.scrollTop = top;
                 content.scrollLeft = this.parent.currentView === 'TimelineMonth' ? this.parent.uiStateValues.left :
                     args.scrollPosition.left;
             }
@@ -22172,6 +22213,9 @@ class Month extends ViewBase {
         else {
             content.scrollLeft = 0;
         }
+        if (content.scrollLeft === 0 && this.parent.uiStateValues.isInitial) {
+            this.parent.uiStateValues.left = 0;
+        }
     }
     setContentHeight(content, leftPanelElement, height) {
         content.style.height = 'auto';
@@ -22727,6 +22771,9 @@ class Year extends ViewBase {
         const viewTypeClass = this.parent.activeViewOptions.orientation === 'Horizontal' ? 'e-horizontal' : 'e-vertical';
         addClass([this.element], [this.viewClass, viewTypeClass, className]);
         this.renderPanel(className);
+        if (this.parent.activeViewOptions.allowVirtualScrolling) {
+            addClass([this.element], [VIRTUAL_SCROLL_CLASS]);
+        }
         const calendarTable = this.createTableLayout(OUTER_TABLE_CLASS);
         this.element.appendChild(calendarTable);
         this.element.querySelector('table').setAttribute('role', 'presentation');
@@ -22939,6 +22986,7 @@ class Year extends ViewBase {
     onContentScroll(e) {
         const target = e.target;
         const headerWrapper = this.getDatesHeaderElement();
+        this.parent.notify(virtualScroll, e);
         if (headerWrapper) {
             headerWrapper.firstElementChild.scrollLeft = target.scrollLeft;
         }
@@ -23095,8 +23143,11 @@ class AgendaBase extends ViewBase {
                 moduleName: 'agenda',
                 listClass: this.parent.activeView.viewClass,
                 itemClass: this.parent.activeView.viewClass,
-                template: '<div class=' + AGENDA_NO_EVENT_CLASS + '>${subject}</div>'
+                template: `<div class="${AGENDA_NO_EVENT_CLASS}">${this.parent.localeObj.getConstant('noEvents')}</div>`
             });
+            if (listElement.querySelector('.e-agenda-item').children.length === 0) {
+                listElement.firstElementChild.appendChild(createElement('div', { className: AGENDA_NO_EVENT_CLASS, innerHTML: this.parent.localeObj.getConstant('noEvents') }));
+            }
         }
         else {
             listElement = ListBase.createList(this.parent.createElement, listData, {
@@ -24639,7 +24690,7 @@ class TimelineYear extends Year {
             !this.parent.uiStateValues.isGroupAdaptive) {
             tdCollection.push(firstTd);
             firstTd.appendChild(this.parent.resourceBase.createResourceColumn());
-            this.rowCount = this.parent.resourceBase.lastResourceLevel.length;
+            this.rowCount = this.parent.resourceBase.renderedResources.length;
         }
         else {
             tdCollection.push(firstTd);
@@ -24656,6 +24707,9 @@ class TimelineYear extends Year {
         content.appendChild(contentTable);
         const eventWrapper = createElement('div', { className: EVENT_TABLE_CLASS });
         content.appendChild(eventWrapper);
+        if (this.parent.virtualScrollModule) {
+            this.parent.virtualScrollModule.renderVirtualTrack(content);
+        }
         const contentTBody = contentTable.querySelector('tbody');
         if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
             if (this.parent.rowAutoHeight) {
@@ -24773,6 +24827,47 @@ class TimelineYear extends Year {
             }
         }
     }
+    getContentRows() {
+        const tRow = [];
+        const monthCells = this.getMonths();
+        for (let row = 0; row < this.parent.resourceBase.renderedResources.length; row++) {
+            const tr = createElement('tr', { attrs: { 'role': 'row' } });
+            tRow.push(tr);
+            let resData;
+            if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
+                resData = this.parent.resourceBase.renderedResources[row];
+            }
+            let monthDate = new Date(this.parent.selectedDate.getFullYear(), monthCells[row], 1);
+            let date = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
+            for (let month = 0; month < this.columnCount; month++) {
+                let classList$$1 = [];
+                const groupIndex = resData.groupIndex;
+                classList$$1 = classList$$1.concat(resData.className);
+                if (classList$$1.indexOf(RESOURCE_PARENT_CLASS) > -1) {
+                    classList$$1.push(RESOURCE_GROUP_CELLS_CLASS);
+                }
+                else {
+                    classList$$1.push(WORKDAY_CLASS);
+                }
+                monthDate = new Date(this.parent.selectedDate.getFullYear(), monthCells[month], 1);
+                date = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
+                const tdELe = createElement('td', {
+                    className: WORK_CELLS_CLASS,
+                    attrs: {
+                        'role': 'gridcell', 'aria-selected': 'false',
+                        'data-date': date.getTime().toString()
+                    }
+                });
+                addClass([tdELe], classList$$1);
+                tdELe.setAttribute('data-group-index', groupIndex.toString());
+                this.renderCellTemplate({ date: date, type: 'resourceGroupCells', groupIndex: groupIndex }, tdELe);
+                this.wireEvents(tdELe, 'cell');
+                this.parent.trigger(renderCell, { elementType: 'resourceGroupCells', element: tdELe, date: date });
+                tr.appendChild(tdELe);
+            }
+        }
+        return tRow;
+    }
     renderResourceContent(wrapper, monthBody, contentBody) {
         const months = this.getMonths();
         for (let row = 0; row < this.rowCount; row++) {
@@ -24780,8 +24875,8 @@ class TimelineYear extends Year {
             const tr = createElement('tr', { attrs: { 'role': 'row' } });
             contentBody.appendChild(tr);
             let resData;
-            if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
-                resData = this.parent.resourceBase.lastResourceLevel[row];
+            if (this.parent.activeViewOptions.orientation === 'Vertical' && this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
+                resData = this.parent.resourceBase.renderedResources[row];
             }
             let monthDate = new Date(this.parent.selectedDate.getFullYear(), months[row], 1);
             let date = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
@@ -24802,8 +24897,9 @@ class TimelineYear extends Year {
             }
             for (let month = 0; month < this.columnCount; month++) {
                 let classList$$1 = [];
-                let groupIndex = row;
+                let groupIndex;
                 if (this.parent.activeViewOptions.orientation === 'Vertical') {
+                    groupIndex = resData.groupIndex;
                     classList$$1 = classList$$1.concat(resData.className);
                     if (classList$$1.indexOf(RESOURCE_PARENT_CLASS) > -1) {
                         classList$$1.push(RESOURCE_GROUP_CELLS_CLASS);
@@ -24905,7 +25001,7 @@ class ICalendarExport {
             const editedExDate = [];
             if (eventObj[fields.recurrenceID]) {
                 const filter = this.filterEvents(filterCollection, fields.id, eventObj[fields.recurrenceID]);
-                uId = filter[0].UID;
+                uId = filter.length > 0 ? filter[0].UID : uId;
             }
             if (!eventObj[fields.recurrenceID] && eventObj[fields.recurrenceRule] && eventObj[fields.recurrenceException]) {
                 const exDate = (eventObj[fields.recurrenceException]).split(',');