@syncfusion/ej2-schedule 24.2.4 → 25.1.35

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

@@ -115,7 +115,7 @@ function getElementHeightFromClass(container, elementClass) {
     el.style.visibility = 'hidden';
     el.style.position = 'absolute';
     container.appendChild(el);
-    height = el.getBoundingClientRect().height;
+    height = getElementHeight(el);
     remove(el);
     return height;
 }
@@ -132,7 +132,7 @@ function getElementWidthFromClass(container, elementClass) {
     el.style.visibility = 'hidden';
     el.style.position = 'absolute';
     container.appendChild(el);
-    width = el.getBoundingClientRect().width;
+    width = getElementWidth(el);
     remove(el);
     return width;
 }
@@ -519,6 +519,33 @@ function capitalizeFirstWord(inputString, type) {
     }
     return inputString;
 }
+/**
+ * Method to get element cell width
+ *
+ * @param {HTMLElement} element Accepts the DOM element
+ * @returns {number} Returns the width of the given element
+ */
+function getElementWidth(element) {
+    return document.body.style.transform.includes('scale') ? element.offsetWidth : element.getBoundingClientRect().width;
+}
+/**
+ * Method to get element cell Height
+ *
+ * @param {HTMLElement} element Accepts the DOM element
+ * @returns {number} Returns the Height of the given element
+ */
+function getElementHeight(element) {
+    return document.body.style.transform.includes('scale') ? element.offsetHeight : element.getBoundingClientRect().height;
+}
+/**
+ * Method to get element cell Top
+ *
+ * @param {HTMLElement} element Accepts the DOM element
+ * @returns {number} Returns the top value of the given element
+ */
+function getElementTop(element) {
+    return document.body.style.transform.includes('scale') ? element.offsetTop : element.getBoundingClientRect().top;
+}
 
 /**
  * CSS Constants
@@ -2539,6 +2566,13 @@ class KeyboardInteraction {
             }
         }
     }
+    isCalendarTarget(e) {
+        const keyTarget = e.currentTarget || e.target;
+        if (keyTarget && !isNullOrUndefined(keyTarget.querySelector('.e-header-popup.e-popup-open'))) {
+            return true;
+        }
+        return false;
+    }
     cancelUpDownAction(isTimelineYear) {
         const isVerticalYear = isTimelineYear && this.parent.activeViewOptions.orientation === 'Vertical';
         const isGroup = this.parent.activeViewOptions.group.resources.length > 0;
@@ -2552,7 +2586,7 @@ class KeyboardInteraction {
     }
     processUp(e, isMultiple) {
         const isTimelineYear = this.parent.currentView === 'TimelineYear';
-        if (isMultiple && this.cancelUpDownAction(isTimelineYear)) {
+        if (isMultiple && this.cancelUpDownAction(isTimelineYear) || (this.isCalendarTarget(e))) {
             return;
         }
         let target = (e.target);
@@ -2600,7 +2634,7 @@ class KeyboardInteraction {
     }
     processDown(e, isMultiple) {
         const isTimelineYear = this.parent.currentView === 'TimelineYear';
-        if (isMultiple && this.cancelUpDownAction(isTimelineYear)) {
+        if (isMultiple && this.cancelUpDownAction(isTimelineYear) || (this.isCalendarTarget(e))) {
             return;
         }
         let target = (e.target);
@@ -2710,7 +2744,7 @@ class KeyboardInteraction {
     }
     processRight(e, isMultiple) {
         const isTimelineYear = this.parent.currentView === 'TimelineYear';
-        if (this.isCancelLeftRightAction(e, isMultiple, isTimelineYear)) {
+        if (this.isCancelLeftRightAction(e, isMultiple, isTimelineYear) || (this.isCalendarTarget(e))) {
             return;
         }
         const selectedCells = this.parent.getSelectedCells();
@@ -2781,7 +2815,7 @@ class KeyboardInteraction {
     }
     processLeft(e, isMultiple) {
         const isTimelineYear = this.parent.currentView === 'TimelineYear';
-        if (this.isCancelLeftRightAction(e, isMultiple, isTimelineYear)) {
+        if (this.isCancelLeftRightAction(e, isMultiple, isTimelineYear) || (this.isCalendarTarget(e))) {
             return;
         }
         let target = (e.target);
@@ -6666,9 +6700,6 @@ class EventBase {
             }
         }
     }
-    getCellWidth(element) {
-        return document.body.style.transform.includes('scale') ? parseFloat(window.getComputedStyle(element).width) : element.getBoundingClientRect().width;
-    }
     unWireEvents() {
         const appElements = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CLASS));
         for (const element of appElements) {
@@ -6772,7 +6803,7 @@ class VerticalEvent extends EventBase {
             this.resources = this.parent.resourceBase.renderedResources;
         }
         this.cellHeight =
-            parseFloat(this.parent.element.querySelector('.e-content-wrap tbody tr').getBoundingClientRect().height.toFixed(2));
+            parseFloat(getElementHeight(this.parent.element.querySelector('.e-content-wrap tbody tr')).toFixed(2));
         this.dateRender[0] = this.parent.activeView.renderDates;
         if (this.parent.activeViewOptions.group.resources.length > 0) {
             for (let i = 0, len = this.resources.length; i < len; i++) {
@@ -7645,8 +7676,8 @@ class MonthEvent extends EventBase {
             });
         }
         const cellDetail = this.workCells[this.parent.activeView.isTimelineView() ? 0 : this.workCells.length - 1];
-        this.cellWidth = this.parent.eventBase.getCellWidth(cellDetail);
-        this.cellHeight = cellDetail.getBoundingClientRect().height;
+        this.cellWidth = getElementWidth(cellDetail);
+        this.cellHeight = getElementHeight(cellDetail);
         this.dateRender = dateRender;
         const filteredDates = this.getRenderedDates(dateRender);
         this.getSlotDates(workDays || this.parent.activeViewOptions.workDays);
@@ -8191,7 +8222,7 @@ class TimelineEvent extends MonthEvent {
         this.eventContainers = [].slice.call(this.element.querySelectorAll('.' + APPOINTMENT_CONTAINER_CLASS));
         const tr = [].slice.call(this.element.querySelectorAll('.' + CONTENT_TABLE_CLASS + ' tbody tr'));
         this.dayLength = tr.length === 0 ? 0 : tr[0].children.length;
-        this.content = this.parent.element.querySelector('.' + CONTENT_TABLE_CLASS);
+        this.content = this.parent.element.querySelector('.' + SCHEDULE_TABLE_CLASS + '.' + CONTENT_TABLE_CLASS);
     }
     getSlotDates() {
         this.slots = [];
@@ -8200,7 +8231,7 @@ class TimelineEvent extends MonthEvent {
             this.parent.activeViewOptions.headerRows.slice(-1)[0].option !== 'Hour') {
             this.renderType = 'day';
             const workCell = this.content.querySelector('.' + WORK_CELLS_CLASS);
-            this.cellWidth = workCell.getBoundingClientRect().width / +(workCell.getAttribute('colspan') || 1);
+            this.cellWidth = getElementWidth(workCell) / +(workCell.getAttribute('colspan') || 1);
             this.slotsPerDay = 1;
         }
         else {
@@ -8353,14 +8384,14 @@ class TimelineEvent extends MonthEvent {
                 this.wireAppointmentEvents(appointmentElement, event);
                 if (this.parent.rowAutoHeight) {
                     const conWrap = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
-                    const conWidth = conWrap.getBoundingClientRect().width;
+                    const conWidth = getElementWidth(conWrap);
                     const isWithoutScroll = conWrap.offsetHeight === conWrap.clientHeight &&
                         conWrap.offsetWidth === conWrap.clientWidth;
                     this.renderEventElement(event, appointmentElement, cellTd);
                     const firstChild = this.getFirstChild(resIndex);
                     this.updateCellHeight(firstChild, height);
                     if (isWithoutScroll &&
-                        (conWrap.offsetWidth > conWrap.clientWidth || conWidth !== conWrap.getBoundingClientRect().width)) {
+                        (conWrap.offsetWidth > conWrap.clientWidth || conWidth !== getElementWidth(conWrap))) {
                         this.adjustAppointments(conWidth);
                     }
                 }
@@ -8478,7 +8509,7 @@ class TimelineEvent extends MonthEvent {
     }
     adjustAppointments(conWidth) {
         const tr = this.parent.element.querySelector('.' + CONTENT_TABLE_CLASS + ' tbody tr');
-        const actualCellWidth = this.workCells[0].getBoundingClientRect().width;
+        const actualCellWidth = getElementWidth(this.workCells[0]);
         this.cellWidth = actualCellWidth / +(this.workCells[0].getAttribute('colspan') || 1);
         const currentPercentage = (actualCellWidth * tr.children.length) / (conWidth / 100);
         const apps = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CLASS));
@@ -8833,7 +8864,7 @@ class InlineEdit {
             const allDayElements = [].slice.call(this.parent.element.querySelectorAll('.' + ALLDAY_APPOINTMENT_CLASS));
             let allDayLevel = 0;
             if (allDayElements.length > 0) {
-                allDayLevel = Math.floor(this.parent.element.querySelector('.' + ALLDAY_ROW_CLASS).getBoundingClientRect().height /
+                allDayLevel = Math.floor(getElementHeight(this.parent.element.querySelector('.' + ALLDAY_ROW_CLASS)) /
                     allDayElements[0].offsetHeight) - 1;
             }
             verticalEvent.allDayLevel = allDayLevel;
@@ -10402,6 +10433,17 @@ class QuickPopups {
                 instance.destroy();
             }
         }
+        if (popupName === 'quickPopup') {
+            const input = popup.element.querySelector('input.' + SUBJECT_CLASS);
+            if (input) {
+                input.remove();
+            }
+            const form = this.quickPopup.element.querySelector('form.' + FORM_CLASS);
+            if (form) {
+                removeChildren(form);
+                form.remove();
+            }
+        }
     }
     refreshQuickDialog() {
         this.destroyQuickDialog();
@@ -13711,6 +13753,10 @@ class VirtualScroll {
             this.renderedLength = conTable.querySelector('tbody').children.length;
             virtual.style.height = (conTable.offsetHeight + (this.parent.resourceBase.expandedResources.length - (this.renderedLength)) *
                 conTable.offsetHeight / this.renderedLength) + 'px';
+            const conWrap = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
+            if ((conWrap.scrollHeight - conWrap.scrollTop) < conWrap.offsetHeight * this.bufferCount) {
+                virtual.style.height = parseInt(virtual.style.height) + (conWrap.offsetHeight * this.bufferCount) + 'px';
+            }
         }
         else {
             virtual.style.height = '';
@@ -14135,15 +14181,21 @@ class Render {
                 break;
             case 'TimelineDay':
                 this.parent.activeView = this.parent.timelineViewsModule;
-                this.parent.activeView.viewClass = 'e-timeline-day-view';
+                if (!isNullOrUndefined(this.parent.activeView)) {
+                    this.parent.activeView.viewClass = 'e-timeline-day-view';
+                }
                 break;
             case 'TimelineWorkWeek':
                 this.parent.activeView = this.parent.timelineViewsModule;
-                this.parent.activeView.viewClass = 'e-timeline-work-week-view';
+                if (!isNullOrUndefined(this.parent.activeView)) {
+                    this.parent.activeView.viewClass = 'e-timeline-work-week-view';
+                }
                 break;
             case 'TimelineWeek':
                 this.parent.activeView = this.parent.timelineViewsModule;
-                this.parent.activeView.viewClass = 'e-timeline-week-view';
+                if (!isNullOrUndefined(this.parent.activeView)) {
+                    this.parent.activeView.viewClass = 'e-timeline-week-view';
+                }
                 break;
             case 'TimelineMonth':
                 this.parent.activeView = this.parent.timelineMonthModule;
@@ -14160,6 +14212,8 @@ class Render {
                     this.parent.headerModule.updateActiveView();
                     this.parent.headerModule.setCalendarView();
                 }
+                console.warn('[WARNING] :: Module "' + viewName + '" is not available in Schedule component!' +
+                    ' You either misspelled the module name or forgot to load it.');
                 return this.initializeLayout(firstView);
             }
             throw Error('Inject required modules');
@@ -14337,6 +14391,12 @@ class Crud {
         if (!this.parent.activeView) {
             return;
         }
+        if (this.parent.uiStateValues && this.parent.uiStateValues.isPreventEventRefresh) {
+            this.parent.uiStateValues.isPreventEventRefresh = false;
+            this.parent.refreshEvents(false);
+            this.parent.hideSpinner();
+            return;
+        }
         const start = this.parent.activeView.startDate();
         const end = this.parent.activeView.endDate();
         const dataManager = this.parent.dataModule.getData(this.parent.dataModule.generateQuery(start, end));
@@ -18400,9 +18460,13 @@ let Schedule = class Schedule extends Component {
      *
      * @function setResourceCollections
      * @param {ResourcesModel[]} resourceCol Accepts the resource collections in ResourcesModel type
+     * @param {boolean} isEventDataRefresh Accepts the boolean to refresh the appointment data source from remote or local
      * @returns {void}
      */
-    setResourceCollections(resourceCol) {
+    setResourceCollections(resourceCol, isEventDataRefresh = true) {
+        if (!isEventDataRefresh && this.uiStateValues) {
+            this.uiStateValues.isPreventEventRefresh = true;
+        }
         this.setProperties({ resources: resourceCol }, false);
     }
     /**
@@ -18522,6 +18586,8 @@ let Schedule = class Schedule extends Component {
             this.iCalendarExportModule.initializeCalendarExport(fileName, customData);
         }
         else {
+            console.warn('[WARNING] :: Module "ICalendarExport" is not available in Schedule component!' +
+                ' You either misspelled the module name or forgot to load it.');
             throw Error('Inject ICalendarExport module');
         }
     }
@@ -18538,6 +18604,8 @@ let Schedule = class Schedule extends Component {
             this.iCalendarImportModule.initializeCalendarImport(fileContent);
         }
         else {
+            console.warn('[WARNING] :: Module "ICalendarImport" is not available in Schedule component!' +
+                ' You either misspelled the module name or forgot to load it.');
             throw Error('Inject ICalendarImport module');
         }
     }
@@ -18583,6 +18651,8 @@ let Schedule = class Schedule extends Component {
             this.excelExportModule.initializeExcelExport(excelExportOptions);
         }
         else {
+            console.warn('[WARNING] :: Module "ExcelExport" is not available in Schedule component!' +
+                ' You either misspelled the module name or forgot to load it.');
             throw Error('Inject ExcelExport module');
         }
     }
@@ -18599,6 +18669,8 @@ let Schedule = class Schedule extends Component {
             this.printModule.print(printOptions);
         }
         else {
+            console.warn('[WARNING] :: Module "Print" is not available in Schedule component!' +
+                ' You either misspelled the module name or forgot to load it.');
             throw Error('Inject Print module');
         }
     }
@@ -18881,6 +18953,8 @@ let Schedule = class Schedule extends Component {
     }
     /**
      * To check whether the given time range slots are available for event creation or already occupied by other events.
+     * This method currently focuses on validating appointments within the current view date range.
+     * However, it does not extend this availability check to recurrence occurrences outside of the current date range.
      *
      * @function isSlotAvailable
      * @param {Date | Object} startTime Denotes the start time of the slot.
@@ -19947,9 +20021,9 @@ class Resize extends ActionBase {
                 bottom: resizeTarget.classList.contains(BOTTOM_RESIZE_HANDLER)
             };
             this.actionObj.groupIndex = this.parent.uiStateValues.isGroupAdaptive ? this.parent.uiStateValues.groupIndex : 0;
-            const workCell = this.parent.element.querySelector('.' + WORK_CELLS_CLASS).getBoundingClientRect();
-            this.actionObj.cellWidth = workCell.width;
-            this.actionObj.cellHeight = workCell.height;
+            const workCell = this.parent.element.querySelector('.' + WORK_CELLS_CLASS);
+            this.actionObj.cellWidth = getElementWidth(workCell);
+            this.actionObj.cellHeight = getElementHeight(workCell);
             const hRows = this.parent.activeViewOptions.headerRows.map((row) => row.option);
             if (this.parent.activeView.isTimelineView() && hRows.length > 0 && ['Date', 'Hour'].indexOf(hRows.slice(-1)[0]) < 0) {
                 const tr = this.parent.getContentTable().querySelector('tr');
@@ -20243,9 +20317,9 @@ class Resize extends ActionBase {
                     parseInt(this.actionObj.clone.style.left, 10);
                 offsetValue = Math.round(offsetValue / this.actionObj.cellWidth) * this.actionObj.cellWidth;
                 if (!isLeft) {
-                    offsetValue += (this.actionObj.clone.getBoundingClientRect().width - this.actionObj.cellWidth);
+                    offsetValue += (getElementWidth(this.actionObj.clone) - this.actionObj.cellWidth);
                 }
-                cellIndex = Math.floor(offsetValue / Math.floor(tr.getBoundingClientRect().width / noOfDays));
+                cellIndex = Math.floor(offsetValue / Math.floor(getElementWidth(tr) / noOfDays));
                 isDateHeader = isTimeViews && headerName === 'Date';
                 cellIndex = isLeft ? cellIndex : isTimelineMonth ? cellIndex + 1 : cellIndex;
                 isLastCell = cellIndex === tdCollections.length;
@@ -20254,7 +20328,7 @@ class Resize extends ActionBase {
             else {
                 const cellWidth = this.actionObj.cellWidth;
                 cellIndex = isLeft ? Math.floor(offset / this.actionObj.cellWidth) :
-                    Math.ceil((offset + (this.actionObj.clone.getBoundingClientRect().width - cellWidth)) / this.actionObj.cellWidth);
+                    Math.ceil((offset + (getElementWidth(this.actionObj.clone) - cellWidth)) / this.actionObj.cellWidth);
                 if (this.parent.enableRtl) {
                     let cellOffsetWidth = 0;
                     if (headerName === 'TimelineMonth' || (!this.parent.activeViewOptions.timeScale.enable &&
@@ -20262,7 +20336,7 @@ class Resize extends ActionBase {
                         cellOffsetWidth = this.actionObj.cellWidth;
                     }
                     const offsetWidth = (Math.floor(offset / this.actionObj.cellWidth) *
-                        this.actionObj.cellWidth) + (isLeft ? 0 : this.actionObj.clone.getBoundingClientRect().width - cellOffsetWidth);
+                        this.actionObj.cellWidth) + (isLeft ? 0 : getElementWidth(this.actionObj.clone) - cellOffsetWidth);
                     cellIndex = Math.floor(offsetWidth / this.actionObj.cellWidth);
                 }
                 isLastCell = cellIndex === tdCollections.length;
@@ -20281,7 +20355,7 @@ class Resize extends ActionBase {
             }
             else {
                 if (!isLeft) {
-                    offset += this.actionObj.clone.getBoundingClientRect().width;
+                    offset += getElementWidth(this.actionObj.clone);
                 }
                 let spanMinutes = Math.ceil((this.actionObj.slotInterval / this.actionObj.cellWidth) *
                     (offset - Math.floor(offset / this.actionObj.cellWidth) * this.actionObj.cellWidth));
@@ -20293,9 +20367,9 @@ class Resize extends ActionBase {
         }
         else {
             const cloneIndex = closest(this.actionObj.clone, 'td').cellIndex;
-            const originalWidth = Math.ceil((isLeft ? this.actionObj.element.getBoundingClientRect().width : 0) /
+            const originalWidth = Math.ceil((isLeft ? getElementWidth(this.actionObj.element) : 0) /
                 this.actionObj.cellWidth) * this.actionObj.cellWidth;
-            const noOfDays = Math.ceil((this.actionObj.clone.getBoundingClientRect().width - originalWidth) /
+            const noOfDays = Math.ceil((getElementWidth(this.actionObj.clone) - originalWidth) /
                 this.actionObj.cellWidth);
             const tr = closest(this.actionObj.clone, 'tr');
             let dayIndex = isLeft ? cloneIndex - noOfDays : cloneIndex + noOfDays - 1;
@@ -20358,23 +20432,24 @@ class Resize extends ActionBase {
         const slotInterval = (this.actionObj.cellWidth / this.actionObj.slotInterval) * this.actionObj.interval;
         const pageWidth = isLeft ? (this.actionObj.X - this.actionObj.pageX) : (this.actionObj.pageX - this.actionObj.X);
         const targetWidth = isTimelineView ?
-            (this.actionObj.element.getBoundingClientRect().width / this.actionObj.cellWidth) * this.actionObj.cellWidth :
-            this.parent.currentView === 'Month' ? this.actionObj.element.getBoundingClientRect().width :
-                Math.ceil(this.actionObj.element.getBoundingClientRect().width / this.actionObj.cellWidth) * this.actionObj.cellWidth;
+            (getElementWidth(this.actionObj.element) / this.actionObj.cellWidth) * this.actionObj.cellWidth :
+            this.parent.currentView === 'Month' ? getElementWidth(this.actionObj.element) :
+                Math.ceil(getElementWidth(this.actionObj.element) / this.actionObj.cellWidth) * this.actionObj.cellWidth;
         let offsetWidth = targetWidth + (Math.ceil(pageWidth / this.actionObj.cellWidth) * this.actionObj.cellWidth);
         const left = (this.parent.enableRtl) ? parseInt(this.actionObj.element.style.right, 10) : this.actionObj.clone.offsetLeft;
         if (isTimeViews) {
             offsetWidth = targetWidth + (Math.ceil(pageWidth / slotInterval) * slotInterval);
             if (!isLeft) {
                 const roundedLeft = (+parseFloat(this.actionObj.element.style[this.parent.enableRtl ? 'right' : 'left'])).toFixed(1);
-                if (roundedLeft !== left.toFixed(1)) {
+                const roundedWidth = Math.round(targetWidth / slotInterval) * slotInterval;
+                if (roundedLeft !== left.toFixed(1) || roundedWidth !== targetWidth) {
                     offsetWidth = (Math.round((left + offsetWidth) / slotInterval) * slotInterval) - left;
                 }
             }
             this.actionObj.event[this.parent.eventFields.isAllDay] = false;
         }
         let width = !isLeft && ((offsetWidth + this.actionObj.clone.offsetLeft > this.scrollArgs.width)) ?
-            this.actionObj.clone.getBoundingClientRect().width : (offsetWidth < this.actionObj.cellWidth) ? offsetWidth : offsetWidth;
+            getElementWidth(this.actionObj.clone) : (offsetWidth < this.actionObj.cellWidth) ? offsetWidth : offsetWidth;
         if (this.parent.enableRtl) {
             let rightValue = isTimelineView ? parseInt(this.actionObj.element.style.right, 10) :
                 -(offsetWidth - this.actionObj.cellWidth);
@@ -20388,7 +20463,7 @@ class Resize extends ActionBase {
             }
             rightValue = rightValue >= this.scrollArgs.width ? this.scrollArgs.width - this.actionObj.cellWidth : rightValue;
             styles.right = formatUnit(rightValue);
-            width = width + rightValue > this.scrollArgs.width ? this.actionObj.clone.getBoundingClientRect().width : width;
+            width = width + rightValue > this.scrollArgs.width ? getElementWidth(this.actionObj.clone) : width;
         }
         else {
             let offsetLeft = isLeft ? this.actionObj.element.offsetLeft - (this.actionObj.X - this.actionObj.pageX) :
@@ -20396,12 +20471,12 @@ class Resize extends ActionBase {
             if (isTimelineView) {
                 offsetLeft = isLeft ? offsetLeft : parseInt(this.actionObj.clone.style.left, 10);
                 if (this.parent.enableRtl) {
-                    offsetLeft = !isLeft ? (this.actionObj.pageX < this.actionObj.X - this.actionObj.clone.getBoundingClientRect().width)
+                    offsetLeft = !isLeft ? (this.actionObj.pageX < this.actionObj.X - getElementWidth(this.actionObj.clone))
                         ? parseInt(this.actionObj.clone.style.right, 10) : offsetLeft : offsetLeft;
                 }
                 else {
-                    offsetLeft = isLeft ? (this.actionObj.pageX > this.actionObj.X + this.actionObj.clone.getBoundingClientRect().width &&
-                        this.actionObj.clone.getBoundingClientRect().width === this.actionObj.cellWidth) ?
+                    offsetLeft = isLeft ? (this.actionObj.pageX > this.actionObj.X + getElementWidth(this.actionObj.clone) &&
+                        getElementWidth(this.actionObj.clone) === this.actionObj.cellWidth) ?
                         parseInt(this.actionObj.clone.style.left, 10) : offsetLeft : offsetLeft;
                 }
             }
@@ -20417,10 +20492,10 @@ class Resize extends ActionBase {
                 }
                 else {
                     offsetLeft = 0;
-                    width = this.actionObj.clone.getBoundingClientRect().width;
+                    width = getElementWidth(this.actionObj.clone);
                 }
             }
-            const cloneWidth = Math.ceil(this.actionObj.clone.getBoundingClientRect().width / this.actionObj.cellWidth) *
+            const cloneWidth = Math.ceil(getElementWidth(this.actionObj.clone) / this.actionObj.cellWidth) *
                 this.actionObj.cellWidth;
             if (isLeft) {
                 styles.left = formatUnit(isTimelineView ? offsetLeft : isLeft ? leftValue < 0 ? -offsetLeft :
@@ -20533,7 +20608,7 @@ class YearEvent extends TimelineEvent {
     }
     timelineYearViewEvents() {
         const workCell = this.parent.element.querySelector('.' + WORK_CELLS_CLASS + ':not(.' + OTHERMONTH_CLASS + ')');
-        this.cellWidth = this.parent.eventBase.getCellWidth(workCell);
+        this.cellWidth = getElementWidth(workCell);
         this.cellHeader = getOuterHeight(workCell.querySelector('.' + DATE_HEADER_CLASS));
         const eventTable = this.parent.element.querySelector('.' + EVENT_TABLE_CLASS);
         this.eventHeight = getElementHeightFromClass(eventTable, APPOINTMENT_CLASS);
@@ -20682,7 +20757,7 @@ class YearEvent extends TimelineEvent {
         const contentTable = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
         const isVerticalScrollbarAvail = contentTable.offsetWidth > contentTable.clientWidth;
         const workCell = this.parent.element.querySelector('.' + WORK_CELLS_CLASS);
-        this.cellWidth = workCell.getBoundingClientRect().width;
+        this.cellWidth = getElementWidth(workCell);
         this.cellHeader = 0;
         const eventTable = this.parent.element.querySelector('.' + EVENT_TABLE_CLASS);
         this.eventHeight = getElementHeightFromClass(eventTable, APPOINTMENT_CLASS);
@@ -20727,7 +20802,7 @@ class YearEvent extends TimelineEvent {
                 appWrapper.forEach((appWrap, cellIndex) => {
                     const td = row.querySelector(`td:nth-child(${cellIndex + 1})`);
                     const app = [].slice.call(appWrap.children);
-                    const width = td.getBoundingClientRect().width;
+                    const width = getElementWidth(td);
                     const left = td.offsetLeft;
                     if (this.parent.enableRtl) {
                         const right = conTable.offsetWidth - left - td.offsetWidth;
@@ -21451,7 +21526,7 @@ class DragAndDrop extends ActionBase {
             this.timelineEventModule.cellWidth = this.actionObj.cellWidth;
             this.timelineEventModule.getSlotDates();
             this.actionObj.cellWidth = this.isHeaderRows ? this.timelineEventModule.cellWidth :
-                this.parent.element.querySelector('.' + WORK_CELLS_CLASS).getBoundingClientRect().width;
+                getElementWidth(this.parent.element.querySelector('.' + WORK_CELLS_CLASS));
             this.calculateTimelineTime(e);
         }
         else {
@@ -22263,7 +22338,7 @@ class DragAndDrop extends ActionBase {
             ~~(dragArea.querySelector('table').offsetHeight / trCollection.length) : this.actionObj.cellHeight;
         let rowIndex = Math.floor(Math.floor((this.actionObj.Y +
             (dragArea.scrollTop - translateY - (window.scrollY || window.pageYOffset))) -
-            dragArea.getBoundingClientRect().top) / rowHeight);
+            getElementTop(dragArea)) / rowHeight);
         rowIndex = (rowIndex < 0) ? 0 : (rowIndex > trCollection.length - 1) ? trCollection.length - 1 : rowIndex;
         this.actionObj.index = rowIndex;
         const eventContainer = this.parent.element.querySelectorAll('.e-appointment-container:not(.e-hidden)').item(rowIndex);
@@ -22279,7 +22354,7 @@ class DragAndDrop extends ActionBase {
         if (!isNullOrUndefined(this.parent.eventDragArea)) {
             return;
         }
-        let top = trCollection[parseInt(rowIndex.toString(), 10)].getBoundingClientRect().height * rowIndex;
+        let top = getElementHeight(trCollection[parseInt(rowIndex.toString(), 10)]) * rowIndex;
         if (this.parent.rowAutoHeight) {
             const cursorElement = this.getCursorElement(e);
             if (cursorElement) {
@@ -22792,7 +22867,7 @@ class ViewBase {
         if (this.isTimelineView()) {
             const colElements = this.getColElements();
             const contentBody = this.element.querySelector('.' + CONTENT_TABLE_CLASS + ' tbody');
-            const colWidth = (contentBody.getBoundingClientRect().width / (colElements.length / 2));
+            const colWidth = (getElementWidth(contentBody) / (colElements.length / 2));
             if (content.offsetHeight !== content.clientHeight) {
                 const resourceColumn = this.parent.element.querySelector('.' + RESOURCE_COLUMN_WRAP_CLASS);
                 if (!isNullOrUndefined(resourceColumn)) {
@@ -23273,7 +23348,7 @@ class VerticalView extends ViewBase {
             this.parent.activeViewOptions.timeScale.interval;
     }
     getWorkCellHeight() {
-        return parseFloat(this.element.querySelector('.' + WORK_CELLS_CLASS).getBoundingClientRect().height.toFixed(2));
+        return parseFloat(getElementHeight(this.element.querySelector('.' + WORK_CELLS_CLASS)).toFixed(2));
     }
     getTdContent(date, type, groupIndex) {
         let cntEle;
@@ -23660,7 +23735,7 @@ class VerticalView extends ViewBase {
         const msStartHour = startHour.getTime();
         const msEndHour = endHour.getTime();
         if (msStartHour !== msEndHour) {
-            let milliSeconds = (startHour.getTimezoneOffset() !== endHour.getTimezoneOffset()) ?
+            const milliSeconds = (startHour.getTimezoneOffset() !== endHour.getTimezoneOffset()) ?
                 (msEndHour - msStartHour) - 3600000 : (msEndHour - msStartHour);
             length = Math.round(milliSeconds / msInterval);
         }
@@ -26059,7 +26134,7 @@ class TimelineViews extends VerticalView {
         }
         let scrollLeft;
         if (isNullOrUndefined(hour) || !this.parent.activeViewOptions.timeScale.enable) {
-            scrollLeft = index * this.getWorkCellWidth();
+            scrollLeft = index * getElementWidth(this.element.querySelector('.e-work-cells'));
         }
         else {
             scrollLeft = isNullOrUndefined(scrollDate) ? this.getLeftFromDateTime(null, date) :
@@ -26143,7 +26218,7 @@ class TimelineViews extends VerticalView {
                 if (this.parent.activeView.colLevels[parseInt(index.toString(), 10)] &&
                     this.parent.activeView.colLevels[parseInt(index.toString(), 10)][0].colSpan) {
                     diffInDates = currentDateIndex[0] * this.parent.activeView.colLevels[parseInt(index.toString(), 10)][0].colSpan *
-                        this.getWorkCellWidth();
+                        getElementWidth(this.element.querySelector('.e-work-cells'));
                 }
                 else {
                     const endHour = this.getEndHour();
@@ -26153,12 +26228,9 @@ class TimelineViews extends VerticalView {
                 }
             }
         }
-        return diffInDates + ((diffInMinutes * this.getWorkCellWidth() * this.parent.activeViewOptions.timeScale.slotCount) /
+        return diffInDates + ((diffInMinutes * getElementWidth(this.element.querySelector('.e-work-cells')) * this.parent.activeViewOptions.timeScale.slotCount) /
             this.parent.activeViewOptions.timeScale.interval);
     }
-    getWorkCellWidth() {
-        return this.element.querySelector('.e-work-cells').getBoundingClientRect().width;
-    }
     renderHeader() {
         const tr = createElement('tr');
         if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
@@ -27533,5 +27605,5 @@ class Print {
  * Export Schedule components
  */
 
-export { Schedule, cellClick, cellDoubleClick, moreEventsClick, select, hover, actionBegin, actionComplete, actionFailure, navigating, renderCell, eventClick, eventDoubleClick, eventRendered, dataBinding, dataBound, popupOpen, popupClose, dragStart, drag, dragStop, resizeStart, resizing, resizeStop, inlineClick, cellSelect, virtualScrollStart, virtualScrollStop, initialLoad, initialEnd, print$1 as print, dataReady, eventsLoaded, contentReady, scroll, virtualScroll, scrollUiUpdate, uiUpdate, documentClick, cellMouseDown, WEEK_LENGTH, DEFAULT_WEEKS, MS_PER_DAY, MS_PER_MINUTE, getElementHeightFromClass, getElementWidthFromClass, getTranslateY, getTranslateX, getWeekFirstDate, getWeekLastDate, firstDateOfMonth, lastDateOfMonth, getWeekNumber, getWeekMiddleDate, setTime, resetTime, getDateInMs, getDateCount, addDays, addMonths, addYears, getStartEndHours, getMaxDays, getDaysCount, getDateFromString, getScrollBarWidth, resetScrollbarWidth, findIndexInData, getOuterHeight, removeChildren, isDaylightSavingTime, getUniversalTime, isMobile, isIPadDevice, capitalizeFirstWord, Resize, DragAndDrop, HeaderRenderer, ViewBase, Day, Week, WorkWeek, Month, Year, Agenda, MonthAgenda, TimelineViews, TimelineMonth, TimelineYear, Timezone, timezoneData, ICalendarExport, ICalendarImport, ExcelExport, Print, RecurrenceEditor, generateSummary, generate, getDateFromRecurrenceDateString, extractObjectFromRule, getCalendarUtil, getRecurrenceStringFromDate, Gregorian, Islamic };
+export { Schedule, cellClick, cellDoubleClick, moreEventsClick, select, hover, actionBegin, actionComplete, actionFailure, navigating, renderCell, eventClick, eventDoubleClick, eventRendered, dataBinding, dataBound, popupOpen, popupClose, dragStart, drag, dragStop, resizeStart, resizing, resizeStop, inlineClick, cellSelect, virtualScrollStart, virtualScrollStop, initialLoad, initialEnd, print$1 as print, dataReady, eventsLoaded, contentReady, scroll, virtualScroll, scrollUiUpdate, uiUpdate, documentClick, cellMouseDown, WEEK_LENGTH, DEFAULT_WEEKS, MS_PER_DAY, MS_PER_MINUTE, getElementHeightFromClass, getElementWidthFromClass, getTranslateY, getTranslateX, getWeekFirstDate, getWeekLastDate, firstDateOfMonth, lastDateOfMonth, getWeekNumber, getWeekMiddleDate, setTime, resetTime, getDateInMs, getDateCount, addDays, addMonths, addYears, getStartEndHours, getMaxDays, getDaysCount, getDateFromString, getScrollBarWidth, resetScrollbarWidth, findIndexInData, getOuterHeight, removeChildren, isDaylightSavingTime, getUniversalTime, isMobile, isIPadDevice, capitalizeFirstWord, getElementWidth, getElementHeight, getElementTop, Resize, DragAndDrop, HeaderRenderer, ViewBase, Day, Week, WorkWeek, Month, Year, Agenda, MonthAgenda, TimelineViews, TimelineMonth, TimelineYear, Timezone, timezoneData, ICalendarExport, ICalendarImport, ExcelExport, Print, RecurrenceEditor, generateSummary, generate, getDateFromRecurrenceDateString, extractObjectFromRule, getCalendarUtil, getRecurrenceStringFromDate, Gregorian, Islamic };
 //# sourceMappingURL=ej2-schedule.es2015.js.map