@syncfusion/ej2-schedule 20.2.45 → 20.3.47

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

@@ -1,4 +1,4 @@
-import { Animation, Browser, ChildProperty, Collection, Complex, Component, Draggable, Event, EventHandler, HijriParser, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, Touch, addClass, append, classList, cldrData, closest, compile, createElement, extend, formatUnit, getDefaultDateObject, getElement, getValue, isNullOrUndefined, prepend, print, remove, removeClass, setStyleAttribute } from '@syncfusion/ej2-base';
+import { Animation, Browser, ChildProperty, Collection, Complex, Component, Draggable, Event, EventHandler, HijriParser, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, Touch, addClass, append, classList, cldrData, closest, compile, createElement, detach, extend, formatUnit, getDefaultDateObject, getElement, getValue, isNullOrUndefined, prepend, print, remove, removeClass, setStyleAttribute } from '@syncfusion/ej2-base';
 import { Dialog, Popup, Tooltip, createSpinner, hideSpinner, isCollide, showSpinner } from '@syncfusion/ej2-popups';
 import { Toolbar, TreeView } from '@syncfusion/ej2-navigations';
 import { Calendar, DatePicker, DateTimePicker } from '@syncfusion/ej2-calendars';
@@ -111,6 +111,23 @@ function getElementHeightFromClass(container, elementClass) {
     remove(el);
     return height;
 }
+/**
+ * Method to get width from element
+ *
+ * @param {Element} container Accepts the DOM element
+ * @param {string} elementClass Accepts the element class
+ * @returns {number} Returns the width of the element
+ */
+function getElementWidthFromClass(container, elementClass) {
+    let width = 0;
+    const el = createElement('div', { className: elementClass }).cloneNode();
+    el.style.visibility = 'hidden';
+    el.style.position = 'absolute';
+    container.appendChild(el);
+    width = el.getBoundingClientRect().width;
+    remove(el);
+    return width;
+}
 /**
  * Method to get translateY value
  *
@@ -122,6 +139,17 @@ function getTranslateY(element) {
     return window.WebKitCSSMatrix ?
         new WebKitCSSMatrix(style.webkitTransform).m42 : 0;
 }
+/**
+ * Method to get translateX value
+ *
+ * @param {HTMLElement | Element} element Accepts the DOM element
+ * @returns {number} Returns the translateX value of given element
+ */
+function getTranslateX(element) {
+    const style = getComputedStyle(element);
+    return window.WebKitCSSMatrix ?
+        new WebKitCSSMatrix(style.webkitTransform).m41 : 0;
+}
 /**
  * Method to get week first date
  *
@@ -398,9 +426,7 @@ function getOuterHeight(element) {
 function removeChildren(element) {
     const elementChildren = [].slice.call(element.children);
     for (const elementChild of elementChildren) {
-        if (!elementChild.classList.contains('blazor-template')) {
-            element.removeChild(elementChild);
-        }
+        element.removeChild(elementChild);
     }
 }
 /**
@@ -1431,7 +1457,7 @@ class HeaderRenderer {
             firstDate = getWeekFirstDate(resetTime(this.parent.selectedDate), this.parent.firstDayOfWeek);
             lastDate = addDays(firstDate, 7 * this.parent.activeViewOptions.interval);
         }
-        if (this.parent.currentView === 'Month') {
+        else if (this.parent.currentView === 'Month') {
             const isCustomMonth = !isNullOrUndefined(this.parent.activeViewOptions.displayDate) ||
                 this.parent.activeViewOptions.numberOfWeeks > 0;
             firstDate = isCustomMonth ? this.parent.activeView.getStartDate() : firstDateOfMonth(this.parent.selectedDate);
@@ -1439,10 +1465,10 @@ class HeaderRenderer {
                 lastDateOfMonth(addMonths(firstDate, this.parent.activeViewOptions.interval - 1));
         }
         if (!isNullOrUndefined(prevNavEle)) {
-            this.toolbarObj.enableItems(prevNavEle, firstDate > this.parent.minDate);
+            this.toolbarObj.enableItems(prevNavEle, firstDate > resetTime(this.parent.minDate));
         }
         if (!isNullOrUndefined(nextNavEle)) {
-            this.toolbarObj.enableItems(nextNavEle, lastDate < this.parent.maxDate);
+            this.toolbarObj.enableItems(nextNavEle, lastDate < resetTime(this.parent.maxDate));
         }
         this.setCalendarMinMaxDate();
     }
@@ -1580,7 +1606,7 @@ class ScheduleTouch {
         this.touchRightDirection = this.parent.enableRtl ? 'Left' : 'Right';
     }
     scrollHandler(e) {
-        if (this.parent.currentView === 'Agenda' || this.parent.uiStateValues.action ||
+        if (this.parent.currentView === 'Agenda' || this.parent.uiStateValues.action || !this.parent.allowSwiping ||
             (e.originalEvent && (e.originalEvent.target.classList.contains(APPOINTMENT_CLASS) ||
                 closest(e.originalEvent.target, '.' + APPOINTMENT_CLASS)))) {
             return;
@@ -1635,7 +1661,7 @@ class ScheduleTouch {
         }
     }
     swipeHandler(e) {
-        if (!this.isScrollTriggered || this.parent.uiStateValues.action) {
+        if (!this.isScrollTriggered || this.parent.uiStateValues.action || !this.parent.allowSwiping) {
             return;
         }
         this.isScrollTriggered = false;
@@ -5941,7 +5967,8 @@ class EventBase {
         const startDate = event[this.parent.eventFields.startTime];
         const endDate = event[this.parent.eventFields.endTime];
         const eventRule = event[this.parent.eventFields.recurrenceRule];
-        const duration = endDate.getTime() - startDate.getTime();
+        const timeZoneDiff = endDate.getTimezoneOffset() - startDate.getTimezoneOffset();
+        const duration = (endDate.getTime() - startDate.getTime()) - (timeZoneDiff * 60000);
         viewDate = new Date((viewDate || this.parent.activeView.startDate()).getTime() - duration);
         const exception = event[this.parent.eventFields.recurrenceException];
         let maxCount;
@@ -6133,7 +6160,7 @@ class EventBase {
             element.style[type] = !isNullOrUndefined(alpha) ? alphaColor(color, alpha) : color;
         }
     }
-    createBlockAppointmentElement(record, resIndex) {
+    createBlockAppointmentElement(record, resIndex, isResourceEventTemplate) {
         const eventSubject = (record[this.parent.eventFields.subject] || this.parent.eventSettings.fields.subject.default);
         const appointmentWrapper = createElement('div', {
             className: BLOCK_APPOINTMENT_CLASS,
@@ -6147,7 +6174,7 @@ class EventBase {
             const scheduleId = this.parent.element.id + '_';
             const viewName = this.parent.activeViewOptions.eventTemplateName;
             const templateId = scheduleId + viewName + 'eventTemplate';
-            const templateName = 'eventTemplate' + (this.parent.activeViewOptions.group.resources.length > 0 &&
+            const templateName = 'eventTemplate' + (isResourceEventTemplate &&
                 this.parent.currentView.indexOf('Year') === -1 ? '_' + resIndex : '');
             templateElement = this.parent.getAppointmentTemplate()(record, this.parent, templateName, templateId, false);
         }
@@ -6300,6 +6327,30 @@ class EventBase {
         }
         return { startDate: startTime, endDate: endTime };
     }
+    createEventWrapper(type = '', index = 0) {
+        const tr = createElement('tr');
+        const levels = this.parent.activeView.colLevels.slice(-1)[0];
+        for (let i = 0, len = levels.length; i < len; i++) {
+            const col = levels[i];
+            const appointmentWrap = createElement('td', {
+                className: (type === 'allDay') ? ALLDAY_APPOINTMENT_WRAPPER_CLASS : (type === 'timeIndicator') ?
+                    TIMELINE_WRAPPER_CLASS : DAY_WRAPPER_CLASS, attrs: { 'data-date': col.date.getTime().toString() }
+            });
+            if (!isNullOrUndefined(col.groupIndex)) {
+                appointmentWrap.setAttribute('data-group-index', col.groupIndex.toString());
+            }
+            if (type === '') {
+                const innerWrapper = createElement('div', {
+                    id: APPOINTMENT_WRAPPER_CLASS + '-' + index.toString(),
+                    className: APPOINTMENT_WRAPPER_CLASS
+                });
+                appointmentWrap.appendChild(innerWrapper);
+            }
+            tr.appendChild(appointmentWrap);
+            index = index + 1;
+        }
+        return tr;
+    }
     unWireEvents() {
         const appElements = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CLASS));
         for (const element of appElements) {
@@ -6343,6 +6394,7 @@ class VerticalEvent extends EventBase {
         if (this.parent.dragAndDropModule) {
             this.parent.dragAndDropModule.setDragArea();
         }
+        this.isResourceEventTemplate = this.parent.isSpecificResourceEvents();
         const wrapperElements = [].slice.call(this.parent.element.querySelectorAll('.' + BLOCK_APPOINTMENT_CLASS +
             ',.' + APPOINTMENT_CLASS + ',.' + ROW_COUNT_WRAPPER_CLASS));
         const isDragging = (this.parent.crudModule && this.parent.crudModule.crudObj.isCrudAction) ? true : false;
@@ -6364,6 +6416,9 @@ class VerticalEvent extends EventBase {
         if (!this.element.querySelector('.' + WORK_CELLS_CLASS)) {
             return;
         }
+        if (this.parent.virtualScrollModule) {
+            this.parent.virtualScrollModule.updateFocusedWorkCell();
+        }
         this.allDayElement = [].slice.call(this.element.querySelectorAll('.' + ALLDAY_CELLS_CLASS));
         this.setAllDayRowHeight(0);
         if (this.parent.eventsProcessed.length === 0 && this.parent.blockProcessed.length === 0) {
@@ -6394,6 +6449,9 @@ class VerticalEvent extends EventBase {
         this.resources = (this.parent.activeViewOptions.group.resources.length > 0) ? this.parent.uiStateValues.isGroupAdaptive ?
             [this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex]] :
             this.parent.resourceBase.lastResourceLevel : [];
+        if (this.resources.length > 0 && this.parent.activeViewOptions.allowVirtualScrolling && this.parent.virtualScrollModule) {
+            this.resources = this.parent.resourceBase.renderedResources;
+        }
         this.cellHeight =
             parseFloat(this.parent.element.querySelector('.e-content-wrap tbody tr').getBoundingClientRect().height.toFixed(2));
         this.dateRender[0] = this.parent.activeView.renderDates;
@@ -6410,7 +6468,7 @@ class VerticalEvent extends EventBase {
         return appHeight;
     }
     appendEvent(eventObj, appointmentElement, index, appLeft) {
-        const appointmentWrap = [].slice.call(this.element.querySelectorAll('.' + APPOINTMENT_WRAPPER_CLASS));
+        const appointmentWrap = this.element.querySelector('.' + APPOINTMENT_WRAPPER_CLASS + '[id="' + APPOINTMENT_WRAPPER_CLASS + '-' + index + '"]');
         if (this.parent.enableRtl) {
             setStyleAttribute(appointmentElement, { 'right': appLeft });
         }
@@ -6424,13 +6482,13 @@ class VerticalEvent extends EventBase {
         };
         this.parent.trigger(eventRendered, args, (eventArgs) => {
             if (!eventArgs.cancel) {
-                appointmentWrap[index].appendChild(appointmentElement);
+                appointmentWrap.appendChild(appointmentElement);
             }
         });
     }
     processBlockEvents() {
         const resources = this.getResourceList();
-        let dateCount = 0;
+        let dateCount = this.getStartCount();
         for (const resource of resources) {
             const renderDates = this.dateRender[resource];
             for (let day = 0, length = renderDates.length; day < length; day++) {
@@ -6467,9 +6525,11 @@ class VerticalEvent extends EventBase {
                 blockHeight = formatUnit(this.getHeight(eStart, eEnd));
                 blockTop = formatUnit(this.getTopValue(eStart, dayIndex, resource));
             }
-            const appointmentElement = this.createBlockAppointmentElement(eventObj, resource);
+            const appointmentElement = this.createBlockAppointmentElement(eventObj, resource, this.isResourceEventTemplate);
             setStyleAttribute(appointmentElement, { 'width': '100%', 'height': blockHeight, 'top': blockTop });
-            const index = this.parent.activeViewOptions.group.byDate ? (this.resources.length * dayIndex) + resource : dayCount;
+            const renderedIndex = this.getDayIndex(dayIndex, resource);
+            const index = this.parent.activeViewOptions.group.byDate ?
+                (this.resources.length * renderedIndex) + resource : dayCount;
             this.appendEvent(eventObj, appointmentElement, index, '0px');
         }
     }
@@ -6477,7 +6537,7 @@ class VerticalEvent extends EventBase {
         removeClass(this.allDayElement, ALLDAY_ROW_ANIMATE_CLASS);
         const eventCollection = (eventType === 'allDayEvents') ? this.sortByDateTime(this.allDayEvents) : undefined;
         const resources = this.getResourceList();
-        let dateCount = 0;
+        let dateCount = this.getStartCount();
         let isRender;
         for (const resource of resources) {
             isRender = true;
@@ -6534,6 +6594,15 @@ class VerticalEvent extends EventBase {
             }
         }
     }
+    getStartCount() {
+        return this.parent.virtualScrollModule && this.parent.activeViewOptions.allowVirtualScrolling && this.parent.timeScale.enable ?
+            parseInt(this.element.querySelector('.' + APPOINTMENT_WRAPPER_CLASS).getAttribute('id').split('-').slice(-1)[0], 10) : 0;
+    }
+    getDayIndex(dayIndex, resource) {
+        return this.parent.activeViewOptions.group.byDate ?
+            this.parent.resourceBase.lastResourceLevel[0].renderDates.indexOf(this.dateRender[resource][dayIndex]) :
+            dayIndex;
+    }
     setValues(event, resourceIndex) {
         if (this.parent.activeViewOptions.group.resources.length > 0) {
             this.cssClass = this.resources[resourceIndex].cssClass;
@@ -6565,7 +6634,6 @@ class VerticalEvent extends EventBase {
                 'tabindex': '0',
                 'aria-disabled': this.parent.eventBase.getReadonlyAttribute(record),
                 'aria-pressed': 'false',
-                'aria-grabbed': 'true',
                 'aria-label': this.parent.getAnnouncementString(record)
             }
         });
@@ -6585,7 +6653,7 @@ class VerticalEvent extends EventBase {
             const viewName = this.parent.activeViewOptions.eventTemplateName;
             const templateId = elementId + viewName + 'eventTemplate';
             const resIndex = this.parent.uiStateValues.isGroupAdaptive ? this.parent.uiStateValues.groupIndex : resource;
-            const templateName = 'eventTemplate' + (this.parent.activeViewOptions.group.resources.length > 0 ? '_' + resIndex : '');
+            const templateName = 'eventTemplate' + (this.isResourceEventTemplate ? '_' + resIndex : '');
             templateElement = this.parent.getAppointmentTemplate()(record, this.parent, templateName, templateId, false);
         }
         else {
@@ -6757,10 +6825,11 @@ class VerticalEvent extends EventBase {
                 if (isNullOrUndefined(this.renderedAllDayEvents[resource])) {
                     this.renderedAllDayEvents[resource] = [];
                 }
+                const renderedIndex = this.getDayIndex(dayIndex, resource);
                 this.renderedAllDayEvents[resource].push(extend({}, record, null, true));
                 const allDayRow = [].slice.call(this.element.querySelector('.' + ALLDAY_ROW_CLASS).children);
                 const wIndex = this.parent.activeViewOptions.group.byDate ?
-                    (this.resources.length * dayIndex) + resource : dayCount;
+                    (this.resources.length * renderedIndex) + resource : dayCount;
                 const eventWrapper = this.element.querySelector('.' + ALLDAY_APPOINTMENT_WRAPPER_CLASS +
                     ':nth-child(' + (wIndex + 1) + ')');
                 let appointmentElement;
@@ -6829,9 +6898,10 @@ class VerticalEvent extends EventBase {
                 this.overlapEvents.push([record]);
             }
             appWidth = this.getEventWidth();
+            const renderedIndex = this.getDayIndex(dayIndex, resource);
             const argsData = {
                 index: appIndex, left: appLeft, width: appWidth,
-                day: dayIndex, dayIndex: dayCount, record: record, resource: resource
+                day: renderedIndex, dayIndex: dayCount, record: record, resource: resource
             };
             const tempData = this.adjustOverlapElements(argsData);
             appWidth = (tempData.appWidth);
@@ -6856,7 +6926,8 @@ class VerticalEvent extends EventBase {
             if (!this.parent.isAdaptive && subjectElement) {
                 subjectElement.style.maxHeight = formatUnit(maxHeight);
             }
-            const index = this.parent.activeViewOptions.group.byDate ? (this.resources.length * dayIndex) + resource : dayCount;
+            const index = this.parent.activeViewOptions.group.byDate ?
+                (this.resources.length * renderedIndex) + resource : dayCount;
             const eventData = {};
             eventData[this.fields.startTime] = eventObj[this.fields.startTime];
             eventData[this.fields.endTime] = eventObj[this.fields.endTime];
@@ -6970,7 +7041,7 @@ class VerticalEvent extends EventBase {
                     const dayCount = this.parent.activeViewOptions.group.byDate ?
                         (this.resources.length * args.day) + args.resource : args.dayIndex;
                     const element = this.element.querySelector('#e-appointment-wrapper-' + dayCount);
-                    if (element.childElementCount > 0) {
+                    if (element && element.childElementCount > 0) {
                         const eleGuid = this.overlapEvents[i][j].Guid;
                         if (element.querySelectorAll('div[data-guid="' + eleGuid + '"]').length > 0 && eleGuid !== args.record.Guid) {
                             const apps = element.querySelector('div[data-guid="' + eleGuid + '"]');
@@ -7143,6 +7214,7 @@ class MonthEvent extends EventBase {
         if (this.parent.dragAndDropModule) {
             this.parent.dragAndDropModule.setDragArea();
         }
+        this.isResourceEventTemplate = this.parent.isSpecificResourceEvents();
         const conWrap = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
         if (this.parent.rowAutoHeight) {
             this.parent.uiStateValues.top = conWrap.scrollTop;
@@ -7180,7 +7252,8 @@ class MonthEvent extends EventBase {
         }
         this.eventHeight = getElementHeightFromClass(this.element, APPOINTMENT_CLASS);
         const scrollTop = conWrap.scrollTop;
-        if (this.parent.rowAutoHeight && this.parent.virtualScrollModule && !isNullOrUndefined(this.parent.currentAction)) {
+        if (this.parent.rowAutoHeight && this.parent.virtualScrollModule && !this.parent.virtualScrollModule.isHorizontalScroll
+            && !isNullOrUndefined(this.parent.currentAction)) {
             conWrap.scrollTop = conWrap.scrollTop - 1;
         }
         if (this.parent.activeViewOptions.group.resources.length > 0) {
@@ -7200,7 +7273,7 @@ class MonthEvent extends EventBase {
                 isPreventScrollUpdate: true,
                 scrollPosition: { left: this.parent.uiStateValues.left, top: this.parent.uiStateValues.top }
             };
-            if (this.parent.virtualScrollModule) {
+            if (this.parent.virtualScrollModule && !this.parent.virtualScrollModule.isHorizontalScroll) {
                 if (this.parent.currentAction) {
                     conWrap.scrollTop = scrollTop;
                     this.parent.currentAction = null;
@@ -7347,7 +7420,7 @@ class MonthEvent extends EventBase {
             const appRight = (this.parent.enableRtl) ? position : 0;
             const appHeight = this.cellHeight - this.monthHeaderHeight;
             const appTop = this.getRowTop(resIndex);
-            const blockElement = this.createBlockAppointmentElement(event, resIndex);
+            const blockElement = this.createBlockAppointmentElement(event, resIndex, this.isResourceEventTemplate);
             setStyleAttribute(blockElement, {
                 'width': appWidth + 'px', 'height': appHeight + 'px', 'left': appLeft + 'px',
                 'right': appRight + 'px', 'top': appTop + 'px'
@@ -7418,7 +7491,7 @@ class MonthEvent extends EventBase {
     renderResourceEvents() {
         const resources = this.parent.uiStateValues.isGroupAdaptive ?
             [this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex]] :
-            this.parent.resourceBase.lastResourceLevel;
+            this.parent.resourceBase.renderedResources;
         if (this.parent.crudModule && this.parent.crudModule.crudObj.isCrudAction) {
             for (let i = 0, len = this.parent.crudModule.crudObj.sourceEvent.length; i < len; i++) {
                 const sourceRes = this.parent.crudModule.crudObj.sourceEvent[i];
@@ -7452,7 +7525,7 @@ class MonthEvent extends EventBase {
         const attrs = {
             'data-id': 'Appointment_' + record[this.fields.id],
             'role': 'button', 'tabindex': '0',
-            'aria-disabled': this.parent.eventBase.getReadonlyAttribute(record), 'aria-pressed': 'false', 'aria-grabbed': 'true',
+            'aria-disabled': this.parent.eventBase.getReadonlyAttribute(record), 'aria-pressed': 'false',
             'aria-label': this.parent.getAnnouncementString(newRecord, eventSubject)
         };
         if (!isCloneElement) {
@@ -7477,7 +7550,7 @@ class MonthEvent extends EventBase {
             const scheduleId = this.parent.element.id + '_';
             const viewName = this.parent.activeViewOptions.eventTemplateName;
             const templateId = scheduleId + viewName + 'eventTemplate';
-            const eventTemplate = 'eventTemplate' + (this.parent.activeViewOptions.group.resources.length > 0 ? '_' + resIndex : '');
+            const eventTemplate = 'eventTemplate' + (this.isResourceEventTemplate ? '_' + resIndex : '');
             templateElement = this.parent.getAppointmentTemplate()(eventObj, this.parent, eventTemplate, templateId, false);
         }
         else {
@@ -8909,7 +8982,7 @@ class QuickPopups {
                         'data-id': '' + eventData[fields.id],
                         'data-guid': eventData.Guid, 'role': 'button', 'tabindex': '0',
                         'aria-disabled': this.parent.eventBase.getReadonlyAttribute(eventData),
-                        'aria-pressed': 'false', 'aria-grabbed': 'true', 'aria-label': this.parent.getAnnouncementString(eventData)
+                        'aria-pressed': 'false', 'aria-label': this.parent.getAnnouncementString(eventData)
                     }
                 });
                 let templateElement;
@@ -9029,6 +9102,9 @@ class QuickPopups {
             }
             return;
         }
+        else if (this.quickPopup.element) {
+            this.destroyPopupButtons('quickPopup');
+        }
         const temp = {};
         temp[this.parent.eventFields.startTime] = this.parent.activeCellsData.startTime;
         temp[this.parent.eventFields.endTime] = this.parent.activeCellsData.endTime;
@@ -9100,6 +9176,9 @@ class QuickPopups {
             if (isSameTarget) {
                 return;
             }
+            else if (this.quickPopup.element) {
+                this.destroyPopupButtons('quickPopup');
+            }
             const eventData = events.event;
             const quickEventPopup = createElement('div', { className: EVENT_POPUP_CLASS });
             quickEventPopup.appendChild(this.getPopupHeader('Event', eventData));
@@ -9635,7 +9714,10 @@ class QuickPopups {
                     this.quickPopup.element.style.height = formatUnit((popupType === 'EditEventInfo') ? 65 : window.innerHeight);
                 }
                 else {
-                    this.quickPopup.offsetX = 10;
+                    const isVirtualScroll = this.parent.virtualScrollModule && this.parent.virtualScrollModule.isHorizontalScroll
+                        && !isNullOrUndefined(closest(target, '.' + CONTENT_TABLE_CLASS));
+                    const conTable = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS + ' table');
+                    this.quickPopup.offsetX = isVirtualScroll && !this.parent.enableRtl ? (getTranslateX(conTable) + 10) : 10;
                     this.quickPopup.collision = { X: this.parent.enableRtl ? 'flip' : 'none', Y: 'fit' };
                     this.quickPopup.position = { X: this.parent.enableRtl ? 'left' : 'right', Y: this.parent.enableRtl ? 'bottom' : 'top' };
                     this.quickPopup.dataBind();
@@ -9643,7 +9725,11 @@ class QuickPopups {
                     const collide = isCollide(this.quickPopup.element, this.parent.element);
                     if (collide.indexOf(this.parent.enableRtl ? 'left' : 'right') > -1) {
                         this.quickPopup.offsetX = -target.offsetWidth - 10 - this.quickPopup.element.offsetWidth;
+                        if (isVirtualScroll && !this.parent.enableRtl) {
+                            this.quickPopup.offsetX = getTranslateX(conTable) + this.quickPopup.offsetX;
+                        }
                         this.quickPopup.dataBind();
+                        this.quickPopup.refreshPosition(null, true);
                         const leftCollide = isCollide(this.quickPopup.element, this.parent.element);
                         if (leftCollide.indexOf('left') > -1) {
                             this.quickPopup.position = { X: 'center', Y: 'center' };
@@ -9652,9 +9738,8 @@ class QuickPopups {
                             this.quickPopup.dataBind();
                         }
                     }
-                    if (this.parent.virtualScrollModule && (collide.indexOf('top') > -1 || collide.indexOf('bottom') > -1)) {
-                        const element = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS + ' table');
-                        const translateY = getTranslateY(element);
+                    if (this.parent.virtualScrollModule && !this.parent.virtualScrollModule.isHorizontalScroll && (collide.indexOf('top') > -1 || collide.indexOf('bottom') > -1)) {
+                        const translateY = getTranslateY(conTable);
                         this.quickPopup.offsetY = translateY;
                         this.quickPopup.dataBind();
                     }
@@ -9907,6 +9992,7 @@ class QuickPopups {
         this.destroyQuickPopup();
         this.destroyMorePopup();
         this.destroyQuickDialog();
+        this.dialogEvent = null;
         this.parent = null;
         this.l10n = null;
         this.isCrudAction = null;
@@ -10890,30 +10976,47 @@ let RecurrenceEditor = class RecurrenceEditor extends Component {
     destroyComponents() {
         if (!this.recurrenceCount.isDestroyed) {
             this.recurrenceCount.destroy();
+            this.recurrenceCount = null;
         }
         if (!this.monthDate.isDestroyed) {
             this.monthDate.destroy();
+            this.monthDate = null;
         }
         if (!this.repeatInterval.isDestroyed) {
             this.repeatInterval.destroy();
+            this.repeatInterval = null;
         }
         if (!this.untilDateObj.isDestroyed) {
             this.untilDateObj.destroy();
+            this.untilDateObj = null;
         }
         if (!this.repeatType.isDestroyed) {
             this.repeatType.destroy();
+            this.repeatType = null;
         }
         if (!this.endType.isDestroyed) {
             this.endType.destroy();
+            this.endType = null;
         }
         if (!this.monthWeekPos.isDestroyed) {
             this.monthWeekPos.destroy();
+            this.monthWeekPos = null;
         }
         if (!this.monthWeekDays.isDestroyed) {
             this.monthWeekDays.destroy();
+            this.monthWeekDays = null;
         }
         if (!this.monthValue.isDestroyed) {
             this.monthValue.destroy();
+            this.monthValue = null;
+        }
+        if (!this.onMonthDay.isDestroyed) {
+            this.onMonthDay.destroy();
+            this.onMonthDay = null;
+        }
+        if (!this.onWeekDay.isDestroyed) {
+            this.onWeekDay.destroy();
+            this.onWeekDay = null;
         }
         this.dayButtons.forEach((element) => {
             if (!element.isDestroyed) {
@@ -11007,21 +11110,30 @@ let RecurrenceEditor = class RecurrenceEditor extends Component {
         this.renderStatus = true;
         this.triggerChangeEvent();
     }
+    detachInputs() {
+        const inputElements = [].slice.call(this.element.querySelectorAll('input'));
+        for (const element of inputElements) {
+            detach(element);
+        }
+    }
     /**
      * Destroys the widget.
      *
      * @returns {void}
      */
     destroy() {
-        this.destroyComponents();
-        super.destroy();
-        let removeClasses = ['e-' + this.getModuleName()];
-        if (this.cssClass) {
-            removeClasses = removeClasses.concat(this.cssClass.split(' '));
-        }
-        removeClass([this.element], removeClasses);
-        while (this.element.firstElementChild) {
-            this.element.removeChild(this.element.firstElementChild);
+        if (!this.isDestroyed) {
+            this.destroyComponents();
+            super.destroy();
+            let removeClasses = ['e-' + this.getModuleName()];
+            if (this.cssClass) {
+                removeClasses = removeClasses.concat(this.cssClass.split(' '));
+            }
+            removeClass([this.element], removeClasses);
+            this.detachInputs();
+            while (this.element.firstElementChild) {
+                this.element.removeChild(this.element.firstElementChild);
+            }
         }
     }
     /**
@@ -11394,6 +11506,7 @@ class EventWindow {
             const tempEle = [].slice.call(this.parent.getEditorTemplate()(args || {}, this.parent, 'editorTemplate', templateId, false));
             append(tempEle, form);
             this.parent.renderTemplates();
+            this.applyFormValidation();
         }
         else {
             form.appendChild(this.getDefaultEventWindowContent());
@@ -11934,12 +12047,26 @@ class EventWindow {
         const getValidationRule = (rules) => (rules && Object.keys(rules).length > 0) ? rules : undefined;
         const form = this.element.querySelector('.' + FORM_CLASS);
         const rules = {};
-        rules[this.parent.eventSettings.fields.subject.name] = getValidationRule(this.parent.eventSettings.fields.subject.validation);
-        rules[this.parent.eventSettings.fields.location.name] = getValidationRule(this.parent.eventSettings.fields.location.validation);
-        rules[this.parent.eventSettings.fields.startTime.name] = getValidationRule(this.parent.eventSettings.fields.startTime.validation);
-        rules[this.parent.eventSettings.fields.endTime.name] = getValidationRule(this.parent.eventSettings.fields.endTime.validation);
-        rules[this.parent.eventSettings.fields.description.name] =
-            getValidationRule(this.parent.eventSettings.fields.description.validation);
+        const subjectRule = getValidationRule(this.parent.eventSettings.fields.subject.validation);
+        if (!isNullOrUndefined(subjectRule)) {
+            rules[this.parent.eventSettings.fields.subject.name] = subjectRule;
+        }
+        const locationRule = getValidationRule(this.parent.eventSettings.fields.location.validation);
+        if (!isNullOrUndefined(locationRule)) {
+            rules[this.parent.eventSettings.fields.location.name] = locationRule;
+        }
+        const startTimeRule = getValidationRule(this.parent.eventSettings.fields.startTime.validation);
+        if (!isNullOrUndefined(startTimeRule)) {
+            rules[this.parent.eventSettings.fields.startTime.name] = startTimeRule;
+        }
+        const endTimeRule = getValidationRule(this.parent.eventSettings.fields.endTime.validation);
+        if (!isNullOrUndefined(endTimeRule)) {
+            rules[this.parent.eventSettings.fields.endTime.name] = endTimeRule;
+        }
+        const descriptionRule = getValidationRule(this.parent.eventSettings.fields.description.validation);
+        if (!isNullOrUndefined(descriptionRule)) {
+            rules[this.parent.eventSettings.fields.description.name] = descriptionRule;
+        }
         this.fieldValidator = new FieldValidator();
         this.fieldValidator.renderFormValidator(form, rules, this.element, this.parent.locale);
     }
@@ -12866,6 +12993,12 @@ class EventWindow {
             this.buttonObj.destroy();
         }
     }
+    detachComponents() {
+        const formElements = this.getFormElements(EVENT_WINDOW_DIALOG_CLASS);
+        for (const element of formElements) {
+            detach(element);
+        }
+    }
     destroy(isIgnore) {
         if (this.parent && !this.parent.isDestroyed) {
             this.parent.resetTemplates(['editorTemplate']);
@@ -12873,6 +13006,7 @@ class EventWindow {
         this.destroyComponents();
         if (this.recurrenceEditor) {
             this.recurrenceEditor.destroy();
+            detach(this.recurrenceEditor.element);
             this.recurrenceEditor = null;
         }
         if (this.fieldValidator) {
@@ -12883,8 +13017,12 @@ class EventWindow {
             this.repeatDialogObject.destroy();
             this.repeatDialogObject = null;
         }
+        this.detachComponents();
         if (this.dialogObject) {
             if (this.dialogObject.element) {
+                const form = this.dialogObject.element.querySelector('form');
+                removeChildren(form);
+                detach(form);
                 EventHandler.remove(this.dialogObject.element, 'keydown', this.preventEventSave);
             }
             this.dialogObject.destroy();
@@ -12901,6 +13039,7 @@ class EventWindow {
             this.buttonObj = null;
             this.repeatStatus = null;
             this.eventWindowTime = null;
+            this.dialogEvent = null;
         }
     }
 }
@@ -12915,7 +13054,7 @@ class VirtualScroll {
         this.bufferCount = 3;
         this.renderedLength = 0;
         this.averageRowHeight = 0;
-        this.isScrollHeightNull = true;
+        this.startIndex = 0;
         this.parent = parent;
         this.addEventListener();
     }
@@ -12933,37 +13072,19 @@ class VirtualScroll {
     }
     getRenderedCount() {
         this.setItemSize();
-        return Math.ceil(this.parent.element.clientHeight / this.itemSize) + this.bufferCount;
-    }
-    setTranslateValue() {
-        const resWrap = this.parent.element.querySelector('.' + RESOURCE_COLUMN_WRAP_CLASS);
-        const conWrap = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
-        const eventWrap = this.parent.element.querySelector('.' + EVENT_TABLE_CLASS);
-        const timeIndicator = this.parent.element.querySelector('.' + CURRENT_TIMELINE_CLASS);
-        this.renderVirtualTrackHeight(conWrap, resWrap);
-        this.setTranslate(resWrap, conWrap, eventWrap, timeIndicator);
-    }
-    renderVirtualTrackHeight(contentWrap, resourceWrap) {
-        this.parent.resourceBase.setExpandedResources();
-        if (this.isScrollHeightNull) {
-            const wrap = createElement('div', { className: VIRTUAL_TRACK_CLASS });
-            const resWrap = [].slice.call((resourceWrap).querySelectorAll('table td'));
-            const startIndex = parseInt(resWrap[0].getAttribute('data-group-index'), 10);
-            const endIndex = parseInt(resWrap[resWrap.length - 1].getAttribute('data-group-index'), 10);
-            this.parent.resourceBase.renderedResources = this.parent.resourceBase.expandedResources.filter((resource) => (resource.groupIndex >= startIndex && resource.groupIndex <= endIndex));
-            this.setItemSize();
-            wrap.style.height = (this.parent.resourceBase.expandedResources.length * this.itemSize) + 'px';
-            this.isScrollHeightNull = false;
-            const virtual = this.parent.element.querySelector('.' + VIRTUAL_TRACK_CLASS);
-            if (!isNullOrUndefined(virtual)) {
-                remove(virtual);
-            }
-            contentWrap.appendChild(wrap);
-        }
+        const containerSize = this.isHorizontalScroll ? this.parent.element.clientWidth : this.parent.element.clientHeight;
+        this.renderedLength = Math.ceil(containerSize / this.itemSize) + this.bufferCount;
+        return this.renderedLength;
     }
     renderVirtualTrack(contentWrap) {
         const wrap = createElement('div', { className: VIRTUAL_TRACK_CLASS });
-        wrap.style.height = (this.parent.resourceBase.expandedResources.length * this.itemSize) + 'px';
+        if (this.isHorizontalScroll) {
+            const colCount = this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 1].length;
+            wrap.style.width = (colCount * this.itemSize) + 'px';
+        }
+        else {
+            wrap.style.height = (this.parent.resourceBase.expandedResources.length * this.itemSize) + 'px';
+        }
         contentWrap.appendChild(wrap);
     }
     updateVirtualScrollHeight() {
@@ -13001,12 +13122,19 @@ class VirtualScroll {
         }
     }
     setItemSize() {
-        this.itemSize = getElementHeightFromClass(this.parent.activeView.element, WORK_CELLS_CLASS) || this.itemSize;
+        if (this.isHorizontalScroll) {
+            this.itemSize = getElementWidthFromClass(this.parent.activeView.element, WORK_CELLS_CLASS) || this.itemSize;
+        }
+        else {
+            this.itemSize = getElementHeightFromClass(this.parent.activeView.element, WORK_CELLS_CLASS) || this.itemSize;
+        }
     }
     renderEvents() {
         this.setTabIndex();
         this.parent.refreshEvents(false);
-        this.parent.notify(contentReady, {});
+        if (this.parent.currentView !== 'Month') {
+            this.parent.notify(contentReady, {});
+        }
         this.parent.hideSpinner();
     }
     virtualScrolling() {
@@ -13014,31 +13142,63 @@ class VirtualScroll {
             this.parent.quickPopup.quickPopupHide();
             this.parent.quickPopup.morePopup.hide();
         }
-        const resWrap = this.parent.element.querySelector('.' + RESOURCE_COLUMN_WRAP_CLASS);
         const conWrap = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
-        const eventWrap = this.parent.element.querySelector('.' + EVENT_TABLE_CLASS);
-        const timeIndicator = this.parent.element.querySelector('.' + CURRENT_TIMELINE_CLASS);
-        const conTable = this.parent.element.querySelector('.' + CONTENT_TABLE_CLASS);
-        this.renderedLength = resWrap.querySelector('tbody').children.length;
-        const firstTDIndex = parseInt(resWrap.querySelector('tbody td').getAttribute('data-group-index'), 10);
-        const scrollHeight = this.parent.rowAutoHeight ?
-            (conTable.offsetHeight - conWrap.offsetHeight) : this.bufferCount * this.itemSize;
-        addClass([conWrap], 'e-transition');
+        if (this.isHorizontalScroll) {
+            this.horizontalScrolling(conWrap);
+        }
+        else {
+            const resWrap = this.parent.element.querySelector('.' + RESOURCE_COLUMN_WRAP_CLASS);
+            const eventWrap = this.parent.element.querySelector('.' + EVENT_TABLE_CLASS);
+            const timeIndicator = this.parent.element.querySelector('.' + CURRENT_TIMELINE_CLASS);
+            const conTable = this.parent.element.querySelector('.' + CONTENT_TABLE_CLASS);
+            addClass([conWrap], 'e-transition');
+            this.renderedLength = resWrap.querySelector('tbody').children.length;
+            const firstTDIndex = parseInt(resWrap.querySelector('tbody td').getAttribute('data-group-index'), 10);
+            const scrollHeight = this.parent.rowAutoHeight ?
+                (conTable.offsetHeight - conWrap.offsetHeight) : this.bufferCount * this.itemSize;
+            let resCollection = [];
+            if ((conWrap.scrollTop) - this.translateY < 0) {
+                resCollection = this.upScroll(conWrap, firstTDIndex);
+            }
+            else if (conWrap.scrollTop - this.translateY > scrollHeight) {
+                resCollection = this.downScroll(conWrap, firstTDIndex);
+            }
+            if (!isNullOrUndefined(resCollection) && resCollection.length > 0) {
+                this.parent.showSpinner();
+                const selectedEle = this.parent.getSelectedElements();
+                this.focusedEle = selectedEle[selectedEle.length - 1] || this.focusedEle;
+                this.updateContent(resWrap, conWrap, eventWrap, resCollection);
+                this.setTranslate(resWrap, conWrap, eventWrap, timeIndicator);
+                if (this.parent.dragAndDropModule && this.parent.dragAndDropModule.actionObj.action === 'drag') {
+                    this.parent.dragAndDropModule.navigationWrapper();
+                }
+                window.clearTimeout(this.timeValue);
+                this.timeValue = window.setTimeout(() => { this.renderEvents(); }, 250);
+            }
+        }
+    }
+    horizontalScrolling(conWrap) {
         let resCollection = [];
-        if ((conWrap.scrollTop) - this.translateY < 0) {
-            resCollection = this.upScroll(conWrap, firstTDIndex);
+        const scrollWidth = this.bufferCount * this.itemSize;
+        if (Math.abs(conWrap.scrollLeft) - Math.abs(this.translateY) < 0) {
+            resCollection = this.leftScroll(conWrap);
         }
-        else if (conWrap.scrollTop - this.translateY > scrollHeight) {
-            resCollection = this.downScroll(conWrap, firstTDIndex);
+        else if (Math.abs(conWrap.scrollLeft) - Math.abs(this.translateY) > scrollWidth) {
+            resCollection = this.rightScroll(conWrap);
         }
         if (!isNullOrUndefined(resCollection) && resCollection.length > 0) {
-            this.parent.showSpinner();
-            const selectedEle = this.parent.getSelectedElements();
-            this.focusedEle = selectedEle[selectedEle.length - 1] || this.focusedEle;
-            this.updateContent(resWrap, conWrap, eventWrap, resCollection);
-            this.setTranslate(resWrap, conWrap, eventWrap, timeIndicator);
-            if (this.parent.dragAndDropModule && this.parent.dragAndDropModule.actionObj.action === 'drag') {
-                this.parent.dragAndDropModule.navigationWrapper();
+            if (this.parent.resourceBase.expandedResources.length !== resCollection.length ||
+                this.parent.resourceBase.expandedResources[0] !== resCollection[0] ||
+                this.parent.resourceBase.expandedResources[this.parent.resourceBase.expandedResources.length - 1] !==
+                    resCollection[resCollection.length - 1]) {
+                this.parent.showSpinner();
+                const colLevels = this.parent.activeView.colLevels.slice(0);
+                this.updateHorizontalContent(conWrap, resCollection);
+                setStyleAttribute(conWrap.querySelector('table'), { transform: `translateX(${this.translateY}px)` });
+                this.parent.activeView.colLevels = colLevels;
+                if (this.parent.dragAndDropModule && this.parent.dragAndDropModule.actionObj.action === 'drag') {
+                    this.parent.dragAndDropModule.navigationWrapper();
+                }
             }
             window.clearTimeout(this.timeValue);
             this.timeValue = window.setTimeout(() => { this.renderEvents(); }, 250);
@@ -13084,6 +13244,83 @@ class VirtualScroll {
         this.translateY = conWrap.scrollTop;
         return nextSetCollection;
     }
+    leftScroll(conWrap) {
+        let index = 0;
+        index = (~~(Math.abs(conWrap.scrollLeft) / this.itemSize) + Math.ceil(conWrap.clientWidth / this.itemSize)) - this.renderedLength;
+        index = (index > 0) ? index : 0;
+        return this.getCollection(index, index + this.renderedLength);
+    }
+    rightScroll(conWrap) {
+        const lastLevel = this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 1];
+        let nextSetIndex = 0;
+        nextSetIndex = ~~(Math.abs(conWrap.scrollLeft) / this.itemSize);
+        let lastIndex = nextSetIndex + this.renderedLength;
+        lastIndex = (lastIndex > lastLevel.length - 1) ? lastLevel.length - 1 : lastIndex;
+        return this.getCollection(lastIndex - this.renderedLength, lastIndex);
+    }
+    getCollection(startIndex, endIndex) {
+        this.translateY = startIndex * this.itemSize;
+        const lastLevel = this.getResCollection(startIndex, endIndex);
+        if (this.parent.enableRtl) {
+            this.translateY = -this.translateY;
+        }
+        return lastLevel;
+    }
+    getResCollection(startIndex, endIndex) {
+        const lastLevel = this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 1];
+        let resCollection = [];
+        const index = { startIndex: 0, endIndex: 0 };
+        if (this.parent.activeViewOptions.group.byDate) {
+            if (lastLevel[startIndex].date.getTime() === this.parent.resourceBase.expandedResources[0].date.getTime() &&
+                lastLevel[endIndex].date.getTime() ===
+                    this.parent.resourceBase.expandedResources[this.parent.resourceBase.expandedResources.length - 1].date.getTime()) {
+                return this.parent.resourceBase.expandedResources;
+            }
+            resCollection = this.getByDateCollection(lastLevel[startIndex], lastLevel[endIndex], index);
+            this.setRenderedDates(resCollection);
+        }
+        else {
+            if (lastLevel[startIndex].groupIndex === this.parent.resourceBase.expandedResources[0].groupIndex &&
+                lastLevel[endIndex].groupIndex ===
+                    this.parent.resourceBase.expandedResources[this.parent.resourceBase.expandedResources.length - 1].groupIndex) {
+                return this.parent.resourceBase.expandedResources;
+            }
+            resCollection = this.getByIdCollection(lastLevel[startIndex], lastLevel[endIndex], index);
+        }
+        if (this.parent.currentView !== 'Month') {
+            this.startIndex = index.startIndex;
+            resCollection = lastLevel.slice(index.startIndex, index.endIndex);
+        }
+        this.translateY = index.startIndex * this.itemSize;
+        return resCollection;
+    }
+    getByDateCollection(firstItem, lastItem, index) {
+        const resCollection = this.parent.activeView.colLevels[0].filter((data) => firstItem.date.getTime() <= data.date.getTime() &&
+            data.date.getTime() <= lastItem.date.getTime());
+        this.setStartEndIndex(this.parent.activeView.colLevels[0], resCollection[0], resCollection[resCollection.length - 1], index);
+        return resCollection;
+    }
+    getByIdCollection(firstItem, lastItem, index) {
+        const resCollection = this.parent.resourceBase.lastResourceLevel.filter((data) => firstItem.groupIndex <= data.groupIndex && data.groupIndex <= lastItem.groupIndex);
+        this.parent.resourceBase.renderedResources = resCollection;
+        this.setStartEndIndex(this.parent.resourceBase.lastResourceLevel, resCollection[0], resCollection[resCollection.length - 1], index);
+        return resCollection;
+    }
+    setStartEndIndex(data, firstItem, lastItem, colIndex) {
+        let index = 0;
+        data.filter((data) => {
+            if (firstItem === data) {
+                colIndex.startIndex = index;
+            }
+            else if (lastItem === data) {
+                colIndex.endIndex = index + data.colSpan;
+            }
+            index += data.colSpan;
+        });
+        if (firstItem === lastItem) {
+            colIndex.endIndex = colIndex.startIndex + lastItem.colSpan;
+        }
+    }
     updateContent(resWrap, conWrap, eventWrap, resCollection) {
         const renderedLength = resWrap.querySelector('tbody').children.length;
         if (document.activeElement && document.activeElement.classList.contains(RESOURCE_CELLS_CLASS)) {
@@ -13103,6 +13340,45 @@ class VirtualScroll {
         append(contentRows, conWrap.querySelector('tbody'));
         append(eventRows, eventWrap);
     }
+    updateHorizontalContent(conWrap, resCollection) {
+        this.parent.resourceBase.expandedResources = resCollection;
+        const selectedEle = this.parent.getSelectedElements();
+        this.focusedEle = selectedEle[selectedEle.length - 1] || this.focusedEle;
+        const renderedLength = conWrap.querySelectorAll('tbody tr').length;
+        for (let i = 0; i < renderedLength; i++) {
+            remove(conWrap.querySelector('tbody tr'));
+        }
+        if (this.parent.currentView === 'Month') {
+            if (this.parent.activeViewOptions.group.byDate) {
+                this.parent.activeView.colLevels[0] = resCollection;
+            }
+            else {
+                this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 2] = resCollection;
+            }
+            const contentRows = this.parent.activeView.getContentRows();
+            append(contentRows, conWrap.querySelector('tbody'));
+        }
+        else {
+            const col = [].slice.call(conWrap.querySelector('colgroup').children);
+            for (let i = 0; i < col.length; i++) {
+                remove(col[i]);
+            }
+            this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 1] = resCollection;
+            const contentRows = this.parent.activeView.getContentRows();
+            const table = conWrap.querySelector('table');
+            const thead = conWrap.querySelector('thead');
+            const colGroupEle = conWrap.querySelector('colgroup');
+            resCollection.forEach(() => {
+                colGroupEle.appendChild(createElement('col'));
+            });
+            thead.appendChild(this.parent.eventBase.createEventWrapper('', this.startIndex > 0 ? this.startIndex : 0));
+            if (this.parent.activeViewOptions.timeScale.enable) {
+                thead.appendChild(this.parent.eventBase.createEventWrapper('timeIndicator'));
+            }
+            prepend([thead], table);
+            append(contentRows, conWrap.querySelector('tbody'));
+        }
+    }
     getBufferCollection(startIndex, endIndex) {
         return this.parent.resourceBase.expandedResources.slice(startIndex, endIndex);
     }
@@ -13125,6 +13401,17 @@ class VirtualScroll {
             this.focusedEle = null;
         }
     }
+    setRenderedDates(resCollection) {
+        if (this.parent.currentView !== 'Month') {
+            const dateCol = resCollection.map((x) => x.date);
+            this.parent.resourceBase.renderedResources.forEach((x) => x.renderDates = dateCol);
+        }
+        else {
+            const dateCol = resCollection.map((x) => x.date.getDay());
+            const renderDates = this.parent.activeView.renderDates.filter((x) => dateCol.indexOf(x.getDay()) >= 0);
+            this.parent.resourceBase.renderedResources.forEach((x) => x.renderDates = renderDates);
+        }
+    }
     setTabIndex() {
         const resColWrap = this.parent.element.querySelector('.' + RESOURCE_COLUMN_WRAP_CLASS);
         const resCells = [].slice.call(this.parent.element.querySelectorAll('.' + RESOURCE_CELLS_CLASS));
@@ -13143,6 +13430,7 @@ class VirtualScroll {
     }
     destroy() {
         this.removeEventListener();
+        this.focusedEle = null;
     }
 }
 
@@ -13234,12 +13522,18 @@ class Render {
             this.parent.virtualScrollModule.destroy();
             this.parent.virtualScrollModule = null;
         }
-        if (this.parent.currentView.indexOf('Timeline') !== -1 && (this.parent.currentView.indexOf('Year') === -1 ||
+        if ((['Agenda', 'Year'].indexOf(this.parent.currentView) === -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);
-            this.parent.uiStateValues.top = 0;
+            if (this.parent.activeView.isTimelineView()) {
+                this.parent.uiStateValues.top = 0;
+            }
+            else {
+                this.parent.virtualScrollModule.isHorizontalScroll = true;
+                this.parent.uiStateValues.left = 0;
+            }
         }
         this.updateHeader();
         this.parent.activeView.renderLayout(CURRENT_PANEL_CLASS);
@@ -13457,8 +13751,7 @@ class Crud {
         if (this.parent.resizeModule && this.parent.resizeModule.actionObj && this.parent.resizeModule.actionObj.element) {
             this.parent.resizeModule.actionObj.element.style.display = 'none';
         }
-        if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.activeViewOptions.group.allowGroupEdit
-            && !this.parent.rowAutoHeight && !this.parent.virtualScrollModule && this.parent.activeViewOptions.group.byGroupID) {
+        if (this.parent.isSpecificResourceEvents()) {
             if (args.requestType === 'eventCreated' || args.requestType === 'eventRemoved') {
                 this.crudObj.isCrudAction = true;
                 this.crudObj.sourceEvent = [];
@@ -16536,6 +16829,16 @@ let Schedule = class Schedule extends Component {
             append(indentTemplate, td);
         }
     }
+    /**
+     * Method to check for refreshing the targeted resource row events.
+     *
+     * @returns {boolean} Returns the boolean value
+     * @private
+     */
+    isSpecificResourceEvents() {
+        return this.activeViewOptions.group.resources.length > 0 && !this.activeViewOptions.group.allowGroupEdit &&
+            !this.rowAutoHeight && !this.virtualScrollModule && this.activeViewOptions.group.byGroupID;
+    }
     unWireEvents() {
         EventHandler.remove(window, 'resize', this.onScheduleResize);
         EventHandler.remove(window, 'orientationchange', this.onScheduleResize);
@@ -17795,10 +18098,6 @@ let Schedule = class Schedule extends Component {
         this.hideSpinner();
         this.unWireEvents();
         this.destroyHeaderModule();
-        if (this.eventTooltip) {
-            this.eventTooltip.destroy();
-            this.eventTooltip = null;
-        }
         if (this.eventBase) {
             this.eventBase.destroy();
             this.eventBase = null;
@@ -17872,6 +18171,9 @@ __decorate([
 __decorate([
     Property(true)
 ], Schedule.prototype, "showTimeIndicator", void 0);
+__decorate([
+    Property(true)
+], Schedule.prototype, "allowSwiping", void 0);
 __decorate([
     Property('Week')
 ], Schedule.prototype, "currentView", void 0);
@@ -18193,7 +18495,7 @@ class ActionBase {
         const viewElement = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
         let trElement = [].slice.call(viewElement.querySelector('tr').children);
         if (!this.parent.activeView.isTimelineView() && this.parent.activeViewOptions.group.resources.length > 0 &&
-            !this.parent.isAdaptive && !this.parent.enableAdaptiveUI) {
+            !this.parent.isAdaptive && !this.parent.enableAdaptiveUI && !this.parent.virtualScrollModule) {
             trElement = this.getResourceElements(trElement);
         }
         const leftOffset = trElement[0].getBoundingClientRect();
@@ -18285,7 +18587,7 @@ class ActionBase {
         let originalElement;
         const guid = element.getAttribute('data-guid');
         const isMorePopup = element.offsetParent && element.offsetParent.classList.contains(MORE_EVENT_POPUP_CLASS);
-        if (isMorePopup || this.parent.activeView.isTimelineView()) {
+        if (isMorePopup || this.parent.activeView.isTimelineView() || (this.actionObj.action !== 'resize' && this.parent.virtualScrollModule)) {
             originalElement = [].slice.call(this.parent.element.querySelectorAll('[data-guid="' + guid + '"]'));
         }
         else {
@@ -18498,7 +18800,9 @@ class ActionBase {
         let workDays = this.parent.activeViewOptions.workDays;
         let groupOrder;
         if (this.parent.activeViewOptions.group.resources.length > 0) {
-            const resources = this.parent.resourceBase.lastResourceLevel.
+            const renderedResource = this.parent.virtualScrollModule && this.parent.virtualScrollModule.isHorizontalScroll ?
+                this.parent.resourceBase.renderedResources : this.parent.resourceBase.lastResourceLevel;
+            const resources = renderedResource.
                 filter((res) => res.groupIndex === this.actionObj.groupIndex);
             dateRender = resources[0].renderDates;
             const elementSelector = `.${WORK_CELLS_CLASS}[data-group-index="${this.actionObj.groupIndex}"]`;
@@ -18821,9 +19125,7 @@ class Resize extends ActionBase {
             if (resizeEventArgs.cancel) {
                 return;
             }
-            if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.rowAutoHeight
-                && !this.parent.activeViewOptions.group.allowGroupEdit && !this.parent.virtualScrollModule
-                && this.parent.activeViewOptions.group.byGroupID) {
+            if (this.parent.isSpecificResourceEvents()) {
                 this.parent.crudModule.crudObj.sourceEvent =
                     [this.parent.resourceBase.lastResourceLevel[parseInt(resizeEventArgs.element.getAttribute('data-group-index'), 10)]];
                 this.parent.crudModule.crudObj.targetEvent = this.parent.crudModule.crudObj.sourceEvent;
@@ -19433,7 +19735,7 @@ class YearEvent extends TimelineEvent {
                 'data-id': 'Appointment_' + record[this.fields.id],
                 'data-guid': record.Guid,
                 'role': 'button', 'tabindex': '0',
-                'aria-disabled': this.parent.eventBase.getReadonlyAttribute(record), 'aria-pressed': 'false', 'aria-grabbed': 'true',
+                'aria-disabled': this.parent.eventBase.getReadonlyAttribute(record), 'aria-pressed': 'false',
                 'aria-label': this.parent.getAnnouncementString(record)
             }
         });
@@ -19931,7 +20233,6 @@ class DragAndDrop extends ActionBase {
         this.actionObj.scrollInterval = null;
         this.actionClass('removeClass');
         this.parent.uiStateValues.action = false;
-        this.actionObj.action = null;
         if (this.isAllowDrop(e)) {
             return;
         }
@@ -19941,12 +20242,12 @@ class DragAndDrop extends ActionBase {
             cancel: false, data: this.getChangedData(this.updatedData), selectedData: this.updatedData,
             event: e, element: this.actionObj.element, target: target
         };
+        this.actionObj.action = null;
         this.parent.trigger(dragStop, dragArgs, (dragEventArgs) => {
             if (dragEventArgs.cancel) {
                 return;
             }
-            if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.activeViewOptions.group.allowGroupEdit
-                && !this.parent.rowAutoHeight && !this.parent.virtualScrollModule && this.parent.activeViewOptions.group.byGroupID) {
+            if (this.parent.isSpecificResourceEvents()) {
                 this.parent.crudModule.crudObj.isCrudAction = true;
                 this.parent.crudModule.crudObj.sourceEvent =
                     [this.parent.resourceBase.lastResourceLevel[parseInt(dragArgs.element.getAttribute('data-group-index'), 10)]];
@@ -20183,7 +20484,9 @@ class DragAndDrop extends ActionBase {
                 this.actionObj.clone.classList.contains(ALLDAY_APPOINTMENT_CLASS)) {
                 dragEnd = addDays(resetTime(dragEnd), 1);
             }
-            this.updateAllDayEvents(dragStart$$1, dragEnd, this.parent.activeViewOptions.group.byDate ? colIndex : undefined);
+            const index = this.parent.activeViewOptions.group.byDate || (this.parent.virtualScrollModule &&
+                !this.parent.activeViewOptions.timeScale.enable) ? colIndex : undefined;
+            this.updateAllDayEvents(dragStart$$1, dragEnd, index);
         }
         this.actionObj.start = new Date(+dragStart$$1);
         this.actionObj.end = new Date(+dragEnd);
@@ -20308,10 +20611,12 @@ class DragAndDrop extends ActionBase {
     }
     updateEventHeight(event, index, colIndex) {
         this.verticalEvent.initializeValues();
-        let datesCount = 0;
+        let datesCount = this.verticalEvent.getStartCount();
         if (!this.parent.uiStateValues.isGroupAdaptive) {
             for (let i = 0; i < this.actionObj.groupIndex; i++) {
-                datesCount = datesCount + this.verticalEvent.dateRender[i].length;
+                if (this.verticalEvent.dateRender[i]) {
+                    datesCount = datesCount + this.verticalEvent.dateRender[i].length;
+                }
             }
         }
         const indexGroup = this.parent.uiStateValues.isGroupAdaptive ? datesCount : this.actionObj.groupIndex;
@@ -20924,11 +21229,15 @@ class ViewBase {
     }
     createTableLayout(className) {
         const clsName = className || '';
-        const table = createElement('table', { className: SCHEDULE_TABLE_CLASS + ' ' + clsName, attrs: { role: 'table' } });
+        const table = createElement('table', { className: SCHEDULE_TABLE_CLASS + ' ' + clsName });
         const tbody = createElement('tbody');
         table.appendChild(tbody);
         return table;
     }
+    setAriaAttributes(table) {
+        table.setAttribute('role', 'grid');
+        table.setAttribute('aria-label', this.getLabelText(this.parent.currentView));
+    }
     createColGroup(table, lastRow) {
         let length = lastRow.length;
         if (lastRow[0] && lastRow[0].colSpan) {
@@ -21386,6 +21695,32 @@ class ViewBase {
         }
         return null;
     }
+    resetColLevels() {
+        this.parent.resourceBase.expandedResources = [];
+        const renderedCount = this.parent.virtualScrollModule.getRenderedCount();
+        const lastLevel = this.parent.activeViewOptions.group.byDate ? this.colLevels[0] :
+            this.parent.resourceBase.renderedResources;
+        let index = 0;
+        for (let i = 0; i < lastLevel.length; i++) {
+            if (index >= renderedCount) {
+                break;
+            }
+            index += lastLevel[i].colSpan;
+            this.parent.resourceBase.expandedResources.push(lastLevel[i]);
+        }
+        if (this.parent.activeViewOptions.group.byDate) {
+            this.colLevels[0] = this.parent.resourceBase.expandedResources;
+            this.parent.virtualScrollModule.setRenderedDates(this.parent.resourceBase.expandedResources);
+        }
+        else {
+            this.colLevels[this.colLevels.length - 2] = this.parent.resourceBase.expandedResources;
+            this.parent.resourceBase.renderedResources = this.parent.resourceBase.expandedResources;
+        }
+        if (this.parent.currentView !== 'Month') {
+            this.colLevels[this.colLevels.length - 1] = this.colLevels[this.colLevels.length - 1].slice(0, index);
+            this.parent.resourceBase.expandedResources = this.colLevels[this.colLevels.length - 1];
+        }
+    }
     destroy() {
         if (this.element && this.element.parentNode) {
             remove(this.element);
@@ -21630,14 +21965,25 @@ class VerticalView extends ViewBase {
         if (!isNullOrUndefined(this.parent.resourceBase) && (this.parent.activeViewOptions.group.resources.length > 0) &&
             !this.parent.uiStateValues.isGroupAdaptive) {
             let count = 0;
-            for (const resource of this.parent.resourceBase.lastResourceLevel) {
-                const index = this.parent.getIndexOfDate(resource.renderDates, resetTime(this.parent.getCurrentTime()));
-                if (index >= 0) {
-                    const resIndex = this.parent.activeViewOptions.group.byDate ?
-                        (this.parent.resourceBase.lastResourceLevel.length * index) + count : count + index;
-                    currentDateIndex.push(resIndex);
+            if (this.parent.virtualScrollModule && this.parent.activeViewOptions.allowVirtualScrolling &&
+                this.parent.activeViewOptions.group.byDate) {
+                for (const resource of this.parent.resourceBase.expandedResources) {
+                    if (resetTime(resource.date).getTime() === resetTime(this.parent.getCurrentTime()).getTime()) {
+                        currentDateIndex.push(count);
+                    }
+                    count += 1;
+                }
+            }
+            else {
+                for (const resource of this.parent.resourceBase.renderedResources) {
+                    const index = this.parent.getIndexOfDate(resource.renderDates, resetTime(this.parent.getCurrentTime()));
+                    if (index >= 0) {
+                        const resIndex = this.parent.activeViewOptions.group.byDate ?
+                            (this.parent.resourceBase.lastResourceLevel.length * index) + count : count + index;
+                        currentDateIndex.push(resIndex);
+                    }
+                    count += this.parent.activeViewOptions.group.byDate ? 1 : resource.renderDates.length;
                 }
-                count += this.parent.activeViewOptions.group.byDate ? 1 : resource.renderDates.length;
             }
         }
         else {
@@ -21780,7 +22126,7 @@ class VerticalView extends ViewBase {
         if (!this.parent.activeViewOptions.timeScale.enable) {
             addClass([this.element], [TIMESCALE_DISABLE, this.viewClass]);
         }
-        if (this.parent.activeViewOptions.allowVirtualScrolling) {
+        if (this.parent.activeViewOptions.allowVirtualScrolling && !this.parent.uiStateValues.isGroupAdaptive) {
             clsList.push(VIRTUAL_SCROLL_CLASS);
         }
         if (this.parent.rowAutoHeight && this.parent.eventSettings.ignoreWhitespace) {
@@ -21811,6 +22157,9 @@ class VerticalView extends ViewBase {
         prepend([tr], this.element.querySelector('tbody'));
     }
     renderContent() {
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            this.parent.resourceBase.renderedResources = extend([], this.parent.resourceBase.lastResourceLevel, null, true);
+        }
         const tr = createElement('tr');
         const workTd = createElement('td');
         if (this.parent.isAdaptive) {
@@ -21826,13 +22175,22 @@ class VerticalView extends ViewBase {
             tr.appendChild(workTd);
         }
         else {
-            workTd.appendChild(this.renderContentArea());
+            const levels = this.colLevels.slice(0);
+            if (this.parent.virtualScrollModule) {
+                this.resetColLevels();
+            }
+            const wrap = this.renderContentArea();
+            workTd.appendChild(wrap);
             if (this.parent.activeViewOptions.timeScale.enable) {
                 const timesTd = createElement('td');
                 timesTd.appendChild(this.renderTimeCells());
                 tr.appendChild(timesTd);
             }
             tr.appendChild(workTd);
+            if (this.parent.virtualScrollModule) {
+                this.colLevels = levels;
+                this.parent.virtualScrollModule.renderVirtualTrack(wrap);
+            }
         }
         this.element.querySelector('tbody').appendChild(tr);
     }
@@ -21904,7 +22262,6 @@ class VerticalView extends ViewBase {
             td.className = [ALLDAY_CELLS_CLASS];
             td.type = 'alldayCells';
             const ntd = this.createTd(td);
-            ntd.setAttribute('role', 'gridcell');
             ntd.setAttribute('data-date', td.date.getTime().toString());
             if (!isNullOrUndefined(td.groupIndex)) {
                 ntd.setAttribute('data-group-index', '' + td.groupIndex);
@@ -21917,7 +22274,7 @@ class VerticalView extends ViewBase {
         }
         table.querySelector('tbody').appendChild(ntr);
         const thead = createElement('thead');
-        thead.appendChild(this.createEventWrapper('allDay'));
+        thead.appendChild(this.parent.eventBase.createEventWrapper('allDay'));
         prepend([thead], table);
     }
     createTd(td) {
@@ -21937,7 +22294,6 @@ class VerticalView extends ViewBase {
         }
         if (td.type === 'dateHeader' && td.className.indexOf(HEADER_CELLS_CLASS) >= 0) {
             tdEle.setAttribute('data-date', td.date.getTime().toString());
-            tdEle.setAttribute('role', 'gridcell');
             if (!isNullOrUndefined(td.groupIndex)) {
                 tdEle.setAttribute('data-group-index', '' + td.groupIndex);
             }
@@ -21977,6 +22333,7 @@ class VerticalView extends ViewBase {
     renderContentArea() {
         const wrap = createElement('div', { className: CONTENT_WRAP_CLASS });
         const tbl = this.createTableLayout(CONTENT_TABLE_CLASS);
+        this.setAriaAttributes(tbl);
         this.addAutoHeightClass(tbl);
         this.renderContentTable(tbl);
         this.createColGroup(tbl, this.colLevels.slice(-1)[0]);
@@ -21987,20 +22344,25 @@ class VerticalView extends ViewBase {
         return wrap;
     }
     renderContentTable(table) {
-        const tr = createElement('tr', { attrs: { role: 'row' } });
-        const td = createElement('td', { attrs: { role: 'gridcell', 'aria-selected': 'false' } });
-        const tbody = table.querySelector('tbody');
+        const tBody = table.querySelector('tbody');
+        append(this.getContentRows(), tBody);
+        this.renderContentTableHeader(table);
+    }
+    getContentRows() {
+        const rows = [];
+        const tr = createElement('tr');
+        const td = createElement('td', { attrs: { 'aria-selected': 'false' } });
         const handler = (r) => {
             const ntr = tr.cloneNode();
             for (const tdData of this.colLevels[this.colLevels.length - 1]) {
                 const ntd = this.createContentTd(tdData, r, td);
                 ntr.appendChild(ntd);
             }
-            tbody.appendChild(ntr);
+            rows.push(ntr);
             return r;
         };
         this.getTimeSlotRows(handler);
-        this.renderContentTableHeader(table);
+        return rows;
     }
     createContentTd(tdData, r, td) {
         const ntd = td.cloneNode();
@@ -22047,35 +22409,12 @@ class VerticalView extends ViewBase {
     }
     renderContentTableHeader(table) {
         const thead = createElement('thead');
-        thead.appendChild(this.createEventWrapper());
+        thead.appendChild(this.parent.eventBase.createEventWrapper());
         if (this.parent.activeViewOptions.timeScale.enable) {
-            thead.appendChild(this.createEventWrapper('timeIndicator'));
+            thead.appendChild(this.parent.eventBase.createEventWrapper('timeIndicator'));
         }
         prepend([thead], table);
     }
-    createEventWrapper(type = '') {
-        const tr = createElement('tr');
-        const levels = this.colLevels.slice(-1)[0];
-        for (let i = 0, len = levels.length; i < len; i++) {
-            const col = levels[i];
-            const appointmentWrap = createElement('td', {
-                className: (type === 'allDay') ? ALLDAY_APPOINTMENT_WRAPPER_CLASS : (type === 'timeIndicator') ?
-                    TIMELINE_WRAPPER_CLASS : DAY_WRAPPER_CLASS, attrs: { 'data-date': col.date.getTime().toString() }
-            });
-            if (!isNullOrUndefined(col.groupIndex)) {
-                appointmentWrap.setAttribute('data-group-index', col.groupIndex.toString());
-            }
-            if (type === '') {
-                const innerWrapper = createElement('div', {
-                    id: APPOINTMENT_WRAPPER_CLASS + '-' + i.toString(),
-                    className: APPOINTMENT_WRAPPER_CLASS
-                });
-                appointmentWrap.appendChild(innerWrapper);
-            }
-            tr.appendChild(appointmentWrap);
-        }
-        return tr;
-    }
     getScrollableElement() {
         if (this.parent.isAdaptive && !this.isTimelineView()) {
             return this.element.querySelector('.' + SCROLL_CONTAINER_CLASS);
@@ -22427,7 +22766,7 @@ class Month extends ViewBase {
         if (this.parent.activeViewOptions.group.byDate) {
             clsList.push('e-by-date');
         }
-        if (this.parent.activeViewOptions.allowVirtualScrolling) {
+        if (this.parent.activeViewOptions.allowVirtualScrolling && !this.parent.uiStateValues.isGroupAdaptive) {
             clsList.push(VIRTUAL_SCROLL_CLASS);
         }
         if (this.parent.rowAutoHeight && this.parent.eventSettings.ignoreWhitespace) {
@@ -22475,11 +22814,18 @@ class Month extends ViewBase {
         }
     }
     renderContent() {
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            this.parent.resourceBase.renderedResources = extend([], this.parent.resourceBase.lastResourceLevel, null, true);
+        }
         const tr = createElement('tr');
         if (this.parent.activeViewOptions.showWeekNumber) {
             tr.appendChild(this.renderWeekNumberContent());
         }
         const workTd = createElement('td');
+        const levels = this.colLevels.slice(0);
+        if (this.parent.virtualScrollModule) {
+            this.resetColLevels();
+        }
         const wrap = createElement('div', { className: CONTENT_WRAP_CLASS });
         const contentArea = this.renderContentArea();
         if (this.parent.currentView === 'Month') {
@@ -22493,6 +22839,10 @@ class Month extends ViewBase {
         EventHandler.add(wrap, 'scroll', this.onContentScroll, this);
         workTd.appendChild(wrap);
         tr.appendChild(workTd);
+        if (this.parent.virtualScrollModule) {
+            this.colLevels = levels;
+            this.parent.virtualScrollModule.renderVirtualTrack(wrap);
+        }
         this.element.querySelector('tbody').appendChild(tr);
         this.renderAppointmentContainer();
     }
@@ -22520,6 +22870,11 @@ class Month extends ViewBase {
         const wrap = createElement('div', { className: DATE_HEADER_WRAP_CLASS });
         container.appendChild(wrap);
         const table = this.createTableLayout();
+        if (this.parent.currentView === 'Month') {
+            const thead = createElement('thead');
+            thead.appendChild(createElement('tr'));
+            prepend([thead], table);
+        }
         this.createColGroup(table, this.colLevels[this.colLevels.length - 1]);
         const trEle = createElement('tr');
         for (let i = 0; i < this.colLevels.length; i++) {
@@ -22607,9 +22962,12 @@ class Month extends ViewBase {
             const dates = this.renderDates.map((date) => new Date(+date));
             const count = this.parent.activeViewOptions.showWeekend ? WEEK_LENGTH :
                 this.parent.activeViewOptions.workDays.length;
+            const level = this.colLevels.slice(0, 1)[0];
+            const startIndex = this.renderDates.map(Number).indexOf(+level[0].date);
             for (let i = 0; i < (this.renderDates.length / count); i++) {
                 const colDates = dates.splice(0, count);
-                for (const colDate of colDates) {
+                for (let j = startIndex; j < (this.colLevels[0].length + startIndex) && j < colDates.length; j++) {
+                    const colDate = colDates[j];
                     if (includeResource) {
                         const lastRow = this.colLevels[(this.colLevels.length - 1)];
                         const resourcesTd = lastRow.slice(0, lastRow.length / count);
@@ -22645,6 +23003,7 @@ class Month extends ViewBase {
     }
     renderContentArea() {
         const tbl = this.createTableLayout(CONTENT_TABLE_CLASS);
+        this.setAriaAttributes(tbl);
         this.addAutoHeightClass(tbl);
         if (this.parent.currentView === 'TimelineMonth') {
             this.createColGroup(tbl, this.colLevels[this.colLevels.length - 1]);
@@ -22661,8 +23020,8 @@ class Month extends ViewBase {
     }
     getContentRows() {
         const trows = [];
-        const tr = createElement('tr', { attrs: { role: 'row' } });
-        const td = createElement('td', { attrs: { role: 'gridcell', 'aria-selected': 'false' } });
+        const tr = createElement('tr');
+        const td = createElement('td', { attrs: { 'aria-selected': 'false' } });
         const slotDatas = this.getContentSlots();
         for (let row = 0; row < slotDatas.length; row++) {
             const ntr = tr.cloneNode();
@@ -22936,7 +23295,7 @@ class Year extends ViewBase {
             this.generateColumnLevels();
             this.renderResourceMobileLayout();
         }
-        this.wireEvents(this.element.querySelector('.' + CONTENT_WRAP_CLASS), 'scroll');
+        EventHandler.add(this.element.querySelector('.' + CONTENT_WRAP_CLASS), 'scroll', this.onContentScroll, this);
         this.parent.notify(contentReady, {});
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -22971,7 +23330,14 @@ class Year extends ViewBase {
     }
     renderCalendarHeader(currentDate) {
         const headerWrapper = createElement('div', { className: 'e-header e-month' });
-        const headerContent = createElement('div', { className: 'e-day e-title', innerHTML: this.getMonthName(currentDate) });
+        const headerContent = createElement('div', { className: 'e-day e-title' });
+        if (this.parent.monthHeaderTemplate) {
+            const args = { date: currentDate, type: 'monthHeader' };
+            this.renderTemplates(this.parent.getMonthHeaderTemplate(), args, 'monthHeaderTemplate', this.parent.activeViewOptions.monthHeaderTemplateName, headerContent);
+        }
+        else {
+            headerContent.innerHTML = this.getMonthName(currentDate);
+        }
         headerWrapper.appendChild(headerContent);
         this.parent.trigger(renderCell, { elementType: 'headerCells', element: headerContent, date: currentDate });
         return headerWrapper;
@@ -22981,6 +23347,7 @@ class Year extends ViewBase {
         const contentWrapper = createElement('div', { className: 'e-content e-month' });
         const contentTable = this.createTableLayout('e-calendar-table ' + CONTENT_TABLE_CLASS);
         contentWrapper.appendChild(contentTable);
+        this.setAriaAttributes(contentTable);
         const thead = createElement('thead', { className: 'e-week-header' });
         const tr = createElement('tr');
         let currentWeek = getWeekFirstDate(firstDateOfMonth(currentDate), this.parent.firstDayOfWeek);
@@ -22988,7 +23355,15 @@ class Year extends ViewBase {
             tr.appendChild(createElement('th'));
         }
         for (let i = 0; i < WEEK_LENGTH; i++) {
-            tr.appendChild(createElement('th', { innerHTML: this.parent.getDayNames('narrow')[currentWeek.getDay()] }));
+            if (this.parent.dayHeaderTemplate) {
+                const th = createElement('th');
+                const args = { date: currentWeek, type: 'dayHeader' };
+                this.renderTemplates(this.parent.getDayHeaderTemplate(), args, 'dayHeaderTemplate', this.parent.activeViewOptions.dayHeaderTemplateName, th);
+                tr.appendChild(th);
+            }
+            else {
+                tr.appendChild(createElement('th', { innerHTML: this.parent.getDayNames('narrow')[currentWeek.getDay()] }));
+            }
             currentWeek = new Date(currentWeek.getTime() + MS_PER_DAY);
         }
         thead.appendChild(tr);
@@ -22996,12 +23371,12 @@ class Year extends ViewBase {
         const tbody = contentTable.querySelector('tbody');
         while (dateCollection.length > 0) {
             const weekDates = dateCollection.splice(0, WEEK_LENGTH);
-            const tr = createElement('tr', { attrs: { 'role': 'row' } });
+            const tr = createElement('tr');
             if (this.parent.activeViewOptions.showWeekNumber) {
                 const weekNumber = this.parent.getWeekNumberContent(weekDates);
                 const td = createElement('td', {
                     className: 'e-week-number',
-                    attrs: { 'role': 'gridcell', 'title': this.parent.localeObj.getConstant('week') + ' ' + weekNumber },
+                    attrs: { 'title': this.parent.localeObj.getConstant('week') + ' ' + weekNumber },
                     innerHTML: weekNumber
                 });
                 tr.appendChild(td);
@@ -23010,13 +23385,23 @@ class Year extends ViewBase {
             for (const date of weekDates) {
                 const td = createElement('td', {
                     className: 'e-cell ' + WORK_CELLS_CLASS,
-                    attrs: { 'role': 'gridcell', 'aria-selected': 'false', 'data-date': date.getTime().toString() }
+                    attrs: { 'aria-selected': 'false', 'data-date': date.getTime().toString() }
                 });
-                const span = createElement('span', {
-                    className: 'e-day', innerHTML: this.parent.globalize.formatDate(date, { skeleton: 'd', calendar: this.parent.getCalendarMode() }),
-                    attrs: { title: this.parent.globalize.formatDate(date, { type: 'date', skeleton: 'full' }) }
-                });
-                td.appendChild(span);
+                if (this.parent.activeViewOptions.cellHeaderTemplate) {
+                    const args = { date: date, type: 'monthCells' };
+                    this.renderTemplates(this.parent.getCellHeaderTemplate(), args, 'cellHeaderTemplate', this.parent.activeViewOptions.cellHeaderTemplateName, td);
+                }
+                else {
+                    const span = createElement('span', {
+                        className: 'e-day', innerHTML: this.parent.globalize.formatDate(date, { skeleton: 'd', calendar: this.parent.getCalendarMode() }),
+                        attrs: { title: this.parent.globalize.formatDate(date, { type: 'date', skeleton: 'full' }) }
+                    });
+                    td.appendChild(span);
+                }
+                if (this.parent.activeViewOptions.cellTemplate) {
+                    const args = { date: date, type: 'monthCells' };
+                    this.renderTemplates(this.parent.getCellTemplate(), args, 'cellTemplate', this.parent.activeViewOptions.cellTemplateName, td);
+                }
                 let classList$$1 = [];
                 if (currentDate.getMonth() !== date.getMonth()) {
                     classList$$1.push(OTHERMONTH_CLASS);
@@ -23028,7 +23413,10 @@ class Year extends ViewBase {
                     addClass([td], classList$$1);
                 }
                 tr.appendChild(td);
-                this.wireEvents(td, 'cell');
+                EventHandler.add(td, 'click', this.onCellClick, this);
+                if (!this.parent.isAdaptive) {
+                    EventHandler.add(td, 'dblclick', this.parent.workCellAction.cellDblClick, this.parent.workCellAction);
+                }
                 this.parent.trigger(renderCell, { elementType: 'workCells', element: td, date: date });
             }
             tbody.appendChild(tr);
@@ -23108,6 +23496,11 @@ class Year extends ViewBase {
         // eslint-disable-next-line prefer-spread
         return Array.apply(null, { length: this.parent.activeViewOptions.monthsCount }).map((value, index) => this.parent.firstMonthOfYear + index);
     }
+    renderTemplates(fn, args, tName, vName, ele) {
+        const templateId = this.parent.element.id + '_' + vName + tName;
+        const template = [].slice.call(fn(args, this.parent, tName, templateId, false));
+        append(template, ele);
+    }
     onCellClick(e) {
         let target = closest(e.target, '.' + WORK_CELLS_CLASS);
         const startDate = this.parent.getDateFromElement(target);
@@ -23130,6 +23523,8 @@ class Year extends ViewBase {
                 target = this.parent.element.querySelector(':not(.' + OTHERMONTH_CLASS + ')[data-date="' + target.getAttribute('data-date') + '"]');
             }
             this.parent.activeCellsData = this.parent.getCellDetails(target);
+            const args = extend(this.parent.activeCellsData, { cancel: false, event: e, name: 'cellClick' });
+            this.parent.trigger(cellClick, args);
             this.parent.quickPopup.moreEventClick(moreEventArgs, endDate);
         }
     }
@@ -23241,23 +23636,6 @@ class Year extends ViewBase {
         this.yearEventModule.renderAppointments();
         this.parent.notify(eventsLoaded, args);
     }
-    wireEvents(element, type) {
-        if (type === 'cell') {
-            if (this.parent.currentView !== 'TimelineYear') {
-                EventHandler.add(element, 'click', this.onCellClick, this);
-            }
-            else {
-                EventHandler.add(element, 'mousedown', this.parent.workCellAction.cellMouseDown, this.parent.workCellAction);
-                EventHandler.add(element, 'click', this.parent.workCellAction.cellClick, this.parent.workCellAction);
-                if (!this.parent.isAdaptive) {
-                    EventHandler.add(element, 'dblclick', this.parent.workCellAction.cellDblClick, this.parent.workCellAction);
-                }
-            }
-        }
-        else {
-            EventHandler.add(element, 'scroll', this.onContentScroll, this);
-        }
-    }
     scrollToDate(scrollDate) {
         const date = +new Date(resetTime(scrollDate));
         let element = this.element.querySelector('.' + WORK_CELLS_CLASS + ':not(.' + OTHERMONTH_CLASS + ')[data-date="' + date + '"]');
@@ -23324,7 +23702,6 @@ class AgendaBase extends ViewBase {
                         'tabindex': '0',
                         'aria-disabled': this.parent.eventBase.getReadonlyAttribute(listData[li]),
                         'aria-pressed': 'false',
-                        'aria-grabbed': 'true',
                         'aria-label': this.parent.getAnnouncementString(listData[li])
                     }
                 });
@@ -23528,9 +23905,9 @@ class AgendaBase extends ViewBase {
         }
     }
     createResourceTableRow(tContent, tBody) {
-        const tr = createElement('tr', { attrs: { role: 'row' } });
+        const tr = createElement('tr');
         let ntr;
-        const td = createElement('td', { attrs: { role: 'gridcell', 'aria-selected': 'false' } });
+        const td = createElement('td', { attrs: { 'aria-selected': 'false' } });
         let tempData;
         let rowSpan = 0;
         let level;
@@ -23625,11 +24002,10 @@ class AgendaBase extends ViewBase {
     }
     createTableRowElement(date, type) {
         const daysCount = getDaysCount(this.parent.selectedDate.getTime(), date.getTime());
-        const tr = createElement('tr', { attrs: { 'role': 'row', 'data-row-index': daysCount.toString() } });
+        const tr = createElement('tr', { attrs: { 'data-row-index': daysCount.toString() } });
         const td = createElement('td', {
             attrs: {
                 'class': (type === 'monthHeader') ? MONTH_HEADER_CLASS : AGENDA_CELLS_CLASS,
-                'role': 'gridcell',
                 'aria-selected': 'false',
                 'data-column-index': daysCount.toString(),
                 'data-date': date.getTime().toString()
@@ -23677,6 +24053,7 @@ class Agenda extends AgendaBase {
         const wrap = createElement('div', { className: CONTENT_WRAP_CLASS });
         workTd.appendChild(wrap);
         const tbl = this.createTableLayout(CONTENT_TABLE_CLASS);
+        this.setAriaAttributes(tbl);
         wrap.appendChild(tbl);
         const tBody = tbl.querySelector('tbody');
         const agendaDate = resetTime(this.parent.selectedDate);
@@ -24560,8 +24937,8 @@ class TimelineViews extends VerticalView {
     }
     getContentRows() {
         const rows = [];
-        const tr = createElement('tr', { attrs: { role: 'row' } });
-        const td = createElement('td', { attrs: { role: 'gridcell', 'aria-selected': 'false' } });
+        const tr = createElement('tr');
+        const td = createElement('td', { attrs: { 'aria-selected': 'false' } });
         const trCount = this.getRowCount();
         for (let i = 0; i < trCount; i++) {
             const ntr = tr.cloneNode();
@@ -24909,6 +25286,7 @@ class TimelineYear extends Year {
         const content = createElement('div', { className: CONTENT_WRAP_CLASS });
         lastTd.appendChild(content);
         const contentTable = this.createTableLayout(CONTENT_TABLE_CLASS);
+        this.setAriaAttributes(contentTable);
         content.appendChild(contentTable);
         const eventWrapper = createElement('div', { className: EVENT_TABLE_CLASS });
         content.appendChild(eventWrapper);
@@ -24942,12 +25320,12 @@ class TimelineYear extends Year {
             let monthDate = new Date(this.parent.selectedDate.getFullYear(), months[month], 1);
             let monthStart = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
             let monthEnd = this.parent.calendarUtil.getMonthEndDate(new Date(monthDate.getTime()));
-            const tr = createElement('tr', { attrs: { 'role': 'row' } });
+            const tr = createElement('tr');
             const monthTr = tr.cloneNode();
             monthBody.appendChild(monthTr);
             const contentTr = tr.cloneNode();
             contentBody.appendChild(contentTr);
-            const monthTd = createElement('td', { className: MONTH_HEADER_CLASS, attrs: { 'role': 'gridcell' } });
+            const monthTd = createElement('td', { className: MONTH_HEADER_CLASS });
             if (this.parent.activeViewOptions.orientation === 'Horizontal') {
                 if (this.parent.monthHeaderTemplate) {
                     append(this.renderDayMonthHeaderTemplate(monthStart, month, 'monthHeaderTemplate'), monthTd);
@@ -24982,7 +25360,7 @@ class TimelineYear extends Year {
                     isDateAvail = column >= monthStart.getDay() && date.getTime() < monthEnd.getTime();
                 }
                 const td = createElement('td', {
-                    className: WORK_CELLS_CLASS, attrs: { 'role': 'gridcell', 'aria-selected': 'false' }
+                    className: WORK_CELLS_CLASS, attrs: { 'aria-selected': 'false' }
                 });
                 contentTr.appendChild(td);
                 const dateHeader = createElement('div', {
@@ -25023,7 +25401,7 @@ class TimelineYear extends Year {
                 td.appendChild(dateHeader);
                 if (isDateAvail) {
                     td.setAttribute('data-date', date.getTime().toString());
-                    this.wireEvents(td, 'cell');
+                    this.wireEvents(td);
                 }
                 this.renderCellTemplate({ date: date, type: 'workCells' }, td);
                 this.parent.trigger(renderCell, { elementType: 'workCells', element: td, date: date });
@@ -25039,7 +25417,7 @@ class TimelineYear extends Year {
         const tRow = [];
         const monthCells = this.getMonths();
         for (let row = 0; row < this.parent.resourceBase.renderedResources.length; row++) {
-            const tr = createElement('tr', { attrs: { 'role': 'row' } });
+            const tr = createElement('tr');
             tRow.push(tr);
             let resData;
             if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
@@ -25062,14 +25440,14 @@ class TimelineYear extends Year {
                 const tdELe = createElement('td', {
                     className: WORK_CELLS_CLASS,
                     attrs: {
-                        'role': 'gridcell', 'aria-selected': 'false',
+                        '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.wireEvents(tdELe);
                 this.parent.trigger(renderCell, { elementType: 'resourceGroupCells', element: tdELe, date: date });
                 tr.appendChild(tdELe);
             }
@@ -25080,7 +25458,7 @@ class TimelineYear extends Year {
         const months = this.getMonths();
         for (let row = 0; row < this.rowCount; row++) {
             wrapper.appendChild(createElement('div', { className: APPOINTMENT_CONTAINER_CLASS }));
-            const tr = createElement('tr', { attrs: { 'role': 'row' } });
+            const tr = createElement('tr');
             contentBody.appendChild(tr);
             let resData;
             if (this.parent.activeViewOptions.orientation === 'Vertical' && this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
@@ -25093,7 +25471,7 @@ class TimelineYear extends Year {
                 monthBody.appendChild(monthTr);
                 const monthTd = createElement('td', {
                     className: MONTH_HEADER_CLASS,
-                    attrs: { 'role': 'gridcell', 'data-date': date.getTime().toString() }
+                    attrs: { 'data-date': date.getTime().toString() }
                 });
                 if (this.parent.monthHeaderTemplate) {
                     append(this.renderDayMonthHeaderTemplate(monthDate, row, 'monthHeaderTemplate'), monthTd);
@@ -25125,14 +25503,14 @@ class TimelineYear extends Year {
                 const td = createElement('td', {
                     className: WORK_CELLS_CLASS,
                     attrs: {
-                        'role': 'gridcell', 'aria-selected': 'false',
+                        'aria-selected': 'false',
                         'data-date': date.getTime().toString()
                     }
                 });
                 addClass([td], classList$$1);
                 td.setAttribute('data-group-index', groupIndex.toString());
                 this.renderCellTemplate({ date: date, type: 'resourceGroupCells', groupIndex: groupIndex }, td);
-                this.wireEvents(td, 'cell');
+                this.wireEvents(td);
                 tr.appendChild(td);
                 this.parent.trigger(renderCell, { elementType: 'resourceGroupCells', element: td, date: date });
             }
@@ -25197,6 +25575,13 @@ class TimelineYear extends Year {
             return this.getContentAreaElement();
         }
     }
+    wireEvents(element) {
+        EventHandler.add(element, 'mousedown', this.parent.workCellAction.cellMouseDown, this.parent.workCellAction);
+        EventHandler.add(element, 'click', this.parent.workCellAction.cellClick, this.parent.workCellAction);
+        if (!this.parent.isAdaptive) {
+            EventHandler.add(element, 'dblclick', this.parent.workCellAction.cellDblClick, this.parent.workCellAction);
+        }
+    }
 }
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -25465,7 +25850,7 @@ class ICalendarImport {
         const appoint = [];
         const uId = 'UID';
         const fields = this.parent.eventFields;
-        let appointmentIds = [];
+        const appointmentIds = [];
         this.parent.eventsData.forEach((eventObj) => {
             appointmentIds.push(eventObj[fields.id]);
         });
@@ -25744,5 +26129,5 @@ class Print {
  * Export Schedule components
  */
 
-export { Schedule, cellClick, cellDoubleClick, moreEventsClick, select, hover, actionBegin, actionComplete, actionFailure, navigating, renderCell, eventClick, eventRendered, dataBinding, dataBound, popupOpen, popupClose, dragStart, drag, dragStop, resizeStart, resizing, resizeStop, inlineClick, initialLoad, initialEnd, print$1 as print, dataReady, eventsLoaded, contentReady, scroll, virtualScroll, scrollUiUpdate, uiUpdate, documentClick, cellMouseDown, WEEK_LENGTH, DEFAULT_WEEKS, MS_PER_DAY, MS_PER_MINUTE, getElementHeightFromClass, getTranslateY, getWeekFirstDate, getWeekLastDate, firstDateOfMonth, lastDateOfMonth, getWeekNumber, getWeekMiddleDate, setTime, resetTime, getDateInMs, getDateCount, addDays, addMonths, addYears, getStartEndHours, getMaxDays, getDaysCount, getDateFromString, getScrollBarWidth, findIndexInData, getOuterHeight, removeChildren, isDaylightSavingTime, getUniversalTime, isMobile, isIPadDevice, capitalizeFirstWord, Resize, DragAndDrop, HeaderRenderer, ViewBase, Day, Week, WorkWeek, Month, Year, Agenda, MonthAgenda, TimelineViews, TimelineMonth, TimelineYear, Timezone, timezoneData, ICalendarExport, ICalendarImport, ExcelExport, Print, RecurrenceEditor, generateSummary, generate, getDateFromRecurrenceDateString, extractObjectFromRule, getCalendarUtil, getRecurrenceStringFromDate, Gregorian, Islamic };
+export { Schedule, cellClick, cellDoubleClick, moreEventsClick, select, hover, actionBegin, actionComplete, actionFailure, navigating, renderCell, eventClick, eventRendered, dataBinding, dataBound, popupOpen, popupClose, dragStart, drag, dragStop, resizeStart, resizing, resizeStop, inlineClick, initialLoad, initialEnd, print$1 as print, dataReady, eventsLoaded, contentReady, scroll, virtualScroll, scrollUiUpdate, uiUpdate, documentClick, cellMouseDown, WEEK_LENGTH, DEFAULT_WEEKS, MS_PER_DAY, MS_PER_MINUTE, getElementHeightFromClass, getElementWidthFromClass, getTranslateY, getTranslateX, getWeekFirstDate, getWeekLastDate, firstDateOfMonth, lastDateOfMonth, getWeekNumber, getWeekMiddleDate, setTime, resetTime, getDateInMs, getDateCount, addDays, addMonths, addYears, getStartEndHours, getMaxDays, getDaysCount, getDateFromString, getScrollBarWidth, findIndexInData, getOuterHeight, removeChildren, isDaylightSavingTime, getUniversalTime, isMobile, isIPadDevice, capitalizeFirstWord, Resize, DragAndDrop, HeaderRenderer, ViewBase, Day, Week, WorkWeek, Month, Year, Agenda, MonthAgenda, TimelineViews, TimelineMonth, TimelineYear, Timezone, timezoneData, ICalendarExport, ICalendarImport, ExcelExport, Print, RecurrenceEditor, generateSummary, generate, getDateFromRecurrenceDateString, extractObjectFromRule, getCalendarUtil, getRecurrenceStringFromDate, Gregorian, Islamic };
 //# sourceMappingURL=ej2-schedule.es2015.js.map