@syncfusion/ej2-schedule 19.2.60 → 19.3.48

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

@@ -1073,6 +1073,11 @@ class HeaderRenderer {
         if (selEle) {
             selEle.setAttribute('aria-label', text);
             selEle.querySelector('.e-tbar-btn-text').innerHTML = text;
+            this.refresh();
+        }
+    }
+    refresh() {
+        if (this.toolbarObj) {
             this.toolbarObj.refreshOverflow();
         }
     }
@@ -1327,7 +1332,7 @@ class HeaderRenderer {
                 this.parent.changeView('TimelineYear', args.originalEvent, undefined, this.calculateViewIndex(args));
                 break;
             case 'e-today':
-                if (!this.parent.isSelectedDate(resetTime(this.parent.getCurrentTime()))) {
+                if (this.parent.currentView === 'Agenda' || !this.parent.isSelectedDate(resetTime(this.parent.getCurrentTime()))) {
                     this.parent.changeDate(resetTime(this.parent.getCurrentTime()), args.originalEvent);
                 }
                 break;
@@ -1869,7 +1874,7 @@ class KeyboardInteraction {
                 this.processCtrlShiftNavigationArrows(e);
                 break;
             case 'escape':
-                this.processEscape();
+                this.processEscape(e);
         }
     }
     addEventListener() {
@@ -2013,7 +2018,7 @@ class KeyboardInteraction {
         if (target.classList.contains(MORE_EVENT_HEADER_DATE_CLASS)) {
             this.parent.setProperties({ selectedDate: this.parent.getDateFromElement(target) }, true);
             this.parent.changeView(this.parent.getNavigateView(), e);
-            this.processEscape();
+            this.processEscape(e);
             return;
         }
     }
@@ -2587,7 +2592,7 @@ class KeyboardInteraction {
                 !this.parent.eventSettings.allowDeleting) {
                 return;
             }
-            this.parent.quickPopup.deleteClick();
+            this.parent.quickPopup.deleteClick(e);
         }
     }
     processCtrlShiftNavigationArrows(e) {
@@ -2622,8 +2627,8 @@ class KeyboardInteraction {
             }
         }
     }
-    processEscape() {
-        this.parent.quickPopup.onClosePopup();
+    processEscape(event) {
+        this.parent.quickPopup.onClosePopup(event);
         this.parent.quickPopup.morePopup.hide();
         if (this.parent.headerModule) {
             this.parent.headerModule.hideHeaderPopup();
@@ -4922,12 +4927,7 @@ class EventBase {
             if (generateID) {
                 event[fields.id] = temp++;
             }
-            if (typeof event[fields.startTime] === 'string') {
-                event[fields.startTime] = getDateFromString(event[fields.startTime]);
-            }
-            if (typeof event[fields.endTime] === 'string') {
-                event[fields.endTime] = getDateFromString(event[fields.endTime]);
-            }
+            event = this.updateEventDateTime(event);
             if (timeZonePropChanged) {
                 this.processTimezoneChange(event, oldTimezone);
             }
@@ -4986,6 +4986,15 @@ class EventBase {
         this.parent.blockProcessed = blockData;
         return eventData;
     }
+    updateEventDateTime(eventData) {
+        if (typeof eventData[this.parent.eventFields.startTime] === 'string') {
+            eventData[this.parent.eventFields.startTime] = getDateFromString(eventData[this.parent.eventFields.startTime]);
+        }
+        if (typeof eventData[this.parent.eventFields.endTime] === 'string') {
+            eventData[this.parent.eventFields.endTime] = getDateFromString(eventData[this.parent.eventFields.endTime]);
+        }
+        return eventData;
+    }
     getProcessedEvents(eventCollection = this.parent.eventsData) {
         let processed = [];
         for (const event of eventCollection) {
@@ -5080,7 +5089,7 @@ class EventBase {
             const data = this.getGroupIndexFromEvent(eventObj);
             resourceData = this.parent.resourceBase.lastResourceLevel[data];
         }
-        let blockEvents = extend([], this.parent.blockProcessed, null, true);
+        const blockEvents = extend([], this.parent.blockProcessed, null, true);
         for (const eventObj of blockEvents) {
             if (eventObj[fields.isAllDay]) {
                 const isDifferentTime = eventObj[fields.endTime].getTime() >
@@ -5139,26 +5148,36 @@ class EventBase {
         }));
         return filteredCollection;
     }
-    sortByTime(appointments) {
-        const fieldMapping = this.parent.eventFields;
-        appointments.sort((a, b) => {
-            const d1 = a[fieldMapping.startTime];
-            const d2 = b[fieldMapping.startTime];
-            return d1.getTime() - d2.getTime();
-        });
-        return appointments;
+    sortByTime(appointmentsCollection) {
+        if (this.parent.eventSettings.sortComparer) {
+            appointmentsCollection = this.parent.eventSettings.sortComparer.call(this.parent, appointmentsCollection);
+        }
+        else {
+            const fieldMappings = this.parent.eventFields;
+            appointmentsCollection.sort((a, b) => {
+                const d1 = a[fieldMappings.startTime];
+                const d2 = b[fieldMappings.startTime];
+                return d1.getTime() - d2.getTime();
+            });
+        }
+        return appointmentsCollection;
     }
     sortByDateTime(appointments) {
-        const fieldMapping = this.parent.eventFields;
-        appointments.sort((object1, object2) => {
-            const d3 = object1[fieldMapping.startTime];
-            const d4 = object2[fieldMapping.startTime];
-            const d5 = object1[fieldMapping.endTime];
-            const d6 = object2[fieldMapping.endTime];
-            const d1 = d5.getTime() - d3.getTime();
-            const d2 = d6.getTime() - d4.getTime();
-            return (d3.getTime() - d4.getTime() || d2 - d1);
-        });
+        if (this.parent.eventSettings.sortComparer) {
+            appointments = this.parent.eventSettings.sortComparer.call(this.parent, appointments);
+        }
+        else {
+            const fieldMapping = this.parent.eventFields;
+            appointments.sort((object1, object2) => {
+                const d3 = object1[fieldMapping.startTime];
+                const d4 = object2[fieldMapping.startTime];
+                const d5 = object1[fieldMapping.endTime];
+                const d6 = object2[fieldMapping.endTime];
+                const d1 = d5.getTime() - d3.getTime();
+                const d2 = d6.getTime() - d4.getTime();
+                return (d3.getTime() - d4.getTime() || d2 - d1);
+            });
+        }
         return appointments;
     }
     getSmallestMissingNumber(array) {
@@ -5211,10 +5230,10 @@ class EventBase {
     }
     splitEvent(event, dateRender) {
         const fields = this.parent.eventFields;
-        let start = resetTime(new Date(event[fields.startTime] + '')).getTime();
-        let end = resetTime(new Date(event[fields.endTime] + '')).getTime();
+        let start = resetTime(event[fields.startTime]).getTime();
+        let end = resetTime(event[fields.endTime]).getTime();
         if (getDateInMs(event[fields.endTime]) <= 0) {
-            const temp = addDays(resetTime(new Date(event[fields.endTime] + '')), -1).getTime();
+            const temp = addDays(resetTime(event[fields.endTime]), -1).getTime();
             end = start > temp ? start : temp;
         }
         const orgStart = start;
@@ -5475,7 +5494,7 @@ class EventBase {
         const isAllDay = event[fieldMapping.isAllDay];
         const isFullDay = ((event[fieldMapping.endTime].getTime() - event[fieldMapping.startTime].getTime())
             / MS_PER_DAY) >= 1;
-        return (isAllDay || isFullDay) ? true : false;
+        return (isAllDay || (!(this.parent.eventSettings.spannedEventPlacement == 'TimeSlot') && isFullDay)) ? true : false;
     }
     addEventListener() {
         this.parent.on(documentClick, this.appointmentBorderRemove, this);
@@ -6054,6 +6073,12 @@ class VerticalEvent extends EventBase {
         this.addEventListener();
     }
     renderAppointments() {
+        if (isNullOrUndefined(this.parent)) {
+            return;
+        }
+        if (this.parent.dragAndDropModule) {
+            this.parent.dragAndDropModule.setDragArea();
+        }
         const wrapperElements = [].slice.call(this.parent.element.querySelectorAll('.' + BLOCK_APPOINTMENT_CLASS +
             ',.' + APPOINTMENT_CLASS + ',.' + ROW_COUNT_WRAPPER_CLASS));
         const isDragging = (this.parent.crudModule && this.parent.crudModule.crudObj.isCrudAction) ? true : false;
@@ -6560,10 +6585,10 @@ class VerticalEvent extends EventBase {
             const index = this.parent.activeViewOptions.group.byDate ? (this.resources.length * dayIndex) + resource : dayCount;
             this.appendEvent(eventObj, appointmentElement, index, tempData.appLeft);
             this.wireAppointmentEvents(appointmentElement, eventObj);
-            if (appointmentElement.offsetHeight < this.cellHeight) {
+            if (appHeight < this.cellHeight) {
                 const resizeHandlers = [].slice.call(appointmentElement.querySelectorAll('.' + EVENT_RESIZE_CLASS));
                 resizeHandlers.forEach((resizeHandler) => {
-                    resizeHandler.style.height = Math.ceil(appointmentElement.offsetHeight / resizeHandler.offsetHeight) + 'px';
+                    resizeHandler.style.height = Math.ceil(appHeight / resizeHandler.offsetHeight) + 'px';
                 });
             }
         }
@@ -6646,11 +6671,12 @@ class VerticalEvent extends EventBase {
             eventsList = eventsList.filter((obj) => (obj[fieldMapping.startTime] === record[fieldMapping.startTime] &&
                 obj[fieldMapping.endTime] > record[fieldMapping.endTime] || obj[fieldMapping.endTime] > record[fieldMapping.startTime] &&
                 obj[fieldMapping.startTime] < record[fieldMapping.endTime] || obj[fieldMapping.endTime] === record[fieldMapping.startTime]
-                && obj[fieldMapping.startTime] === record[fieldMapping.endTime]) || ((obj[fieldMapping.startTime].getTime() ===
-                record[fieldMapping.startTime].getTime() && obj[fieldMapping.endTime].getTime() === record[fieldMapping.endTime].getTime())
-                || (obj[fieldMapping.startTime].getTime() === record[fieldMapping.startTime].getTime() &&
-                    obj[fieldMapping.endTime].getTime() < record[fieldMapping.endTime].getTime() ||
-                    obj[fieldMapping.endTime].getTime() > record[fieldMapping.endTime].getTime())));
+                && obj[fieldMapping.startTime] === record[fieldMapping.endTime]) ||
+                ((obj[fieldMapping.startTime].getTime() === record[fieldMapping.startTime].getTime() &&
+                    obj[fieldMapping.endTime].getTime() === record[fieldMapping.endTime].getTime())
+                    || (obj[fieldMapping.startTime].getTime() === record[fieldMapping.startTime].getTime() &&
+                        obj[fieldMapping.endTime].getTime() < record[fieldMapping.endTime].getTime() ||
+                        obj[fieldMapping.endTime].getTime() > record[fieldMapping.endTime].getTime())));
         }
         if (eventsList.length > 0) {
             const appLevel = eventsList.map((obj) => obj.Index);
@@ -6836,6 +6862,9 @@ class MonthEvent extends EventBase {
         }
     }
     renderAppointments() {
+        if (this.parent.dragAndDropModule) {
+            this.parent.dragAndDropModule.setDragArea();
+        }
         const conWrap = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
         if (this.parent.rowAutoHeight) {
             this.parent.uiStateValues.top = conWrap.scrollTop;
@@ -6864,6 +6893,13 @@ class MonthEvent extends EventBase {
         if (!this.element.querySelector('.' + WORK_CELLS_CLASS)) {
             return;
         }
+        if (this.parent.currentView === 'Month') {
+            const wrapper = createElement('div', { className: APPOINTMENT_WRAPPER_CLASS });
+            const cellTd = this.parent.element.querySelector('.' + WORK_CELLS_CLASS);
+            cellTd.appendChild(wrapper);
+            this.monthHeaderHeight = wrapper.offsetTop - cellTd.offsetTop;
+            cellTd.removeChild(wrapper);
+        }
         this.eventHeight = getElementHeightFromClass(this.element, APPOINTMENT_CLASS);
         const scrollTop = conWrap.scrollTop;
         if (this.parent.rowAutoHeight && this.parent.virtualScrollModule && !isNullOrUndefined(this.parent.currentAction)) {
@@ -6895,10 +6931,10 @@ class MonthEvent extends EventBase {
                     this.parent.virtualScrollModule.updateVirtualScrollHeight();
                 }
             }
-            this.parent.notify(scrollUiUpdate, data);
             if (!this.parent.enablePersistence) {
                 this.parent.notify(contentReady, {});
             }
+            this.parent.notify(scrollUiUpdate, data);
             if (this.parent.currentView === 'Month' && this.parent.showWeekNumber) {
                 const totalCells = [].slice.call(this.parent.element.querySelectorAll('.e-content-wrap table tr td:first-child'));
                 const weekNumberCells = [].slice.call(this.parent.element.querySelectorAll('.' + WEEK_NUMBER_CLASS));
@@ -6934,7 +6970,9 @@ class MonthEvent extends EventBase {
         this.sortByDateTime(blockList);
         if (this.parent.currentView === 'Month' && this.parent.rowAutoHeight && this.parent.activeViewOptions.group.resources.length === 0) {
             const totalCells = [].slice.call(this.parent.element.querySelectorAll('.e-content-wrap table tr td:first-child'));
-            const height = this.parent.element.querySelector('.e-schedule-table').clientHeight / totalCells.length;
+            const height = this.parent.height === 'auto' ? (this.parent.element.querySelector('.e-content-wrap').clientHeight +
+                this.parent.element.querySelector('.e-date-header-wrap').clientHeight) / totalCells.length
+                : this.parent.element.querySelector('.e-schedule-table').clientHeight / totalCells.length;
             totalCells.forEach((cell) => {
                 setStyleAttribute(cell, { 'height': height + 'px' });
             });
@@ -7023,7 +7061,6 @@ class MonthEvent extends EventBase {
             appWidth = (appWidth <= 0) ? this.cellWidth : appWidth;
             const appLeft = (this.parent.enableRtl) ? 0 : position;
             const appRight = (this.parent.enableRtl) ? position : 0;
-            this.renderWrapperElement(cellTd);
             const appHeight = this.cellHeight - this.monthHeaderHeight;
             const appTop = this.getRowTop(resIndex);
             const blockElement = this.createBlockAppointmentElement(event, resIndex);
@@ -7128,18 +7165,19 @@ class MonthEvent extends EventBase {
         const eventSubject = (record[this.fields.subject] || this.parent.eventSettings.fields.subject.default ||
             this.parent.localeObj.getConstant('addTitle'));
         const newRecord = extend({}, record, record.data, true);
-        const appointmentWrapper = createElement('div', {
-            className: APPOINTMENT_CLASS,
-            attrs: {
-                'data-id': 'Appointment_' + record[this.fields.id],
-                'role': 'button', 'tabindex': '0',
-                'aria-readonly': this.parent.eventBase.getReadonlyAttribute(record), 'aria-selected': 'false', 'aria-grabbed': 'true',
-                'aria-label': this.parent.getAnnouncementString(newRecord, eventSubject)
-            }
-        });
+        const attrs = {
+            'data-id': 'Appointment_' + record[this.fields.id],
+            'role': 'button', 'tabindex': '0',
+            'aria-readonly': this.parent.eventBase.getReadonlyAttribute(record), 'aria-selected': 'false', 'aria-grabbed': 'true',
+            'aria-label': this.parent.getAnnouncementString(newRecord, eventSubject)
+        };
         if (!isCloneElement) {
-            appointmentWrapper.setAttribute('data-guid', record.Guid);
+            attrs['data-guid'] = record.Guid;
+        }
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            attrs['data-group-index'] = resIndex.toString();
         }
+        const appointmentWrapper = createElement('div', { className: APPOINTMENT_CLASS, attrs: attrs });
         if (!isNullOrUndefined(this.cssClass)) {
             addClass([appointmentWrapper], this.cssClass);
         }
@@ -7148,9 +7186,6 @@ class MonthEvent extends EventBase {
         }
         const appointmentDetails = createElement('div', { className: APPOINTMENT_DETAILS });
         appointmentWrapper.appendChild(appointmentDetails);
-        if (this.parent.activeViewOptions.group.resources.length > 0) {
-            appointmentWrapper.setAttribute('data-group-index', resIndex.toString());
-        }
         let templateElement;
         const eventData = record.data;
         const eventObj = this.getEventData(record);
@@ -7263,7 +7298,6 @@ class MonthEvent extends EventBase {
             const appWidth = (diffInDays * this.cellWidth) - 5;
             const cellTd = this.workCells[day];
             const appTop = (overlapCount * (appHeight + EVENT_GAP));
-            this.renderWrapperElement(cellTd);
             const height = this.monthHeaderHeight + ((overlapCount + 1) * (appHeight + EVENT_GAP)) + this.moreIndicatorHeight;
             const enableAppRender = this.maxOrIndicator ? overlapCount < 1 ? true : false : this.cellHeight > height;
             if (this.parent.rowAutoHeight || enableAppRender) {
@@ -7300,7 +7334,7 @@ class MonthEvent extends EventBase {
                             moreIndicatorElement.setAttribute('data-group-index', groupIndex);
                         }
                         moreIndicatorElement.style.top = appArea + 'px';
-                        moreIndicatorElement.style.width = cellTd.offsetWidth - 2 + 'px';
+                        moreIndicatorElement.style.width = this.cellWidth - 2 + 'px';
                         this.renderElement(cellTd, moreIndicatorElement);
                         EventHandler.add(moreIndicatorElement, 'click', this.moreIndicatorClick, this);
                     }
@@ -7339,8 +7373,9 @@ class MonthEvent extends EventBase {
     getOverlapEvents(date, appointments) {
         const appointmentsList = [];
         for (const app of appointments) {
-            if ((resetTime(app[this.fields.startTime]).getTime() <= resetTime(date).getTime()) &&
-                (resetTime(app[this.fields.endTime]).getTime() >= resetTime(date).getTime())) {
+            const dateTime = resetTime(date).getTime();
+            if ((resetTime(app[this.fields.startTime]).getTime() <= dateTime) &&
+                (resetTime(app[this.fields.endTime]).getTime() >= dateTime)) {
                 appointmentsList.push(app);
             }
         }
@@ -7406,8 +7441,9 @@ class MonthEvent extends EventBase {
         if (this.maxOrIndicator && isAppointment) {
             this.setMaxEventHeight(element, cellTd);
         }
-        if (cellTd.querySelector('.' + APPOINTMENT_WRAPPER_CLASS)) {
-            cellTd.querySelector('.' + APPOINTMENT_WRAPPER_CLASS).appendChild(element);
+        const wrapperEle = cellTd.querySelector('.' + APPOINTMENT_WRAPPER_CLASS);
+        if (wrapperEle) {
+            wrapperEle.appendChild(element);
         }
         else {
             const wrapper = createElement('div', { className: APPOINTMENT_WRAPPER_CLASS });
@@ -7415,17 +7451,6 @@ class MonthEvent extends EventBase {
             cellTd.appendChild(wrapper);
         }
     }
-    renderWrapperElement(cellTd) {
-        const element = cellTd.querySelector('.' + APPOINTMENT_WRAPPER_CLASS);
-        if (!isNullOrUndefined(element)) {
-            this.monthHeaderHeight = element.offsetTop - cellTd.offsetTop;
-        }
-        else {
-            const wrapper = createElement('div', { className: APPOINTMENT_WRAPPER_CLASS });
-            cellTd.appendChild(wrapper);
-            this.monthHeaderHeight = wrapper.offsetTop - cellTd.offsetTop;
-        }
-    }
     getMoreIndicatorElement(count, startDate, endDate) {
         const moreIndicatorElement = createElement('div', {
             className: MORE_INDICATOR_CLASS,
@@ -7519,6 +7544,35 @@ class TimelineEvent extends MonthEvent {
         }
         return appointmentsList;
     }
+    getSortComparerIndex(startDate, endDate) {
+        let appIndex = -1;
+        const appointments = this.renderedEvents;
+        if (appointments.length > 0) {
+            const appointmentsList = this.getOverlapSortComparerEvents(startDate, endDate, appointments);
+            const appLevel = appointmentsList.map((obj) => obj.Index);
+            appIndex = (appLevel.length > 0) ? this.getSmallestMissingNumber(appLevel) : 0;
+        }
+        return (appIndex === -1) ? 0 : appIndex;
+    }
+    getOverlapSortComparerEvents(startDate, endDate, appointmentsCollection) {
+        const appointments = [];
+        for (const app of appointmentsCollection) {
+            if (this.renderType === 'day') {
+                if ((resetTime(app[this.fields.startTime]).getTime() <= resetTime(new Date(startDate.getTime())).getTime()) &&
+                    (resetTime(app[this.fields.endTime]).getTime() >= resetTime(new Date(startDate.getTime())).getTime())) {
+                    appointments.push(app);
+                }
+            }
+            else {
+                const eventData = app.data;
+                if (((eventData.trimStartTime.getTime() <= startDate.getTime()) && (startDate.getTime() < eventData.trimEndTime.getTime())) ||
+                    ((startDate.getTime() <= eventData.trimStartTime.getTime()) && (eventData.trimStartTime.getTime() < endDate.getTime()))) {
+                    appointments.push(app);
+                }
+            }
+        }
+        return appointments;
+    }
     renderResourceEvents() {
         this.removeHeightProperty(RESOURCE_COLUMN_TABLE_CLASS);
         const resources = this.parent.uiStateValues.isGroupAdaptive ?
@@ -7559,7 +7613,7 @@ class TimelineEvent extends MonthEvent {
             return;
         }
         const cellTd = this.getCellTd();
-        const overlapCount = this.getIndex(startTime);
+        const overlapCount = (isNullOrUndefined(this.parent.eventSettings.sortComparer)) ? this.getIndex(startTime) : this.getSortComparerIndex(startTime, endTime);
         event.Index = overlapCount;
         const elem = this.element.querySelector('.' + APPOINTMENT_CLASS);
         const eleHeight = (elem) ? elem.getBoundingClientRect().height : 0;
@@ -8196,6 +8250,9 @@ class FieldValidator {
         if (!elem && !this.ignoreError) {
             this.createTooltip(inputElement, error, id, '');
         }
+        if (!isNullOrUndefined(elem)) {
+            elem.querySelector(".e-error").innerHTML = error.innerHTML;
+        }
     }
     createTooltip(element, error, name, display) {
         let dlgContent;
@@ -8377,6 +8434,7 @@ class QuickPopups {
         });
         buttonObj.appendTo(element);
         EventHandler.add(element, 'click', clickEvent, this);
+        removeClass([element], ICON);
     }
     quickDialogClass(action) {
         const classList$$1 = [
@@ -8614,10 +8672,16 @@ class QuickPopups {
         const closeIcon = this.quickPopup.element.querySelector('.' + CLOSE_CLASS);
         this.renderButton('e-flat e-round e-small', ICON + ' ' + CLOSE_ICON_CLASS, false, closeIcon, this.closeClick);
         const readonly = this.parent.activeViewOptions.readonly || eventObj[this.parent.eventFields.isReadonly];
+        const editAction = !this.parent.eventSettings.allowEditing || readonly;
+        const deleteAction = !this.parent.eventSettings.allowDeleting || readonly;
         const editIcon = this.quickPopup.element.querySelector('.' + EDIT_CLASS);
-        this.renderButton('e-flat e-round e-small', ICON + ' ' + EDIT_ICON_CLASS, readonly, editIcon, this.editClick);
+        if (editIcon) {
+            this.renderButton('e-flat e-round e-small', ICON + ' ' + EDIT_ICON_CLASS, editAction, editIcon, this.editClick);
+        }
         const deleteIcon = this.quickPopup.element.querySelector('.' + DELETE_CLASS);
-        this.renderButton('e-flat e-round e-small', ICON + ' ' + DELETE_ICON_CLASS, readonly, deleteIcon, this.deleteClick);
+        if (deleteIcon) {
+            this.renderButton('e-flat e-round e-small', ICON + ' ' + DELETE_ICON_CLASS, deleteAction, deleteIcon, this.deleteClick);
+        }
         this.beforeQuickPopupOpen(target);
     }
     isCellBlocked(args) {
@@ -9061,21 +9125,24 @@ class QuickPopups {
             }
         });
     }
-    saveClick() {
+    saveClick(event) {
+        this.dialogEvent = event;
         this.isCrudAction = true;
         this.quickPopupHide();
     }
-    detailsClick() {
+    detailsClick(event) {
         const subjectEle = this.quickPopup.element.querySelector('.' + SUBJECT_CLASS);
         if (subjectEle && subjectEle.value !== '') {
             extend(this.parent.activeCellsData, { subject: subjectEle.value });
         }
+        this.dialogEvent = event;
         this.isCrudAction = false;
         this.fieldValidator.destroyToolTip();
         this.quickPopupHide();
         this.parent.eventWindow.openEditor(this.parent.activeCellsData, 'Add');
     }
-    editClick() {
+    editClick(event) {
+        this.dialogEvent = event;
         this.quickPopupHide(true);
         const data = this.parent.activeEventData.event;
         this.parent.currentAction = 'EditSeries';
@@ -9087,7 +9154,8 @@ class QuickPopups {
             this.parent.eventWindow.openEditor(data, this.parent.currentAction);
         }
     }
-    deleteClick() {
+    deleteClick(event) {
+        this.dialogEvent = event;
         this.quickPopupHide(true);
         this.parent.currentAction = 'Delete';
         if (this.parent.activeEventData.event[this.parent.eventFields.recurrenceRule]) {
@@ -9119,11 +9187,13 @@ class QuickPopups {
         const moreElement = this.createMoreEventList(events, groupOrder, groupIndex);
         this.morePopup.element.querySelector('.' + MORE_EVENT_POPUP_CLASS).appendChild(moreElement);
     }
-    closeClick() {
+    closeClick(event) {
+        this.dialogEvent = event;
         this.quickPopupHide();
         this.morePopup.hide();
     }
     dialogButtonClick(event) {
+        this.dialogEvent = event;
         this.quickDialog.hide();
         const target = event.target;
         const cancelBtn = this.quickDialog.element.querySelector('.' + QUICK_DIALOG_ALERT_CANCEL);
@@ -9167,7 +9237,7 @@ class QuickPopups {
         else if (!cancelBtn.classList.contains(DISABLE_CLASS) && (target.classList.contains(QUICK_DIALOG_ALERT_OK) ||
             (target.classList.contains(QUICK_DIALOG_ALERT_CANCEL) && !cancelBtn.classList.contains(QUICK_DIALOG_CANCEL_CLASS)))) {
             this.parent.uiStateValues.isIgnoreOccurrence = target.classList.contains(QUICK_DIALOG_ALERT_CANCEL);
-            this.parent.eventWindow.eventSave(this.l10n.getConstant('ok'));
+            this.parent.eventWindow.eventSave(event, this.l10n.getConstant('ok'));
         }
     }
     updateTapHoldEventPopup(target) {
@@ -9224,8 +9294,9 @@ class QuickPopups {
         this.parent.eventWindow.convertToEventData(cellsData, eventObj);
         return eventObj;
     }
-    beforeQuickDialogClose() {
+    beforeQuickDialogClose(e) {
         const args = {
+            event: e.event || this.dialogEvent,
             type: (isNullOrUndefined(this.parent.activeEventData.event)) ? 'ValidationAlert' :
                 !isNullOrUndefined(this.parent.activeEventData.event[this.parent.eventFields.recurrenceRule])
                     ? 'RecurrenceAlert' : 'DeleteAlert', cancel: false, data: this.parent.activeEventData.event,
@@ -9266,7 +9337,7 @@ class QuickPopups {
                 else {
                     this.quickPopup.offsetX = 10;
                     this.quickPopup.collision = { X: this.parent.enableRtl ? 'flip' : 'none', Y: 'fit' };
-                    this.quickPopup.position = { X: this.parent.enableRtl ? 'left' : 'right', Y: 'top' };
+                    this.quickPopup.position = { X: this.parent.enableRtl ? 'left' : 'right', Y: this.parent.enableRtl ? 'bottom' : 'top' };
                     this.quickPopup.dataBind();
                     this.quickPopup.refreshPosition(null, true);
                     const collide = isCollide(this.quickPopup.element, this.parent.element);
@@ -9370,7 +9441,8 @@ class QuickPopups {
             remove(moreWrapper);
         }
     }
-    popupClose() {
+    popupClose(event) {
+        this.dialogEvent = event;
         this.isCrudAction = false;
         this.quickPopupHide(true);
     }
@@ -9403,6 +9475,7 @@ class QuickPopups {
         }
         const isEventPopup = this.quickPopup.element.querySelector('.' + EVENT_POPUP_CLASS);
         const args = {
+            event: this.dialogEvent,
             type: this.parent.isAdaptive ? isEventPopup ? 'ViewEventInfo' : 'EditEventInfo' : 'QuickInfo',
             cancel: false, data: popupData, element: this.quickPopup.element,
             target: (isCellPopup ? this.parent.activeCellsData.element : this.parent.activeEventData.element)
@@ -9434,7 +9507,7 @@ class QuickPopups {
         if (!isNullOrUndefined(navigateEle)) {
             const date = this.parent.getDateFromElement(e.currentTarget);
             if (!isNullOrUndefined(date)) {
-                this.closeClick();
+                this.closeClick(e);
                 this.parent.setProperties({ selectedDate: date }, true);
                 this.parent.changeView(this.parent.getNavigateView(), e);
             }
@@ -9462,7 +9535,10 @@ class QuickPopups {
             this.morePopup.hide();
         }
     }
-    onClosePopup() {
+    onClosePopup(event) {
+        if (!isNullOrUndefined(event)) {
+            this.dialogEvent = event;
+        }
         this.quickPopupHide();
         this.parent.eventBase.focusElement();
     }
@@ -10963,6 +11039,7 @@ class EventWindow {
         }
         const eventProp = {
             type: 'Editor',
+            event: args.event || this.dialogEvent,
             data: this.eventCrudData,
             cancel: false,
             element: this.element,
@@ -11818,11 +11895,12 @@ class EventWindow {
             (this.l10n.getConstant('repeats') + ' ' + this.recurrenceEditor.getRuleSummary(repeatRule)) : this.l10n.getConstant('repeat');
         this.repeatStatus.setProperties({ label: data });
     }
-    dialogClose() {
+    dialogClose(event) {
         if (this.isEnterKey) {
             this.isEnterKey = false;
             return;
         }
+        this.dialogEvent = event;
         this.isCrudAction = false;
         this.parent.activeEventData = { event: undefined, element: undefined };
         this.parent.currentAction = null;
@@ -11871,7 +11949,7 @@ class EventWindow {
             }
         }
     }
-    eventSave(alert) {
+    eventSave(event, alert) {
         if (this.isEnterKey) {
             this.isEnterKey = false;
             return;
@@ -11886,6 +11964,7 @@ class EventWindow {
             return;
         }
         this.eventCrudData = dataCollection.eventData;
+        this.dialogEvent = event;
         this.isCrudAction = true;
         this.dialogObject.hide();
     }
@@ -12416,7 +12495,7 @@ class EventWindow {
         const element = this.element.querySelector('.' + className);
         return element ? element.ej2_instances[0] : null;
     }
-    eventDelete() {
+    eventDelete(event) {
         if (this.isEnterKey) {
             this.isEnterKey = false;
             return;
@@ -12442,6 +12521,7 @@ class EventWindow {
                 }
                 break;
         }
+        this.dialogEvent = event;
         this.isCrudAction = false;
         this.dialogObject.hide();
         this.parent.quickPopup.openDeleteAlert();
@@ -12619,7 +12699,7 @@ class VirtualScroll {
     }
     renderEvents() {
         this.setTabIndex();
-        this.parent.notify(dataReady, {});
+        this.parent.refreshEvents(false);
         this.parent.notify(contentReady, {});
         this.parent.hideSpinner();
     }
@@ -12671,7 +12751,8 @@ class VirtualScroll {
             this.translateY = conWrap.scrollTop;
         }
         else {
-            const height = (this.parent.rowAutoHeight) ? this.averageRowHeight : this.itemSize;
+            let height = (this.parent.rowAutoHeight) ? this.averageRowHeight : this.itemSize;
+            height = (height > 0) ? height : this.itemSize;
             this.translateY = (conWrap.scrollTop - (this.bufferCount * height) > 0) ?
                 conWrap.scrollTop - (this.bufferCount * height) : 0;
         }
@@ -13009,8 +13090,7 @@ class Crud {
             const resultData = extend([], args.result, null, true);
             this.parent.eventsData = resultData.filter((data) => !data[this.parent.eventFields.isBlock]);
             this.parent.blockData = resultData.filter((data) => data[this.parent.eventFields.isBlock]);
-            const processed = this.parent.eventBase.processData(resultData);
-            this.parent.notify(dataReady, { processedData: processed });
+            this.parent.refreshEvents(false);
             if (this.parent.dragAndDropModule && this.parent.dragAndDropModule.actionObj.action === 'drag') {
                 this.parent.dragAndDropModule.navigationWrapper();
             }
@@ -13102,7 +13182,8 @@ class Crud {
                     const editParams = { addedRecords: [], changedRecords: [], deletedRecords: [] };
                     let promise;
                     if (addArgs.addedRecords instanceof Array) {
-                        for (const event of addArgs.addedRecords) {
+                        for (let event of addArgs.addedRecords) {
+                            event = this.parent.eventBase.updateEventDateTime(event);
                             const eventData = extend({}, this.parent.eventBase.processTimezone(event, true), null, true);
                             editParams.addedRecords.push(eventData);
                         }
@@ -13157,7 +13238,8 @@ class Crud {
                         const fields = this.parent.eventFields;
                         const editParams = { addedRecords: [], changedRecords: [], deletedRecords: [] };
                         if (saveArgs.changedRecords instanceof Array) {
-                            for (const event of saveArgs.changedRecords) {
+                            for (let event of saveArgs.changedRecords) {
+                                event = this.parent.eventBase.updateEventDateTime(event);
                                 const eventData = extend({}, this.parent.eventBase.processTimezone(event, true), null, true);
                                 editParams.changedRecords.push(eventData);
                             }
@@ -13850,6 +13932,9 @@ __decorate$6([
 __decorate$6([
     Property()
 ], EventSettings.prototype, "tooltipTemplate", void 0);
+__decorate$6([
+    Property('AllDayRow')
+], EventSettings.prototype, "spannedEventPlacement", void 0);
 __decorate$6([
     Property()
 ], EventSettings.prototype, "resourceColorField", void 0);
@@ -13874,6 +13959,9 @@ __decorate$6([
 __decorate$6([
     Property(false)
 ], EventSettings.prototype, "ignoreWhitespace", void 0);
+__decorate$6([
+    Property()
+], EventSettings.prototype, "sortComparer", void 0);
 
 var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -13974,7 +14062,13 @@ class ResourceBase {
     renderResourceHeaderIndent(tr) {
         const resColTd = createElement('td', { className: RESOURCE_LEFT_TD_CLASS });
         const resColDiv = createElement('div', { className: RESOURCE_TEXT_CLASS });
-        resColTd.appendChild(resColDiv);
+        if (this.parent.activeViewOptions.headerIndentTemplate) {
+            const data = { className: [resColTd.className], type: 'emptyCells' };
+            this.parent.renderHeaderIndentTemplate(data, resColTd);
+        }
+        else {
+            resColTd.appendChild(resColDiv);
+        }
         const args = { elementType: 'emptyCells', element: resColTd };
         this.parent.trigger(renderCell, args);
         tr.appendChild(resColTd);
@@ -14161,7 +14255,7 @@ class ResourceBase {
                     cancel: false, event: e, groupIndex: index,
                     requestType: target.classList.contains(RESOURCE_COLLAPSE_CLASS) ? 'resourceExpanded' : 'resourceCollapsed'
                 };
-                this.parent.notify(dataReady, {});
+                this.parent.refreshEvents(false);
                 this.parent.trigger(actionComplete, args);
             }
         });
@@ -14599,8 +14693,11 @@ class ResourceBase {
             let temp = 0;
             for (const currentLevelChilds of resTreeGroup[i]) {
                 for (const currentLevelChild of currentLevelChilds) {
-                    if (resTreeGroup[i + 1]) {
+                    if (resTreeGroup[i + 1] && resTreeGroup[i + 1].length > 0) {
                         const nextLevelChilds = resTreeGroup[i + 1][temp];
+                        if (!nextLevelChilds) {
+                            continue;
+                        }
                         let colSpan = 0;
                         for (const nextLevelChild of nextLevelChilds) {
                             if (!this.parent.activeViewOptions.group.byGroupID || (this.parent.activeViewOptions.group.byGroupID &&
@@ -14967,11 +15064,6 @@ let Schedule = class Schedule extends Component {
         }
         classList(this.element, addClasses, removeClasses);
         this.validateDate();
-        this.eventTooltipTemplateFn = this.templateParser(this.eventSettings.tooltipTemplate);
-        this.editorTemplateFn = this.templateParser(this.editorTemplate);
-        this.quickInfoTemplatesHeaderFn = this.templateParser(this.quickInfoTemplates.header);
-        this.quickInfoTemplatesContentFn = this.templateParser(this.quickInfoTemplates.content);
-        this.quickInfoTemplatesFooterFn = this.templateParser(this.quickInfoTemplates.footer);
         createSpinner({ target: this.element });
         this.scrollModule = new Scroll(this);
         this.scrollModule.setWidth();
@@ -15117,6 +15209,7 @@ let Schedule = class Schedule extends Component {
             obj.dayHeaderTemplateName = obj.dayHeaderTemplate ? obj.option : '';
             obj.monthHeaderTemplateName = obj.monthHeaderTemplate ? obj.option : '';
             obj.resourceHeaderTemplateName = obj.resourceHeaderTemplate ? obj.option : '';
+            obj.headerIndentTemplateName = obj.headerIndentTemplate ? obj.option : '';
             obj.eventTemplateName = obj.eventTemplate ? obj.option : '';
             if (!isNullOrUndefined(obj.firstDayOfWeek) && obj.firstDayOfWeek === 0) {
                 delete obj.firstDayOfWeek;
@@ -15175,6 +15268,7 @@ let Schedule = class Schedule extends Component {
             eventTemplate: this.eventSettings.template,
             dateHeaderTemplate: this.dateHeaderTemplate,
             resourceHeaderTemplate: this.resourceHeaderTemplate,
+            headerIndentTemplate: this.headerIndentTemplate,
             firstMonthOfYear: this.firstMonthOfYear,
             firstDayOfWeek: this.firstDayOfWeek,
             workDays: workDays,
@@ -15250,7 +15344,13 @@ let Schedule = class Schedule extends Component {
         this.minorSlotTemplateFn = this.templateParser(this.activeViewOptions.timeScale.minorSlotTemplate);
         this.appointmentTemplateFn = this.templateParser(this.activeViewOptions.eventTemplate);
         this.resourceHeaderTemplateFn = this.templateParser(this.activeViewOptions.resourceHeaderTemplate);
+        this.headerIndentTemplateFn = this.templateParser(this.activeViewOptions.headerIndentTemplate);
         this.headerTooltipTemplateFn = this.templateParser(this.activeViewOptions.group.headerTooltipTemplate);
+        this.eventTooltipTemplateFn = this.templateParser(this.eventSettings.tooltipTemplate);
+        this.editorTemplateFn = this.templateParser(this.editorTemplate);
+        this.quickInfoTemplatesHeaderFn = this.templateParser(this.quickInfoTemplates.header);
+        this.quickInfoTemplatesContentFn = this.templateParser(this.quickInfoTemplates.content);
+        this.quickInfoTemplatesFooterFn = this.templateParser(this.quickInfoTemplates.footer);
     }
     initializePopups() {
         this.eventWindow = new EventWindow(this);
@@ -15882,6 +15982,15 @@ let Schedule = class Schedule extends Component {
     getResourceHeaderTemplate() {
         return this.resourceHeaderTemplateFn;
     }
+    /**
+     * Method to process indent template
+     *
+     * @returns {CallbackFunction} Returns the callback function
+     * @private
+     */
+    getHeaderIndentTemplate() {
+        return this.headerIndentTemplateFn;
+    }
     /**
      * Method to get dynamic CSS properties
      *
@@ -15945,7 +16054,7 @@ let Schedule = class Schedule extends Component {
             && !this.activeViewOptions.timeScale.enable) || this.activeView.isTimelineView()) {
             this.activeView.resetColWidth();
             this.notify(scrollUiUpdate, { cssProperties: this.getCssProperties(), isPreventScrollUpdate: true });
-            this.notify(dataReady, {});
+            this.refreshEvents(false);
         }
         else {
             this.notify(contentReady, {});
@@ -16055,6 +16164,23 @@ let Schedule = class Schedule extends Component {
         }
         return weekNumber;
     }
+    /**
+     * Method to render the header indent template.
+     *
+     * @param {TdData} data Accepts the td data
+     * @param {Element} td Accepts the td element
+     * @returns {void}
+     * @private
+     */
+    renderHeaderIndentTemplate(data, td) {
+        if (this.activeViewOptions.headerIndentTemplate) {
+            const scheduleId = this.element.id + '_';
+            const viewName = this.activeViewOptions.headerIndentTemplateName;
+            const templateId = scheduleId + viewName + 'headerIndentTemplate';
+            const indentTemplate = [].slice.call(this.getHeaderIndentTemplate()(data, this, 'headerIndentTemplate', templateId, false));
+            append(indentTemplate, td);
+        }
+    }
     unWireEvents() {
         EventHandler.remove(window, 'resize', this.onScheduleResize);
         EventHandler.remove(window, 'orientationchange', this.onScheduleResize);
@@ -16122,7 +16248,7 @@ let Schedule = class Schedule extends Component {
                     }
                     this.notify(scrollUiUpdate, { cssProperties: this.getCssProperties() });
                     if (this.activeView.isTimelineView()) {
-                        this.notify(dataReady, {});
+                        this.refreshEvents(false);
                     }
                     break;
                 case 'showWeekend':
@@ -16318,10 +16444,8 @@ let Schedule = class Schedule extends Component {
                 break;
             case 'allowDragAndDrop':
             case 'allowResizing':
-                this.notify(dataReady, { processedData: this.eventBase.processData(this.eventsData) });
-                break;
             case 'eventDragArea':
-                this.notify(dataReady, {});
+                this.refreshEvents(false);
                 break;
             case 'weekRule':
                 state.isLayout = true;
@@ -16351,6 +16475,11 @@ let Schedule = class Schedule extends Component {
                 }
                 state.isLayout = true;
                 break;
+            case 'headerIndentTemplate':
+                this.activeViewOptions.headerIndentTemplate = newProp.headerIndentTemplate;
+                this.headerIndentTemplateFn = this.templateParser(this.activeViewOptions.headerIndentTemplate);
+                state.isLayout = true;
+                break;
         }
     }
     setRtlClass() {
@@ -16421,9 +16550,10 @@ let Schedule = class Schedule extends Component {
                         this.eventWindow.refresh();
                     }
                     break;
+                case 'spannedEventPlacement':
                 case 'enableMaxHeight':
                 case 'enableIndicator':
-                    this.notify(dataReady, { processedData: this.eventBase.processData(this.eventsData) });
+                    this.refreshEvents(false);
                     break;
                 case 'ignoreWhitespace':
                     state.isLayout = true;
@@ -16965,14 +17095,102 @@ let Schedule = class Schedule extends Component {
      * Refreshes the event dataSource. This method may be useful when the events alone in the schedule needs to be re-rendered.
      *
      * @function refreshEvents
+     * @param {boolean} isRemoteRefresh Accepts the boolean to refresh data from remote or local
      * @returns {void}
      */
-    refreshEvents() {
+    refreshEvents(isRemoteRefresh = true) {
         if (this.dragAndDropModule) {
             this.dragAndDropModule.actionObj.action = '';
             removeClass([this.element], EVENT_ACTION_CLASS);
         }
-        this.crudModule.refreshDataManager();
+        if (isRemoteRefresh) {
+            this.crudModule.refreshDataManager();
+        }
+        else {
+            const eventsData = this.eventsData || [];
+            const blockData = this.blockData || [];
+            const data = eventsData.concat(blockData);
+            this.notify(dataReady, { processedData: this.eventBase ? this.eventBase.processData(data) : [] });
+        }
+    }
+    /**
+     * Method to refresh the given Schedule templates
+     *
+     * @param {string} templateName Accepts the template name
+     * @returns {void}
+     */
+    refreshTemplates(templateName) {
+        if (templateName) {
+            this.resetTemplates([templateName]);
+        }
+        else {
+            this.resetTemplates();
+        }
+        switch (templateName) {
+            case 'eventTemplate':
+                this.appointmentTemplateFn = this.templateParser(this.activeViewOptions.eventTemplate);
+                this.refreshEvents(false);
+                break;
+            case 'dateHeaderTemplate':
+                this.dateHeaderTemplateFn = this.templateParser(this.activeViewOptions.dateHeaderTemplate);
+                this.activeView.refreshHeader();
+                break;
+            case 'resourceHeaderTemplate':
+                this.resourceHeaderTemplateFn = this.templateParser(this.activeViewOptions.resourceHeaderTemplate);
+                if (this.activeView.isTimelineView()) {
+                    this.activeView.refreshResourceHeader();
+                }
+                else {
+                    this.activeView.refreshHeader();
+                }
+                break;
+            case 'quickInfoTemplates':
+                if (this.quickPopup) {
+                    this.quickPopup.destroy();
+                    this.quickPopup = null;
+                }
+                this.quickPopup = new QuickPopups(this);
+                this.quickInfoTemplatesHeaderFn = this.templateParser(this.quickInfoTemplates.header);
+                this.quickInfoTemplatesContentFn = this.templateParser(this.quickInfoTemplates.content);
+                this.quickInfoTemplatesFooterFn = this.templateParser(this.quickInfoTemplates.footer);
+                break;
+            case 'editorTemplate':
+                if (this.eventWindow) {
+                    this.eventWindow.destroy();
+                    this.eventWindow = null;
+                }
+                this.eventWindow = new EventWindow(this);
+                this.editorTemplateFn = this.templateParser(this.editorTemplate);
+                break;
+            case 'tooltipTemplate':
+            case 'headerTooltipTemplate':
+                if (this.eventTooltip) {
+                    this.eventTooltip.destroy();
+                    this.eventTooltip = null;
+                }
+                this.eventTooltip = new EventTooltip(this);
+                this.eventTooltipTemplateFn = this.templateParser(this.eventSettings.tooltipTemplate);
+                this.headerTooltipTemplateFn = this.templateParser(this.activeViewOptions.group.headerTooltipTemplate);
+                break;
+            default:
+                this.initializeView(this.currentView);
+                break;
+        }
+    }
+    /**
+     * Refreshes the Schedule layout without re-render.
+     *
+     * @function refreshLayout
+     * @returns {void}
+     */
+    refreshLayout() {
+        this.onScheduleResize();
+        if (this.headerModule) {
+            this.headerModule.refresh();
+        }
+        if (this.eventWindow) {
+            this.eventWindow.refresh();
+        }
     }
     /**
      * To retrieve the appointment object from element.
@@ -17357,6 +17575,9 @@ __decorate([
 __decorate([
     Property()
 ], Schedule.prototype, "resourceHeaderTemplate", void 0);
+__decorate([
+    Property()
+], Schedule.prototype, "headerIndentTemplate", void 0);
 __decorate([
     Complex({}, Group)
 ], Schedule.prototype, "group", void 0);
@@ -17537,7 +17758,7 @@ class ActionBase {
         const viewElement = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
         let trElement = [].slice.call(viewElement.querySelector('tr').children);
         if (!this.parent.activeView.isTimelineView() && this.parent.activeViewOptions.group.resources.length > 0 &&
-            !this.parent.isAdaptive) {
+            !this.parent.isAdaptive && !this.parent.enableAdaptiveUI) {
             trElement = this.getResourceElements(trElement);
         }
         const leftOffset = trElement[0].getBoundingClientRect();
@@ -18066,6 +18287,9 @@ class Resize extends ActionBase {
     }
     monthResizing() {
         this.removeCloneElement();
+        if (isNullOrUndefined(this.actionObj.pageX) || isNullOrUndefined(this.actionObj.pageY)) {
+            return;
+        }
         const td = document.elementFromPoint(this.actionObj.pageX, this.actionObj.pageY);
         if (isNullOrUndefined(td)) {
             return;
@@ -18197,13 +18421,16 @@ class Resize extends ActionBase {
         const eventEnd = new Date(this.actionObj.event[this.parent.eventFields.endTime].getTime());
         let resizeTime;
         let isDateHeader = false;
+        const isTimeViews = ['TimelineDay', 'TimelineWeek', 'TimelineWorkWeek'].indexOf(this.parent.currentView) > -1;
+        const isTimelineMonth = this.parent.currentView === 'TimelineMonth';
+        const isWithoutScale = isTimelineMonth || isTimeViews && !this.parent.activeViewOptions.timeScale.enable;
         if (this.parent.activeView.isTimelineView()) {
             const tr = this.parent.getContentTable().querySelector('tr');
             let headerName = this.parent.currentView;
             if (this.parent.activeViewOptions.headerRows.length > 0) {
                 const rows = this.parent.activeViewOptions.headerRows.map((row) => row.option);
                 headerName = rows.slice(-1)[0];
-                if (this.parent.currentView === 'TimelineMonth' && headerName === 'Hour') {
+                if (isTimelineMonth && headerName === 'Hour') {
                     headerName = rows.slice(-2)[0] || 'Month';
                 }
             }
@@ -18222,9 +18449,8 @@ class Resize extends ActionBase {
                     offsetValue += (this.actionObj.clone.offsetWidth - this.actionObj.cellWidth);
                 }
                 cellIndex = Math.floor(offsetValue / Math.floor(tr.offsetWidth / noOfDays));
-                isDateHeader =
-                    ['TimelineDay', 'TimelineWeek', 'TimelineWorkWeek'].indexOf(this.parent.currentView) > -1 && headerName === 'Date';
-                cellIndex = isLeft ? cellIndex : (this.parent.currentView === 'TimelineMonth' || isDateHeader) ? cellIndex + 1 : cellIndex;
+                isDateHeader = isTimeViews && headerName === 'Date';
+                cellIndex = isLeft ? cellIndex : (isTimelineMonth || isDateHeader) ? cellIndex + 1 : cellIndex;
                 isLastCell = cellIndex === tdCollections.length;
                 cellIndex = (cellIndex < 0) ? 0 : (cellIndex >= noOfDays) ? noOfDays - 1 : cellIndex;
             }
@@ -18236,7 +18462,7 @@ class Resize extends ActionBase {
                 if (this.parent.enableRtl) {
                     let cellOffsetWidth = 0;
                     if (headerName === 'TimelineMonth' || (!this.parent.activeViewOptions.timeScale.enable &&
-                        this.parent.currentView !== 'TimelineMonth')) {
+                        !isTimelineMonth)) {
                         cellOffsetWidth = this.actionObj.cellWidth;
                     }
                     const offsetWidth = (Math.floor(parseInt(this.actionObj.clone.style.right, 10) / this.actionObj.cellWidth) *
@@ -18288,16 +18514,18 @@ class Resize extends ActionBase {
             }
         }
         if (isLeft) {
-            if ((this.actionObj.event[this.parent.eventFields.endTime].getTime() - resizeTime.getTime()) <= 0) {
-                resizeTime = new Date(this.actionObj.event[this.parent.eventFields.startTime].getTime());
+            if ((eventEnd.getTime() - resizeTime.getTime()) <= 0) {
+                resizeTime = isWithoutScale ? resetTime(eventEnd) : eventStart;
             }
             this.actionObj.start = this.parent.activeViewOptions.timeScale.enable ? this.calculateIntervalTime(resizeTime) : resizeTime;
         }
         else {
-            const isTimeViews = ['TimelineDay', 'TimelineWeek', 'TimelineWorkWeek'].indexOf(this.parent.currentView) > -1 &&
-                this.parent.activeViewOptions.timeScale.enable;
-            const resizeEnd = ((!isTimeViews || isDateHeader) && resizeTime.getHours() === 0 && resizeTime.getMinutes() === 0) ?
+            const isTimeScaleViews = isTimeViews && this.parent.activeViewOptions.timeScale.enable;
+            let resizeEnd = ((!isTimeScaleViews || isDateHeader) && resizeTime.getHours() === 0 && resizeTime.getMinutes() === 0) ?
                 addDays(resizeTime, 1) : resizeTime;
+            if (isWithoutScale && (resizeEnd.getTime() - eventStart.getTime()) <= 0) {
+                resizeEnd = addDays(resetTime(eventStart), 1);
+            }
             this.actionObj.end = this.parent.activeViewOptions.timeScale.enable && this.parent.currentView !== 'Month' ?
                 this.calculateIntervalTime(resizeEnd) : resizeEnd;
         }
@@ -18434,6 +18662,9 @@ class YearEvent extends TimelineEvent {
         this.isResource = false;
     }
     renderAppointments() {
+        if (this.parent.dragAndDropModule) {
+            this.parent.dragAndDropModule.setDragArea();
+        }
         this.fields = this.parent.eventFields;
         const elementSelector = (this.parent.currentView === 'Year') ? '.' + APPOINTMENT_CLASS :
             '.' + APPOINTMENT_WRAPPER_CLASS + ',.' + MORE_INDICATOR_CLASS;
@@ -18622,7 +18853,7 @@ class YearEvent extends TimelineEvent {
                 const monthStart = new Date(this.parent.selectedDate.getFullYear(), months[month], 1);
                 for (let i = 0, len = resources.length; i < len; i++) {
                     this.renderedEvents = [];
-                    this.renderResourceEvent(wrapperCollection[i], resources[i], month, i, monthStart);
+                    this.renderResourceEvent(wrapperCollection[month], resources[i], month, i, monthStart);
                 }
             }
         }
@@ -18932,7 +19163,6 @@ class DragAndDrop extends ActionBase {
         this.isCursorAhead = false;
     }
     wireDragEvent(element) {
-        const dragElement = document.querySelector(this.parent.eventDragArea);
         new Draggable(element, {
             abort: '.' + EVENT_RESIZE_CLASS,
             clone: true,
@@ -18940,8 +19170,7 @@ class DragAndDrop extends ActionBase {
             enableTapHold: this.parent.isAdaptive,
             enableTailMode: (this.parent.eventDragArea) ? true : false,
             cursorAt: (this.parent.eventDragArea) ? { left: -20, top: -20 } : { left: 0, top: 0 },
-            dragArea: (this.parent.eventDragArea && dragElement) ?
-                dragElement : this.parent.element.querySelector('.' + CONTENT_TABLE_CLASS),
+            dragArea: this.dragArea,
             dragStart: this.dragStart.bind(this),
             drag: this.drag.bind(this),
             dragStop: this.dragStop.bind(this),
@@ -18950,6 +19179,11 @@ class DragAndDrop extends ActionBase {
             queryPositionInfo: this.dragPosition.bind(this)
         });
     }
+    setDragArea() {
+        const dragElement = document.querySelector(this.parent.eventDragArea);
+        this.dragArea = this.parent.eventDragArea && dragElement ? dragElement :
+            this.parent.element.querySelector('.' + CONTENT_TABLE_CLASS);
+    }
     dragHelper(e) {
         this.setDragActionDefaultValues();
         this.actionObj.element = e.element;
@@ -19555,18 +19789,20 @@ class DragAndDrop extends ActionBase {
         const eventData = [];
         const startTime = event[eventFields.startTime];
         const endTime = event[eventFields.endTime];
-        const isDifferentDate = resetTime(new Date(startTime.getTime())) < resetTime(new Date(endTime.getTime()));
-        if (isDifferentDate) {
-            const scheduleStartHour = this.parent.activeView.getStartHour();
-            const scheduleEndHour = this.parent.activeView.getEndHour();
-            const startDate = getStartEndHours(resetTime(startTime), scheduleStartHour, scheduleEndHour);
-            const endDate = getStartEndHours(resetTime(endTime), scheduleStartHour, scheduleEndHour);
-            const firstEventObj = extend({}, event, null, true);
-            firstEventObj[eventFields.endTime] = startDate.endHour;
-            eventData.push(firstEventObj);
-            const secondEventObj = extend({}, event, null, true);
-            secondEventObj[eventFields.startTime] = endDate.startHour;
-            eventData.push(secondEventObj);
+        if (resetTime(new Date(startTime.getTime())) < resetTime(new Date(endTime.getTime()))) {
+            let startReferenceDate = resetTime(new Date(startTime.getTime()));
+            let endReferenceDate = new Date(startReferenceDate.getTime());
+            for (let i = 0; startReferenceDate < new Date(endTime.getTime()); i++) {
+                endReferenceDate = new Date(endReferenceDate.setDate(startReferenceDate.getDate() + 1));
+                const eventObj = extend({}, event, null, true);
+                eventObj[eventFields.startTime] = new Date(startReferenceDate);
+                eventObj[eventFields.endTime] = new Date(endReferenceDate);
+                startReferenceDate = new Date(startReferenceDate.setDate(startReferenceDate.getDate() + 1));
+                eventData.push(eventObj);
+            }
+            const index = eventData.length - 1;
+            eventData[0][eventFields.startTime] = startTime;
+            eventData[index][eventFields.endTime] = endTime;
         }
         else {
             eventData.push(event);
@@ -19637,8 +19873,7 @@ class DragAndDrop extends ActionBase {
                 // eslint-disable-next-line max-len
                 this.parent.getDateFromElement(isNullOrUndefined(index) ? this.actionObj.target : this.targetTd)));
             const splitEvents = this.splitEvent(event);
-            const events = event[this.parent.eventFields.isAllDay] ||
-                this.parent.eventBase.isAllDayAppointment(event) || splitEvents.length > 2 ? [event] : splitEvents;
+            let events = this.parent.eventBase.isAllDayAppointment(event) || splitEvents.length > 2 || !(this.parent.eventSettings.spannedEventPlacement == 'TimeSlot') ? [event] : splitEvents;
             for (let i = 0; i < events.length; i++) {
                 if (i > 0) {
                     let filterQuery = `.e-day-wrapper[data-date="${resetTime(events[i][this.parent.eventFields.startTime]).getTime()}"]`;
@@ -19929,6 +20164,12 @@ class DragAndDrop extends ActionBase {
             const eventSrt = eventObj[this.parent.eventFields.startTime];
             eventStart.setHours(eventSrt.getHours(), eventSrt.getMinutes(), eventSrt.getSeconds());
         }
+        if (this.parent.eventDragArea) {
+            const targetDate = this.parent.getDateFromElement(e.target);
+            if (!isNullOrUndefined(targetDate)) {
+                eventStart = targetDate;
+            }
+        }
         const eventEnd = new Date(eventStart.getTime());
         eventEnd.setMilliseconds(eventDuration);
         let eventsData = [this.getUpdatedEvent(eventStart, eventEnd, this.actionObj.event)];
@@ -20169,8 +20410,15 @@ class ViewBase {
     getContentRows() {
         return [];
     }
-    serverRenderLayout() {
-        // Need only for layout server rendering
+    refreshHeader() {
+        // Method to refresh the date header
+    }
+    refreshResourceHeader() {
+        remove(this.element.querySelector('tbody').lastElementChild.firstElementChild);
+        const resTd = createElement('td');
+        resTd.appendChild(this.parent.resourceBase.createResourceColumn());
+        prepend([resTd], this.element.querySelector('tbody').lastElementChild);
+        this.parent.notify(contentReady, {});
     }
     getDayName(date) {
         return this.parent.getDayNames('abbreviated')[date.getDay()];
@@ -20217,7 +20465,7 @@ class ViewBase {
     }
     createTableLayout(className) {
         const clsName = className || '';
-        const table = createElement('table', { className: SCHEDULE_TABLE_CLASS + ' ' + clsName });
+        const table = createElement('table', { className: SCHEDULE_TABLE_CLASS + ' ' + clsName, attrs: { role: 'table' } });
         const tbody = createElement('tbody');
         table.appendChild(tbody);
         return table;
@@ -20858,12 +21106,11 @@ class VerticalView extends ViewBase {
                             if (!isNullOrUndefined(this.currentTimeIndicatorTimer)) {
                                 this.clearCurrentTimeIndicatorTimer();
                                 this.changeCurrentTimePosition();
-                                this.currentTimeIndicatorTimer =
-                                    window.setInterval(() => { this.changeCurrentTimePosition(); }, MS_PER_MINUTE);
+                                this.updateCurrentTimeIndicatorTimer();
                             }
                         }, interval);
                     }
-                    this.currentTimeIndicatorTimer = window.setInterval(() => { this.changeCurrentTimePosition(); }, MS_PER_MINUTE);
+                    this.updateCurrentTimeIndicatorTimer();
                 }
             }
             else {
@@ -20906,6 +21153,9 @@ class VerticalView extends ViewBase {
             this.removeCurrentTimeIndicatorElements();
         }
     }
+    updateCurrentTimeIndicatorTimer() {
+        this.currentTimeIndicatorTimer = window.setInterval(() => { this.changeCurrentTimePosition(); }, MS_PER_MINUTE);
+    }
     removeCurrentTimeIndicatorElements() {
         const queryString = '.' + PREVIOUS_TIMELINE_CLASS + ',.' + CURRENT_TIMELINE_CLASS + ',.' + CURRENT_TIME_CLASS;
         const timeIndicator = [].slice.call(this.element.querySelectorAll(queryString));
@@ -20997,7 +21247,6 @@ class VerticalView extends ViewBase {
                     cntEle = [].slice.call(this.parent.getMinorSlotTemplate()(args, this.parent, templateName, templateId + templateName, false));
                 }
                 else {
-                    wrapper.innerHTML = '&nbsp;';
                     cntEle = [].slice.call(wrapper.childNodes);
                 }
                 break;
@@ -21012,6 +21261,11 @@ class VerticalView extends ViewBase {
         }
         return cntEle;
     }
+    refreshHeader() {
+        remove(this.element.querySelector('tbody tr'));
+        this.renderHeader();
+        this.parent.notify(contentReady, {});
+    }
     renderLayout(type) {
         this.setPanel(createElement('div', { className: TABLE_WRAP_CLASS }));
         const clsList = [this.baseCssClass, this.viewClass];
@@ -21083,6 +21337,7 @@ class VerticalView extends ViewBase {
         const tbl = this.createTableLayout();
         const trEle = createElement('tr');
         const rowCount = this.colLevels.length;
+        let nth;
         for (let i = 0; i < rowCount; i++) {
             const ntr = trEle.cloneNode();
             const data = { className: [(this.colLevels[i][0] && this.colLevels[i][0].className[0])], type: 'emptyCells' };
@@ -21094,7 +21349,9 @@ class VerticalView extends ViewBase {
                         attrs: { title: this.parent.localeObj.getConstant('week') + ' ' + weekNo }
                     })];
             }
-            ntr.appendChild(this.createTd(data));
+            nth = this.createTd(data);
+            this.parent.renderHeaderIndentTemplate(data, nth);
+            ntr.appendChild(nth);
             tbl.querySelector('tbody').appendChild(ntr);
         }
         const ntr = trEle.cloneNode();
@@ -21107,8 +21364,9 @@ class VerticalView extends ViewBase {
                 ICON + ' ' + DISABLE_CLASS
         });
         const data = { className: [ALLDAY_CELLS_CLASS], type: 'emptyCells' };
-        const nth = this.createTd(data);
+        nth = this.createTd(data);
         nth.appendChild(appointmentExpandCollapse);
+        this.parent.renderHeaderIndentTemplate(data, nth);
         ntr.appendChild(nth);
         tbl.querySelector('tbody').appendChild(ntr);
         wrap.appendChild(tbl);
@@ -21246,10 +21504,10 @@ class VerticalView extends ViewBase {
             ntd.setAttribute('colspan', tdData.colSpan.toString());
         }
         const clsName = this.getContentTdClass(r);
-        if (!this.parent.isMinMaxDate(resetTime(new Date('' + tdData.date)))) {
+        const cellDate = resetTime(tdData.date);
+        if (!this.parent.isMinMaxDate(cellDate)) {
             clsName.push(DISABLE_DATES);
         }
-        const cellDate = resetTime(new Date('' + tdData.date));
         setTime(cellDate, getDateInMs(r.date));
         let type = 'workCells';
         if (tdData.className.indexOf(RESOURCE_PARENT_CLASS) !== -1) {
@@ -21480,6 +21738,7 @@ class WorkWeek extends VerticalView {
     }
 }
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * month view
  */
@@ -21538,20 +21797,14 @@ class Month extends ViewBase {
             this.setContentHeight(content, leftPanel, height);
         }
         const scrollBarWidth = getScrollBarWidth();
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         header.firstElementChild.style[args.cssProperties.rtlBorder] = '';
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         header.style[args.cssProperties.rtlPadding] = '';
         if (content.offsetWidth - content.clientWidth > 0) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             header.firstElementChild.style[args.cssProperties.border] = scrollBarWidth > 0 ? '1px' : '0px';
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             header.style[args.cssProperties.padding] = scrollBarWidth > 0 ? scrollBarWidth - 1 + 'px' : '0px';
         }
         else {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             header.firstElementChild.style[args.cssProperties.border] = '';
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             header.style[args.cssProperties.padding] = '';
         }
         this.setColWidth(content);
@@ -21653,6 +21906,11 @@ class Month extends ViewBase {
         }
         this.parent.notify(contentReady, {});
     }
+    refreshHeader() {
+        remove(this.element.querySelector('tbody tr'));
+        this.renderHeader();
+        this.parent.notify(contentReady, {});
+    }
     wireCellEvents(element) {
         EventHandler.add(element, 'mousedown', this.parent.workCellAction.cellMouseDown, this.parent.workCellAction);
         EventHandler.add(element, 'click', this.parent.workCellAction.cellClick, this.parent.workCellAction);
@@ -22798,7 +23056,7 @@ class Agenda extends AgendaBase {
         for (const event of this.parent.eventsData) {
             delete event.generatedDates;
         }
-        let eventCollection = args.processedData;
+        let eventCollection = this.parent.activeViewOptions.allowVirtualScrolling ? args.processedData : this.parent.eventsProcessed;
         if (this.parent.uiStateValues.isGroupAdaptive) {
             const resource = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];
             this.dataSource = this.parent.eventBase.filterEventsByResource(resource, this.dataSource);
@@ -22828,6 +23086,22 @@ class Agenda extends AgendaBase {
         }
         this.parent.eventsProcessed = this.parent.eventsProcessed.concat(this.processAgendaEvents(processedData));
     }
+    refreshHeader() {
+        const tBody = this.element.querySelector('.' + CONTENT_TABLE_CLASS + ' tbody');
+        if (this.parent.activeViewOptions.group.byDate) {
+            removeChildren(tBody);
+        }
+        else {
+            remove(tBody.firstElementChild);
+        }
+        const agendaDate = resetTime(this.parent.selectedDate);
+        const emptyTBody = createElement('tbody');
+        const firstDate = new Date(agendaDate.getTime());
+        const lastDate = (this.parent.activeViewOptions.allowVirtualScrolling && this.parent.hideEmptyAgendaDays) ?
+            this.getEndDateFromStartDate(firstDate) : addDays(firstDate, this.parent.agendaDaysCount);
+        this.renderContent(emptyTBody, firstDate, lastDate);
+        append([].slice.call(emptyTBody.childNodes), tBody);
+    }
     renderInitialContent(tBody, agendaDate) {
         const emptyTBody = createElement('tbody');
         let firstDate = new Date(agendaDate.getTime());
@@ -22885,6 +23159,7 @@ class Agenda extends AgendaBase {
                     const filterData = this.appointmentFiltering(agendaDate);
                     const nTr = this.createTableRowElement(agendaDate, 'data');
                     if (this.element.querySelector('tr[aria-rowindex="' + parseInt(nTr.getAttribute('aria-rowindex'), 10) + '"]')) {
+                        agendaDate = addDays(agendaDate, 1);
                         continue;
                     }
                     const dTd = nTr.children[0];
@@ -22957,7 +23232,7 @@ class Agenda extends AgendaBase {
                 this.updateHeaderText(scrollDate);
             }
         }
-        else if (totalHeight === scrollHeight) {
+        else if (totalHeight >= (scrollHeight - 5)) {
             filterDate = this.getPreviousNextDate(addDays(scrollDate, 1), direction);
             filterData = this.appointmentFiltering(filterDate.start, filterDate.end);
             if (filterData.length > 0 || !this.parent.hideEmptyAgendaDays) {
@@ -23901,8 +24176,14 @@ class TimelineYear extends Year {
                     if (c.colSpan) {
                         tdEle.setAttribute('colspan', c.colSpan.toString());
                     }
+                    if (c.groupIndex > -1) {
+                        tdEle.setAttribute('data-group-index', c.groupIndex.toString());
+                    }
                     this.setResourceHeaderContent(tdEle, c);
                 }
+                if (className === LEFT_INDENT_WRAP_CLASS) {
+                    this.parent.renderHeaderIndentTemplate(c, tdEle);
+                }
                 const args = { elementType: c.type, element: tdEle, date: c.date, groupIndex: c.groupIndex };
                 this.parent.trigger(renderCell, args);
                 ntr.appendChild(tdEle);
@@ -24113,10 +24394,10 @@ class TimelineYear extends Year {
                 });
                 addClass([td], classList$$1);
                 td.setAttribute('data-group-index', groupIndex.toString());
-                this.renderCellTemplate({ date: date, type: 'workCells', groupIndex: groupIndex }, td);
+                this.renderCellTemplate({ date: date, type: 'resourceGroupCells', groupIndex: groupIndex }, td);
                 this.wireEvents(td, 'cell');
                 tr.appendChild(td);
-                this.parent.trigger(renderCell, { elementType: 'workCells', element: td, date: date });
+                this.parent.trigger(renderCell, { elementType: 'resourceGroupCells', element: td, date: date });
             }
         }
         if (this.parent.activeViewOptions.orientation === 'Vertical') {