@syncfusion/ej2-schedule 20.2.50 → 20.3.49

package/dist/es6/ej2-schedule.es5.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) {
+    var width = 0;
+    var 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) {
+    var style = getComputedStyle(element);
+    return window.WebKitCSSMatrix ?
+        new WebKitCSSMatrix(style.webkitTransform).m41 : 0;
+}
 /**
  * Method to get week first date
  *
@@ -399,9 +427,7 @@ function removeChildren(element) {
     var elementChildren = [].slice.call(element.children);
     for (var _i = 0, elementChildren_1 = elementChildren; _i < elementChildren_1.length; _i++) {
         var elementChild = elementChildren_1[_i];
-        if (!elementChild.classList.contains('blazor-template')) {
-            element.removeChild(elementChild);
-        }
+        element.removeChild(elementChild);
     }
 }
 /**
@@ -1586,7 +1612,7 @@ var ScheduleTouch = /** @__PURE__ @class */ (function () {
         this.touchRightDirection = this.parent.enableRtl ? 'Left' : 'Right';
     }
     ScheduleTouch.prototype.scrollHandler = function (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;
@@ -1641,7 +1667,7 @@ var ScheduleTouch = /** @__PURE__ @class */ (function () {
         }
     };
     ScheduleTouch.prototype.swipeHandler = function (e) {
-        if (!this.isScrollTriggered || this.parent.uiStateValues.action) {
+        if (!this.isScrollTriggered || this.parent.uiStateValues.action || !this.parent.allowSwiping) {
             return;
         }
         this.isScrollTriggered = false;
@@ -6019,7 +6045,8 @@ var EventBase = /** @__PURE__ @class */ (function () {
         var startDate = event[this.parent.eventFields.startTime];
         var endDate = event[this.parent.eventFields.endTime];
         var eventRule = event[this.parent.eventFields.recurrenceRule];
-        var duration = endDate.getTime() - startDate.getTime();
+        var timeZoneDiff = endDate.getTimezoneOffset() - startDate.getTimezoneOffset();
+        var duration = (endDate.getTime() - startDate.getTime()) - (timeZoneDiff * 60000);
         viewDate = new Date((viewDate || this.parent.activeView.startDate()).getTime() - duration);
         var exception = event[this.parent.eventFields.recurrenceException];
         var maxCount;
@@ -6233,7 +6260,7 @@ var EventBase = /** @__PURE__ @class */ (function () {
             element.style[type] = !isNullOrUndefined(alpha) ? alphaColor(color, alpha) : color;
         }
     };
-    EventBase.prototype.createBlockAppointmentElement = function (record, resIndex) {
+    EventBase.prototype.createBlockAppointmentElement = function (record, resIndex, isResourceEventTemplate) {
         var eventSubject = (record[this.parent.eventFields.subject] || this.parent.eventSettings.fields.subject.default);
         var appointmentWrapper = createElement('div', {
             className: BLOCK_APPOINTMENT_CLASS,
@@ -6247,7 +6274,7 @@ var EventBase = /** @__PURE__ @class */ (function () {
             var scheduleId = this.parent.element.id + '_';
             var viewName = this.parent.activeViewOptions.eventTemplateName;
             var templateId = scheduleId + viewName + 'eventTemplate';
-            var templateName = 'eventTemplate' + (this.parent.activeViewOptions.group.resources.length > 0 &&
+            var templateName = 'eventTemplate' + (isResourceEventTemplate &&
                 this.parent.currentView.indexOf('Year') === -1 ? '_' + resIndex : '');
             templateElement = this.parent.getAppointmentTemplate()(record, this.parent, templateName, templateId, false);
         }
@@ -6403,6 +6430,32 @@ var EventBase = /** @__PURE__ @class */ (function () {
         }
         return { startDate: startTime, endDate: endTime };
     };
+    EventBase.prototype.createEventWrapper = function (type, index) {
+        if (type === void 0) { type = ''; }
+        if (index === void 0) { index = 0; }
+        var tr = createElement('tr');
+        var levels = this.parent.activeView.colLevels.slice(-1)[0];
+        for (var i = 0, len = levels.length; i < len; i++) {
+            var col = levels[i];
+            var 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 === '') {
+                var innerWrapper = createElement('div', {
+                    id: APPOINTMENT_WRAPPER_CLASS + '-' + index.toString(),
+                    className: APPOINTMENT_WRAPPER_CLASS
+                });
+                appointmentWrap.appendChild(innerWrapper);
+            }
+            tr.appendChild(appointmentWrap);
+            index = index + 1;
+        }
+        return tr;
+    };
     EventBase.prototype.unWireEvents = function () {
         var appElements = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CLASS));
         for (var _i = 0, appElements_1 = appElements; _i < appElements_1.length; _i++) {
@@ -6463,6 +6516,7 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
         if (this.parent.dragAndDropModule) {
             this.parent.dragAndDropModule.setDragArea();
         }
+        this.isResourceEventTemplate = this.parent.isSpecificResourceEvents();
         var wrapperElements = [].slice.call(this.parent.element.querySelectorAll('.' + BLOCK_APPOINTMENT_CLASS +
             ',.' + APPOINTMENT_CLASS + ',.' + ROW_COUNT_WRAPPER_CLASS));
         var isDragging = (this.parent.crudModule && this.parent.crudModule.crudObj.isCrudAction) ? true : false;
@@ -6485,6 +6539,9 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
         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) {
@@ -6517,6 +6574,9 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
         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;
@@ -6533,7 +6593,7 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
         return appHeight;
     };
     VerticalEvent.prototype.appendEvent = function (eventObj, appointmentElement, index, appLeft) {
-        var appointmentWrap = [].slice.call(this.element.querySelectorAll('.' + APPOINTMENT_WRAPPER_CLASS));
+        var appointmentWrap = this.element.querySelector('.' + APPOINTMENT_WRAPPER_CLASS + '[id="' + APPOINTMENT_WRAPPER_CLASS + '-' + index + '"]');
         if (this.parent.enableRtl) {
             setStyleAttribute(appointmentElement, { 'right': appLeft });
         }
@@ -6547,13 +6607,13 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
         };
         this.parent.trigger(eventRendered, args, function (eventArgs) {
             if (!eventArgs.cancel) {
-                appointmentWrap[index].appendChild(appointmentElement);
+                appointmentWrap.appendChild(appointmentElement);
             }
         });
     };
     VerticalEvent.prototype.processBlockEvents = function () {
         var resources = this.getResourceList();
-        var dateCount = 0;
+        var dateCount = this.getStartCount();
         for (var _i = 0, resources_1 = resources; _i < resources_1.length; _i++) {
             var resource = resources_1[_i];
             var renderDates = this.dateRender[resource];
@@ -6592,9 +6652,11 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
                 blockHeight = formatUnit(this.getHeight(eStart, eEnd));
                 blockTop = formatUnit(this.getTopValue(eStart, dayIndex, resource));
             }
-            var appointmentElement = this.createBlockAppointmentElement(eventObj, resource);
+            var appointmentElement = this.createBlockAppointmentElement(eventObj, resource, this.isResourceEventTemplate);
             setStyleAttribute(appointmentElement, { 'width': '100%', 'height': blockHeight, 'top': blockTop });
-            var index = this.parent.activeViewOptions.group.byDate ? (this.resources.length * dayIndex) + resource : dayCount;
+            var renderedIndex = this.getDayIndex(dayIndex, resource);
+            var index = this.parent.activeViewOptions.group.byDate ?
+                (this.resources.length * renderedIndex) + resource : dayCount;
             this.appendEvent(eventObj, appointmentElement, index, '0px');
         }
     };
@@ -6602,7 +6664,7 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
         removeClass(this.allDayElement, ALLDAY_ROW_ANIMATE_CLASS);
         var eventCollection = (eventType === 'allDayEvents') ? this.sortByDateTime(this.allDayEvents) : undefined;
         var resources = this.getResourceList();
-        var dateCount = 0;
+        var dateCount = this.getStartCount();
         var isRender;
         var _loop_1 = function (resource) {
             isRender = true;
@@ -6666,6 +6728,15 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
             _loop_1(resource);
         }
     };
+    VerticalEvent.prototype.getStartCount = function () {
+        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;
+    };
+    VerticalEvent.prototype.getDayIndex = function (dayIndex, resource) {
+        return this.parent.activeViewOptions.group.byDate ?
+            this.parent.resourceBase.lastResourceLevel[0].renderDates.indexOf(this.dateRender[resource][dayIndex]) :
+            dayIndex;
+    };
     VerticalEvent.prototype.setValues = function (event, resourceIndex) {
         if (this.parent.activeViewOptions.group.resources.length > 0) {
             this.cssClass = this.resources[resourceIndex].cssClass;
@@ -6697,7 +6768,6 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
                 'tabindex': '0',
                 'aria-disabled': this.parent.eventBase.getReadonlyAttribute(record),
                 'aria-pressed': 'false',
-                'aria-grabbed': 'true',
                 'aria-label': this.parent.getAnnouncementString(record)
             }
         });
@@ -6717,7 +6787,7 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
             var viewName = this.parent.activeViewOptions.eventTemplateName;
             var templateId = elementId + viewName + 'eventTemplate';
             var resIndex = this.parent.uiStateValues.isGroupAdaptive ? this.parent.uiStateValues.groupIndex : resource;
-            var templateName = 'eventTemplate' + (this.parent.activeViewOptions.group.resources.length > 0 ? '_' + resIndex : '');
+            var templateName = 'eventTemplate' + (this.isResourceEventTemplate ? '_' + resIndex : '');
             templateElement = this.parent.getAppointmentTemplate()(record, this.parent, templateName, templateId, false);
         }
         else {
@@ -6894,10 +6964,11 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
                 if (isNullOrUndefined(this.renderedAllDayEvents[resource])) {
                     this.renderedAllDayEvents[resource] = [];
                 }
+                var renderedIndex = this.getDayIndex(dayIndex, resource);
                 this.renderedAllDayEvents[resource].push(extend({}, record, null, true));
                 var allDayRow_1 = [].slice.call(this.element.querySelector('.' + ALLDAY_ROW_CLASS).children);
                 var wIndex_1 = this.parent.activeViewOptions.group.byDate ?
-                    (this.resources.length * dayIndex) + resource : dayCount;
+                    (this.resources.length * renderedIndex) + resource : dayCount;
                 var eventWrapper_1 = this.element.querySelector('.' + ALLDAY_APPOINTMENT_WRAPPER_CLASS +
                     ':nth-child(' + (wIndex_1 + 1) + ')');
                 var appointmentElement_1;
@@ -6966,9 +7037,10 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
                 this.overlapEvents.push([record]);
             }
             appWidth = this.getEventWidth();
+            var renderedIndex = this.getDayIndex(dayIndex, resource);
             var argsData = {
                 index: appIndex, left: appLeft, width: appWidth,
-                day: dayIndex, dayIndex: dayCount, record: record, resource: resource
+                day: renderedIndex, dayIndex: dayCount, record: record, resource: resource
             };
             var tempData = this.adjustOverlapElements(argsData);
             appWidth = (tempData.appWidth);
@@ -6993,7 +7065,8 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
             if (!this.parent.isAdaptive && subjectElement) {
                 subjectElement.style.maxHeight = formatUnit(maxHeight);
             }
-            var index = this.parent.activeViewOptions.group.byDate ? (this.resources.length * dayIndex) + resource : dayCount;
+            var index = this.parent.activeViewOptions.group.byDate ?
+                (this.resources.length * renderedIndex) + resource : dayCount;
             var eventData = {};
             eventData[this.fields.startTime] = eventObj[this.fields.startTime];
             eventData[this.fields.endTime] = eventObj[this.fields.endTime];
@@ -7117,7 +7190,7 @@ var VerticalEvent = /** @__PURE__ @class */ (function (_super) {
                     var dayCount = this.parent.activeViewOptions.group.byDate ?
                         (this.resources.length * args.day) + args.resource : args.dayIndex;
                     var element = this.element.querySelector('#e-appointment-wrapper-' + dayCount);
-                    if (element.childElementCount > 0) {
+                    if (element && element.childElementCount > 0) {
                         var eleGuid = this.overlapEvents[i][j].Guid;
                         if (element.querySelectorAll('div[data-guid="' + eleGuid + '"]').length > 0 && eleGuid !== args.record.Guid) {
                             var apps = element.querySelector('div[data-guid="' + eleGuid + '"]');
@@ -7309,6 +7382,7 @@ var MonthEvent = /** @__PURE__ @class */ (function (_super) {
         if (this.parent.dragAndDropModule) {
             this.parent.dragAndDropModule.setDragArea();
         }
+        this.isResourceEventTemplate = this.parent.isSpecificResourceEvents();
         var conWrap = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
         if (this.parent.rowAutoHeight) {
             this.parent.uiStateValues.top = conWrap.scrollTop;
@@ -7347,7 +7421,8 @@ var MonthEvent = /** @__PURE__ @class */ (function (_super) {
         }
         this.eventHeight = getElementHeightFromClass(this.element, APPOINTMENT_CLASS);
         var 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) {
@@ -7367,7 +7442,7 @@ var MonthEvent = /** @__PURE__ @class */ (function (_super) {
                 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;
@@ -7519,7 +7594,7 @@ var MonthEvent = /** @__PURE__ @class */ (function (_super) {
             var appRight = (this.parent.enableRtl) ? position : 0;
             var appHeight = this.cellHeight - this.monthHeaderHeight;
             var appTop = this.getRowTop(resIndex);
-            var blockElement = this.createBlockAppointmentElement(event, resIndex);
+            var blockElement = this.createBlockAppointmentElement(event, resIndex, this.isResourceEventTemplate);
             setStyleAttribute(blockElement, {
                 'width': appWidth + 'px', 'height': appHeight + 'px', 'left': appLeft + 'px',
                 'right': appRight + 'px', 'top': appTop + 'px'
@@ -7590,7 +7665,7 @@ var MonthEvent = /** @__PURE__ @class */ (function (_super) {
     MonthEvent.prototype.renderResourceEvents = function () {
         var 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 (var i = 0, len = this.parent.crudModule.crudObj.sourceEvent.length; i < len; i++) {
                 var sourceRes = this.parent.crudModule.crudObj.sourceEvent[i];
@@ -7626,7 +7701,7 @@ var MonthEvent = /** @__PURE__ @class */ (function (_super) {
         var 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) {
@@ -7651,7 +7726,7 @@ var MonthEvent = /** @__PURE__ @class */ (function (_super) {
             var scheduleId = this.parent.element.id + '_';
             var viewName = this.parent.activeViewOptions.eventTemplateName;
             var templateId = scheduleId + viewName + 'eventTemplate';
-            var eventTemplate = 'eventTemplate' + (this.parent.activeViewOptions.group.resources.length > 0 ? '_' + resIndex : '');
+            var eventTemplate = 'eventTemplate' + (this.isResourceEventTemplate ? '_' + resIndex : '');
             templateElement = this.parent.getAppointmentTemplate()(eventObj, this.parent, eventTemplate, templateId, false);
         }
         else {
@@ -9121,7 +9196,7 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
                         'data-id': '' + eventData[fields.id],
                         'data-guid': eventData.Guid, 'role': 'button', 'tabindex': '0',
                         'aria-disabled': this_1.parent.eventBase.getReadonlyAttribute(eventData),
-                        'aria-pressed': 'false', 'aria-grabbed': 'true', 'aria-label': this_1.parent.getAnnouncementString(eventData)
+                        'aria-pressed': 'false', 'aria-label': this_1.parent.getAnnouncementString(eventData)
                     }
                 });
                 var templateElement = void 0;
@@ -9246,6 +9321,9 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
             }
             return;
         }
+        else if (this.quickPopup.element) {
+            this.destroyPopupButtons('quickPopup');
+        }
         var temp = {};
         temp[this.parent.eventFields.startTime] = this.parent.activeCellsData.startTime;
         temp[this.parent.eventFields.endTime] = this.parent.activeCellsData.endTime;
@@ -9317,6 +9395,9 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
             if (isSameTarget) {
                 return;
             }
+            else if (this.quickPopup.element) {
+                this.destroyPopupButtons('quickPopup');
+            }
             var eventData = events.event;
             var quickEventPopup = createElement('div', { className: EVENT_POPUP_CLASS });
             quickEventPopup.appendChild(this.getPopupHeader('Event', eventData));
@@ -9861,7 +9942,10 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
                     _this.quickPopup.element.style.height = formatUnit((popupType === 'EditEventInfo') ? 65 : window.innerHeight);
                 }
                 else {
-                    _this.quickPopup.offsetX = 10;
+                    var isVirtualScroll = _this.parent.virtualScrollModule && _this.parent.virtualScrollModule.isHorizontalScroll
+                        && !isNullOrUndefined(closest(target, '.' + CONTENT_TABLE_CLASS));
+                    var 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();
@@ -9869,7 +9953,11 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
                     var 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);
                         var leftCollide = isCollide(_this.quickPopup.element, _this.parent.element);
                         if (leftCollide.indexOf('left') > -1) {
                             _this.quickPopup.position = { X: 'center', Y: 'center' };
@@ -9878,9 +9966,8 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
                             _this.quickPopup.dataBind();
                         }
                     }
-                    if (_this.parent.virtualScrollModule && (collide.indexOf('top') > -1 || collide.indexOf('bottom') > -1)) {
-                        var element = _this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS + ' table');
-                        var translateY = getTranslateY(element);
+                    if (_this.parent.virtualScrollModule && !_this.parent.virtualScrollModule.isHorizontalScroll && (collide.indexOf('top') > -1 || collide.indexOf('bottom') > -1)) {
+                        var translateY = getTranslateY(conTable);
                         _this.quickPopup.offsetY = translateY;
                         _this.quickPopup.dataBind();
                     }
@@ -10135,6 +10222,7 @@ var QuickPopups = /** @__PURE__ @class */ (function () {
         this.destroyQuickPopup();
         this.destroyMorePopup();
         this.destroyQuickDialog();
+        this.dialogEvent = null;
         this.parent = null;
         this.l10n = null;
         this.isCrudAction = null;
@@ -11149,30 +11237,47 @@ var RecurrenceEditor = /** @__PURE__ @class */ (function (_super) {
     RecurrenceEditor.prototype.destroyComponents = function () {
         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(function (element) {
             if (!element.isDestroyed) {
@@ -11268,21 +11373,31 @@ var RecurrenceEditor = /** @__PURE__ @class */ (function (_super) {
         this.renderStatus = true;
         this.triggerChangeEvent();
     };
+    RecurrenceEditor.prototype.detachInputs = function () {
+        var inputElements = [].slice.call(this.element.querySelectorAll('input'));
+        for (var _i = 0, inputElements_1 = inputElements; _i < inputElements_1.length; _i++) {
+            var element = inputElements_1[_i];
+            detach(element);
+        }
+    };
     /**
      * Destroys the widget.
      *
      * @returns {void}
      */
     RecurrenceEditor.prototype.destroy = function () {
-        this.destroyComponents();
-        _super.prototype.destroy.call(this);
-        var 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.prototype.destroy.call(this);
+            var 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);
+            }
         }
     };
     /**
@@ -11660,6 +11775,7 @@ var EventWindow = /** @__PURE__ @class */ (function () {
             var 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());
@@ -12213,12 +12329,26 @@ var EventWindow = /** @__PURE__ @class */ (function () {
         };
         var form = this.element.querySelector('.' + FORM_CLASS);
         var 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);
+        var subjectRule = getValidationRule(this.parent.eventSettings.fields.subject.validation);
+        if (!isNullOrUndefined(subjectRule)) {
+            rules[this.parent.eventSettings.fields.subject.name] = subjectRule;
+        }
+        var locationRule = getValidationRule(this.parent.eventSettings.fields.location.validation);
+        if (!isNullOrUndefined(locationRule)) {
+            rules[this.parent.eventSettings.fields.location.name] = locationRule;
+        }
+        var startTimeRule = getValidationRule(this.parent.eventSettings.fields.startTime.validation);
+        if (!isNullOrUndefined(startTimeRule)) {
+            rules[this.parent.eventSettings.fields.startTime.name] = startTimeRule;
+        }
+        var endTimeRule = getValidationRule(this.parent.eventSettings.fields.endTime.validation);
+        if (!isNullOrUndefined(endTimeRule)) {
+            rules[this.parent.eventSettings.fields.endTime.name] = endTimeRule;
+        }
+        var 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);
     };
@@ -13166,6 +13296,13 @@ var EventWindow = /** @__PURE__ @class */ (function () {
             this.buttonObj.destroy();
         }
     };
+    EventWindow.prototype.detachComponents = function () {
+        var formElements = this.getFormElements(EVENT_WINDOW_DIALOG_CLASS);
+        for (var _i = 0, formElements_4 = formElements; _i < formElements_4.length; _i++) {
+            var element = formElements_4[_i];
+            detach(element);
+        }
+    };
     EventWindow.prototype.destroy = function (isIgnore) {
         if (this.parent && !this.parent.isDestroyed) {
             this.parent.resetTemplates(['editorTemplate']);
@@ -13173,6 +13310,7 @@ var EventWindow = /** @__PURE__ @class */ (function () {
         this.destroyComponents();
         if (this.recurrenceEditor) {
             this.recurrenceEditor.destroy();
+            detach(this.recurrenceEditor.element);
             this.recurrenceEditor = null;
         }
         if (this.fieldValidator) {
@@ -13183,8 +13321,12 @@ var EventWindow = /** @__PURE__ @class */ (function () {
             this.repeatDialogObject.destroy();
             this.repeatDialogObject = null;
         }
+        this.detachComponents();
         if (this.dialogObject) {
             if (this.dialogObject.element) {
+                var form = this.dialogObject.element.querySelector('form');
+                removeChildren(form);
+                detach(form);
                 EventHandler.remove(this.dialogObject.element, 'keydown', this.preventEventSave);
             }
             this.dialogObject.destroy();
@@ -13201,6 +13343,7 @@ var EventWindow = /** @__PURE__ @class */ (function () {
             this.buttonObj = null;
             this.repeatStatus = null;
             this.eventWindowTime = null;
+            this.dialogEvent = null;
         }
     };
     return EventWindow;
@@ -13216,7 +13359,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
         this.bufferCount = 3;
         this.renderedLength = 0;
         this.averageRowHeight = 0;
-        this.isScrollHeightNull = true;
+        this.startIndex = 0;
         this.parent = parent;
         this.addEventListener();
     }
@@ -13234,39 +13377,19 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
     };
     VirtualScroll.prototype.getRenderedCount = function () {
         this.setItemSize();
-        return Math.ceil(this.parent.element.clientHeight / this.itemSize) + this.bufferCount;
-    };
-    VirtualScroll.prototype.setTranslateValue = function () {
-        var resWrap = this.parent.element.querySelector('.' + RESOURCE_COLUMN_WRAP_CLASS);
-        var conWrap = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
-        var eventWrap = this.parent.element.querySelector('.' + EVENT_TABLE_CLASS);
-        var timeIndicator = this.parent.element.querySelector('.' + CURRENT_TIMELINE_CLASS);
-        this.renderVirtualTrackHeight(conWrap, resWrap);
-        this.setTranslate(resWrap, conWrap, eventWrap, timeIndicator);
-    };
-    VirtualScroll.prototype.renderVirtualTrackHeight = function (contentWrap, resourceWrap) {
-        this.parent.resourceBase.setExpandedResources();
-        if (this.isScrollHeightNull) {
-            var wrap = createElement('div', { className: VIRTUAL_TRACK_CLASS });
-            var resWrap = [].slice.call((resourceWrap).querySelectorAll('table td'));
-            var startIndex_1 = parseInt(resWrap[0].getAttribute('data-group-index'), 10);
-            var endIndex_1 = parseInt(resWrap[resWrap.length - 1].getAttribute('data-group-index'), 10);
-            this.parent.resourceBase.renderedResources = this.parent.resourceBase.expandedResources.filter(function (resource) {
-                return (resource.groupIndex >= startIndex_1 && resource.groupIndex <= endIndex_1);
-            });
-            this.setItemSize();
-            wrap.style.height = (this.parent.resourceBase.expandedResources.length * this.itemSize) + 'px';
-            this.isScrollHeightNull = false;
-            var virtual = this.parent.element.querySelector('.' + VIRTUAL_TRACK_CLASS);
-            if (!isNullOrUndefined(virtual)) {
-                remove(virtual);
-            }
-            contentWrap.appendChild(wrap);
-        }
+        var containerSize = this.isHorizontalScroll ? this.parent.element.clientWidth : this.parent.element.clientHeight;
+        this.renderedLength = Math.ceil(containerSize / this.itemSize) + this.bufferCount;
+        return this.renderedLength;
     };
     VirtualScroll.prototype.renderVirtualTrack = function (contentWrap) {
         var wrap = createElement('div', { className: VIRTUAL_TRACK_CLASS });
-        wrap.style.height = (this.parent.resourceBase.expandedResources.length * this.itemSize) + 'px';
+        if (this.isHorizontalScroll) {
+            var 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);
     };
     VirtualScroll.prototype.updateVirtualScrollHeight = function () {
@@ -13304,12 +13427,19 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
         }
     };
     VirtualScroll.prototype.setItemSize = function () {
-        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;
+        }
     };
     VirtualScroll.prototype.renderEvents = function () {
         this.setTabIndex();
         this.parent.refreshEvents(false);
-        this.parent.notify(contentReady, {});
+        if (this.parent.currentView !== 'Month') {
+            this.parent.notify(contentReady, {});
+        }
         this.parent.hideSpinner();
     };
     VirtualScroll.prototype.virtualScrolling = function () {
@@ -13318,31 +13448,64 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
             this.parent.quickPopup.quickPopupHide();
             this.parent.quickPopup.morePopup.hide();
         }
-        var resWrap = this.parent.element.querySelector('.' + RESOURCE_COLUMN_WRAP_CLASS);
         var conWrap = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
-        var eventWrap = this.parent.element.querySelector('.' + EVENT_TABLE_CLASS);
-        var timeIndicator = this.parent.element.querySelector('.' + CURRENT_TIMELINE_CLASS);
-        var conTable = this.parent.element.querySelector('.' + CONTENT_TABLE_CLASS);
-        this.renderedLength = resWrap.querySelector('tbody').children.length;
-        var firstTDIndex = parseInt(resWrap.querySelector('tbody td').getAttribute('data-group-index'), 10);
-        var scrollHeight = this.parent.rowAutoHeight ?
-            (conTable.offsetHeight - conWrap.offsetHeight) : this.bufferCount * this.itemSize;
-        addClass([conWrap], 'e-transition');
+        if (this.isHorizontalScroll) {
+            this.horizontalScrolling(conWrap);
+        }
+        else {
+            var resWrap = this.parent.element.querySelector('.' + RESOURCE_COLUMN_WRAP_CLASS);
+            var eventWrap = this.parent.element.querySelector('.' + EVENT_TABLE_CLASS);
+            var timeIndicator = this.parent.element.querySelector('.' + CURRENT_TIMELINE_CLASS);
+            var conTable = this.parent.element.querySelector('.' + CONTENT_TABLE_CLASS);
+            addClass([conWrap], 'e-transition');
+            this.renderedLength = resWrap.querySelector('tbody').children.length;
+            var firstTDIndex = parseInt(resWrap.querySelector('tbody td').getAttribute('data-group-index'), 10);
+            var scrollHeight = this.parent.rowAutoHeight ?
+                (conTable.offsetHeight - conWrap.offsetHeight) : this.bufferCount * this.itemSize;
+            var 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();
+                var 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(function () { _this.renderEvents(); }, 250);
+            }
+        }
+    };
+    VirtualScroll.prototype.horizontalScrolling = function (conWrap) {
+        var _this = this;
         var resCollection = [];
-        if ((conWrap.scrollTop) - this.translateY < 0) {
-            resCollection = this.upScroll(conWrap, firstTDIndex);
+        var 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();
-            var 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();
+                var 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(function () { _this.renderEvents(); }, 250);
@@ -13388,6 +13551,87 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
         this.translateY = conWrap.scrollTop;
         return nextSetCollection;
     };
+    VirtualScroll.prototype.leftScroll = function (conWrap) {
+        var 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);
+    };
+    VirtualScroll.prototype.rightScroll = function (conWrap) {
+        var lastLevel = this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 1];
+        var nextSetIndex = 0;
+        nextSetIndex = ~~(Math.abs(conWrap.scrollLeft) / this.itemSize);
+        var lastIndex = nextSetIndex + this.renderedLength;
+        lastIndex = (lastIndex > lastLevel.length - 1) ? lastLevel.length - 1 : lastIndex;
+        return this.getCollection(lastIndex - this.renderedLength, lastIndex);
+    };
+    VirtualScroll.prototype.getCollection = function (startIndex, endIndex) {
+        this.translateY = startIndex * this.itemSize;
+        var lastLevel = this.getResCollection(startIndex, endIndex);
+        if (this.parent.enableRtl) {
+            this.translateY = -this.translateY;
+        }
+        return lastLevel;
+    };
+    VirtualScroll.prototype.getResCollection = function (startIndex, endIndex) {
+        var lastLevel = this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 1];
+        var resCollection = [];
+        var 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;
+    };
+    VirtualScroll.prototype.getByDateCollection = function (firstItem, lastItem, index) {
+        var resCollection = this.parent.activeView.colLevels[0].filter(function (data) {
+            return 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;
+    };
+    VirtualScroll.prototype.getByIdCollection = function (firstItem, lastItem, index) {
+        var resCollection = this.parent.resourceBase.lastResourceLevel.filter(function (data) {
+            return 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;
+    };
+    VirtualScroll.prototype.setStartEndIndex = function (data, firstItem, lastItem, colIndex) {
+        var index = 0;
+        data.filter(function (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;
+        }
+    };
     VirtualScroll.prototype.updateContent = function (resWrap, conWrap, eventWrap, resCollection) {
         var renderedLength = resWrap.querySelector('tbody').children.length;
         if (document.activeElement && document.activeElement.classList.contains(RESOURCE_CELLS_CLASS)) {
@@ -13407,6 +13651,45 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
         append(contentRows, conWrap.querySelector('tbody'));
         append(eventRows, eventWrap);
     };
+    VirtualScroll.prototype.updateHorizontalContent = function (conWrap, resCollection) {
+        this.parent.resourceBase.expandedResources = resCollection;
+        var selectedEle = this.parent.getSelectedElements();
+        this.focusedEle = selectedEle[selectedEle.length - 1] || this.focusedEle;
+        var renderedLength = conWrap.querySelectorAll('tbody tr').length;
+        for (var 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;
+            }
+            var contentRows = this.parent.activeView.getContentRows();
+            append(contentRows, conWrap.querySelector('tbody'));
+        }
+        else {
+            var col = [].slice.call(conWrap.querySelector('colgroup').children);
+            for (var i = 0; i < col.length; i++) {
+                remove(col[i]);
+            }
+            this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 1] = resCollection;
+            var contentRows = this.parent.activeView.getContentRows();
+            var table = conWrap.querySelector('table');
+            var thead = conWrap.querySelector('thead');
+            var colGroupEle_1 = conWrap.querySelector('colgroup');
+            resCollection.forEach(function () {
+                colGroupEle_1.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'));
+        }
+    };
     VirtualScroll.prototype.getBufferCollection = function (startIndex, endIndex) {
         return this.parent.resourceBase.expandedResources.slice(startIndex, endIndex);
     };
@@ -13429,6 +13712,17 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
             this.focusedEle = null;
         }
     };
+    VirtualScroll.prototype.setRenderedDates = function (resCollection) {
+        if (this.parent.currentView !== 'Month') {
+            var dateCol_1 = resCollection.map(function (x) { return x.date; });
+            this.parent.resourceBase.renderedResources.forEach(function (x) { return x.renderDates = dateCol_1; });
+        }
+        else {
+            var dateCol_2 = resCollection.map(function (x) { return x.date.getDay(); });
+            var renderDates_1 = this.parent.activeView.renderDates.filter(function (x) { return dateCol_2.indexOf(x.getDay()) >= 0; });
+            this.parent.resourceBase.renderedResources.forEach(function (x) { return x.renderDates = renderDates_1; });
+        }
+    };
     VirtualScroll.prototype.setTabIndex = function () {
         var resColWrap = this.parent.element.querySelector('.' + RESOURCE_COLUMN_WRAP_CLASS);
         var resCells = [].slice.call(this.parent.element.querySelectorAll('.' + RESOURCE_CELLS_CLASS));
@@ -13447,6 +13741,7 @@ var VirtualScroll = /** @__PURE__ @class */ (function () {
     };
     VirtualScroll.prototype.destroy = function () {
         this.removeEventListener();
+        this.focusedEle = null;
     };
     return VirtualScroll;
 }());
@@ -13540,12 +13835,18 @@ var Render = /** @__PURE__ @class */ (function () {
             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);
@@ -13840,8 +14141,7 @@ var Crud = /** @__PURE__ @class */ (function () {
         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 = [];
@@ -15240,7 +15540,8 @@ var ResourceBase = /** @__PURE__ @class */ (function () {
                 child: 'resourceChild'
             },
             nodeTemplate: this.parent.resourceHeaderTemplate,
-            nodeClicked: this.resourceClick.bind(this)
+            nodeClicked: this.resourceClick.bind(this),
+            created: this.resourceTreeCreated.bind(this)
         });
         this.treeViewObj.appendTo(resourceTree);
         this.treeViewObj.expandAll();
@@ -15257,6 +15558,12 @@ var ResourceBase = /** @__PURE__ @class */ (function () {
         });
         this.parent.on(documentClick, this.documentClick, this);
     };
+    ResourceBase.prototype.resourceTreeCreated = function () {
+        if (this.parent.portals) {
+            this.parent.portals = this.parent.portals.concat(this.treeViewObj.portals);
+            this.parent.renderTemplates();
+        }
+    };
     ResourceBase.prototype.generateTreeData = function (isTimeLine) {
         var _this = this;
         var treeCollection = [];
@@ -15899,6 +16206,10 @@ var ResourceBase = /** @__PURE__ @class */ (function () {
     ResourceBase.prototype.destroy = function () {
         this.parent.off(documentClick, this.documentClick);
         if (this.treeViewObj) {
+            if (this.treeViewObj.portals && this.treeViewObj.portals.length > 0) {
+                var treeViewTemplates = this.treeViewObj.portals.map(function (x) { return x.propName; });
+                this.parent.resetTemplates(treeViewTemplates);
+            }
             this.treeViewObj.destroy();
             this.treeViewObj = null;
         }
@@ -17138,6 +17449,16 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
             append(indentTemplate, td);
         }
     };
+    /**
+     * Method to check for refreshing the targeted resource row events.
+     *
+     * @returns {boolean} Returns the boolean value
+     * @private
+     */
+    Schedule.prototype.isSpecificResourceEvents = function () {
+        return this.activeViewOptions.group.resources.length > 0 && !this.activeViewOptions.group.allowGroupEdit &&
+            !this.rowAutoHeight && !this.virtualScrollModule && this.activeViewOptions.group.byGroupID;
+    };
     Schedule.prototype.unWireEvents = function () {
         EventHandler.remove(window, 'resize', this.onScheduleResize);
         EventHandler.remove(window, 'orientationchange', this.onScheduleResize);
@@ -18411,10 +18732,6 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
         this.hideSpinner();
         this.unWireEvents();
         this.destroyHeaderModule();
-        if (this.eventTooltip) {
-            this.eventTooltip.destroy();
-            this.eventTooltip = null;
-        }
         if (this.eventBase) {
             this.eventBase.destroy();
             this.eventBase = null;
@@ -18488,6 +18805,9 @@ var Schedule = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Property(true)
     ], Schedule.prototype, "showTimeIndicator", void 0);
+    __decorate([
+        Property(true)
+    ], Schedule.prototype, "allowSwiping", void 0);
     __decorate([
         Property('Week')
     ], Schedule.prototype, "currentView", void 0);
@@ -18814,7 +19134,7 @@ var ActionBase = /** @__PURE__ @class */ (function () {
         var viewElement = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
         var 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);
         }
         var leftOffset = trElement[0].getBoundingClientRect();
@@ -18910,7 +19230,7 @@ var ActionBase = /** @__PURE__ @class */ (function () {
         var originalElement;
         var guid = element.getAttribute('data-guid');
         var 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 {
@@ -19129,7 +19449,9 @@ var ActionBase = /** @__PURE__ @class */ (function () {
         var workDays = this.parent.activeViewOptions.workDays;
         var groupOrder;
         if (this.parent.activeViewOptions.group.resources.length > 0) {
-            var resources = this.parent.resourceBase.lastResourceLevel.
+            var renderedResource = this.parent.virtualScrollModule && this.parent.virtualScrollModule.isHorizontalScroll ?
+                this.parent.resourceBase.renderedResources : this.parent.resourceBase.lastResourceLevel;
+            var resources = renderedResource.
                 filter(function (res) { return res.groupIndex === _this.actionObj.groupIndex; });
             dateRender = resources[0].renderDates;
             var elementSelector = "." + WORK_CELLS_CLASS + "[data-group-index=\"" + this.actionObj.groupIndex + "\"]";
@@ -19481,9 +19803,7 @@ var Resize = /** @__PURE__ @class */ (function (_super) {
             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;
@@ -20121,7 +20441,7 @@ var YearEvent = /** @__PURE__ @class */ (function (_super) {
                 '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)
             }
         });
@@ -20644,7 +20964,6 @@ var DragAndDrop = /** @__PURE__ @class */ (function (_super) {
         this.actionObj.scrollInterval = null;
         this.actionClass('removeClass');
         this.parent.uiStateValues.action = false;
-        this.actionObj.action = null;
         if (this.isAllowDrop(e)) {
             return;
         }
@@ -20654,12 +20973,12 @@ var DragAndDrop = /** @__PURE__ @class */ (function (_super) {
             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, function (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)]];
@@ -20796,7 +21115,7 @@ var DragAndDrop = /** @__PURE__ @class */ (function (_super) {
         var eventDuration = eventObj[this.parent.eventFields.endTime].getTime() -
             eventObj[this.parent.eventFields.startTime].getTime();
         var td = closest(e.target, 'td');
-        if (this.parent.currentView === 'TimelineYear' && !td.classList.contains('e-work-cells')) {
+        if (this.parent.currentView === 'TimelineYear' && (!td.classList.contains(WORK_CELLS_CLASS) || td.classList.contains(OTHERMONTH_CLASS))) {
             return;
         }
         var dragStart$$1 = this.parent.getDateFromElement(td);
@@ -20899,7 +21218,9 @@ var DragAndDrop = /** @__PURE__ @class */ (function (_super) {
                 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);
+            var index_1 = this.parent.activeViewOptions.group.byDate || (this.parent.virtualScrollModule &&
+                !this.parent.activeViewOptions.timeScale.enable) ? colIndex : undefined;
+            this.updateAllDayEvents(dragStart$$1, dragEnd, index_1);
         }
         this.actionObj.start = new Date(+dragStart$$1);
         this.actionObj.end = new Date(+dragEnd);
@@ -20933,17 +21254,17 @@ var DragAndDrop = /** @__PURE__ @class */ (function (_super) {
                 this.startTime = eventObj_1[this.parent.eventFields.startTime].getTime();
             }
             var startTimeDiff = event[this.parent.eventFields.startTime].getTime() - this.startTime;
-            for (var index_1 = 0; index_1 < this.multiData.length; index_1++) {
-                this.updatedData[index_1] = this.updateMultipleData(this.multiData[index_1], startTimeDiff);
-                var dayIndex = this.getDayIndex(this.updatedData[index_1]);
+            for (var index_2 = 0; index_2 < this.multiData.length; index_2++) {
+                this.updatedData[index_2] = this.updateMultipleData(this.multiData[index_2], startTimeDiff);
+                var dayIndex = this.getDayIndex(this.updatedData[index_2]);
                 if (dayIndex >= 0) {
-                    var wrapper = this.getEventWrapper(dayIndex, this.updatedData[index_1][this.parent.eventFields.isAllDay]);
-                    this.appendCloneElement(wrapper, this.actionObj.cloneElement[index_1]);
-                    this.updateEventHeight(this.updatedData[index_1], index_1, dayIndex);
+                    var wrapper = this.getEventWrapper(dayIndex, this.updatedData[index_2][this.parent.eventFields.isAllDay]);
+                    this.appendCloneElement(wrapper, this.actionObj.cloneElement[index_2]);
+                    this.updateEventHeight(this.updatedData[index_2], index_2, dayIndex);
                 }
                 else {
-                    if (!isNullOrUndefined(this.actionObj.cloneElement[index_1].parentNode)) {
-                        remove(this.actionObj.cloneElement[index_1]);
+                    if (!isNullOrUndefined(this.actionObj.cloneElement[index_2].parentNode)) {
+                        remove(this.actionObj.cloneElement[index_2]);
                     }
                 }
             }
@@ -21025,10 +21346,12 @@ var DragAndDrop = /** @__PURE__ @class */ (function (_super) {
     };
     DragAndDrop.prototype.updateEventHeight = function (event, index, colIndex) {
         this.verticalEvent.initializeValues();
-        var datesCount = 0;
+        var datesCount = this.verticalEvent.getStartCount();
         if (!this.parent.uiStateValues.isGroupAdaptive) {
             for (var 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;
+                }
             }
         }
         var indexGroup = this.parent.uiStateValues.isGroupAdaptive ? datesCount : this.actionObj.groupIndex;
@@ -21648,11 +21971,15 @@ var ViewBase = /** @__PURE__ @class */ (function () {
     };
     ViewBase.prototype.createTableLayout = function (className) {
         var clsName = className || '';
-        var table = createElement('table', { className: SCHEDULE_TABLE_CLASS + ' ' + clsName, attrs: { role: 'table' } });
+        var table = createElement('table', { className: SCHEDULE_TABLE_CLASS + ' ' + clsName });
         var tbody = createElement('tbody');
         table.appendChild(tbody);
         return table;
     };
+    ViewBase.prototype.setAriaAttributes = function (table) {
+        table.setAttribute('role', 'grid');
+        table.setAttribute('aria-label', this.getLabelText(this.parent.currentView));
+    };
     ViewBase.prototype.createColGroup = function (table, lastRow) {
         var length = lastRow.length;
         if (lastRow[0] && lastRow[0].colSpan) {
@@ -22117,6 +22444,32 @@ var ViewBase = /** @__PURE__ @class */ (function () {
         }
         return null;
     };
+    ViewBase.prototype.resetColLevels = function () {
+        this.parent.resourceBase.expandedResources = [];
+        var renderedCount = this.parent.virtualScrollModule.getRenderedCount();
+        var lastLevel = this.parent.activeViewOptions.group.byDate ? this.colLevels[0] :
+            this.parent.resourceBase.renderedResources;
+        var index = 0;
+        for (var 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];
+        }
+    };
     ViewBase.prototype.destroy = function () {
         if (this.element && this.element.parentNode) {
             remove(this.element);
@@ -22381,15 +22734,27 @@ var VerticalView = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(this.parent.resourceBase) && (this.parent.activeViewOptions.group.resources.length > 0) &&
             !this.parent.uiStateValues.isGroupAdaptive) {
             var count = 0;
-            for (var _i = 0, _a = this.parent.resourceBase.lastResourceLevel; _i < _a.length; _i++) {
-                var resource = _a[_i];
-                var index = this.parent.getIndexOfDate(resource.renderDates, resetTime(this.parent.getCurrentTime()));
-                if (index >= 0) {
-                    var 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 (var _i = 0, _a = this.parent.resourceBase.expandedResources; _i < _a.length; _i++) {
+                    var resource = _a[_i];
+                    if (resetTime(resource.date).getTime() === resetTime(this.parent.getCurrentTime()).getTime()) {
+                        currentDateIndex.push(count);
+                    }
+                    count += 1;
+                }
+            }
+            else {
+                for (var _b = 0, _c = this.parent.resourceBase.renderedResources; _b < _c.length; _b++) {
+                    var resource = _c[_b];
+                    var index = this.parent.getIndexOfDate(resource.renderDates, resetTime(this.parent.getCurrentTime()));
+                    if (index >= 0) {
+                        var 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 {
@@ -22535,7 +22900,7 @@ var VerticalView = /** @__PURE__ @class */ (function (_super) {
         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) {
@@ -22566,6 +22931,9 @@ var VerticalView = /** @__PURE__ @class */ (function (_super) {
         prepend([tr], this.element.querySelector('tbody'));
     };
     VerticalView.prototype.renderContent = function () {
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            this.parent.resourceBase.renderedResources = extend([], this.parent.resourceBase.lastResourceLevel, null, true);
+        }
         var tr = createElement('tr');
         var workTd = createElement('td');
         if (this.parent.isAdaptive) {
@@ -22581,13 +22949,22 @@ var VerticalView = /** @__PURE__ @class */ (function (_super) {
             tr.appendChild(workTd);
         }
         else {
-            workTd.appendChild(this.renderContentArea());
+            var levels = this.colLevels.slice(0);
+            if (this.parent.virtualScrollModule) {
+                this.resetColLevels();
+            }
+            var wrap = this.renderContentArea();
+            workTd.appendChild(wrap);
             if (this.parent.activeViewOptions.timeScale.enable) {
                 var 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);
     };
@@ -22659,7 +23036,6 @@ var VerticalView = /** @__PURE__ @class */ (function (_super) {
             td.className = [ALLDAY_CELLS_CLASS];
             td.type = 'alldayCells';
             var 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);
@@ -22672,7 +23048,7 @@ var VerticalView = /** @__PURE__ @class */ (function (_super) {
         }
         table.querySelector('tbody').appendChild(ntr);
         var thead = createElement('thead');
-        thead.appendChild(this.createEventWrapper('allDay'));
+        thead.appendChild(this.parent.eventBase.createEventWrapper('allDay'));
         prepend([thead], table);
     };
     VerticalView.prototype.createTd = function (td) {
@@ -22692,7 +23068,6 @@ var VerticalView = /** @__PURE__ @class */ (function (_super) {
         }
         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);
             }
@@ -22733,6 +23108,7 @@ var VerticalView = /** @__PURE__ @class */ (function (_super) {
     VerticalView.prototype.renderContentArea = function () {
         var wrap = createElement('div', { className: CONTENT_WRAP_CLASS });
         var tbl = this.createTableLayout(CONTENT_TABLE_CLASS);
+        this.setAriaAttributes(tbl);
         this.addAutoHeightClass(tbl);
         this.renderContentTable(tbl);
         this.createColGroup(tbl, this.colLevels.slice(-1)[0]);
@@ -22743,10 +23119,15 @@ var VerticalView = /** @__PURE__ @class */ (function (_super) {
         return wrap;
     };
     VerticalView.prototype.renderContentTable = function (table) {
+        var tBody = table.querySelector('tbody');
+        append(this.getContentRows(), tBody);
+        this.renderContentTableHeader(table);
+    };
+    VerticalView.prototype.getContentRows = function () {
         var _this = this;
-        var tr = createElement('tr', { attrs: { role: 'row' } });
-        var td = createElement('td', { attrs: { role: 'gridcell', 'aria-selected': 'false' } });
-        var tbody = table.querySelector('tbody');
+        var rows = [];
+        var tr = createElement('tr');
+        var td = createElement('td', { attrs: { 'aria-selected': 'false' } });
         var handler = function (r) {
             var ntr = tr.cloneNode();
             for (var _i = 0, _a = _this.colLevels[_this.colLevels.length - 1]; _i < _a.length; _i++) {
@@ -22754,11 +23135,11 @@ var VerticalView = /** @__PURE__ @class */ (function (_super) {
                 var 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;
     };
     VerticalView.prototype.createContentTd = function (tdData, r, td) {
         var ntd = td.cloneNode();
@@ -22805,36 +23186,12 @@ var VerticalView = /** @__PURE__ @class */ (function (_super) {
     };
     VerticalView.prototype.renderContentTableHeader = function (table) {
         var 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);
     };
-    VerticalView.prototype.createEventWrapper = function (type) {
-        if (type === void 0) { type = ''; }
-        var tr = createElement('tr');
-        var levels = this.colLevels.slice(-1)[0];
-        for (var i = 0, len = levels.length; i < len; i++) {
-            var col = levels[i];
-            var 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 === '') {
-                var innerWrapper = createElement('div', {
-                    id: APPOINTMENT_WRAPPER_CLASS + '-' + i.toString(),
-                    className: APPOINTMENT_WRAPPER_CLASS
-                });
-                appointmentWrap.appendChild(innerWrapper);
-            }
-            tr.appendChild(appointmentWrap);
-        }
-        return tr;
-    };
     VerticalView.prototype.getScrollableElement = function () {
         if (this.parent.isAdaptive && !this.isTimelineView()) {
             return this.element.querySelector('.' + SCROLL_CONTAINER_CLASS);
@@ -23250,7 +23607,7 @@ var Month = /** @__PURE__ @class */ (function (_super) {
         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) {
@@ -23298,11 +23655,18 @@ var Month = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Month.prototype.renderContent = function () {
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            this.parent.resourceBase.renderedResources = extend([], this.parent.resourceBase.lastResourceLevel, null, true);
+        }
         var tr = createElement('tr');
         if (this.parent.activeViewOptions.showWeekNumber) {
             tr.appendChild(this.renderWeekNumberContent());
         }
         var workTd = createElement('td');
+        var levels = this.colLevels.slice(0);
+        if (this.parent.virtualScrollModule) {
+            this.resetColLevels();
+        }
         var wrap = createElement('div', { className: CONTENT_WRAP_CLASS });
         var contentArea = this.renderContentArea();
         if (this.parent.currentView === 'Month') {
@@ -23316,6 +23680,10 @@ var Month = /** @__PURE__ @class */ (function (_super) {
         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();
     };
@@ -23343,6 +23711,11 @@ var Month = /** @__PURE__ @class */ (function (_super) {
         var wrap = createElement('div', { className: DATE_HEADER_WRAP_CLASS });
         container.appendChild(wrap);
         var table = this.createTableLayout();
+        if (this.parent.currentView === 'Month') {
+            var thead = createElement('thead');
+            thead.appendChild(createElement('tr'));
+            prepend([thead], table);
+        }
         this.createColGroup(table, this.colLevels[this.colLevels.length - 1]);
         var trEle = createElement('tr');
         for (var i = 0; i < this.colLevels.length; i++) {
@@ -23432,10 +23805,12 @@ var Month = /** @__PURE__ @class */ (function (_super) {
             var dates = this.renderDates.map(function (date) { return new Date(+date); });
             var count = this.parent.activeViewOptions.showWeekend ? WEEK_LENGTH :
                 this.parent.activeViewOptions.workDays.length;
+            var level = this.colLevels.slice(0, 1)[0];
+            var startIndex = this.renderDates.map(Number).indexOf(+level[0].date);
             for (var i = 0; i < (this.renderDates.length / count); i++) {
                 var colDates = dates.splice(0, count);
-                for (var _c = 0, colDates_2 = colDates; _c < colDates_2.length; _c++) {
-                    var colDate = colDates_2[_c];
+                for (var j = startIndex; j < (this.colLevels[0].length + startIndex) && j < colDates.length; j++) {
+                    var colDate = colDates[j];
                     if (includeResource) {
                         var lastRow = this.colLevels[(this.colLevels.length - 1)];
                         var resourcesTd = lastRow.slice(0, lastRow.length / count);
@@ -23471,6 +23846,7 @@ var Month = /** @__PURE__ @class */ (function (_super) {
     };
     Month.prototype.renderContentArea = function () {
         var 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]);
@@ -23487,8 +23863,8 @@ var Month = /** @__PURE__ @class */ (function (_super) {
     };
     Month.prototype.getContentRows = function () {
         var trows = [];
-        var tr = createElement('tr', { attrs: { role: 'row' } });
-        var td = createElement('td', { attrs: { role: 'gridcell', 'aria-selected': 'false' } });
+        var tr = createElement('tr');
+        var td = createElement('td', { attrs: { 'aria-selected': 'false' } });
         var slotDatas = this.getContentSlots();
         for (var row = 0; row < slotDatas.length; row++) {
             var ntr = tr.cloneNode();
@@ -23778,7 +24154,7 @@ var Year = /** @__PURE__ @class */ (function (_super) {
             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
@@ -23814,7 +24190,14 @@ var Year = /** @__PURE__ @class */ (function (_super) {
     };
     Year.prototype.renderCalendarHeader = function (currentDate) {
         var headerWrapper = createElement('div', { className: 'e-header e-month' });
-        var headerContent = createElement('div', { className: 'e-day e-title', innerHTML: this.getMonthName(currentDate) });
+        var headerContent = createElement('div', { className: 'e-day e-title' });
+        if (this.parent.monthHeaderTemplate) {
+            var 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;
@@ -23824,6 +24207,7 @@ var Year = /** @__PURE__ @class */ (function (_super) {
         var contentWrapper = createElement('div', { className: 'e-content e-month' });
         var contentTable = this.createTableLayout('e-calendar-table ' + CONTENT_TABLE_CLASS);
         contentWrapper.appendChild(contentTable);
+        this.setAriaAttributes(contentTable);
         var thead = createElement('thead', { className: 'e-week-header' });
         var tr = createElement('tr');
         var currentWeek = getWeekFirstDate(firstDateOfMonth(currentDate), this.parent.firstDayOfWeek);
@@ -23831,7 +24215,15 @@ var Year = /** @__PURE__ @class */ (function (_super) {
             tr.appendChild(createElement('th'));
         }
         for (var i = 0; i < WEEK_LENGTH; i++) {
-            tr.appendChild(createElement('th', { innerHTML: this.parent.getDayNames('narrow')[currentWeek.getDay()] }));
+            if (this.parent.dayHeaderTemplate) {
+                var th = createElement('th');
+                var 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);
@@ -23839,12 +24231,12 @@ var Year = /** @__PURE__ @class */ (function (_super) {
         var tbody = contentTable.querySelector('tbody');
         while (dateCollection.length > 0) {
             var weekDates = dateCollection.splice(0, WEEK_LENGTH);
-            var tr_1 = createElement('tr', { attrs: { 'role': 'row' } });
+            var tr_1 = createElement('tr');
             if (this.parent.activeViewOptions.showWeekNumber) {
                 var weekNumber = this.parent.getWeekNumberContent(weekDates);
                 var 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_1.appendChild(td);
@@ -23854,13 +24246,23 @@ var Year = /** @__PURE__ @class */ (function (_super) {
                 var date = weekDates_1[_i];
                 var 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() }
                 });
-                var 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) {
+                    var args = { date: date, type: 'monthCells' };
+                    this.renderTemplates(this.parent.getCellHeaderTemplate(), args, 'cellHeaderTemplate', this.parent.activeViewOptions.cellHeaderTemplateName, td);
+                }
+                else {
+                    var 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) {
+                    var args = { date: date, type: 'monthCells' };
+                    this.renderTemplates(this.parent.getCellTemplate(), args, 'cellTemplate', this.parent.activeViewOptions.cellTemplateName, td);
+                }
                 var classList$$1 = [];
                 if (currentDate.getMonth() !== date.getMonth()) {
                     classList$$1.push(OTHERMONTH_CLASS);
@@ -23872,7 +24274,10 @@ var Year = /** @__PURE__ @class */ (function (_super) {
                     addClass([td], classList$$1);
                 }
                 tr_1.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_1);
@@ -23958,6 +24363,11 @@ var Year = /** @__PURE__ @class */ (function (_super) {
             return _this.parent.firstMonthOfYear + index;
         });
     };
+    Year.prototype.renderTemplates = function (fn, args, tName, vName, ele) {
+        var templateId = this.parent.element.id + '_' + vName + tName;
+        var template = [].slice.call(fn(args, this.parent, tName, templateId, false));
+        append(template, ele);
+    };
     Year.prototype.onCellClick = function (e) {
         var target = closest(e.target, '.' + WORK_CELLS_CLASS);
         var startDate = this.parent.getDateFromElement(target);
@@ -23980,6 +24390,8 @@ var Year = /** @__PURE__ @class */ (function (_super) {
                 target = this.parent.element.querySelector(':not(.' + OTHERMONTH_CLASS + ')[data-date="' + target.getAttribute('data-date') + '"]');
             }
             this.parent.activeCellsData = this.parent.getCellDetails(target);
+            var args = extend(this.parent.activeCellsData, { cancel: false, event: e, name: 'cellClick' });
+            this.parent.trigger(cellClick, args);
             this.parent.quickPopup.moreEventClick(moreEventArgs, endDate);
         }
     };
@@ -24091,23 +24503,6 @@ var Year = /** @__PURE__ @class */ (function (_super) {
         this.yearEventModule.renderAppointments();
         this.parent.notify(eventsLoaded, args);
     };
-    Year.prototype.wireEvents = function (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);
-        }
-    };
     Year.prototype.scrollToDate = function (scrollDate) {
         var date = +new Date(resetTime(scrollDate));
         var element = this.element.querySelector('.' + WORK_CELLS_CLASS + ':not(.' + OTHERMONTH_CLASS + ')[data-date="' + date + '"]');
@@ -24190,7 +24585,6 @@ var AgendaBase = /** @__PURE__ @class */ (function (_super) {
                         'tabindex': '0',
                         'aria-disabled': _this.parent.eventBase.getReadonlyAttribute(listData[li]),
                         'aria-pressed': 'false',
-                        'aria-grabbed': 'true',
                         'aria-label': _this.parent.getAnnouncementString(listData[li])
                     }
                 });
@@ -24397,9 +24791,9 @@ var AgendaBase = /** @__PURE__ @class */ (function (_super) {
         }
     };
     AgendaBase.prototype.createResourceTableRow = function (tContent, tBody) {
-        var tr = createElement('tr', { attrs: { role: 'row' } });
+        var tr = createElement('tr');
         var ntr;
-        var td = createElement('td', { attrs: { role: 'gridcell', 'aria-selected': 'false' } });
+        var td = createElement('td', { attrs: { 'aria-selected': 'false' } });
         var tempData;
         var rowSpan = 0;
         var level;
@@ -24494,11 +24888,10 @@ var AgendaBase = /** @__PURE__ @class */ (function (_super) {
     };
     AgendaBase.prototype.createTableRowElement = function (date, type) {
         var daysCount = getDaysCount(this.parent.selectedDate.getTime(), date.getTime());
-        var tr = createElement('tr', { attrs: { 'role': 'row', 'data-row-index': daysCount.toString() } });
+        var tr = createElement('tr', { attrs: { 'data-row-index': daysCount.toString() } });
         var 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()
@@ -24562,6 +24955,7 @@ var Agenda = /** @__PURE__ @class */ (function (_super) {
         var wrap = createElement('div', { className: CONTENT_WRAP_CLASS });
         workTd.appendChild(wrap);
         var tbl = this.createTableLayout(CONTENT_TABLE_CLASS);
+        this.setAriaAttributes(tbl);
         wrap.appendChild(tbl);
         var tBody = tbl.querySelector('tbody');
         var agendaDate = resetTime(this.parent.selectedDate);
@@ -25497,8 +25891,8 @@ var TimelineViews = /** @__PURE__ @class */ (function (_super) {
     };
     TimelineViews.prototype.getContentRows = function () {
         var rows = [];
-        var tr = createElement('tr', { attrs: { role: 'row' } });
-        var td = createElement('td', { attrs: { role: 'gridcell', 'aria-selected': 'false' } });
+        var tr = createElement('tr');
+        var td = createElement('td', { attrs: { 'aria-selected': 'false' } });
         var trCount = this.getRowCount();
         for (var i = 0; i < trCount; i++) {
             var ntr = tr.cloneNode();
@@ -25883,6 +26277,7 @@ var TimelineYear = /** @__PURE__ @class */ (function (_super) {
         var content = createElement('div', { className: CONTENT_WRAP_CLASS });
         lastTd.appendChild(content);
         var contentTable = this.createTableLayout(CONTENT_TABLE_CLASS);
+        this.setAriaAttributes(contentTable);
         content.appendChild(contentTable);
         var eventWrapper = createElement('div', { className: EVENT_TABLE_CLASS });
         content.appendChild(eventWrapper);
@@ -25916,12 +26311,12 @@ var TimelineYear = /** @__PURE__ @class */ (function (_super) {
             var monthDate = new Date(this.parent.selectedDate.getFullYear(), months[month], 1);
             var monthStart = this.parent.calendarUtil.getMonthStartDate(new Date(monthDate.getTime()));
             var monthEnd = this.parent.calendarUtil.getMonthEndDate(new Date(monthDate.getTime()));
-            var tr = createElement('tr', { attrs: { 'role': 'row' } });
+            var tr = createElement('tr');
             var monthTr = tr.cloneNode();
             monthBody.appendChild(monthTr);
             var contentTr = tr.cloneNode();
             contentBody.appendChild(contentTr);
-            var monthTd = createElement('td', { className: MONTH_HEADER_CLASS, attrs: { 'role': 'gridcell' } });
+            var monthTd = createElement('td', { className: MONTH_HEADER_CLASS });
             if (this.parent.activeViewOptions.orientation === 'Horizontal') {
                 if (this.parent.monthHeaderTemplate) {
                     append(this.renderDayMonthHeaderTemplate(monthStart, month, 'monthHeaderTemplate'), monthTd);
@@ -25956,7 +26351,7 @@ var TimelineYear = /** @__PURE__ @class */ (function (_super) {
                     isDateAvail = column >= monthStart.getDay() && date.getTime() < monthEnd.getTime();
                 }
                 var td = createElement('td', {
-                    className: WORK_CELLS_CLASS, attrs: { 'role': 'gridcell', 'aria-selected': 'false' }
+                    className: WORK_CELLS_CLASS, attrs: { 'aria-selected': 'false' }
                 });
                 contentTr.appendChild(td);
                 var dateHeader = createElement('div', {
@@ -25997,7 +26392,7 @@ var TimelineYear = /** @__PURE__ @class */ (function (_super) {
                 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 });
@@ -26013,7 +26408,7 @@ var TimelineYear = /** @__PURE__ @class */ (function (_super) {
         var tRow = [];
         var monthCells = this.getMonths();
         for (var row = 0; row < this.parent.resourceBase.renderedResources.length; row++) {
-            var tr = createElement('tr', { attrs: { 'role': 'row' } });
+            var tr = createElement('tr');
             tRow.push(tr);
             var resData = void 0;
             if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
@@ -26036,14 +26431,14 @@ var TimelineYear = /** @__PURE__ @class */ (function (_super) {
                 var 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);
             }
@@ -26054,7 +26449,7 @@ var TimelineYear = /** @__PURE__ @class */ (function (_super) {
         var months = this.getMonths();
         for (var row = 0; row < this.rowCount; row++) {
             wrapper.appendChild(createElement('div', { className: APPOINTMENT_CONTAINER_CLASS }));
-            var tr = createElement('tr', { attrs: { 'role': 'row' } });
+            var tr = createElement('tr');
             contentBody.appendChild(tr);
             var resData = void 0;
             if (this.parent.activeViewOptions.orientation === 'Vertical' && this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
@@ -26067,7 +26462,7 @@ var TimelineYear = /** @__PURE__ @class */ (function (_super) {
                 monthBody.appendChild(monthTr);
                 var 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);
@@ -26099,14 +26494,14 @@ var TimelineYear = /** @__PURE__ @class */ (function (_super) {
                 var 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 });
             }
@@ -26171,6 +26566,13 @@ var TimelineYear = /** @__PURE__ @class */ (function (_super) {
             return this.getContentAreaElement();
         }
     };
+    TimelineYear.prototype.wireEvents = function (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);
+        }
+    };
     return TimelineYear;
 }(Year));
 
@@ -26443,6 +26845,7 @@ var ICalendarImport = /** @__PURE__ @class */ (function () {
         this.parent.addEvent(this.processOccurrence(app));
     };
     ICalendarImport.prototype.processOccurrence = function (app) {
+        var _this = this;
         var appoint = [];
         var uId = 'UID';
         var fields = this.parent.eventFields;
@@ -26465,17 +26868,21 @@ var ICalendarImport = /** @__PURE__ @class */ (function () {
                         // eslint-disable-next-line no-prototype-builtins
                         if (data[i].hasOwnProperty(fields.recurrenceID)) {
                             var exdate = data[i][fields.recurrenceID];
+                            data[i][fields.id] = _this.parent.eventBase.generateGuid();
                             data[i][fields.recurrenceID] = id;
                             data[i][fields.recurrenceException] = null;
                             parentObj[fields.recurrenceException] = (isNullOrUndefined(parentObj[fields.recurrenceException])) ?
                                 exdate : parentObj[fields.recurrenceException] + ',' + exdate;
+                            delete data[i][uId];
                             appoint.push(data[i]);
                         }
                     }
+                    delete parentObj[uId];
                     appoint.push(parentObj);
                     // eslint-disable-next-line no-prototype-builtins
                 }
                 else if (!eventObj.hasOwnProperty(fields.recurrenceID)) {
+                    delete eventObj[uId];
                     appoint.push(eventObj);
                 }
             }
@@ -26736,5 +27143,5 @@ var Print = /** @__PURE__ @class */ (function () {
  * 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.es5.js.map