@syncfusion/ej2-schedule 20.2.45 → 20.3.47

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

@@ -1,4 +1,4 @@
-import { append, addClass, remove, isNullOrUndefined, setStyleAttribute, createElement } from '@syncfusion/ej2-base';
+import { append, addClass, remove, isNullOrUndefined, setStyleAttribute, createElement, prepend } from '@syncfusion/ej2-base';
 import * as events from '../base/constant';
 import * as cls from '../base/css-constant';
 import * as util from '../base/util';
@@ -12,7 +12,7 @@ var VirtualScroll = /** @class */ (function () {
         this.bufferCount = 3;
         this.renderedLength = 0;
         this.averageRowHeight = 0;
-        this.isScrollHeightNull = true;
+        this.startIndex = 0;
         this.parent = parent;
         this.addEventListener();
     }
@@ -30,39 +30,19 @@ var VirtualScroll = /** @class */ (function () {
     };
     VirtualScroll.prototype.getRenderedCount = function () {
         this.setItemSize();
-        return Math.ceil(this.parent.element.clientHeight / this.itemSize) + this.bufferCount;
-    };
-    VirtualScroll.prototype.setTranslateValue = function () {
-        var resWrap = this.parent.element.querySelector('.' + cls.RESOURCE_COLUMN_WRAP_CLASS);
-        var conWrap = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
-        var eventWrap = this.parent.element.querySelector('.' + cls.EVENT_TABLE_CLASS);
-        var timeIndicator = this.parent.element.querySelector('.' + cls.CURRENT_TIMELINE_CLASS);
-        this.renderVirtualTrackHeight(conWrap, resWrap);
-        this.setTranslate(resWrap, conWrap, eventWrap, timeIndicator);
-    };
-    VirtualScroll.prototype.renderVirtualTrackHeight = function (contentWrap, resourceWrap) {
-        this.parent.resourceBase.setExpandedResources();
-        if (this.isScrollHeightNull) {
-            var wrap = createElement('div', { className: cls.VIRTUAL_TRACK_CLASS });
-            var resWrap = [].slice.call((resourceWrap).querySelectorAll('table td'));
-            var startIndex_1 = parseInt(resWrap[0].getAttribute('data-group-index'), 10);
-            var endIndex_1 = parseInt(resWrap[resWrap.length - 1].getAttribute('data-group-index'), 10);
-            this.parent.resourceBase.renderedResources = this.parent.resourceBase.expandedResources.filter(function (resource) {
-                return (resource.groupIndex >= startIndex_1 && resource.groupIndex <= endIndex_1);
-            });
-            this.setItemSize();
-            wrap.style.height = (this.parent.resourceBase.expandedResources.length * this.itemSize) + 'px';
-            this.isScrollHeightNull = false;
-            var virtual = this.parent.element.querySelector('.' + cls.VIRTUAL_TRACK_CLASS);
-            if (!isNullOrUndefined(virtual)) {
-                remove(virtual);
-            }
-            contentWrap.appendChild(wrap);
-        }
+        var containerSize = this.isHorizontalScroll ? this.parent.element.clientWidth : this.parent.element.clientHeight;
+        this.renderedLength = Math.ceil(containerSize / this.itemSize) + this.bufferCount;
+        return this.renderedLength;
     };
     VirtualScroll.prototype.renderVirtualTrack = function (contentWrap) {
         var wrap = createElement('div', { className: cls.VIRTUAL_TRACK_CLASS });
-        wrap.style.height = (this.parent.resourceBase.expandedResources.length * this.itemSize) + 'px';
+        if (this.isHorizontalScroll) {
+            var colCount = this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 1].length;
+            wrap.style.width = (colCount * this.itemSize) + 'px';
+        }
+        else {
+            wrap.style.height = (this.parent.resourceBase.expandedResources.length * this.itemSize) + 'px';
+        }
         contentWrap.appendChild(wrap);
     };
     VirtualScroll.prototype.updateVirtualScrollHeight = function () {
@@ -100,12 +80,19 @@ var VirtualScroll = /** @class */ (function () {
         }
     };
     VirtualScroll.prototype.setItemSize = function () {
-        this.itemSize = util.getElementHeightFromClass(this.parent.activeView.element, cls.WORK_CELLS_CLASS) || this.itemSize;
+        if (this.isHorizontalScroll) {
+            this.itemSize = util.getElementWidthFromClass(this.parent.activeView.element, cls.WORK_CELLS_CLASS) || this.itemSize;
+        }
+        else {
+            this.itemSize = util.getElementHeightFromClass(this.parent.activeView.element, cls.WORK_CELLS_CLASS) || this.itemSize;
+        }
     };
     VirtualScroll.prototype.renderEvents = function () {
         this.setTabIndex();
         this.parent.refreshEvents(false);
-        this.parent.notify(events.contentReady, {});
+        if (this.parent.currentView !== 'Month') {
+            this.parent.notify(events.contentReady, {});
+        }
         this.parent.hideSpinner();
     };
     VirtualScroll.prototype.virtualScrolling = function () {
@@ -114,31 +101,64 @@ var VirtualScroll = /** @class */ (function () {
             this.parent.quickPopup.quickPopupHide();
             this.parent.quickPopup.morePopup.hide();
         }
-        var resWrap = this.parent.element.querySelector('.' + cls.RESOURCE_COLUMN_WRAP_CLASS);
         var conWrap = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
-        var eventWrap = this.parent.element.querySelector('.' + cls.EVENT_TABLE_CLASS);
-        var timeIndicator = this.parent.element.querySelector('.' + cls.CURRENT_TIMELINE_CLASS);
-        var conTable = this.parent.element.querySelector('.' + cls.CONTENT_TABLE_CLASS);
-        this.renderedLength = resWrap.querySelector('tbody').children.length;
-        var firstTDIndex = parseInt(resWrap.querySelector('tbody td').getAttribute('data-group-index'), 10);
-        var scrollHeight = this.parent.rowAutoHeight ?
-            (conTable.offsetHeight - conWrap.offsetHeight) : this.bufferCount * this.itemSize;
-        addClass([conWrap], 'e-transition');
+        if (this.isHorizontalScroll) {
+            this.horizontalScrolling(conWrap);
+        }
+        else {
+            var resWrap = this.parent.element.querySelector('.' + cls.RESOURCE_COLUMN_WRAP_CLASS);
+            var eventWrap = this.parent.element.querySelector('.' + cls.EVENT_TABLE_CLASS);
+            var timeIndicator = this.parent.element.querySelector('.' + cls.CURRENT_TIMELINE_CLASS);
+            var conTable = this.parent.element.querySelector('.' + cls.CONTENT_TABLE_CLASS);
+            addClass([conWrap], 'e-transition');
+            this.renderedLength = resWrap.querySelector('tbody').children.length;
+            var firstTDIndex = parseInt(resWrap.querySelector('tbody td').getAttribute('data-group-index'), 10);
+            var scrollHeight = this.parent.rowAutoHeight ?
+                (conTable.offsetHeight - conWrap.offsetHeight) : this.bufferCount * this.itemSize;
+            var resCollection = [];
+            if ((conWrap.scrollTop) - this.translateY < 0) {
+                resCollection = this.upScroll(conWrap, firstTDIndex);
+            }
+            else if (conWrap.scrollTop - this.translateY > scrollHeight) {
+                resCollection = this.downScroll(conWrap, firstTDIndex);
+            }
+            if (!isNullOrUndefined(resCollection) && resCollection.length > 0) {
+                this.parent.showSpinner();
+                var selectedEle = this.parent.getSelectedElements();
+                this.focusedEle = selectedEle[selectedEle.length - 1] || this.focusedEle;
+                this.updateContent(resWrap, conWrap, eventWrap, resCollection);
+                this.setTranslate(resWrap, conWrap, eventWrap, timeIndicator);
+                if (this.parent.dragAndDropModule && this.parent.dragAndDropModule.actionObj.action === 'drag') {
+                    this.parent.dragAndDropModule.navigationWrapper();
+                }
+                window.clearTimeout(this.timeValue);
+                this.timeValue = window.setTimeout(function () { _this.renderEvents(); }, 250);
+            }
+        }
+    };
+    VirtualScroll.prototype.horizontalScrolling = function (conWrap) {
+        var _this = this;
         var resCollection = [];
-        if ((conWrap.scrollTop) - this.translateY < 0) {
-            resCollection = this.upScroll(conWrap, firstTDIndex);
+        var scrollWidth = this.bufferCount * this.itemSize;
+        if (Math.abs(conWrap.scrollLeft) - Math.abs(this.translateY) < 0) {
+            resCollection = this.leftScroll(conWrap);
         }
-        else if (conWrap.scrollTop - this.translateY > scrollHeight) {
-            resCollection = this.downScroll(conWrap, firstTDIndex);
+        else if (Math.abs(conWrap.scrollLeft) - Math.abs(this.translateY) > scrollWidth) {
+            resCollection = this.rightScroll(conWrap);
         }
         if (!isNullOrUndefined(resCollection) && resCollection.length > 0) {
-            this.parent.showSpinner();
-            var selectedEle = this.parent.getSelectedElements();
-            this.focusedEle = selectedEle[selectedEle.length - 1] || this.focusedEle;
-            this.updateContent(resWrap, conWrap, eventWrap, resCollection);
-            this.setTranslate(resWrap, conWrap, eventWrap, timeIndicator);
-            if (this.parent.dragAndDropModule && this.parent.dragAndDropModule.actionObj.action === 'drag') {
-                this.parent.dragAndDropModule.navigationWrapper();
+            if (this.parent.resourceBase.expandedResources.length !== resCollection.length ||
+                this.parent.resourceBase.expandedResources[0] !== resCollection[0] ||
+                this.parent.resourceBase.expandedResources[this.parent.resourceBase.expandedResources.length - 1] !==
+                    resCollection[resCollection.length - 1]) {
+                this.parent.showSpinner();
+                var colLevels = this.parent.activeView.colLevels.slice(0);
+                this.updateHorizontalContent(conWrap, resCollection);
+                setStyleAttribute(conWrap.querySelector('table'), { transform: "translateX(" + this.translateY + "px)" });
+                this.parent.activeView.colLevels = colLevels;
+                if (this.parent.dragAndDropModule && this.parent.dragAndDropModule.actionObj.action === 'drag') {
+                    this.parent.dragAndDropModule.navigationWrapper();
+                }
             }
             window.clearTimeout(this.timeValue);
             this.timeValue = window.setTimeout(function () { _this.renderEvents(); }, 250);
@@ -184,6 +204,87 @@ var VirtualScroll = /** @class */ (function () {
         this.translateY = conWrap.scrollTop;
         return nextSetCollection;
     };
+    VirtualScroll.prototype.leftScroll = function (conWrap) {
+        var index = 0;
+        index = (~~(Math.abs(conWrap.scrollLeft) / this.itemSize) + Math.ceil(conWrap.clientWidth / this.itemSize)) - this.renderedLength;
+        index = (index > 0) ? index : 0;
+        return this.getCollection(index, index + this.renderedLength);
+    };
+    VirtualScroll.prototype.rightScroll = function (conWrap) {
+        var lastLevel = this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 1];
+        var nextSetIndex = 0;
+        nextSetIndex = ~~(Math.abs(conWrap.scrollLeft) / this.itemSize);
+        var lastIndex = nextSetIndex + this.renderedLength;
+        lastIndex = (lastIndex > lastLevel.length - 1) ? lastLevel.length - 1 : lastIndex;
+        return this.getCollection(lastIndex - this.renderedLength, lastIndex);
+    };
+    VirtualScroll.prototype.getCollection = function (startIndex, endIndex) {
+        this.translateY = startIndex * this.itemSize;
+        var lastLevel = this.getResCollection(startIndex, endIndex);
+        if (this.parent.enableRtl) {
+            this.translateY = -this.translateY;
+        }
+        return lastLevel;
+    };
+    VirtualScroll.prototype.getResCollection = function (startIndex, endIndex) {
+        var lastLevel = this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 1];
+        var resCollection = [];
+        var index = { startIndex: 0, endIndex: 0 };
+        if (this.parent.activeViewOptions.group.byDate) {
+            if (lastLevel[startIndex].date.getTime() === this.parent.resourceBase.expandedResources[0].date.getTime() &&
+                lastLevel[endIndex].date.getTime() ===
+                    this.parent.resourceBase.expandedResources[this.parent.resourceBase.expandedResources.length - 1].date.getTime()) {
+                return this.parent.resourceBase.expandedResources;
+            }
+            resCollection = this.getByDateCollection(lastLevel[startIndex], lastLevel[endIndex], index);
+            this.setRenderedDates(resCollection);
+        }
+        else {
+            if (lastLevel[startIndex].groupIndex === this.parent.resourceBase.expandedResources[0].groupIndex &&
+                lastLevel[endIndex].groupIndex ===
+                    this.parent.resourceBase.expandedResources[this.parent.resourceBase.expandedResources.length - 1].groupIndex) {
+                return this.parent.resourceBase.expandedResources;
+            }
+            resCollection = this.getByIdCollection(lastLevel[startIndex], lastLevel[endIndex], index);
+        }
+        if (this.parent.currentView !== 'Month') {
+            this.startIndex = index.startIndex;
+            resCollection = lastLevel.slice(index.startIndex, index.endIndex);
+        }
+        this.translateY = index.startIndex * this.itemSize;
+        return resCollection;
+    };
+    VirtualScroll.prototype.getByDateCollection = function (firstItem, lastItem, index) {
+        var resCollection = this.parent.activeView.colLevels[0].filter(function (data) {
+            return firstItem.date.getTime() <= data.date.getTime() &&
+                data.date.getTime() <= lastItem.date.getTime();
+        });
+        this.setStartEndIndex(this.parent.activeView.colLevels[0], resCollection[0], resCollection[resCollection.length - 1], index);
+        return resCollection;
+    };
+    VirtualScroll.prototype.getByIdCollection = function (firstItem, lastItem, index) {
+        var resCollection = this.parent.resourceBase.lastResourceLevel.filter(function (data) {
+            return firstItem.groupIndex <= data.groupIndex && data.groupIndex <= lastItem.groupIndex;
+        });
+        this.parent.resourceBase.renderedResources = resCollection;
+        this.setStartEndIndex(this.parent.resourceBase.lastResourceLevel, resCollection[0], resCollection[resCollection.length - 1], index);
+        return resCollection;
+    };
+    VirtualScroll.prototype.setStartEndIndex = function (data, firstItem, lastItem, colIndex) {
+        var index = 0;
+        data.filter(function (data) {
+            if (firstItem === data) {
+                colIndex.startIndex = index;
+            }
+            else if (lastItem === data) {
+                colIndex.endIndex = index + data.colSpan;
+            }
+            index += data.colSpan;
+        });
+        if (firstItem === lastItem) {
+            colIndex.endIndex = colIndex.startIndex + lastItem.colSpan;
+        }
+    };
     VirtualScroll.prototype.updateContent = function (resWrap, conWrap, eventWrap, resCollection) {
         var renderedLength = resWrap.querySelector('tbody').children.length;
         if (document.activeElement && document.activeElement.classList.contains(cls.RESOURCE_CELLS_CLASS)) {
@@ -203,6 +304,45 @@ var VirtualScroll = /** @class */ (function () {
         append(contentRows, conWrap.querySelector('tbody'));
         append(eventRows, eventWrap);
     };
+    VirtualScroll.prototype.updateHorizontalContent = function (conWrap, resCollection) {
+        this.parent.resourceBase.expandedResources = resCollection;
+        var selectedEle = this.parent.getSelectedElements();
+        this.focusedEle = selectedEle[selectedEle.length - 1] || this.focusedEle;
+        var renderedLength = conWrap.querySelectorAll('tbody tr').length;
+        for (var i = 0; i < renderedLength; i++) {
+            remove(conWrap.querySelector('tbody tr'));
+        }
+        if (this.parent.currentView === 'Month') {
+            if (this.parent.activeViewOptions.group.byDate) {
+                this.parent.activeView.colLevels[0] = resCollection;
+            }
+            else {
+                this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 2] = resCollection;
+            }
+            var contentRows = this.parent.activeView.getContentRows();
+            append(contentRows, conWrap.querySelector('tbody'));
+        }
+        else {
+            var col = [].slice.call(conWrap.querySelector('colgroup').children);
+            for (var i = 0; i < col.length; i++) {
+                remove(col[i]);
+            }
+            this.parent.activeView.colLevels[this.parent.activeView.colLevels.length - 1] = resCollection;
+            var contentRows = this.parent.activeView.getContentRows();
+            var table = conWrap.querySelector('table');
+            var thead = conWrap.querySelector('thead');
+            var colGroupEle_1 = conWrap.querySelector('colgroup');
+            resCollection.forEach(function () {
+                colGroupEle_1.appendChild(createElement('col'));
+            });
+            thead.appendChild(this.parent.eventBase.createEventWrapper('', this.startIndex > 0 ? this.startIndex : 0));
+            if (this.parent.activeViewOptions.timeScale.enable) {
+                thead.appendChild(this.parent.eventBase.createEventWrapper('timeIndicator'));
+            }
+            prepend([thead], table);
+            append(contentRows, conWrap.querySelector('tbody'));
+        }
+    };
     VirtualScroll.prototype.getBufferCollection = function (startIndex, endIndex) {
         return this.parent.resourceBase.expandedResources.slice(startIndex, endIndex);
     };
@@ -225,6 +365,17 @@ var VirtualScroll = /** @class */ (function () {
             this.focusedEle = null;
         }
     };
+    VirtualScroll.prototype.setRenderedDates = function (resCollection) {
+        if (this.parent.currentView !== 'Month') {
+            var dateCol_1 = resCollection.map(function (x) { return x.date; });
+            this.parent.resourceBase.renderedResources.forEach(function (x) { return x.renderDates = dateCol_1; });
+        }
+        else {
+            var dateCol_2 = resCollection.map(function (x) { return x.date.getDay(); });
+            var renderDates_1 = this.parent.activeView.renderDates.filter(function (x) { return dateCol_2.indexOf(x.getDay()) >= 0; });
+            this.parent.resourceBase.renderedResources.forEach(function (x) { return x.renderDates = renderDates_1; });
+        }
+    };
     VirtualScroll.prototype.setTabIndex = function () {
         var resColWrap = this.parent.element.querySelector('.' + cls.RESOURCE_COLUMN_WRAP_CLASS);
         var resCells = [].slice.call(this.parent.element.querySelectorAll('.' + cls.RESOURCE_CELLS_CLASS));
@@ -243,6 +394,7 @@ var VirtualScroll = /** @class */ (function () {
     };
     VirtualScroll.prototype.destroy = function () {
         this.removeEventListener();
+        this.focusedEle = null;
     };
     return VirtualScroll;
 }());

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

@@ -284,7 +284,7 @@ export interface ExportOptions {
     /**
      * Defines the delimiter for csv file export.
      * By default, csv files are using comma(,) as separator. You can specify this property to change the delimiter in csv file.
-    */
+     */
     separator?: string;
 }
 /** An interface that holds the field name and its header text to export to excel. */
@@ -421,6 +421,7 @@ export interface IRenderer {
     resetColWidth(): void;
     getAdjustedDate?(date: Date): Date;
     viewIndex: number;
+    colLevels: TdData[][];
 }
 /** @private */
 export interface EJ2Instance extends HTMLElement {

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

@@ -51,6 +51,13 @@ export interface ScheduleModel extends ComponentModel{
      */
     showTimeIndicator?: boolean;
 
+    /**
+     * Defines whether to enable date navigations via swipe in touch devices or not.
+     *
+     * @default true
+     */
+    allowSwiping?: boolean;
+
     /**
      * To set the active view on scheduler, the `currentView` property can be used and it usually accepts either of the following available
      *  view options. The view option specified in this property will be initially loaded on the schedule.

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

@@ -174,6 +174,12 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @default true
      */
     showTimeIndicator: boolean;
+    /**
+     * Defines whether to enable date navigations via swipe in touch devices or not.
+     *
+     * @default true
+     */
+    allowSwiping: boolean;
     /**
      * To set the active view on scheduler, the `currentView` property can be used and it usually accepts either of the following available
      *  view options. The view option specified in this property will be initially loaded on the schedule.
@@ -1274,6 +1280,13 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @private
      */
     renderHeaderIndentTemplate(data: TdData, td: Element): void;
+    /**
+     * Method to check for refreshing the targeted resource row events.
+     *
+     * @returns {boolean} Returns the boolean value
+     * @private
+     */
+    isSpecificResourceEvents(): boolean;
     private unWireEvents;
     /**
      * Core method to return the component name.

package/src/schedule/base/schedule.js

@@ -1251,6 +1251,16 @@ var Schedule = /** @class */ (function (_super) {
             append(indentTemplate, td);
         }
     };
+    /**
+     * Method to check for refreshing the targeted resource row events.
+     *
+     * @returns {boolean} Returns the boolean value
+     * @private
+     */
+    Schedule.prototype.isSpecificResourceEvents = function () {
+        return this.activeViewOptions.group.resources.length > 0 && !this.activeViewOptions.group.allowGroupEdit &&
+            !this.rowAutoHeight && !this.virtualScrollModule && this.activeViewOptions.group.byGroupID;
+    };
     Schedule.prototype.unWireEvents = function () {
         EventHandler.remove(window, 'resize', this.onScheduleResize);
         EventHandler.remove(window, 'orientationchange', this.onScheduleResize);
@@ -2524,10 +2534,6 @@ var Schedule = /** @class */ (function (_super) {
         this.hideSpinner();
         this.unWireEvents();
         this.destroyHeaderModule();
-        if (this.eventTooltip) {
-            this.eventTooltip.destroy();
-            this.eventTooltip = null;
-        }
         if (this.eventBase) {
             this.eventBase.destroy();
             this.eventBase = null;
@@ -2601,6 +2607,9 @@ var Schedule = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], Schedule.prototype, "showTimeIndicator", void 0);
+    __decorate([
+        Property(true)
+    ], Schedule.prototype, "allowSwiping", void 0);
     __decorate([
         Property('Week')
     ], Schedule.prototype, "currentView", void 0);

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

@@ -13,6 +13,14 @@ export declare const MS_PER_MINUTE: number;
  * @returns {number} Returns the height of the element
  */
 export declare function getElementHeightFromClass(container: Element, elementClass: string): number;
+/**
+ * Method to get width from element
+ *
+ * @param {Element} container Accepts the DOM element
+ * @param {string} elementClass Accepts the element class
+ * @returns {number} Returns the width of the element
+ */
+export declare function getElementWidthFromClass(container: Element, elementClass: string): number;
 /**
  * Method to get translateY value
  *
@@ -20,6 +28,13 @@ export declare function getElementHeightFromClass(container: Element, elementCla
  * @returns {number} Returns the translateY value of given element
  */
 export declare function getTranslateY(element: HTMLElement | Element): number;
+/**
+ * Method to get translateX value
+ *
+ * @param {HTMLElement | Element} element Accepts the DOM element
+ * @returns {number} Returns the translateX value of given element
+ */
+export declare function getTranslateX(element: HTMLElement | Element): number;
 /**
  * Method to get week first date
  *

package/src/schedule/base/util.js

@@ -24,6 +24,23 @@ export function getElementHeightFromClass(container, elementClass) {
     remove(el);
     return height;
 }
+/**
+ * Method to get width from element
+ *
+ * @param {Element} container Accepts the DOM element
+ * @param {string} elementClass Accepts the element class
+ * @returns {number} Returns the width of the element
+ */
+export function getElementWidthFromClass(container, elementClass) {
+    var width = 0;
+    var el = createElement('div', { className: elementClass }).cloneNode();
+    el.style.visibility = 'hidden';
+    el.style.position = 'absolute';
+    container.appendChild(el);
+    width = el.getBoundingClientRect().width;
+    remove(el);
+    return width;
+}
 /**
  * Method to get translateY value
  *
@@ -35,6 +52,17 @@ export function getTranslateY(element) {
     return window.WebKitCSSMatrix ?
         new WebKitCSSMatrix(style.webkitTransform).m42 : 0;
 }
+/**
+ * Method to get translateX value
+ *
+ * @param {HTMLElement | Element} element Accepts the DOM element
+ * @returns {number} Returns the translateX value of given element
+ */
+export function getTranslateX(element) {
+    var style = getComputedStyle(element);
+    return window.WebKitCSSMatrix ?
+        new WebKitCSSMatrix(style.webkitTransform).m41 : 0;
+}
 /**
  * Method to get week first date
  *
@@ -312,9 +340,7 @@ export function removeChildren(element) {
     var elementChildren = [].slice.call(element.children);
     for (var _i = 0, elementChildren_1 = elementChildren; _i < elementChildren_1.length; _i++) {
         var elementChild = elementChildren_1[_i];
-        if (!elementChild.classList.contains('blazor-template')) {
-            element.removeChild(elementChild);
-        }
+        element.removeChild(elementChild);
     }
 }
 /**

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

@@ -56,7 +56,6 @@ var AgendaBase = /** @class */ (function (_super) {
                         'tabindex': '0',
                         'aria-disabled': _this.parent.eventBase.getReadonlyAttribute(listData[li]),
                         'aria-pressed': 'false',
-                        'aria-grabbed': 'true',
                         'aria-label': _this.parent.getAnnouncementString(listData[li])
                     }
                 });
@@ -263,9 +262,9 @@ var AgendaBase = /** @class */ (function (_super) {
         }
     };
     AgendaBase.prototype.createResourceTableRow = function (tContent, tBody) {
-        var tr = createElement('tr', { attrs: { role: 'row' } });
+        var tr = createElement('tr');
         var ntr;
-        var td = createElement('td', { attrs: { role: 'gridcell', 'aria-selected': 'false' } });
+        var td = createElement('td', { attrs: { 'aria-selected': 'false' } });
         var tempData;
         var rowSpan = 0;
         var level;
@@ -360,11 +359,10 @@ var AgendaBase = /** @class */ (function (_super) {
     };
     AgendaBase.prototype.createTableRowElement = function (date, type) {
         var daysCount = util.getDaysCount(this.parent.selectedDate.getTime(), date.getTime());
-        var tr = createElement('tr', { attrs: { 'role': 'row', 'data-row-index': daysCount.toString() } });
+        var tr = createElement('tr', { attrs: { 'data-row-index': daysCount.toString() } });
         var td = createElement('td', {
             attrs: {
                 'class': (type === 'monthHeader') ? cls.MONTH_HEADER_CLASS : cls.AGENDA_CELLS_CLASS,
-                'role': 'gridcell',
                 'aria-selected': 'false',
                 'data-column-index': daysCount.toString(),
                 'data-date': date.getTime().toString()

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

@@ -71,7 +71,7 @@ export declare class EventBase {
     getOccurrencesByRange(startTime: Date, endTime: Date): Record<string, any>[];
     getDeletedOccurrences(recurrenceData: string | number | Record<string, any>): Record<string, any>[];
     applyResourceColor(element: HTMLElement, data: Record<string, any>, type: string, index?: string[], alpha?: string): void;
-    createBlockAppointmentElement(record: Record<string, any>, resIndex: number): HTMLElement;
+    createBlockAppointmentElement(record: Record<string, any>, resIndex: number, isResourceEventTemplate: boolean): HTMLElement;
     setWrapperAttributes(appointmentWrapper: HTMLElement, resIndex: number): void;
     getReadonlyAttribute(event: Record<string, any>): string;
     isBlockRange(eventData: Record<string, any> | Record<string, any>[]): boolean;
@@ -84,6 +84,7 @@ export declare class EventBase {
     }): boolean;
     allDayExpandScroll(dateHeader: HTMLElement): void;
     updateEventMinimumDuration(startEndHours: Record<string, Date>, startTime: Date, endTime: Date): Record<string, Date>;
+    createEventWrapper(type?: string, index?: number): HTMLElement;
     private unWireEvents;
     destroy(): void;
 }

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

@@ -875,7 +875,8 @@ var EventBase = /** @class */ (function () {
         var startDate = event[this.parent.eventFields.startTime];
         var endDate = event[this.parent.eventFields.endTime];
         var eventRule = event[this.parent.eventFields.recurrenceRule];
-        var duration = endDate.getTime() - startDate.getTime();
+        var timeZoneDiff = endDate.getTimezoneOffset() - startDate.getTimezoneOffset();
+        var duration = (endDate.getTime() - startDate.getTime()) - (timeZoneDiff * 60000);
         viewDate = new Date((viewDate || this.parent.activeView.startDate()).getTime() - duration);
         var exception = event[this.parent.eventFields.recurrenceException];
         var maxCount;
@@ -1089,7 +1090,7 @@ var EventBase = /** @class */ (function () {
             element.style[type] = !isNullOrUndefined(alpha) ? alphaColor(color, alpha) : color;
         }
     };
-    EventBase.prototype.createBlockAppointmentElement = function (record, resIndex) {
+    EventBase.prototype.createBlockAppointmentElement = function (record, resIndex, isResourceEventTemplate) {
         var eventSubject = (record[this.parent.eventFields.subject] || this.parent.eventSettings.fields.subject.default);
         var appointmentWrapper = createElement('div', {
             className: cls.BLOCK_APPOINTMENT_CLASS,
@@ -1103,7 +1104,7 @@ var EventBase = /** @class */ (function () {
             var scheduleId = this.parent.element.id + '_';
             var viewName = this.parent.activeViewOptions.eventTemplateName;
             var templateId = scheduleId + viewName + 'eventTemplate';
-            var templateName = 'eventTemplate' + (this.parent.activeViewOptions.group.resources.length > 0 &&
+            var templateName = 'eventTemplate' + (isResourceEventTemplate &&
                 this.parent.currentView.indexOf('Year') === -1 ? '_' + resIndex : '');
             templateElement = this.parent.getAppointmentTemplate()(record, this.parent, templateName, templateId, false);
         }
@@ -1259,6 +1260,32 @@ var EventBase = /** @class */ (function () {
         }
         return { startDate: startTime, endDate: endTime };
     };
+    EventBase.prototype.createEventWrapper = function (type, index) {
+        if (type === void 0) { type = ''; }
+        if (index === void 0) { index = 0; }
+        var tr = createElement('tr');
+        var levels = this.parent.activeView.colLevels.slice(-1)[0];
+        for (var i = 0, len = levels.length; i < len; i++) {
+            var col = levels[i];
+            var appointmentWrap = createElement('td', {
+                className: (type === 'allDay') ? cls.ALLDAY_APPOINTMENT_WRAPPER_CLASS : (type === 'timeIndicator') ?
+                    cls.TIMELINE_WRAPPER_CLASS : cls.DAY_WRAPPER_CLASS, attrs: { 'data-date': col.date.getTime().toString() }
+            });
+            if (!isNullOrUndefined(col.groupIndex)) {
+                appointmentWrap.setAttribute('data-group-index', col.groupIndex.toString());
+            }
+            if (type === '') {
+                var innerWrapper = createElement('div', {
+                    id: cls.APPOINTMENT_WRAPPER_CLASS + '-' + index.toString(),
+                    className: cls.APPOINTMENT_WRAPPER_CLASS
+                });
+                appointmentWrap.appendChild(innerWrapper);
+            }
+            tr.appendChild(appointmentWrap);
+            index = index + 1;
+        }
+        return tr;
+    };
     EventBase.prototype.unWireEvents = function () {
         var appElements = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
         for (var _i = 0, appElements_1 = appElements; _i < appElements_1.length; _i++) {

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

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