@syncfusion/ej2-schedule 19.4.38 → 19.4.43

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

@@ -514,6 +514,12 @@ const DATE_HEADER_CONTAINER_CLASS = 'e-date-header-container';
 /** @private */
 const HEADER_CELLS_CLASS = 'e-header-cells';
 /** @private */
+const HEADER_WEEK_CELLS_CLASS = 'e-header-week-cell';
+/** @private */
+const HEADER_MONTH_CELLS_CLASS = 'e-header-month-cell';
+/** @private */
+const HEADER_YEAR_CELLS_CLASS = 'e-header-year-cell';
+/** @private */
 const WORKDAY_CLASS = 'e-work-days';
 /** @private */
 const OTHERMONTH_CLASS = 'e-other-month';
@@ -1286,6 +1292,7 @@ class HeaderRenderer {
         const strClass = args.item.cssClass.replace('e-views ', '');
         let data;
         let isSameTime;
+        let currentTime;
         switch (strClass) {
             case 'e-date-range':
                 if (!this.headerPopup) {
@@ -1335,8 +1342,8 @@ class HeaderRenderer {
                 this.parent.changeView('TimelineYear', args.originalEvent, undefined, this.calculateViewIndex(args));
                 break;
             case 'e-today':
-                const currentTime = resetTime(this.parent.getCurrentTime());
-                if (this.parent.currentView === 'Agenda' || !this.parent.isSelectedDate(currentTime) ||
+                currentTime = resetTime(this.parent.getCurrentTime());
+                if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda' || !this.parent.isSelectedDate(currentTime) ||
                     this.parent.currentView === 'Month' && this.parent.activeViewOptions.displayDate && !this.hasSelectedDate() &&
                         resetTime(this.parent.activeViewOptions.displayDate) !== currentTime || this.parent.currentView === 'Month' &&
                     this.parent.activeViewOptions.numberOfWeeks > 0 && !this.hasSelectedDate()
@@ -6202,7 +6209,7 @@ class EventBase {
             eventObj[this.parent.eventFields.endTime].getTime() < schedule.endHour.getTime() && start.getTime() === end.getTime();
         return isHourRange || isSameRange;
     }
-    allDayExpandScroll(dateHeader, heightPropChanged) {
+    allDayExpandScroll(dateHeader) {
         let indentHeight = 0;
         const headerRows = [].slice.call(this.parent.element.querySelectorAll('.' + HEADER_ROW_CLASS));
         headerRows.forEach((element) => {
@@ -6212,8 +6219,7 @@ class EventBase {
         });
         indentHeight = dateHeader.offsetHeight - indentHeight;
         this.parent.element.querySelector('.' + ALLDAY_CELLS_CLASS).style.height = (indentHeight / 12) + 'em';
-        const content = this.parent.element.querySelector('.' + CONTENT_WRAP_CLASS);
-        if (this.parent.uiStateValues.expand && (content.offsetWidth - content.clientWidth > 0 || heightPropChanged || this.parent.element.classList.contains(DEVICE_CLASS))) {
+        if (this.parent.uiStateValues.expand) {
             addClass([dateHeader], ALLDAY_APPOINTMENT_SCROLL);
         }
         else {
@@ -7179,7 +7185,8 @@ class MonthEvent extends EventBase {
                 setStyleAttribute(cell, { 'height': height + 'px' });
             });
         }
-        const cellDetail = this.workCells.slice(-1)[0].getBoundingClientRect();
+        const cellDetail = this.workCells[this.parent.activeView.isTimelineView() ?
+            0 : this.workCells.length - 1].getBoundingClientRect();
         this.cellWidth = cellDetail.width;
         this.cellHeight = cellDetail.height;
         this.dateRender = dateRender;
@@ -13066,7 +13073,12 @@ class Render {
     }
     initializeLayout(viewName) {
         if (this.parent.activeView) {
-            this.parent.resetTemplates();
+            const templates = [
+                'cellTemplate', 'eventTemplate', 'tooltipTemplate', 'majorSlotTemplate', 'minorSlotTemplate',
+                'headerTooltipTemplate', 'dateHeaderTemplate', 'dayHeaderTemplate', 'mothHeaderTemplate',
+                'headerIndentTemplate', 'resourceHeaderTemplate', 'cellHeaderTemplate'
+            ];
+            this.parent.resetTemplates(templates);
             this.parent.activeView.removeEventListener();
             this.parent.activeView.destroy();
         }
@@ -16591,7 +16603,7 @@ let Schedule = class Schedule extends Component {
             if (dateHeader.classList.contains(ALLDAY_APPOINTMENT_AUTO)) {
                 removeClass([dateHeader], ALLDAY_APPOINTMENT_AUTO);
             }
-            this.eventBase.allDayExpandScroll(dateHeader, true);
+            this.eventBase.allDayExpandScroll(dateHeader);
         }
         if (!this.uiStateValues.expand) {
             allDayRow.style.height = '';
@@ -18400,9 +18412,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);
-            this.actionObj.cellWidth = workCell.offsetWidth;
-            this.actionObj.cellHeight = workCell.offsetHeight;
+            const workCell = this.parent.element.querySelector('.' + WORK_CELLS_CLASS).getBoundingClientRect();
+            this.actionObj.cellWidth = workCell.width;
+            this.actionObj.cellHeight = workCell.height;
             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');
@@ -18411,8 +18423,9 @@ class Resize extends ActionBase {
                 for (const td of tdCollections) {
                     noOfDays += parseInt(td.getAttribute('colspan'), 10);
                 }
-                this.actionObj.cellWidth = tr.offsetWidth / noOfDays;
-                this.actionObj.cellHeight = tr.offsetHeight;
+                const trRect = tr.getBoundingClientRect();
+                this.actionObj.cellWidth = trRect.width / noOfDays;
+                this.actionObj.cellHeight = trRect.height;
             }
             const pages = this.getPageCoordinates(e);
             this.actionObj.X = pages.pageX;
@@ -18657,12 +18670,12 @@ class Resize extends ActionBase {
         const eventEnd = new Date(this.actionObj.event[this.parent.eventFields.endTime].getTime());
         let resizeTime;
         let isDateHeader = false;
+        let headerName = this.parent.currentView;
         const isTimeViews = ['TimelineDay', 'TimelineWeek', 'TimelineWorkWeek'].indexOf(this.parent.currentView) > -1;
         const isTimelineMonth = this.parent.currentView === 'TimelineMonth';
         const isWithoutScale = isTimelineMonth || isTimeViews && !this.parent.activeViewOptions.timeScale.enable;
         if (this.parent.activeView.isTimelineView()) {
             const tr = this.parent.getContentTable().querySelector('tr');
-            let headerName = this.parent.currentView;
             if (this.parent.activeViewOptions.headerRows.length > 0) {
                 const rows = this.parent.activeViewOptions.headerRows.map((row) => row.option);
                 headerName = rows.slice(-1)[0];
@@ -18674,6 +18687,11 @@ class Resize extends ActionBase {
             let cellIndex = 0;
             const tdCollections = [].slice.call(tr.children);
             let isLastCell = false;
+            const pixelsPerMinute = this.actionObj.cellWidth / (this.parent.activeViewOptions.timeScale.interval /
+                this.parent.activeViewOptions.timeScale.slotCount);
+            let offset = parseFloat(this.parent.enableRtl ? this.actionObj.clone.style.right :
+                this.actionObj.clone.style.left);
+            offset = Math.round(offset / pixelsPerMinute) * pixelsPerMinute;
             if (['Year', 'Month', 'Week', 'Date'].indexOf(headerName) !== -1) {
                 let noOfDays = 0;
                 for (const td of tdCollections) {
@@ -18681,28 +18699,28 @@ class Resize extends ActionBase {
                 }
                 let offsetValue = this.parent.enableRtl ? parseInt(this.actionObj.clone.style.right, 10) :
                     parseInt(this.actionObj.clone.style.left, 10);
+                offsetValue = Math.round(offsetValue / this.actionObj.cellWidth) * this.actionObj.cellWidth;
                 if (!isLeft) {
-                    offsetValue += (this.actionObj.clone.offsetWidth - this.actionObj.cellWidth);
+                    offsetValue += (this.actionObj.clone.getBoundingClientRect().width - this.actionObj.cellWidth);
                 }
-                cellIndex = Math.floor(offsetValue / Math.floor(tr.offsetWidth / noOfDays));
+                cellIndex = Math.floor(offsetValue / Math.floor(tr.getBoundingClientRect().width / noOfDays));
                 isDateHeader = isTimeViews && headerName === 'Date';
-                cellIndex = isLeft ? cellIndex : (isTimelineMonth || isDateHeader) ? cellIndex + 1 : cellIndex;
+                cellIndex = isLeft ? cellIndex : isTimelineMonth ? cellIndex + 1 : cellIndex;
                 isLastCell = cellIndex === tdCollections.length;
                 cellIndex = (cellIndex < 0) ? 0 : (cellIndex >= noOfDays) ? noOfDays - 1 : cellIndex;
             }
             else {
                 const cellWidth = this.actionObj.cellWidth;
-                cellIndex = isLeft ? Math.floor(this.actionObj.clone.offsetLeft / this.actionObj.cellWidth) :
-                    Math.ceil((this.actionObj.clone.offsetLeft + (this.actionObj.clone.offsetWidth - cellWidth)) /
-                        this.actionObj.cellWidth);
+                cellIndex = isLeft ? Math.floor(offset / this.actionObj.cellWidth) :
+                    Math.ceil((offset + (this.actionObj.clone.getBoundingClientRect().width - cellWidth)) / this.actionObj.cellWidth);
                 if (this.parent.enableRtl) {
                     let cellOffsetWidth = 0;
                     if (headerName === 'TimelineMonth' || (!this.parent.activeViewOptions.timeScale.enable &&
                         !isTimelineMonth)) {
                         cellOffsetWidth = this.actionObj.cellWidth;
                     }
-                    const offsetWidth = (Math.floor(parseInt(this.actionObj.clone.style.right, 10) / this.actionObj.cellWidth) *
-                        this.actionObj.cellWidth) + (isLeft ? 0 : this.actionObj.clone.offsetWidth - cellOffsetWidth);
+                    const offsetWidth = (Math.floor(offset / this.actionObj.cellWidth) *
+                        this.actionObj.cellWidth) + (isLeft ? 0 : this.actionObj.clone.getBoundingClientRect().width - cellOffsetWidth);
                     cellIndex = Math.floor(offsetWidth / this.actionObj.cellWidth);
                 }
                 isLastCell = cellIndex === tdCollections.length;
@@ -18720,13 +18738,11 @@ class Resize extends ActionBase {
                 resizeTime = new Date(resizeDate.setHours(resizeTime.getHours(), resizeTime.getMinutes(), resizeTime.getSeconds()));
             }
             else {
-                let offsetValue = this.parent.enableRtl ? parseFloat(this.actionObj.clone.style.right) :
-                    parseFloat(this.actionObj.clone.style.left);
                 if (!isLeft) {
-                    offsetValue += this.actionObj.clone.offsetWidth;
+                    offset += this.actionObj.clone.getBoundingClientRect().width;
                 }
                 let spanMinutes = Math.ceil((this.actionObj.slotInterval / this.actionObj.cellWidth) *
-                    (offsetValue - Math.floor(offsetValue / this.actionObj.cellWidth) * this.actionObj.cellWidth));
+                    (offset - Math.floor(offset / this.actionObj.cellWidth) * this.actionObj.cellWidth));
                 spanMinutes = (isLastCell || (!isLeft && spanMinutes === 0)) ? this.actionObj.slotInterval : spanMinutes;
                 resizeTime = new Date(resizeDate.getTime());
                 resizeTime.setMinutes(resizeTime.getMinutes() + spanMinutes);
@@ -18735,9 +18751,10 @@ class Resize extends ActionBase {
         }
         else {
             const cloneIndex = closest(this.actionObj.clone, 'td').cellIndex;
-            const originalWidth = Math.ceil((isLeft ? this.actionObj.element.offsetWidth : 0) / this.actionObj.cellWidth) *
-                this.actionObj.cellWidth;
-            const noOfDays = Math.ceil((this.actionObj.clone.offsetWidth - originalWidth) / this.actionObj.cellWidth);
+            const originalWidth = Math.ceil((isLeft ? this.actionObj.element.getBoundingClientRect().width : 0) /
+                this.actionObj.cellWidth) * this.actionObj.cellWidth;
+            const noOfDays = Math.ceil((this.actionObj.clone.getBoundingClientRect().width - originalWidth) /
+                this.actionObj.cellWidth);
             const tr = closest(this.actionObj.clone, 'tr');
             let dayIndex = isLeft ? cloneIndex - noOfDays : cloneIndex + noOfDays - 1;
             dayIndex = this.getIndex(dayIndex);
@@ -18757,8 +18774,8 @@ class Resize extends ActionBase {
         }
         else {
             const isTimeScaleViews = isTimeViews && this.parent.activeViewOptions.timeScale.enable;
-            let resizeEnd = ((!isTimeScaleViews || isDateHeader) && resizeTime.getHours() === 0 && resizeTime.getMinutes() === 0) ?
-                addDays(resizeTime, 1) : resizeTime;
+            let resizeEnd = ((!isTimeScaleViews || isDateHeader || isTimeViews && ['Week', 'Month', 'Year'].indexOf(headerName) > -1)
+                && resizeTime.getHours() === 0 && resizeTime.getMinutes() === 0) ? addDays(resizeTime, 1) : resizeTime;
             if (isWithoutScale && (resizeEnd.getTime() - eventStart.getTime()) <= 0) {
                 resizeEnd = addDays(resetTime(eventStart), 1);
             }
@@ -18795,29 +18812,30 @@ 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.offsetWidth / this.actionObj.cellWidth) * this.actionObj.cellWidth :
-            this.parent.currentView === 'Month' ? this.actionObj.element.offsetWidth :
-                Math.ceil(this.actionObj.element.offsetWidth / this.actionObj.cellWidth) * this.actionObj.cellWidth;
+            (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;
         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 + (isLeft ? (Math.ceil(pageWidth / slotInterval) * slotInterval) :
-                (Math.floor(pageWidth / slotInterval) * slotInterval));
+            offsetWidth = targetWidth + (Math.ceil(pageWidth / slotInterval) * slotInterval);
+            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.offsetWidth : (offsetWidth < this.actionObj.cellWidth) ? offsetWidth : offsetWidth;
+            this.actionObj.clone.getBoundingClientRect().width : (offsetWidth < this.actionObj.cellWidth) ? offsetWidth : offsetWidth;
         if (this.parent.enableRtl) {
             let rightValue = isTimelineView ? parseInt(this.actionObj.element.style.right, 10) :
                 -(offsetWidth - this.actionObj.cellWidth);
             rightValue = isTimelineView ? rightValue : isLeft ? 0 : rightValue > 0 ? 0 : rightValue;
             if (isTimelineView && !isLeft) {
-                rightValue = Math.ceil((this.actionObj.element.offsetLeft + (this.actionObj.element.offsetWidth +
+                rightValue = Math.ceil((this.actionObj.element.offsetLeft + (this.actionObj.element.getBoundingClientRect().width +
                     (this.actionObj.pageX - this.actionObj.X))) / slotInterval) * slotInterval;
                 rightValue = rightValue < 0 ? Math.abs(rightValue) : -rightValue;
             }
             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.offsetWidth : width;
+            width = width + rightValue > this.scrollArgs.width ? this.actionObj.clone.getBoundingClientRect().width : width;
         }
         else {
             let offsetLeft = isLeft ? this.actionObj.element.offsetLeft - (this.actionObj.X - this.actionObj.pageX) :
@@ -18825,12 +18843,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.offsetWidth) ?
-                        parseInt(this.actionObj.clone.style.right, 10) : offsetLeft : offsetLeft;
+                    offsetLeft = !isLeft ? (this.actionObj.pageX < this.actionObj.X - this.actionObj.clone.getBoundingClientRect().width)
+                        ? parseInt(this.actionObj.clone.style.right, 10) : offsetLeft : offsetLeft;
                 }
                 else {
-                    offsetLeft = isLeft ? (this.actionObj.pageX > this.actionObj.X + this.actionObj.clone.offsetWidth &&
-                        this.actionObj.clone.offsetWidth === this.actionObj.cellWidth) ?
+                    offsetLeft = isLeft ? (this.actionObj.pageX > this.actionObj.X + this.actionObj.clone.getBoundingClientRect().width &&
+                        this.actionObj.clone.getBoundingClientRect().width === this.actionObj.cellWidth) ?
                         parseInt(this.actionObj.clone.style.left, 10) : offsetLeft : offsetLeft;
                 }
             }
@@ -18840,9 +18858,10 @@ class Resize extends ActionBase {
                 Math.ceil(Math.abs(offsetLeft) / this.actionObj.cellWidth) * this.actionObj.cellWidth;
             if (offsetLeft < 0) {
                 offsetLeft = 0;
-                width = this.actionObj.clone.offsetWidth;
+                width = this.actionObj.clone.getBoundingClientRect().width;
             }
-            const cloneWidth = Math.ceil(this.actionObj.clone.offsetWidth / this.actionObj.cellWidth) * this.actionObj.cellWidth;
+            const cloneWidth = Math.ceil(this.actionObj.clone.getBoundingClientRect().width / this.actionObj.cellWidth) *
+                this.actionObj.cellWidth;
             if (isLeft) {
                 styles.left = formatUnit(isTimelineView ? offsetLeft : isLeft ? leftValue < 0 ? -offsetLeft :
                     (Math.ceil((targetWidth - cloneWidth) / this.actionObj.cellWidth) * this.actionObj.cellWidth) : offsetLeft);
@@ -20406,9 +20425,9 @@ class DragAndDrop extends ActionBase {
         if (this.parent.eventDragArea) {
             const targetDate = this.parent.getDateFromElement(e.target);
             if (!isNullOrUndefined(targetDate)) {
-                if (!this.parent.activeViewOptions.timeScale.enable || (this.parent.currentView == "TimelineMonth")) {
+                if (!this.parent.activeViewOptions.timeScale.enable || (this.parent.currentView === 'TimelineMonth')) {
                     const eventSrt = eventObj[this.parent.eventFields.startTime];
-                    eventStart = new Date(eventStart.setHours(eventSrt.getHours(), eventSrt.getMinutes(), eventSrt.getSeconds()));
+                    eventStart = new Date(targetDate.setHours(eventSrt.getHours(), eventSrt.getMinutes(), eventSrt.getSeconds()));
                 }
                 else {
                     eventStart = targetDate;
@@ -21067,7 +21086,7 @@ class ViewBase {
         if (this.isTimelineView()) {
             const colElements = this.getColElements();
             const contentBody = this.element.querySelector('.' + CONTENT_TABLE_CLASS + ' tbody');
-            const colWidth = Math.ceil(contentBody.offsetWidth / (colElements.length / 2));
+            const colWidth = (contentBody.getBoundingClientRect().width / (colElements.length / 2));
             colElements.forEach((col) => setStyleAttribute(col, { 'width': formatUnit(colWidth) }));
             if (content.offsetHeight !== content.clientHeight) {
                 const resourceColumn = this.parent.element.querySelector('.' + RESOURCE_COLUMN_WRAP_CLASS);
@@ -21075,9 +21094,11 @@ class ViewBase {
                     setStyleAttribute(resourceColumn, { 'height': formatUnit(content.clientHeight) });
                 }
             }
-            const headerCellElements = [].slice.call(this.element.querySelectorAll('.' + HEADER_CELLS_CLASS));
+            const cssClass = `.${HEADER_CELLS_CLASS},.${TIME_SLOT_CLASS},.${HEADER_WEEK_CELLS_CLASS},.${HEADER_MONTH_CELLS_CLASS},.${HEADER_YEAR_CELLS_CLASS}`;
+            const headerCellElements = [].slice.call(this.element.querySelectorAll(cssClass));
             headerCellElements.forEach((ele) => {
-                const headerCellColSpan = parseInt(ele.getAttribute('colspan'), 10);
+                const colSpan = isNullOrUndefined(ele.getAttribute('colspan')) ? '1' : ele.getAttribute('colspan');
+                const headerCellColSpan = parseInt(colSpan, 10);
                 setStyleAttribute(ele, { 'width': formatUnit(colWidth * headerCellColSpan) });
             });
         }
@@ -22477,8 +22498,9 @@ class Month extends ViewBase {
         const dates = this.parent.getCurrentViewDates();
         if (dates && dates.length > 0) {
             const selectedTime = resetTime(this.parent.selectedDate).getTime();
+            const weekFirstDate = getWeekFirstDate(dates[dates.length - 1], this.parent.activeViewOptions.firstDayOfWeek);
             return !(selectedTime >= getWeekFirstDate(dates[0], this.parent.activeViewOptions.firstDayOfWeek).getTime() &&
-                selectedTime <= addDays(getWeekFirstDate(dates[dates.length - 1], this.parent.activeViewOptions.firstDayOfWeek), 6).getTime());
+                selectedTime <= addDays(weekFirstDate, 6).getTime());
         }
         return false;
     }
@@ -24462,7 +24484,7 @@ class TimelineYear extends Year {
                 }
                 else {
                     if (this.parent.monthHeaderTemplate) {
-                        append(this.renderDayMonthHeaderTemplate(date, months[column], 'mothHeaderTemplate'), innerTd);
+                        append(this.renderDayMonthHeaderTemplate(date, months[column], 'monthHeaderTemplate'), innerTd);
                     }
                     else {
                         innerTd.innerHTML = `<span>${this.getMonthName(date)}</span>`;