@syncfusion/ej2-schedule 26.1.39 → 26.1.41

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 26.1.39
+*  version : 26.1.41
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-schedule@*",
-  "_id": "@syncfusion/ej2-schedule@26.1.38",
+  "_id": "@syncfusion/ej2-schedule@26.1.40",
   "_inBundle": false,
-  "_integrity": "sha512-6wiM9HSKXKAhDc4QcYohgHXw5aBMa9GL6V99hxG5+1qDdJRqCEsTmKThJSYDMYt8rC2CjJjgTWZt+SIveHVZvQ==",
+  "_integrity": "sha512-r4Jf4H5P3kGPXFq2X9L2V/9VTVF8lMu0xgl9V3gf3jb88dZmpuLb+JqpDF4zYXjL4QsU9cfILvCT6Kwj8ZC/GQ==",
   "_location": "/@syncfusion/ej2-schedule",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-schedule",
     "/@syncfusion/ej2-vue-schedule"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-schedule/-/ej2-schedule-26.1.38.tgz",
-  "_shasum": "43e837e3f81d03784ae9ec082ecbb0ecffb9f96c",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-schedule/-/ej2-schedule-26.1.40.tgz",
+  "_shasum": "16adcad2451ceb85be6257a04b55099b6cac9945",
   "_spec": "@syncfusion/ej2-schedule@*",
   "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
@@ -36,15 +36,15 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~26.1.37",
-    "@syncfusion/ej2-buttons": "~26.1.35",
-    "@syncfusion/ej2-calendars": "~26.1.38",
-    "@syncfusion/ej2-data": "~26.1.35",
-    "@syncfusion/ej2-dropdowns": "~26.1.39",
+    "@syncfusion/ej2-buttons": "~26.1.40",
+    "@syncfusion/ej2-calendars": "~26.1.41",
+    "@syncfusion/ej2-data": "~26.1.41",
+    "@syncfusion/ej2-dropdowns": "~26.1.41",
     "@syncfusion/ej2-excel-export": "~26.1.35",
-    "@syncfusion/ej2-inputs": "~26.1.39",
+    "@syncfusion/ej2-inputs": "~26.1.41",
     "@syncfusion/ej2-lists": "~26.1.35",
-    "@syncfusion/ej2-navigations": "~26.1.39",
-    "@syncfusion/ej2-popups": "~26.1.38",
+    "@syncfusion/ej2-navigations": "~26.1.41",
+    "@syncfusion/ej2-popups": "~26.1.41",
     "@types/requirejs": "^2.1.37"
   },
   "deprecated": false,
@@ -74,6 +74,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "26.1.39",
+  "version": "26.1.41",
   "sideEffects": false
 }

package/src/schedule/actions/drag.d.ts

@@ -24,6 +24,8 @@ export declare class DragAndDrop extends ActionBase {
     private targetTd;
     private isCursorAhead;
     private dragArea;
+    private enableCurrentViewDrag;
+    private isPreventMultiDrag;
     wireDragEvent(element: HTMLElement): void;
     setDragArea(): void;
     private dragHelper;

package/src/schedule/actions/drag.js

@@ -49,6 +49,8 @@ var DragAndDrop = /** @class */ (function (_super) {
         _this.isAllDayTarget = false;
         _this.targetTd = null;
         _this.isCursorAhead = false;
+        _this.enableCurrentViewDrag = false;
+        _this.isPreventMultiDrag = false;
         return _this;
     }
     DragAndDrop.prototype.wireDragEvent = function (element) {
@@ -164,6 +166,9 @@ var DragAndDrop = /** @class */ (function (_super) {
             if (cloneBottom > scrollHeight) {
                 topValue = (parseInt(topValue, 10) - (cloneBottom - scrollHeight)) + 'px';
             }
+            if (this.isPreventMultiDrag) {
+                topValue = formatUnit(this.actionObj.clone.offsetTop);
+            }
         }
         return { left: leftValue, top: topValue };
     };
@@ -215,6 +220,7 @@ var DragAndDrop = /** @class */ (function (_super) {
             _this.actionObj.interval = dragEventArgs.interval;
             _this.actionObj.navigation = dragEventArgs.navigation;
             _this.actionObj.scroll = dragEventArgs.scroll;
+            _this.enableCurrentViewDrag = dragArgs.dragWithinRange && !dragArgs.navigation.enable && _this.parent.allowMultiDrag;
             _this.actionObj.excludeSelectors = dragEventArgs.excludeSelectors;
             var viewElement = _this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
             _this.scrollArgs = { element: viewElement, width: viewElement.scrollWidth, height: viewElement.scrollHeight };
@@ -375,6 +381,7 @@ var DragAndDrop = /** @class */ (function (_super) {
     DragAndDrop.prototype.dragStop = function (e) {
         var _this = this;
         this.isCursorAhead = false;
+        this.isPreventMultiDrag = false;
         this.removeCloneElementClasses();
         this.removeCloneElement();
         clearInterval(this.actionObj.navigationInterval);
@@ -443,7 +450,7 @@ var DragAndDrop = /** @class */ (function (_super) {
             this.timelineEventModule.cellWidth = this.actionObj.cellWidth;
             this.timelineEventModule.getSlotDates();
             this.actionObj.cellWidth = this.isHeaderRows ? this.timelineEventModule.cellWidth :
-                util.getElementWidth(this.parent.element.querySelector('.' + cls.WORK_CELLS_CLASS));
+                this.parent.getElementWidth(this.parent.element.querySelector('.' + cls.WORK_CELLS_CLASS));
             this.calculateTimelineTime(e);
         }
         else {
@@ -620,7 +627,9 @@ var DragAndDrop = /** @class */ (function (_super) {
         var dragStart;
         var dragEnd;
         if (this.parent.activeViewOptions.timeScale.enable && !this.isAllDayDrag) {
-            this.appendCloneElement(this.getEventWrapper(colIndex));
+            if (!this.enableCurrentViewDrag || this.multiData.length === 0) {
+                this.appendCloneElement(this.getEventWrapper(colIndex));
+            }
             dragStart = this.parent.getDateFromElement(td);
             dragStart.setMinutes(dragStart.getMinutes() + (diffInMinutes / heightPerMinute));
             dragEnd = new Date(dragStart.getTime());
@@ -677,18 +686,34 @@ var DragAndDrop = /** @class */ (function (_super) {
                 this.startTime = eventObj_1[this.parent.eventFields.startTime].getTime();
             }
             var startTimeDiff = event[this.parent.eventFields.startTime].getTime() - this.startTime;
-            for (var index_2 = 0; index_2 < this.multiData.length; index_2++) {
-                this.updatedData[parseInt(index_2.toString(), 10)] =
-                    this.updateMultipleData(this.multiData[parseInt(index_2.toString(), 10)], startTimeDiff);
-                var dayIndex = this.getDayIndex(this.updatedData[parseInt(index_2.toString(), 10)]);
-                if (dayIndex >= 0) {
-                    var wrapper = this.getEventWrapper(dayIndex, this.updatedData[parseInt(index_2.toString(), 10)][this.parent.eventFields.isAllDay]);
-                    this.appendCloneElement(wrapper, this.actionObj.cloneElement[parseInt(index_2.toString(), 10)]);
-                    this.updateEventHeight(this.updatedData[parseInt(index_2.toString(), 10)], index_2, dayIndex);
+            if (this.enableCurrentViewDrag) {
+                var renderDates = this.getRenderedDates();
+                for (var i = 0; i < this.multiData.length; i++) {
+                    var eventObj_2 = extend({}, this.multiData[parseInt(i.toString(), 10)], null, true);
+                    var startTime = new Date(eventObj_2[this.parent.eventFields.startTime].getTime() + startTimeDiff);
+                    var dayIndex = this.parent.getIndexOfDate(renderDates, util.resetTime(startTime));
+                    if (dayIndex < 0) {
+                        this.isPreventMultiDrag = true;
+                        break;
+                    }
+                    this.isPreventMultiDrag = false;
                 }
-                else {
-                    if (!isNullOrUndefined(this.actionObj.cloneElement[parseInt(index_2.toString(), 10)].parentNode)) {
-                        remove(this.actionObj.cloneElement[parseInt(index_2.toString(), 10)]);
+            }
+            if (!this.isPreventMultiDrag) {
+                for (var index_2 = 0; index_2 < this.multiData.length; index_2++) {
+                    this.updatedData[parseInt(index_2.toString(), 10)] =
+                        this.updateMultipleData(this.multiData[parseInt(index_2.toString(), 10)], startTimeDiff);
+                    var dayIndex = this.getDayIndex(this.updatedData[parseInt(index_2.toString(), 10)]);
+                    if (dayIndex >= 0) {
+                        var isAllDay = this.updatedData[parseInt(index_2.toString(), 10)][this.parent.eventFields.isAllDay];
+                        var wrapper = this.getEventWrapper(dayIndex, isAllDay);
+                        this.appendCloneElement(wrapper, this.actionObj.cloneElement[parseInt(index_2.toString(), 10)]);
+                        this.updateEventHeight(this.updatedData[parseInt(index_2.toString(), 10)], index_2, dayIndex);
+                    }
+                    else {
+                        if (!isNullOrUndefined(this.actionObj.cloneElement[parseInt(index_2.toString(), 10)].parentNode)) {
+                            remove(this.actionObj.cloneElement[parseInt(index_2.toString(), 10)]);
+                        }
                     }
                 }
             }
@@ -906,6 +931,9 @@ var DragAndDrop = /** @class */ (function (_super) {
     };
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     DragAndDrop.prototype.swapDragging = function (e) {
+        if (this.isPreventMultiDrag) {
+            return;
+        }
         var colIndex = !isNullOrUndefined(closest(this.actionObj.target, 'td')) && closest(this.actionObj.target, 'td').cellIndex;
         if (closest(this.actionObj.target, '.' + cls.DATE_HEADER_WRAP_CLASS) &&
             !closest(this.actionObj.clone, '.' + cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS)) {
@@ -1262,7 +1290,7 @@ var DragAndDrop = /** @class */ (function (_super) {
             ~~(dragArea.querySelector('table').offsetHeight / trCollection.length) : this.actionObj.cellHeight;
         var rowIndex = Math.floor(Math.floor((this.actionObj.Y +
             (dragArea.scrollTop - translateY - (window.scrollY || window.pageYOffset))) -
-            util.getElementTop(dragArea)) / rowHeight);
+            util.getElementTop(dragArea, this.parent.uiStateValues.isTransformed)) / rowHeight);
         rowIndex = (rowIndex < 0) ? 0 : (rowIndex > trCollection.length - 1) ? trCollection.length - 1 : rowIndex;
         this.actionObj.index = rowIndex;
         var eventContainer = this.parent.element.querySelectorAll('.e-appointment-container:not(.e-hidden)').item(rowIndex);
@@ -1278,7 +1306,7 @@ var DragAndDrop = /** @class */ (function (_super) {
         if (!isNullOrUndefined(this.parent.eventDragArea)) {
             return;
         }
-        var top = util.getElementHeight(trCollection[parseInt(rowIndex.toString(), 10)]) * rowIndex;
+        var top = this.parent.getElementHeight(trCollection[parseInt(rowIndex.toString(), 10)]) * rowIndex;
         if (this.parent.rowAutoHeight) {
             var cursorElement = this.getCursorElement(e);
             if (cursorElement) {

package/src/schedule/actions/resize.js

@@ -86,8 +86,8 @@ var Resize = /** @class */ (function (_super) {
             };
             _this.actionObj.groupIndex = _this.parent.uiStateValues.isGroupAdaptive ? _this.parent.uiStateValues.groupIndex : 0;
             var workCell = _this.parent.element.querySelector('.' + cls.WORK_CELLS_CLASS);
-            _this.actionObj.cellWidth = util.getElementWidth(workCell);
-            _this.actionObj.cellHeight = util.getElementHeight(workCell);
+            _this.actionObj.cellWidth = _this.parent.getElementWidth(workCell);
+            _this.actionObj.cellHeight = _this.parent.getElementHeight(workCell);
             var hRows = _this.parent.activeViewOptions.headerRows.map(function (row) { return row.option; });
             if (_this.parent.activeView.isTimelineView() && hRows.length > 0 && ['Date', 'Hour'].indexOf(hRows.slice(-1)[0]) < 0) {
                 var tr = _this.parent.getContentTable().querySelector('tr');
@@ -397,9 +397,10 @@ var Resize = /** @class */ (function (_super) {
                     parseInt(this.actionObj.clone.style.left, 10);
                 offsetValue = Math.round(offsetValue / this.actionObj.cellWidth) * this.actionObj.cellWidth;
                 if (!isLeft) {
-                    offsetValue += (util.getElementWidth(this.actionObj.clone) - this.actionObj.cellWidth);
+                    offsetValue += (this.parent.getElementWidth(this.actionObj.clone) - this.actionObj.cellWidth);
                 }
-                cellIndex = Math.floor(offsetValue / Math.floor(util.getElementWidth(tr) / noOfDays));
+                cellIndex = !isTimelineMonth ? Math.round(offsetValue / (this.parent.getElementWidth(tr) / noOfDays)) :
+                    Math.floor(offsetValue / Math.floor(this.parent.getElementWidth(tr) / noOfDays));
                 isDateHeader = isTimeViews && headerName === 'Date';
                 cellIndex = isLeft ? cellIndex : isTimelineMonth ? cellIndex + 1 : cellIndex;
                 isLastCell = cellIndex === tdCollections.length;
@@ -408,7 +409,7 @@ var Resize = /** @class */ (function (_super) {
             else {
                 var cellWidth = this.actionObj.cellWidth;
                 cellIndex = isLeft ? Math.floor(offset / this.actionObj.cellWidth) :
-                    Math.ceil((offset + (util.getElementWidth(this.actionObj.clone) - cellWidth)) / this.actionObj.cellWidth);
+                    Math.ceil((offset + (this.parent.getElementWidth(this.actionObj.clone) - cellWidth)) / this.actionObj.cellWidth);
                 if (this.parent.enableRtl) {
                     var cellOffsetWidth = 0;
                     if (headerName === 'TimelineMonth' || (!this.parent.activeViewOptions.timeScale.enable &&
@@ -416,7 +417,7 @@ var Resize = /** @class */ (function (_super) {
                         cellOffsetWidth = this.actionObj.cellWidth;
                     }
                     var offsetWidth = (Math.floor(offset / this.actionObj.cellWidth) *
-                        this.actionObj.cellWidth) + (isLeft ? 0 : util.getElementWidth(this.actionObj.clone) - cellOffsetWidth);
+                        this.actionObj.cellWidth) + (isLeft ? 0 : this.parent.getElementWidth(this.actionObj.clone) - cellOffsetWidth);
                     cellIndex = Math.floor(offsetWidth / this.actionObj.cellWidth);
                 }
                 isLastCell = cellIndex === tdCollections.length;
@@ -435,7 +436,7 @@ var Resize = /** @class */ (function (_super) {
             }
             else {
                 if (!isLeft) {
-                    offset += util.getElementWidth(this.actionObj.clone);
+                    offset += this.parent.getElementWidth(this.actionObj.clone);
                 }
                 var spanMinutes = Math.ceil((this.actionObj.slotInterval / this.actionObj.cellWidth) *
                     (offset - Math.floor(offset / this.actionObj.cellWidth) * this.actionObj.cellWidth));
@@ -447,9 +448,9 @@ var Resize = /** @class */ (function (_super) {
         }
         else {
             var cloneIndex = closest(this.actionObj.clone, 'td').cellIndex;
-            var originalWidth = Math.ceil((isLeft ? util.getElementWidth(this.actionObj.element) : 0) /
+            var originalWidth = Math.ceil((isLeft ? this.parent.getElementWidth(this.actionObj.element) : 0) /
                 this.actionObj.cellWidth) * this.actionObj.cellWidth;
-            var noOfDays = Math.ceil((util.getElementWidth(this.actionObj.clone) - originalWidth) /
+            var noOfDays = Math.ceil((this.parent.getElementWidth(this.actionObj.clone) - originalWidth) /
                 this.actionObj.cellWidth);
             var tr = closest(this.actionObj.clone, 'tr');
             var dayIndex = isLeft ? cloneIndex - noOfDays : cloneIndex + noOfDays - 1;
@@ -512,9 +513,9 @@ var Resize = /** @class */ (function (_super) {
         var slotInterval = (this.actionObj.cellWidth / this.actionObj.slotInterval) * this.actionObj.interval;
         var pageWidth = isLeft ? (this.actionObj.X - this.actionObj.pageX) : (this.actionObj.pageX - this.actionObj.X);
         var targetWidth = isTimelineView ?
-            (util.getElementWidth(this.actionObj.element) / this.actionObj.cellWidth) * this.actionObj.cellWidth :
-            this.parent.currentView === 'Month' ? util.getElementWidth(this.actionObj.element) :
-                Math.ceil(util.getElementWidth(this.actionObj.element) / this.actionObj.cellWidth) * this.actionObj.cellWidth;
+            (this.parent.getElementWidth(this.actionObj.element) / this.actionObj.cellWidth) * this.actionObj.cellWidth :
+            this.parent.currentView === 'Month' ? this.parent.getElementWidth(this.actionObj.element) :
+                Math.ceil(this.parent.getElementWidth(this.actionObj.element) / this.actionObj.cellWidth) * this.actionObj.cellWidth;
         var offsetWidth = targetWidth + (Math.ceil(pageWidth / this.actionObj.cellWidth) * this.actionObj.cellWidth);
         var left = (this.parent.enableRtl) ? parseInt(this.actionObj.element.style.right, 10) : this.actionObj.clone.offsetLeft;
         if (isTimeViews) {
@@ -529,7 +530,7 @@ var Resize = /** @class */ (function (_super) {
             this.actionObj.event[this.parent.eventFields.isAllDay] = false;
         }
         var width = !isLeft && ((offsetWidth + this.actionObj.clone.offsetLeft > this.scrollArgs.width)) ?
-            util.getElementWidth(this.actionObj.clone) : (offsetWidth < this.actionObj.cellWidth) ? offsetWidth : offsetWidth;
+            this.parent.getElementWidth(this.actionObj.clone) : (offsetWidth < this.actionObj.cellWidth) ? offsetWidth : offsetWidth;
         if (this.parent.enableRtl) {
             var rightValue = isTimelineView ? parseInt(this.actionObj.element.style.right, 10) :
                 -(offsetWidth - this.actionObj.cellWidth);
@@ -543,7 +544,7 @@ var Resize = /** @class */ (function (_super) {
             }
             rightValue = rightValue >= this.scrollArgs.width ? this.scrollArgs.width - this.actionObj.cellWidth : rightValue;
             styles.right = formatUnit(rightValue);
-            width = width + rightValue > this.scrollArgs.width ? util.getElementWidth(this.actionObj.clone) : width;
+            width = width + rightValue > this.scrollArgs.width ? this.parent.getElementWidth(this.actionObj.clone) : width;
         }
         else {
             var offsetLeft = isLeft ? this.actionObj.element.offsetLeft - (this.actionObj.X - this.actionObj.pageX) :
@@ -551,12 +552,12 @@ var Resize = /** @class */ (function (_super) {
             if (isTimelineView) {
                 offsetLeft = isLeft ? offsetLeft : parseInt(this.actionObj.clone.style.left, 10);
                 if (this.parent.enableRtl) {
-                    offsetLeft = !isLeft ? (this.actionObj.pageX < this.actionObj.X - util.getElementWidth(this.actionObj.clone))
+                    offsetLeft = !isLeft ? (this.actionObj.pageX < this.actionObj.X - this.parent.getElementWidth(this.actionObj.clone))
                         ? parseInt(this.actionObj.clone.style.right, 10) : offsetLeft : offsetLeft;
                 }
                 else {
-                    offsetLeft = isLeft ? (this.actionObj.pageX > this.actionObj.X + util.getElementWidth(this.actionObj.clone) &&
-                        util.getElementWidth(this.actionObj.clone) === this.actionObj.cellWidth) ?
+                    offsetLeft = isLeft ? (this.actionObj.pageX > this.actionObj.X + this.parent.getElementWidth(this.actionObj.clone) &&
+                        this.parent.getElementWidth(this.actionObj.clone) === this.actionObj.cellWidth) ?
                         parseInt(this.actionObj.clone.style.left, 10) : offsetLeft : offsetLeft;
                 }
             }
@@ -572,10 +573,10 @@ var Resize = /** @class */ (function (_super) {
                 }
                 else {
                     offsetLeft = 0;
-                    width = util.getElementWidth(this.actionObj.clone);
+                    width = this.parent.getElementWidth(this.actionObj.clone);
                 }
             }
-            var cloneWidth = Math.ceil(util.getElementWidth(this.actionObj.clone) / this.actionObj.cellWidth) *
+            var cloneWidth = Math.ceil(this.parent.getElementWidth(this.actionObj.clone) / this.actionObj.cellWidth) *
                 this.actionObj.cellWidth;
             if (isLeft) {
                 styles.left = formatUnit(isTimelineView ? offsetLeft : isLeft ? leftValue < 0 ? -offsetLeft :

package/src/schedule/actions/touch.js

@@ -125,6 +125,7 @@ var ScheduleTouch = /** @class */ (function () {
                 this.parent.selectedElements = [];
                 this.parent.eventBase.getSelectedEventElements(target);
                 if (this.parent.resizeModule && closest(e.originalEvent.target, '.' + cls.EVENT_RESIZE_CLASS)) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     this.parent.resizeModule.resizeStart(e.originalEvent);
                 }
             }

package/src/schedule/actions/virtual-scroll.d.ts

@@ -16,6 +16,7 @@ export declare class VirtualScroll {
     isHorizontalScroll: boolean;
     isRemoteRefresh: boolean;
     private startIndex;
+    existingDataCollection: TdData[];
     constructor(parent: Schedule);
     private addEventListener;
     private removeEventListener;
@@ -40,6 +41,9 @@ export declare class VirtualScroll {
     private setStartEndIndex;
     updateContent(resWrap: HTMLElement, conWrap: HTMLElement, eventWrap: HTMLElement, resCollection: TdData[]): void;
     private updateHorizontalContent;
+    private updateMonthViewContent;
+    private updateOtherViewContent;
+    private mergeNewTdData;
     private getBufferCollection;
     private setTranslate;
     updateFocusedWorkCell(): void;

package/src/schedule/actions/virtual-scroll.js

@@ -14,6 +14,7 @@ var VirtualScroll = /** @class */ (function () {
         this.renderedLength = 0;
         this.averageRowHeight = 0;
         this.startIndex = 0;
+        this.existingDataCollection = [];
         this.parent = parent;
         this.addEventListener();
     }
@@ -86,10 +87,10 @@ var VirtualScroll = /** @class */ (function () {
     };
     VirtualScroll.prototype.setItemSize = function () {
         if (this.isHorizontalScroll) {
-            this.itemSize = util.getElementWidthFromClass(this.parent.activeView.element, cls.WORK_CELLS_CLASS) || this.itemSize;
+            this.itemSize = util.getElementWidthFromClass(this.parent.activeView.element, cls.WORK_CELLS_CLASS, this.parent.uiStateValues.isTransformed) || this.itemSize;
         }
         else {
-            this.itemSize = util.getElementHeightFromClass(this.parent.activeView.element, cls.WORK_CELLS_CLASS) || this.itemSize;
+            this.itemSize = this.parent.getElementHeightFromClass(this.parent.activeView.element, cls.WORK_CELLS_CLASS) || this.itemSize;
         }
     };
     VirtualScroll.prototype.refreshLayout = function () {
@@ -373,43 +374,91 @@ var VirtualScroll = /** @class */ (function () {
         append(eventRows, eventWrap);
     };
     VirtualScroll.prototype.updateHorizontalContent = function (conWrap, resCollection) {
+        this.existingDataCollection = this.parent.resourceBase.expandedResources;
         this.parent.resourceBase.expandedResources = resCollection;
         var selectedEle = this.parent.getSelectedCells();
         this.focusedEle = selectedEle[selectedEle.length - 1] || this.focusedEle;
-        var renderedLength = conWrap.querySelectorAll('tbody tr').length;
+        var tbody = conWrap.querySelector('tbody');
+        var renderedRows = Array.from(tbody.querySelectorAll('tr'));
+        if (this.parent.currentView === 'Month') {
+            this.updateMonthViewContent(conWrap, resCollection);
+        }
+        else {
+            this.updateOtherViewContent(conWrap, resCollection, renderedRows);
+        }
+    };
+    VirtualScroll.prototype.updateMonthViewContent = function (conWrap, resCollection) {
+        var renderedLength = conWrap.querySelectorAll(' tr').length;
         for (var i = 0; i < renderedLength; i++) {
             remove(conWrap.querySelector('tbody tr'));
         }
-        if (this.parent.currentView === 'Month') {
-            if (this.parent.activeViewOptions.group.byDate) {
-                this.parent.activeView.colLevels[0] = resCollection;
-            }
-            else {
-                this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 2] = resCollection;
-            }
-            var contentRows = this.parent.activeView.getContentRows();
-            append(contentRows, conWrap.querySelector('tbody'));
+        if (this.parent.activeViewOptions.group.byDate) {
+            this.parent.activeView.colLevels[0] = resCollection;
         }
         else {
-            var col = [].slice.call(conWrap.querySelector('colgroup').children);
-            for (var i = 0; i < col.length; i++) {
-                remove(col[parseInt(i.toString(), 10)]);
-            }
-            this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 1] = resCollection;
-            var contentRows = this.parent.activeView.getContentRows();
-            var table = conWrap.querySelector('table');
-            var thead = conWrap.querySelector('thead');
-            var colGroupEle_1 = conWrap.querySelector('colgroup');
-            resCollection.forEach(function () {
-                colGroupEle_1.appendChild(createElement('col'));
+            this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 2] = resCollection;
+        }
+        var contentRows = this.parent.activeView.getContentRows();
+        append(contentRows, conWrap.querySelector('tbody'));
+    };
+    VirtualScroll.prototype.updateOtherViewContent = function (conWrap, resCollection, renderedRows) {
+        var tbody = conWrap.querySelector('tbody');
+        var colGroup = conWrap.querySelector('colgroup');
+        var thead = conWrap.querySelector('thead');
+        var table = conWrap.querySelector('table');
+        this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 1] = resCollection;
+        var newGroupIndices = new Set(resCollection.map(function (data) { return data.groupIndex; }));
+        renderedRows.forEach(function (row) {
+            var tdElements = row.querySelectorAll('td');
+            tdElements.forEach(function (td) {
+                var groupIndex = parseInt(td.getAttribute('data-group-index'), 10);
+                if (!newGroupIndices.has(groupIndex)) {
+                    td.remove();
+                }
             });
-            thead.appendChild(this.parent.eventBase.createEventWrapper('', this.startIndex > 0 ? this.startIndex : 0));
-            if (this.parent.activeViewOptions.timeScale.enable) {
-                thead.appendChild(this.parent.eventBase.createEventWrapper('timeIndicator'));
-            }
-            prepend([thead], table);
-            append(contentRows, conWrap.querySelector('tbody'));
+        });
+        var col = [].slice.call(conWrap.querySelector('colgroup').children);
+        for (var i = 0; i < col.length; i++) {
+            remove(col[parseInt(i.toString(), 10)]);
+        }
+        resCollection.forEach(function () { return colGroup.appendChild(createElement('col')); });
+        var tHead = [].slice.call(conWrap.querySelector('thead').children);
+        for (var i = 0; i < tHead.length; i++) {
+            remove(tHead[parseInt(i.toString(), 10)]);
         }
+        thead.appendChild(this.parent.eventBase.createEventWrapper('', this.startIndex > 0 ? this.startIndex : 0));
+        if (this.parent.activeViewOptions.timeScale.enable) {
+            thead.appendChild(this.parent.eventBase.createEventWrapper('timeIndicator'));
+        }
+        prepend([thead], table);
+        var contentRows = this.parent.activeView.getContentRows();
+        this.mergeNewTdData(tbody, contentRows);
+    };
+    VirtualScroll.prototype.mergeNewTdData = function (tbody, contentRows) {
+        var existingRows = Array.from(tbody.querySelectorAll('tr'));
+        existingRows.forEach(function (existingRow, rowIndex) {
+            if (rowIndex < contentRows.length) {
+                var newRow = contentRows[parseInt(rowIndex.toString(), 10)];
+                var existingTds_1 = Array.from(existingRow.querySelectorAll('td'));
+                var newTds = Array.from(newRow.querySelectorAll('td'));
+                newTds.forEach(function (newTd) {
+                    var newGroupIndex = parseInt(newTd.getAttribute('data-group-index').toString(), 10);
+                    var inserted = false;
+                    for (var _i = 0, existingTds_2 = existingTds_1; _i < existingTds_2.length; _i++) {
+                        var existingTd = existingTds_2[_i];
+                        var existingGroupIndex = parseInt(existingTd.getAttribute('data-group-index').toString(), 10);
+                        if (newGroupIndex < existingGroupIndex) {
+                            existingRow.insertBefore(newTd, existingTd);
+                            inserted = true;
+                            break;
+                        }
+                    }
+                    if (!inserted) {
+                        existingRow.appendChild(newTd);
+                    }
+                });
+            }
+        });
     };
     VirtualScroll.prototype.getBufferCollection = function (startIndex, endIndex) {
         return this.parent.resourceBase.expandedResources.slice(startIndex, endIndex);

package/src/schedule/base/interface.d.ts

@@ -247,6 +247,8 @@ export interface DragEventArgs extends BaseEventArgs {
     scroll?: ScrollOptions;
     /** Defines the date range navigation action while dragging. */
     navigation?: NavigateOptions;
+    /** Allows to drag the events outside the currently rendered date range */
+    dragWithinRange?: boolean;
 }
 /** An interface that holds options of virtual scroll action. */
 export interface ScrollEventArgs extends BaseEventArgs {
@@ -525,6 +527,7 @@ export interface UIStateArgs {
     scheduleHeight?: number;
     isTapHold?: boolean;
     isTouchScroll?: boolean;
+    isTransformed?: boolean;
 }
 /**
  *  @private

package/src/schedule/base/schedule.d.ts

@@ -918,6 +918,31 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
     render(): void;
     private renderTableContainer;
     getEventTemplateName(resIndex: number): string;
+    /**
+     * Method to get element width
+     *
+     * @param {HTMLElement} element Accepts the DOM element
+     * @returns {number} Returns the width of the given element
+     * @private
+     */
+    getElementWidth(element: HTMLElement): number;
+    /**
+     * Method to get element height
+     *
+     * @param {HTMLElement} element Accepts the DOM element
+     * @returns {number} Returns the Height of the given element
+     * @private
+     */
+    getElementHeight(element: HTMLElement): number;
+    /**
+     * Method to get height from element
+     *
+     * @param {Element} element Accepts the DOM element
+     * @param {string} elementClass Accepts the element class
+     * @returns {number} Returns the height of the element
+     * @private
+     */
+    getElementHeightFromClass(element: Element, elementClass: string): number;
     /**
      * Method to render react templates
      *

package/src/schedule/base/schedule.js

@@ -148,6 +148,37 @@ var Schedule = /** @class */ (function (_super) {
         }
         return templateName;
     };
+    /**
+     * Method to get element width
+     *
+     * @param {HTMLElement} element Accepts the DOM element
+     * @returns {number} Returns the width of the given element
+     * @private
+     */
+    Schedule.prototype.getElementWidth = function (element) {
+        return util.getElementWidth(element, this.uiStateValues.isTransformed);
+    };
+    /**
+     * Method to get element height
+     *
+     * @param {HTMLElement} element Accepts the DOM element
+     * @returns {number} Returns the Height of the given element
+     * @private
+     */
+    Schedule.prototype.getElementHeight = function (element) {
+        return util.getElementHeight(element, this.uiStateValues.isTransformed);
+    };
+    /**
+     * Method to get height from element
+     *
+     * @param {Element} element Accepts the DOM element
+     * @param {string} elementClass Accepts the element class
+     * @returns {number} Returns the height of the element
+     * @private
+     */
+    Schedule.prototype.getElementHeightFromClass = function (element, elementClass) {
+        return util.getElementHeightFromClass(element, elementClass, this.uiStateValues.isTransformed);
+    };
     /**
      * Method to render react templates
      *
@@ -228,6 +259,7 @@ var Schedule = /** @class */ (function (_super) {
             this.headerModule = new HeaderRenderer(this);
         }
         this.renderTableContainer();
+        this.uiStateValues.isTransformed = Math.round(this.element.getBoundingClientRect().width) !== this.element.offsetWidth;
         if (Browser.isDevice || Browser.isTouch) {
             this.scheduleTouchModule = new ScheduleTouch(this);
         }
@@ -731,7 +763,7 @@ var Schedule = /** @class */ (function (_super) {
             this.uiStateValues = {
                 expand: false, isInitial: true, left: 0, top: 0, isGroupAdaptive: false,
                 isIgnoreOccurrence: false, groupIndex: this.adaptiveGroupIndex, action: false,
-                isBlock: false, isCustomMonth: true, isPreventTimezone: false
+                isBlock: false, isCustomMonth: true, isPreventTimezone: false, isTransformed: false
             };
         }
         this.currentTimezoneDate = this.getCurrentTime();
@@ -2124,6 +2156,9 @@ var Schedule = /** @class */ (function (_super) {
      * @returns {void}
      */
     Schedule.prototype.scrollTo = function (hour, scrollDate) {
+        if (this.currentView.indexOf('Agenda') < 0 && isNullOrUndefined(this.element.querySelector('.e-work-cells'))) {
+            return;
+        }
         if (this.activeView.scrollToDate && isNullOrUndefined(hour) && scrollDate) {
             this.activeView.scrollToDate(scrollDate);
         }