@syncfusion/ej2-schedule 20.2.50 → 20.3.49

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

@@ -875,7 +875,8 @@ var EventBase = /** @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;
@@ -1089,7 +1090,7 @@ var EventBase = /** @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: cls.BLOCK_APPOINTMENT_CLASS,
@@ -1103,7 +1104,7 @@ var EventBase = /** @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);
         }
@@ -1259,6 +1260,32 @@ var EventBase = /** @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') ? cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS : (type === 'timeIndicator') ?
+                    cls.TIMELINE_WRAPPER_CLASS : cls.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: cls.APPOINTMENT_WRAPPER_CLASS + '-' + index.toString(),
+                    className: cls.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('.' + cls.APPOINTMENT_CLASS));
         for (var _i = 0, appElements_1 = appElements; _i < appElements_1.length; _i++) {

package/src/schedule/event-renderer/month.d.ts

@@ -20,6 +20,7 @@ export declare class MonthEvent extends EventBase {
     withIndicator: boolean;
     maxOrIndicator: boolean;
     inlineValue: boolean;
+    private isResourceEventTemplate;
     constructor(parent: Schedule);
     private removeEventWrapper;
     renderAppointments(): void;

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

@@ -57,6 +57,7 @@ var MonthEvent = /** @class */ (function (_super) {
         if (this.parent.dragAndDropModule) {
             this.parent.dragAndDropModule.setDragArea();
         }
+        this.isResourceEventTemplate = this.parent.isSpecificResourceEvents();
         var conWrap = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
         if (this.parent.rowAutoHeight) {
             this.parent.uiStateValues.top = conWrap.scrollTop;
@@ -95,7 +96,8 @@ var MonthEvent = /** @class */ (function (_super) {
         }
         this.eventHeight = util.getElementHeightFromClass(this.element, cls.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) {
@@ -115,7 +117,7 @@ var MonthEvent = /** @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;
@@ -267,7 +269,7 @@ var MonthEvent = /** @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'
@@ -338,7 +340,7 @@ var MonthEvent = /** @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];
@@ -374,7 +376,7 @@ var MonthEvent = /** @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) {
@@ -399,7 +401,7 @@ var MonthEvent = /** @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 {

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

@@ -23,6 +23,7 @@ export declare class VerticalEvent extends EventBase {
     fields: EventFieldsMapping;
     cellHeight: number;
     resources: TdData[];
+    private isResourceEventTemplate;
     constructor(parent: Schedule);
     renderAppointments(): void;
     initializeValues(): void;
@@ -31,6 +32,8 @@ export declare class VerticalEvent extends EventBase {
     private processBlockEvents;
     private renderBlockEvents;
     private renderEvents;
+    getStartCount(): number;
+    private getDayIndex;
     private setValues;
     private getResourceList;
     createAppointmentElement(record: Record<string, any>, isAllDay: boolean, data: Record<string, any>, resource: number): HTMLElement;

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

@@ -50,6 +50,7 @@ var VerticalEvent = /** @class */ (function (_super) {
         if (this.parent.dragAndDropModule) {
             this.parent.dragAndDropModule.setDragArea();
         }
+        this.isResourceEventTemplate = this.parent.isSpecificResourceEvents();
         var wrapperElements = [].slice.call(this.parent.element.querySelectorAll('.' + cls.BLOCK_APPOINTMENT_CLASS +
             ',.' + cls.APPOINTMENT_CLASS + ',.' + cls.ROW_COUNT_WRAPPER_CLASS));
         var isDragging = (this.parent.crudModule && this.parent.crudModule.crudObj.isCrudAction) ? true : false;
@@ -72,6 +73,9 @@ var VerticalEvent = /** @class */ (function (_super) {
         if (!this.element.querySelector('.' + cls.WORK_CELLS_CLASS)) {
             return;
         }
+        if (this.parent.virtualScrollModule) {
+            this.parent.virtualScrollModule.updateFocusedWorkCell();
+        }
         this.allDayElement = [].slice.call(this.element.querySelectorAll('.' + cls.ALLDAY_CELLS_CLASS));
         this.setAllDayRowHeight(0);
         if (this.parent.eventsProcessed.length === 0 && this.parent.blockProcessed.length === 0) {
@@ -104,6 +108,9 @@ var VerticalEvent = /** @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;
@@ -120,7 +127,7 @@ var VerticalEvent = /** @class */ (function (_super) {
         return appHeight;
     };
     VerticalEvent.prototype.appendEvent = function (eventObj, appointmentElement, index, appLeft) {
-        var appointmentWrap = [].slice.call(this.element.querySelectorAll('.' + cls.APPOINTMENT_WRAPPER_CLASS));
+        var appointmentWrap = this.element.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS + '[id="' + cls.APPOINTMENT_WRAPPER_CLASS + '-' + index + '"]');
         if (this.parent.enableRtl) {
             setStyleAttribute(appointmentElement, { 'right': appLeft });
         }
@@ -134,13 +141,13 @@ var VerticalEvent = /** @class */ (function (_super) {
         };
         this.parent.trigger(events.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];
@@ -179,9 +186,11 @@ var VerticalEvent = /** @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');
         }
     };
@@ -189,7 +198,7 @@ var VerticalEvent = /** @class */ (function (_super) {
         removeClass(this.allDayElement, cls.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;
@@ -253,6 +262,15 @@ var VerticalEvent = /** @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('.' + cls.APPOINTMENT_WRAPPER_CLASS).getAttribute('id').split('-').slice(-1)[0], 10) : 0;
+    };
+    VerticalEvent.prototype.getDayIndex = function (dayIndex, resource) {
+        return this.parent.activeViewOptions.group.byDate ?
+            this.parent.resourceBase.lastResourceLevel[0].renderDates.indexOf(this.dateRender[resource][dayIndex]) :
+            dayIndex;
+    };
     VerticalEvent.prototype.setValues = function (event, resourceIndex) {
         if (this.parent.activeViewOptions.group.resources.length > 0) {
             this.cssClass = this.resources[resourceIndex].cssClass;
@@ -284,7 +302,6 @@ var VerticalEvent = /** @class */ (function (_super) {
                 'tabindex': '0',
                 'aria-disabled': this.parent.eventBase.getReadonlyAttribute(record),
                 'aria-pressed': 'false',
-                'aria-grabbed': 'true',
                 'aria-label': this.parent.getAnnouncementString(record)
             }
         });
@@ -304,7 +321,7 @@ var VerticalEvent = /** @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 {
@@ -481,10 +498,11 @@ var VerticalEvent = /** @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('.' + cls.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('.' + cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS +
                     ':nth-child(' + (wIndex_1 + 1) + ')');
                 var appointmentElement_1;
@@ -553,9 +571,10 @@ var VerticalEvent = /** @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);
@@ -580,7 +599,8 @@ var VerticalEvent = /** @class */ (function (_super) {
             if (!this.parent.isAdaptive && subjectElement) {
                 subjectElement.style.maxHeight = formatUnit(maxHeight);
             }
-            var index = this.parent.activeViewOptions.group.byDate ? (this.resources.length * 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];
@@ -704,7 +724,7 @@ var VerticalEvent = /** @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 + '"]');

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

@@ -369,7 +369,7 @@ var YearEvent = /** @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)
             }
         });

package/src/schedule/exports/calendar-import.js

@@ -120,6 +120,7 @@ var ICalendarImport = /** @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;
@@ -142,17 +143,21 @@ var ICalendarImport = /** @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);
                 }
             }

package/src/schedule/popups/event-window.d.ts

@@ -104,5 +104,6 @@ export declare class EventWindow {
     private eventDelete;
     getRecurrenceEditorInstance(): RecurrenceEditor;
     private destroyComponents;
+    private detachComponents;
     destroy(isIgnore?: boolean): void;
 }

package/src/schedule/popups/event-window.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { createElement, isNullOrUndefined, addClass, remove, EventHandler, extend, append } from '@syncfusion/ej2-base';
+import { createElement, isNullOrUndefined, addClass, remove, EventHandler, extend, append, detach } from '@syncfusion/ej2-base';
 import { cldrData, removeClass, getValue, getDefaultDateObject, closest, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { Query, Deferred } from '@syncfusion/ej2-data';
 import { CheckBox, Button } from '@syncfusion/ej2-buttons';
@@ -261,6 +261,7 @@ var EventWindow = /** @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());
@@ -814,12 +815,26 @@ var EventWindow = /** @class */ (function () {
         };
         var form = this.element.querySelector('.' + cls.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);
     };
@@ -1767,6 +1782,13 @@ var EventWindow = /** @class */ (function () {
             this.buttonObj.destroy();
         }
     };
+    EventWindow.prototype.detachComponents = function () {
+        var formElements = this.getFormElements(cls.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']);
@@ -1774,6 +1796,7 @@ var EventWindow = /** @class */ (function () {
         this.destroyComponents();
         if (this.recurrenceEditor) {
             this.recurrenceEditor.destroy();
+            detach(this.recurrenceEditor.element);
             this.recurrenceEditor = null;
         }
         if (this.fieldValidator) {
@@ -1784,8 +1807,12 @@ var EventWindow = /** @class */ (function () {
             this.repeatDialogObject.destroy();
             this.repeatDialogObject = null;
         }
+        this.detachComponents();
         if (this.dialogObject) {
             if (this.dialogObject.element) {
+                var form = this.dialogObject.element.querySelector('form');
+                util.removeChildren(form);
+                detach(form);
                 EventHandler.remove(this.dialogObject.element, 'keydown', this.preventEventSave);
             }
             this.dialogObject.destroy();
@@ -1802,6 +1829,7 @@ var EventWindow = /** @class */ (function () {
             this.buttonObj = null;
             this.repeatStatus = null;
             this.eventWindowTime = null;
+            this.dialogEvent = null;
         }
     };
     return EventWindow;

package/src/schedule/popups/quick-popups.js

@@ -319,7 +319,7 @@ var QuickPopups = /** @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;
@@ -444,6 +444,9 @@ var QuickPopups = /** @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;
@@ -515,6 +518,9 @@ var QuickPopups = /** @class */ (function () {
             if (isSameTarget) {
                 return;
             }
+            else if (this.quickPopup.element) {
+                this.destroyPopupButtons('quickPopup');
+            }
             var eventData = events.event;
             var quickEventPopup = createElement('div', { className: cls.EVENT_POPUP_CLASS });
             quickEventPopup.appendChild(this.getPopupHeader('Event', eventData));
@@ -1059,7 +1065,10 @@ var QuickPopups = /** @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, '.' + cls.CONTENT_TABLE_CLASS));
+                    var conTable = _this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS + ' table');
+                    _this.quickPopup.offsetX = isVirtualScroll && !_this.parent.enableRtl ? (util.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();
@@ -1067,7 +1076,11 @@ var QuickPopups = /** @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 = util.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' };
@@ -1076,9 +1089,8 @@ var QuickPopups = /** @class */ (function () {
                             _this.quickPopup.dataBind();
                         }
                     }
-                    if (_this.parent.virtualScrollModule && (collide.indexOf('top') > -1 || collide.indexOf('bottom') > -1)) {
-                        var element = _this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS + ' table');
-                        var translateY = util.getTranslateY(element);
+                    if (_this.parent.virtualScrollModule && !_this.parent.virtualScrollModule.isHorizontalScroll && (collide.indexOf('top') > -1 || collide.indexOf('bottom') > -1)) {
+                        var translateY = util.getTranslateY(conTable);
                         _this.quickPopup.offsetY = translateY;
                         _this.quickPopup.dataBind();
                     }
@@ -1333,6 +1345,7 @@ var QuickPopups = /** @class */ (function () {
         this.destroyQuickPopup();
         this.destroyMorePopup();
         this.destroyQuickDialog();
+        this.dialogEvent = null;
         this.parent = null;
         this.l10n = null;
         this.isCrudAction = null;

package/src/schedule/renderer/agenda.js

@@ -48,6 +48,7 @@ var Agenda = /** @class */ (function (_super) {
         var wrap = createElement('div', { className: cls.CONTENT_WRAP_CLASS });
         workTd.appendChild(wrap);
         var tbl = this.createTableLayout(cls.CONTENT_TABLE_CLASS);
+        this.setAriaAttributes(tbl);
         wrap.appendChild(tbl);
         var tBody = tbl.querySelector('tbody');
         var agendaDate = util.resetTime(this.parent.selectedDate);

package/src/schedule/renderer/month.js

@@ -12,7 +12,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { EventHandler, formatUnit, isNullOrUndefined, createElement, addClass, append, prepend, remove } from '@syncfusion/ej2-base';
+import { EventHandler, formatUnit, isNullOrUndefined, createElement, addClass, append, prepend, remove, extend } from '@syncfusion/ej2-base';
 import { ViewBase } from './view-base';
 import { MonthEvent } from '../event-renderer/month';
 import * as util from '../base/util';
@@ -186,7 +186,7 @@ var Month = /** @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(cls.VIRTUAL_SCROLL_CLASS);
         }
         if (this.parent.rowAutoHeight && this.parent.eventSettings.ignoreWhitespace) {
@@ -234,11 +234,18 @@ var Month = /** @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: cls.CONTENT_WRAP_CLASS });
         var contentArea = this.renderContentArea();
         if (this.parent.currentView === 'Month') {
@@ -252,6 +259,10 @@ var Month = /** @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();
     };
@@ -279,6 +290,11 @@ var Month = /** @class */ (function (_super) {
         var wrap = createElement('div', { className: cls.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++) {
@@ -368,10 +384,12 @@ var Month = /** @class */ (function (_super) {
             var dates = this.renderDates.map(function (date) { return new Date(+date); });
             var count = this.parent.activeViewOptions.showWeekend ? util.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);
@@ -407,6 +425,7 @@ var Month = /** @class */ (function (_super) {
     };
     Month.prototype.renderContentArea = function () {
         var tbl = this.createTableLayout(cls.CONTENT_TABLE_CLASS);
+        this.setAriaAttributes(tbl);
         this.addAutoHeightClass(tbl);
         if (this.parent.currentView === 'TimelineMonth') {
             this.createColGroup(tbl, this.colLevels[this.colLevels.length - 1]);
@@ -423,8 +442,8 @@ var Month = /** @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();

package/src/schedule/renderer/renderer.js

@@ -91,12 +91,18 @@ var Render = /** @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(cls.CURRENT_PANEL_CLASS);