@syncfusion/ej2-schedule 19.3.55 → 19.4.42

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

@@ -91,6 +91,7 @@ const cellMouseDown = 'cell-mouse-down';
  * Schedule common utilities
  */
 const WEEK_LENGTH = 7;
+const DEFAULT_WEEKS = 6;
 const MS_PER_DAY = 86400000;
 const MS_PER_MINUTE = 60000;
 /**
@@ -513,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';
@@ -1243,8 +1250,10 @@ class HeaderRenderer {
             enableRtl: this.parent.enableRtl
         });
         const calendarView = this.getCalendarView();
+        const isDisplayDate = this.parent.currentView === 'Month' &&
+            !isNullOrUndefined(this.parent.activeViewOptions.displayDate) && !this.hasSelectedDate();
         this.headerCalendar = new Calendar({
-            value: this.parent.selectedDate,
+            value: isDisplayDate ? this.parent.activeViewOptions.displayDate : this.parent.selectedDate,
             min: this.parent.minDate,
             max: this.parent.maxDate,
             firstDayOfWeek: this.parent.activeViewOptions.firstDayOfWeek,
@@ -1283,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) {
@@ -1332,8 +1342,13 @@ class HeaderRenderer {
                 this.parent.changeView('TimelineYear', args.originalEvent, undefined, this.calculateViewIndex(args));
                 break;
             case 'e-today':
-                if (this.parent.currentView === 'Agenda' || !this.parent.isSelectedDate(resetTime(this.parent.getCurrentTime()))) {
-                    this.parent.changeDate(resetTime(this.parent.getCurrentTime()), args.originalEvent);
+                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()
+                    && resetTime(firstDateOfMonth(this.parent.selectedDate)) !== currentTime) {
+                    this.parent.changeDate(currentTime, args.originalEvent);
                 }
                 break;
             case 'e-prev':
@@ -1368,6 +1383,11 @@ class HeaderRenderer {
             toolbarPopUp.ej2_instances[0].hide({ name: 'SlideUp', duration: 100 });
         }
     }
+    hasSelectedDate() {
+        const selectedTime = resetTime(this.parent.selectedDate).getTime();
+        return selectedTime >= this.parent.activeView.getStartDate().getTime() &&
+            selectedTime <= this.parent.activeView.getEndDate().getTime();
+    }
     getHeaderElement() {
         return this.toolbarObj.element;
     }
@@ -1412,9 +1432,11 @@ class HeaderRenderer {
             lastDate = addDays(firstDate, 7 * this.parent.activeViewOptions.interval);
         }
         if (this.parent.currentView === 'Month') {
-            firstDate = firstDateOfMonth(this.parent.selectedDate);
-            const lastMonthFirstDate = addMonths(firstDate, this.parent.activeViewOptions.interval - 1);
-            lastDate = lastDateOfMonth(lastMonthFirstDate);
+            const isCustomMonth = !isNullOrUndefined(this.parent.activeViewOptions.displayDate) ||
+                this.parent.activeViewOptions.numberOfWeeks > 0;
+            firstDate = isCustomMonth ? this.parent.activeView.getStartDate() : firstDateOfMonth(this.parent.selectedDate);
+            lastDate = isCustomMonth ? this.parent.activeView.getEndDate() :
+                lastDateOfMonth(addMonths(firstDate, this.parent.activeViewOptions.interval - 1));
         }
         if (!isNullOrUndefined(prevNavEle)) {
             this.toolbarObj.enableItems(prevNavEle, firstDate > this.parent.minDate);
@@ -1945,6 +1967,9 @@ class KeyboardInteraction {
         }
         const queryStr = '.' + WORK_CELLS_CLASS + ',.' + ALLDAY_CELLS_CLASS + ',.' + HEADER_CELLS_CLASS;
         const target = closest(e.target, queryStr);
+        if (this.parent.currentView === 'TimelineYear' && target.classList.contains(OTHERMONTH_CLASS)) {
+            return;
+        }
         this.parent.activeCellsData = this.getSelectedElements(target);
         const cellData = {};
         if (this.parent.eventWindow) {
@@ -1968,6 +1993,9 @@ class KeyboardInteraction {
             || this.isPreventAction(e)) {
             return;
         }
+        if (this.parent.currentView === 'TimelineYear' && e.target.classList.contains(OTHERMONTH_CLASS)) {
+            return;
+        }
         const target = e.target;
         if (closest(target, '.' + POPUP_WRAPPER_CLASS)) {
             if (target.classList.contains(QUICK_POPUP_EVENT_DETAILS_CLASS) ||
@@ -2002,11 +2030,16 @@ class KeyboardInteraction {
                 this.parent.notify(inlineClick, inlineArgs);
             }
             else {
-                this.parent.notify(cellClick, args);
+                if (this.parent.currentView === 'Year') {
+                    target.click();
+                }
+                else {
+                    this.parent.notify(cellClick, args);
+                }
             }
             return;
         }
-        if (target.classList.contains(INLINE_SUBJECT_CLASS)) {
+        if (target.classList.contains(INLINE_SUBJECT_CLASS) && this.parent.inlineModule) {
             this.parent.inlineModule.inlineCrudActions(target);
             return;
         }
@@ -2038,7 +2071,9 @@ class KeyboardInteraction {
     }
     getCells(isInverseTable, start, end) {
         const tableEle = this.parent.getContentTable();
-        let cells = [].slice.call(tableEle.querySelectorAll('td'));
+        const isTimelineYear = this.parent.currentView === 'TimelineYear';
+        const query = isTimelineYear && !isInverseTable ? '.' + WORK_CELLS_CLASS + ':not(.' + OTHERMONTH_CLASS + ')' : 'td';
+        let cells = [].slice.call(tableEle.querySelectorAll(query));
         let maxRow = tableEle.rows.length;
         let maxColumn = tableEle.rows[0].cells.length;
         if (start && start.classList.contains(ALLDAY_CELLS_CLASS)) {
@@ -2053,7 +2088,11 @@ class KeyboardInteraction {
         if (isInverseTable) {
             for (let i = 0; i < maxColumn; i++) {
                 for (let j = 0; j < maxRow; j++) {
-                    inverseCells.push(cells[maxColumn * j + i]);
+                    const cell = cells[maxColumn * j + i];
+                    if (isTimelineYear && cell.classList.contains(OTHERMONTH_CLASS)) {
+                        continue;
+                    }
+                    inverseCells.push(cell);
                 }
             }
             startIndex = inverseCells.indexOf(start);
@@ -2075,11 +2114,17 @@ class KeyboardInteraction {
             return;
         }
         this.parent.eventBase.removeSelectedAppointmentClass();
-        if (this.parent.activeView.isTimelineView()) {
+        if (this.parent.activeView.isTimelineView() && this.parent.currentView !== 'TimelineYear') {
             const cell = this.parent.element.querySelector('.' + CONTENT_TABLE_CLASS +
                 ' tr:not(.' + HIDDEN_CLASS + ') .' + WORK_CELLS_CLASS + ':not(.' + RESOURCE_GROUP_CELLS_CLASS + ')');
             this.selectCells(false, cell);
         }
+        else if (this.parent.currentView.indexOf('Year') > -1) {
+            let query = '.' + WORK_CELLS_CLASS + ':not(.' + OTHERMONTH_CLASS + ')' + ':not(.' + RESOURCE_GROUP_CELLS_CLASS + ')';
+            const isVerticalYear = this.parent.currentView === 'TimelineYear' && this.parent.activeViewOptions.orientation === 'Vertical';
+            query += isVerticalYear ? '[data-date="' + this.parent.activeView.startDate().getTime() + '"]' : '';
+            this.selectCells(false, this.parent.element.querySelector(query));
+        }
         else {
             this.selectCells(false, this.parent.getWorkCellElements()[0]);
         }
@@ -2100,13 +2145,21 @@ class KeyboardInteraction {
         let target = (targetCell instanceof Array) ? targetCell.slice(-1)[0] : targetCell;
         if (isMultiple) {
             let initialId;
-            const views = ['Day', 'Week', 'WorkWeek', 'Month', 'TimelineDay', 'TimelineWeek', 'TimelineWorkWeek', 'TimelineMonth'];
+            const views = ['Day', 'Week', 'WorkWeek', 'TimelineDay', 'TimelineWeek', 'TimelineWorkWeek', 'TimelineMonth', 'TimelineYear'];
             const args = { element: targetCell, requestType: 'mousemove', allowMultipleRow: true };
             this.parent.inlineModule.removeInlineAppointmentElement();
             this.parent.trigger(select, args, (selectArgs) => {
                 const allowMultipleRow = (!selectArgs.allowMultipleRow) || (!this.parent.allowMultiRowSelection);
-                if (allowMultipleRow && (views.indexOf(this.parent.currentView) > -1)) {
-                    target = target.parentElement.children[this.initialTarget.cellIndex];
+                if (allowMultipleRow) {
+                    const isTimelineYear = this.parent.currentView === 'TimelineYear';
+                    if (isTimelineYear && this.parent.activeViewOptions.orientation === 'Horizontal' || this.parent.currentView === 'Month') {
+                        const isGroupYear = isTimelineYear && this.parent.activeViewOptions.group.resources.length > 0;
+                        target = isGroupYear ? this.initialTarget :
+                            this.initialTarget.parentElement.children[target.cellIndex];
+                    }
+                    else if (views.indexOf(this.parent.currentView) > -1) {
+                        target = target.parentElement.children[this.initialTarget.cellIndex];
+                    }
                 }
                 let selectedCells = this.getCells(this.isInverseTableSelect(), this.initialTarget, target);
                 if (this.parent.activeViewOptions.group.resources.length > 0) {
@@ -2239,8 +2292,20 @@ class KeyboardInteraction {
             }
         }
     }
+    cancelUpDownAction(isTimelineYear) {
+        const isVerticalYear = isTimelineYear && this.parent.activeViewOptions.orientation === 'Vertical';
+        const isGroup = this.parent.activeViewOptions.group.resources.length > 0;
+        if (isVerticalYear && isGroup || isTimelineYear && this.initialTarget.classList.contains(OTHERMONTH_CLASS)) {
+            return true;
+        }
+        if (this.parent.activeView.isTimelineView() && !isTimelineYear || this.parent.currentView === 'MonthAgenda') {
+            return true;
+        }
+        return false;
+    }
     processUp(e, isMultiple) {
-        if ((isMultiple && (this.parent.activeView.isTimelineView() || this.parent.currentView === 'MonthAgenda'))) {
+        const isTimelineYear = this.parent.currentView === 'TimelineYear';
+        if (isMultiple && this.cancelUpDownAction(isTimelineYear)) {
             return;
         }
         let target = (e.target);
@@ -2263,8 +2328,22 @@ class KeyboardInteraction {
         if (target.classList.contains(WORK_CELLS_CLASS) && !this.parent.element.querySelector('.' + POPUP_OPEN)) {
             const tableRows = this.parent.getTableRows();
             const curRowIndex = tableRows.indexOf(target.parentElement);
-            if (curRowIndex > 0 && curRowIndex < tableRows.length) {
-                this.selectCells(isMultiple, (tableRows[curRowIndex - 1]).cells[target.cellIndex]);
+            let targetCell;
+            if (isTimelineYear && isMultiple && this.parent.activeViewOptions.group.resources.length === 0) {
+                targetCell = this.isInverseTableSelect() ? this.getVerticalUpDownCell(tableRows, target, curRowIndex, true) :
+                    this.getHorizontalUpDownCell(tableRows, target, curRowIndex, true);
+            }
+            if ((curRowIndex > 0 || targetCell) && curRowIndex < tableRows.length) {
+                targetCell = targetCell ? targetCell : (tableRows[curRowIndex - 1]).cells[target.cellIndex];
+                if (this.parent.currentView === 'Year' && targetCell.classList.contains(OTHERMONTH_CLASS)) {
+                    if (this.parent.activeView.getStartDate().getTime() < +targetCell.getAttribute('data-date')) {
+                        targetCell = this.getYearUpDownCell(tableRows, curRowIndex - 1, target.cellIndex, true);
+                    }
+                    else {
+                        return;
+                    }
+                }
+                this.selectCells(isMultiple, targetCell);
             }
         }
         else if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {
@@ -2272,7 +2351,8 @@ class KeyboardInteraction {
         }
     }
     processDown(e, isMultiple) {
-        if (isMultiple && (this.parent.activeView.isTimelineView() || this.parent.currentView === 'MonthAgenda')) {
+        const isTimelineYear = this.parent.currentView === 'TimelineYear';
+        if (isMultiple && this.cancelUpDownAction(isTimelineYear)) {
             return;
         }
         let target = (e.target);
@@ -2295,16 +2375,62 @@ class KeyboardInteraction {
         }
         if (target.classList.contains(WORK_CELLS_CLASS) && !this.parent.element.querySelector('.' + POPUP_OPEN)) {
             const curRowIndex = tableRows.indexOf(target.parentElement);
-            if (curRowIndex >= 0 && curRowIndex < tableRows.length - 1) {
-                this.selectCells(isMultiple, (tableRows[curRowIndex + 1]).cells[target.cellIndex]);
+            let targetCell;
+            if (isTimelineYear && isMultiple && this.parent.activeViewOptions.group.resources.length === 0) {
+                targetCell = this.isInverseTableSelect() ? this.getVerticalUpDownCell(tableRows, target, curRowIndex, false)
+                    : this.getHorizontalUpDownCell(tableRows, target, curRowIndex, false);
+            }
+            if (curRowIndex >= 0 && ((curRowIndex < tableRows.length - 1) || targetCell)) {
+                targetCell = targetCell ? targetCell : (tableRows[curRowIndex + 1]).cells[target.cellIndex];
+                if (this.parent.currentView === 'Year' && targetCell.classList.contains(OTHERMONTH_CLASS)) {
+                    if (this.parent.activeView.getEndDate().getTime() > +targetCell.getAttribute('data-date')) {
+                        targetCell = this.getYearUpDownCell(tableRows, curRowIndex + 1, target.cellIndex, false);
+                    }
+                    else {
+                        return;
+                    }
+                }
+                this.selectCells(isMultiple, targetCell);
             }
         }
         else if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {
             this.selectAppointment(false, target);
         }
     }
+    getYearUpDownCell(tableRows, rowIndex, cellIndex, isUp) {
+        while (tableRows[rowIndex] && tableRows[rowIndex].cells[cellIndex].classList.contains(OTHERMONTH_CLASS)) {
+            rowIndex = rowIndex + (isUp ? -1 : 1);
+        }
+        return tableRows[rowIndex].cells[cellIndex];
+    }
+    // eslint-disable-next-line max-len
+    getHorizontalUpDownCell(tableRows, target, curRowIndex, isUp) {
+        const row = tableRows[curRowIndex + (isUp ? -1 : 1)];
+        let cell = row ? row.cells[target.cellIndex] : target;
+        if (cell.classList.contains(OTHERMONTH_CLASS)) {
+            const workCell = row.querySelector('.' + WORK_CELLS_CLASS + ':not(.' + OTHERMONTH_CLASS + ')');
+            const date = new Date(+workCell.getAttribute('data-date'));
+            const query = '[data-date="' + new Date(date.getFullYear(), date.getMonth() + 1, 0).getTime() + '"]';
+            cell = cell.cellIndex < workCell.cellIndex ? workCell : row.querySelector(query);
+        }
+        return cell;
+    }
+    // eslint-disable-next-line max-len
+    getVerticalUpDownCell(tableRows, target, curRowIndex, isUp) {
+        const hasRow = isUp && curRowIndex > 0 || !isUp && curRowIndex < tableRows.length - 1;
+        let targetCell = hasRow ? tableRows[curRowIndex + (isUp ? -1 : 1)].cells[target.cellIndex] : undefined;
+        if (!targetCell || targetCell.classList.contains(OTHERMONTH_CLASS)) {
+            const column = tableRows[curRowIndex].cells[target.cellIndex - (isUp ? 1 : -1)];
+            if (column) {
+                const dateAttr = +target.getAttribute('data-date') - (isUp ? MS_PER_DAY : -MS_PER_DAY);
+                return this.parent.getContentTable().querySelector('.' + WORK_CELLS_CLASS + '[data-date="' + dateAttr + '"]');
+            }
+            targetCell = target;
+        }
+        return targetCell;
+    }
     processLeftRight(target) {
-        const tableEle = this.parent.getContentTable();
+        const tableEle = (this.parent.currentView === 'Year' ? target.closest('tbody') : this.parent.getContentTable());
         const curRowIndex = target.parentNode.sectionRowIndex;
         const key = {
             element: tableEle,
@@ -2317,8 +2443,9 @@ class KeyboardInteraction {
     getQuickPopupElement() {
         return (this.parent.isAdaptive ? document.body : this.parent.element).querySelector('.' + POPUP_WRAPPER_CLASS);
     }
-    isCancelLeftRightAction(e, isMultiple) {
-        if (this.parent.currentView === 'Agenda' || (isMultiple && this.parent.currentView === 'MonthAgenda')) {
+    isCancelLeftRightAction(e, isMultiple, isTimelineYear) {
+        const prevent = this.parent.currentView === 'MonthAgenda' || isTimelineYear && this.initialTarget.classList.contains(OTHERMONTH_CLASS);
+        if (this.parent.currentView === 'Agenda' || (isMultiple && prevent)) {
             return true;
         }
         if (this.isPreventAction(e) && isMultiple) {
@@ -2332,7 +2459,8 @@ class KeyboardInteraction {
         return false;
     }
     processRight(e, isMultiple) {
-        if (this.isCancelLeftRightAction(e, isMultiple)) {
+        const isTimelineYear = this.parent.currentView === 'TimelineYear';
+        if (this.isCancelLeftRightAction(e, isMultiple, isTimelineYear)) {
             return;
         }
         const selectedCells = this.parent.getSelectedElements();
@@ -2353,24 +2481,36 @@ class KeyboardInteraction {
         if (target.classList.contains(WORK_CELLS_CLASS) &&
             (e.target).classList.contains(WORK_CELLS_CLASS)) {
             const key = this.processLeftRight(target);
-            if (key.columnIndex >= 0 && key.columnIndex < key.maxIndex - 1) {
+            const targetDate = new Date(+target.getAttribute('data-date'));
+            const isMonthEnd = this.parent.currentView === 'Year' && targetDate.getTime() === lastDateOfMonth(targetDate).getTime();
+            if (key.columnIndex >= 0 && key.columnIndex < key.maxIndex - 1 && !isMonthEnd) {
                 targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex].cells[target.cellIndex + 1], 'right');
+                if (isTimelineYear && isMultiple && targetCell.classList.contains(OTHERMONTH_CLASS)) {
+                    targetCell = this.getTimelineYearTargetCell(key, target, true);
+                }
                 if (!isNullOrUndefined(targetCell)) {
                     this.selectCells(isMultiple, targetCell);
                 }
             }
-            else if (key.columnIndex === key.maxIndex - 1) {
-                if (!this.isInverseTableSelect() && key.rowIndex < key.element.rows.length - 1) {
+            else if (key.columnIndex === key.maxIndex - 1 || isMonthEnd) {
+                if (!this.isInverseTableSelect() && key.rowIndex < key.element.rows.length - 1 && !isMonthEnd) {
                     targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex + 1].cells[0], 'right');
+                    const changeTargetCell = isTimelineYear && isMultiple && targetCell.classList.contains(OTHERMONTH_CLASS);
+                    targetCell = changeTargetCell ? this.getHorizontalLeftRightCell(key, target, true) : targetCell;
                     if (!isNullOrUndefined(targetCell)) {
                         this.selectCells(isMultiple, targetCell);
                     }
                 }
                 else if (!isMultiple) {
+                    if (isMonthEnd && targetDate.getTime() !== this.parent.activeView.getEndDate().getTime()) {
+                        this.selectCells(isMultiple, this.parent.element.querySelector(':not(.' + OTHERMONTH_CLASS + ')[data-date="' + (targetDate.getTime() + MS_PER_DAY) + '"]'));
+                        return;
+                    }
                     const rowIndex = this.isInverseTableSelect() ? key.rowIndex : 0;
                     this.parent.changeDate(this.parent.activeView.getNextPreviousDate('next'), e);
                     const tableEle = this.parent.getContentTable();
-                    this.selectCells(false, tableEle.rows[rowIndex].cells[0]);
+                    const cell = isMonthEnd ? tableEle.rows[rowIndex].querySelector('.' + WORK_CELLS_CLASS + ':not(.' + OTHERMONTH_CLASS + ')') : tableEle.rows[rowIndex].cells[0];
+                    this.selectCells(false, cell);
                 }
             }
         }
@@ -2389,7 +2529,8 @@ class KeyboardInteraction {
         }
     }
     processLeft(e, isMultiple) {
-        if (this.isCancelLeftRightAction(e, isMultiple)) {
+        const isTimelineYear = this.parent.currentView === 'TimelineYear';
+        if (this.isCancelLeftRightAction(e, isMultiple, isTimelineYear)) {
             return;
         }
         let target = (e.target);
@@ -2410,24 +2551,40 @@ class KeyboardInteraction {
         if ((e.target).classList.contains(WORK_CELLS_CLASS) &&
             target.classList.contains(WORK_CELLS_CLASS)) {
             const key = this.processLeftRight(target);
-            if (key.columnIndex > 0 && key.columnIndex < key.maxIndex) {
+            const targetDate = new Date(+target.getAttribute('data-date'));
+            const isMonthStart = this.parent.currentView === 'Year' && targetDate.getTime() === firstDateOfMonth(targetDate).getTime();
+            if (key.columnIndex > 0 && key.columnIndex < key.maxIndex && !isMonthStart) {
                 targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex].cells[target.cellIndex - 1], 'left');
+                if (isTimelineYear && isMultiple && targetCell.classList.contains(OTHERMONTH_CLASS)) {
+                    targetCell = this.getTimelineYearTargetCell(key, target, false);
+                }
                 if (!isNullOrUndefined(targetCell)) {
                     this.selectCells(isMultiple, targetCell);
                 }
             }
-            else if (key.columnIndex === 0) {
+            else if (key.columnIndex === 0 || isMonthStart) {
                 if (!this.isInverseTableSelect() && key.rowIndex > 0) {
                     targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex - 1].cells[key.maxIndex - 1], 'left');
+                    const otherMonthCell = isTimelineYear && isMultiple && targetCell.classList.contains(OTHERMONTH_CLASS);
+                    targetCell = otherMonthCell ? this.getHorizontalLeftRightCell(key, target, false) : targetCell;
                     if (!isNullOrUndefined(targetCell)) {
                         this.selectCells(isMultiple, targetCell);
                     }
                 }
                 else if (!isMultiple) {
+                    if (isMonthStart && targetDate.getTime() !== this.parent.activeView.getStartDate().getTime()) {
+                        this.selectCells(isMultiple, this.parent.element.querySelector('[data-date="' + (targetDate.getTime() - MS_PER_DAY) + '"]'));
+                        return;
+                    }
                     this.parent.changeDate(this.parent.activeView.getNextPreviousDate('previous'), e);
                     const tableEle = this.parent.getContentTable();
                     const rowIndex = this.isInverseTableSelect() ? key.rowIndex : tableEle.rows.length - 1;
-                    this.selectCells(false, tableEle.rows[rowIndex].cells[key.maxIndex - 1]);
+                    let cell = tableEle.rows[rowIndex].cells[key.maxIndex - 1];
+                    if (isMonthStart) {
+                        const tbody = this.parent.element.querySelectorAll('.' + CONTENT_TABLE_CLASS + ' tbody');
+                        cell = tbody.item(tbody.length - 1).querySelector(':not(.' + OTHERMONTH_CLASS + ')[data-date="' + this.parent.activeView.getEndDate().getTime() + '"]');
+                    }
+                    this.selectCells(false, cell);
                 }
             }
         }
@@ -2445,6 +2602,29 @@ class KeyboardInteraction {
             }
         }
     }
+    getTimelineYearTargetCell(key, target, isRight) {
+        return this.isInverseTableSelect() ? this.getVerticalLeftRightCell(target, isRight) :
+            this.getHorizontalLeftRightCell(key, target, isRight);
+    }
+    getHorizontalLeftRightCell(key, target, isRight) {
+        const row = key.element.rows[target.parentNode.sectionRowIndex + (isRight ? 1 : -1)];
+        if (row) {
+            const query = isRight ? '.' + WORK_CELLS_CLASS + ':not(.' + OTHERMONTH_CLASS + ')'
+                : '[data-date="' + ((+target.getAttribute('data-date')) - MS_PER_DAY) + '"]';
+            return row.querySelector(query);
+        }
+        return target;
+    }
+    getVerticalLeftRightCell(target, isRight) {
+        const date = new Date(+target.getAttribute('data-date'));
+        const start = new Date(date.getFullYear(), date.getMonth() + (isRight ? 1 : -1), 1);
+        const tableEle = this.parent.getContentTable();
+        const targetCell = tableEle.querySelector('[data-date="' + start.getTime() + '"]');
+        if (targetCell.parentNode.sectionRowIndex > target.parentNode.sectionRowIndex) {
+            return targetCell;
+        }
+        return tableEle.querySelector('[data-date="' + new Date(start.getFullYear(), start.getMonth() + 1, 0).getTime() + '"]');
+    }
     calculateNextPrevDate(currentCell, target, type) {
         const initialId = this.initialTarget.getAttribute('data-group-index');
         if (this.parent.activeViewOptions.group.resources.length > 0 && this.parent.currentView === 'Month') {
@@ -2488,6 +2668,16 @@ class KeyboardInteraction {
     }
     processTab(e, isReverse) {
         let target = e.target;
+        if (target.classList.contains(INLINE_SUBJECT_CLASS) && this.parent.inlineModule) {
+            target = target.closest('.e-appointment');
+            this.parent.inlineModule.inlineCrudActions(e.target);
+        }
+        if (this.parent.currentView === 'TimelineYear' && target.classList.contains(OTHERMONTH_CLASS)) {
+            if (target.classList.contains(SELECTED_CELL_CLASS)) {
+                this.parent.removeSelectedClass();
+            }
+            return;
+        }
         const popupWrapper = closest(target, '.' + POPUP_WRAPPER_CLASS + ',.' + MORE_POPUP_WRAPPER_CLASS);
         if (popupWrapper && popupWrapper.classList.contains(POPUP_OPEN)) {
             if (popupWrapper.classList.contains(MORE_POPUP_WRAPPER_CLASS)) {
@@ -2529,7 +2719,9 @@ class KeyboardInteraction {
         }
         if (target.classList.contains(APPOINTMENT_CLASS)) {
             let appElements = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CLASS));
-            if (this.parent.activeView.isTimelineView() && this.parent.activeViewOptions.group.resources.length > 0) {
+            const isTimelineYear = this.parent.currentView === 'TimelineYear';
+            const isTimeline = this.parent.activeView.isTimelineView() && !isTimelineYear;
+            if ((isTimeline || isTimelineYear && this.parent.activeViewOptions.orientation === 'Vertical') && this.parent.activeViewOptions.group.resources.length > 0) {
                 const index = parseInt(target.getAttribute('data-group-index'), 10);
                 appElements = [].slice.call(this.parent.element.querySelectorAll(`.${APPOINTMENT_CLASS}[data-group-index="${index}"]`));
                 const resCellSelector = `.${RESOURCE_CELLS_CLASS}[data-group-index="${isReverse ? index : index + 1}"]`;
@@ -2578,7 +2770,6 @@ class KeyboardInteraction {
             this.processTabOnResourceCells(target, isReverse);
         }
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     processDelete(e) {
         let activeEle = document.activeElement;
         if (this.parent.currentView === 'MonthAgenda') {
@@ -5579,7 +5770,8 @@ class EventBase {
     }
     eventClick(eventData) {
         const target = eventData.target;
-        if (target.classList.contains(DRAG_CLONE_CLASS) || target.classList.contains(RESIZE_CLONE_CLASS)) {
+        if (target.classList.contains(DRAG_CLONE_CLASS) || target.classList.contains(RESIZE_CLONE_CLASS) ||
+            target.classList.contains(INLINE_SUBJECT_CLASS)) {
             return;
         }
         if ((eventData.ctrlKey || eventData.metaKey) && eventData.which === 1 && this.parent.keyboardInteractionModule) {
@@ -6017,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) => {
@@ -6027,14 +6219,28 @@ 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)) {
+        if (this.parent.uiStateValues.expand) {
             addClass([dateHeader], ALLDAY_APPOINTMENT_SCROLL);
         }
         else {
             removeClass([dateHeader], ALLDAY_APPOINTMENT_SCROLL);
         }
     }
+    updateEventMinimumDuration(startEndHours, startTime, endTime) {
+        const eventDuration = (getUniversalTime(endTime) - getUniversalTime(startTime)) / MS_PER_MINUTE;
+        if (eventDuration < this.parent.eventSettings.minimumEventDuration) {
+            const tempEnd = new Date(startTime);
+            tempEnd.setMinutes(tempEnd.getMinutes() + this.parent.eventSettings.minimumEventDuration);
+            endTime = tempEnd;
+            if (endTime.getTime() > startEndHours.endHour.getTime()) {
+                const tempStart = new Date(startEndHours.endHour.getTime());
+                tempStart.setMinutes(tempStart.getMinutes() - this.parent.eventSettings.minimumEventDuration);
+                startTime = tempStart;
+                endTime = startEndHours.endHour;
+            }
+        }
+        return { startDate: startTime, endDate: endTime };
+    }
     unWireEvents() {
         const appElements = [].slice.call(this.parent.element.querySelectorAll('.' + APPOINTMENT_CLASS));
         for (const element of appElements) {
@@ -6436,18 +6642,21 @@ class VerticalEvent extends EventBase {
         if (currentDay.length === 0) {
             currentDate = resetTime(renderedDate[0]);
         }
-        const fieldMapping = this.parent.eventFields;
-        const startEndHours = getStartEndHours(currentDate, this.startHour, this.endHour);
+        const field = this.parent.eventFields;
+        const schedule = getStartEndHours(currentDate, this.startHour, this.endHour);
         const event = extend({}, record, null, true);
         event.isSpanned = { isBottom: false, isTop: false };
-        if (record[fieldMapping.startTime].getTime() < startEndHours.startHour.getTime()) {
-            event[fieldMapping.startTime] = startEndHours.startHour;
+        if (record[field.startTime].getTime() < schedule.startHour.getTime()) {
+            event[field.startTime] = schedule.startHour;
             event.isSpanned.isTop = true;
         }
-        if (record[fieldMapping.endTime].getTime() > startEndHours.endHour.getTime()) {
-            event[fieldMapping.endTime] = startEndHours.endHour;
+        if (record[field.endTime].getTime() > schedule.endHour.getTime()) {
+            event[field.endTime] = schedule.endHour;
             event.isSpanned.isBottom = true;
         }
+        const eventDates = this.updateEventMinimumDuration(schedule, event[field.startTime], event[field.endTime]);
+        event[field.startTime] = eventDates.startDate;
+        event[field.endTime] = eventDates.endDate;
         return event;
     }
     renderAllDayEvents(eventObj, dayIndex, resource, dayCount, inline) {
@@ -6976,12 +7185,13 @@ 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;
         const filteredDates = this.getRenderedDates(dateRender);
-        this.getSlotDates(workDays);
+        this.getSlotDates(workDays || this.parent.activeViewOptions.workDays);
         this.processBlockEvents(blockList, resIndex, resData);
         for (const event of eventsList) {
             if (this.parent.resourceBase && !resData) {
@@ -7607,6 +7817,10 @@ class TimelineEvent extends MonthEvent {
         const eventData = event.data;
         startTime = this.getStartTime(event, eventData);
         endTime = this.getEndTime(event, eventData);
+        const startEndHours = getStartEndHours(event[this.fields.startTime], this.startHour, this.endHour);
+        const eventDates = this.updateEventMinimumDuration(startEndHours, startTime, endTime);
+        startTime = eventDates.startDate;
+        endTime = eventDates.endDate;
         this.day = this.parent.getIndexOfDate(this.dateRender, resetTime(new Date(startTime.getTime())));
         if (this.day < 0) {
             return;
@@ -7993,11 +8207,11 @@ class InlineEdit {
         if (this.parent.quickPopup) {
             this.parent.quickPopup.quickPopupHide();
         }
-        const moreWrapper = this.parent.element.querySelector('.e-more-popup-wrapper ');
-        if (moreWrapper && moreWrapper.classList.contains(POPUP_OPEN)) {
-            this.parent.quickPopup.morePopup.hide();
-        }
         if (args.type === 'Cell') {
+            const moreWrapper = this.parent.element.querySelector('.' + MORE_POPUP_WRAPPER_CLASS);
+            if (moreWrapper && moreWrapper.classList.contains(POPUP_OPEN)) {
+                this.parent.quickPopup.morePopup.hide();
+            }
             this.removeInlineAppointmentElement();
             this.cellEdit(args);
         }
@@ -8060,8 +8274,8 @@ class InlineEdit {
                     '.e-inner-wrap' : '.e-appointment-details';
                 args.element.querySelector(elementSelector).insertBefore(inlineSubject, timeEle);
             }
+            inlineSubject.focus();
         }
-        inlineSubject.focus();
         inlineSubject.setSelectionRange(subject.length, subject.length);
     }
     createVerticalViewInline(saveObj, dayIndex, resIndex, daysCount) {
@@ -8155,6 +8369,9 @@ class InlineEdit {
         if (target && target.value !== '') {
             this.inlineCrudActions(target);
         }
+        else {
+            this.removeInlineAppointmentElement();
+        }
     }
     inlineCrudActions(target) {
         if (closest(target, '.' + INLINE_APPOINTMENT_CLASS)) {
@@ -9188,6 +9405,9 @@ class QuickPopups {
     }
     closeClick(event) {
         this.dialogEvent = event;
+        if (this.parent.currentView === 'Year' && this.parent.activeCellsData && this.parent.activeCellsData.element) {
+            this.parent.selectCell(this.parent.activeCellsData.element);
+        }
         this.quickPopupHide();
         this.morePopup.hide();
     }
@@ -9771,6 +9991,7 @@ const INTERVALCLASS = 'e-interval';
 const DAYWRAPPER = 'e-days';
 const WEEKWRAPPER = 'e-non-week';
 const WEEKPOSITION = 'e-week-position';
+const DAYPOSITION = 'e-day-position';
 const YEAREXPANDERWRAPPER = 'e-year-expander';
 const YEAREXPANDERELEMENT = 'e-year-expander-element';
 const MONETHEXPANDERWRAPPER = 'e-month-expander';
@@ -10115,7 +10336,6 @@ let RecurrenceEditor = class RecurrenceEditor extends Component {
             }
         });
         this.endType.appendTo(this.element.querySelector('.' + ENDONELEMENT));
-        // eslint-disable-next-line @typescript-eslint/ban-types
         const renderDropDownList = (dropDownData) => {
             return new DropDownList({
                 dataSource: dropDownData,
@@ -10477,7 +10697,7 @@ let RecurrenceEditor = class RecurrenceEditor extends Component {
             '<td><div class="' + INPUTWARAPPER + ' ' + WEEKPOSITION + '" >' +
             '<input type="text" tabindex="0" class="' + MONTHPOS + '"title="' + this.localeObj.getConstant('monthPosition') + '" />' +
             '</div></td>' +
-            '<td><div class="' + INPUTWARAPPER + '" style="min-width: 120px;">' +
+            '<td><div class="' + INPUTWARAPPER + ' ' + DAYPOSITION + '">' +
             '<input type="text" tabindex="0" class="' + MONTHWEEK + '"title="' + this.localeObj.getConstant('monthWeek') + '" />' +
             '</div></td></tr></table>' +
             '</div></div>' +
@@ -12853,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();
         }
@@ -13927,12 +14152,15 @@ __decorate$6([
 __decorate$6([
     Property(false)
 ], EventSettings.prototype, "enableTooltip", void 0);
-__decorate$6([
-    Property()
-], EventSettings.prototype, "tooltipTemplate", void 0);
 __decorate$6([
     Property('AllDayRow')
 ], EventSettings.prototype, "spannedEventPlacement", void 0);
+__decorate$6([
+    Property(1)
+], EventSettings.prototype, "minimumEventDuration", void 0);
+__decorate$6([
+    Property()
+], EventSettings.prototype, "tooltipTemplate", void 0);
 __decorate$6([
     Property()
 ], EventSettings.prototype, "resourceColorField", void 0);
@@ -14381,6 +14609,7 @@ class ResourceBase {
             targetType: 'relative',
             actionOnScroll: 'none',
             content: this.treeViewObj.element,
+            relateTo: this.parent.element.querySelector('.' + TABLE_CONTAINER_CLASS),
             enableRtl: this.parent.enableRtl,
             hideAnimation: { name: 'SlideLeftOut', duration: 500 },
             showAnimation: { name: 'SlideLeftIn', duration: 500 },
@@ -15279,13 +15508,19 @@ let Schedule = class Schedule extends Component {
             timeFormat: this.internalTimeFormat,
             group: group,
             headerRows: this.headerRows,
-            orientation: 'Horizontal'
+            orientation: 'Horizontal',
+            numberOfWeeks: 0,
+            displayDate: null
         };
         const viewOptions = this.viewCollections[this.viewIndex];
         const viewsData = extend(scheduleOptions, viewOptions, undefined, true);
         if (this.firstDayOfWeek !== 0 && viewOptions.firstDayOfWeek && this.firstDayOfWeek !== viewOptions.firstDayOfWeek) {
             viewsData.firstDayOfWeek = this.firstDayOfWeek;
         }
+        if (viewsData.displayDate) {
+            viewsData.displayDate = viewsData.displayDate instanceof Date ? new Date(viewsData.displayDate.getTime()) :
+                new Date(viewsData.displayDate);
+        }
         return viewsData;
     }
     initializeDataModule() {
@@ -15592,7 +15827,7 @@ let Schedule = class Schedule extends Component {
         if (this && isNullOrUndefined(this.uiStateValues) || !(this.enablePersistence)) {
             this.uiStateValues = {
                 expand: false, isInitial: true, left: 0, top: 0, isGroupAdaptive: false,
-                isIgnoreOccurrence: false, groupIndex: 0, action: false, isBlock: false
+                isIgnoreOccurrence: false, groupIndex: 0, action: false, isBlock: false, isCustomMonth: true
             };
         }
         this.activeCellsData = { startTime: this.getCurrentTime(), endTime: this.getCurrentTime(), isAllDay: false };
@@ -16368,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 = '';
@@ -16556,6 +16791,7 @@ let Schedule = class Schedule extends Component {
                     }
                     break;
                 case 'spannedEventPlacement':
+                case 'minimumEventDuration':
                 case 'enableMaxHeight':
                 case 'enableIndicator':
                     this.refreshEvents(false);
@@ -16928,7 +17164,7 @@ let Schedule = class Schedule extends Component {
      */
     exportToExcel(excelExportOptions) {
         if (this.excelExportModule) {
-            this.excelExportModule.initializeExcelExport(excelExportOptions || {});
+            this.excelExportModule.initializeExcelExport(excelExportOptions);
         }
         else {
             throw Error('Inject ExcelExport module');
@@ -17112,6 +17348,9 @@ let Schedule = class Schedule extends Component {
             this.crudModule.refreshDataManager();
         }
         else {
+            if (this.activeViewOptions && this.activeViewOptions.eventTemplate) {
+                this.resetTemplates(['eventTemplate']);
+            }
             const eventsData = this.eventsData || [];
             const blockData = this.blockData || [];
             const data = eventsData.concat(blockData);
@@ -17366,6 +17605,7 @@ let Schedule = class Schedule extends Component {
             this.eventTooltip = null;
         }
         this.destroyPopups();
+        this.hideSpinner();
         this.unWireEvents();
         this.destroyHeaderModule();
         if (this.eventTooltip) {
@@ -18172,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');
@@ -18183,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;
@@ -18429,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];
@@ -18446,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) {
@@ -18453,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;
@@ -18492,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);
@@ -18507,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);
@@ -18529,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);
             }
@@ -18567,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) :
@@ -18597,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;
                 }
             }
@@ -18612,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);
@@ -19117,7 +19364,7 @@ class YearEvent extends TimelineEvent {
                 }
             }
             else {
-                if (((resetTime(appStart).getTime() <= dateStart) && (resetTime(appEnd).getTime() > dateStart)) ||
+                if (((resetTime(appStart).getTime() <= dateStart) && (resetTime(appEnd).getTime() >= dateStart)) ||
                     (resetTime(appStart).getTime() >= dateStart) && (resetTime(appEnd).getTime() <= dateEnd)) {
                     appointmentsList.push(app);
                 }
@@ -19295,7 +19542,9 @@ class DragAndDrop extends ActionBase {
         const eventGuid = this.actionObj.element.getAttribute('data-guid');
         this.actionObj.event = this.parent.eventBase.getEventByGuid(eventGuid);
         const eventObj = extend({}, this.actionObj.event, null, true);
-        this.startTime = eventObj[this.parent.eventFields.startTime].getTime();
+        if (!isNullOrUndefined(eventObj)) {
+            this.startTime = eventObj[this.parent.eventFields.startTime].getTime();
+        }
         const dragArgs = {
             cancel: false,
             data: eventObj,
@@ -19712,7 +19961,7 @@ class DragAndDrop extends ActionBase {
             return;
         }
         const td = tr.children[colIndex];
-        if (this.parent.activeViewOptions.group.resources.length > 0) {
+        if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
             this.actionObj.groupIndex = parseInt(td.getAttribute('data-group-index'), 10);
         }
         let dragStart$$1;
@@ -19978,7 +20227,7 @@ class DragAndDrop extends ActionBase {
         const renderDates = this.getRenderedDates();
         const events = this.parent.eventBase.splitEvent(event, renderDates);
         let query = `.e-all-day-cells[data-date="${events[0][this.parent.eventFields.startTime].getTime()}"]`;
-        if (this.parent.activeViewOptions.group.resources.length > 0) {
+        if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.uiStateValues.isGroupAdaptive) {
             query = query.concat('[data-group-index = "' + this.actionObj.groupIndex + '"]');
         }
         const cell = [].slice.call(this.parent.element.querySelectorAll(query));
@@ -20176,7 +20425,13 @@ class DragAndDrop extends ActionBase {
         if (this.parent.eventDragArea) {
             const targetDate = this.parent.getDateFromElement(e.target);
             if (!isNullOrUndefined(targetDate)) {
-                eventStart = targetDate;
+                if (!this.parent.activeViewOptions.timeScale.enable || (this.parent.currentView === 'TimelineMonth')) {
+                    const eventSrt = eventObj[this.parent.eventFields.startTime];
+                    eventStart = new Date(targetDate.setHours(eventSrt.getHours(), eventSrt.getMinutes(), eventSrt.getSeconds()));
+                }
+                else {
+                    eventStart = targetDate;
+                }
             }
         }
         const eventEnd = new Date(eventStart.getTime());
@@ -20605,6 +20860,10 @@ class ViewBase {
         return date.setHours(0, 0, 0, 0) === this.parent.getCurrentTime().setHours(0, 0, 0, 0);
     }
     isCurrentMonth(date) {
+        if (this.parent.activeViewOptions.displayDate || this.parent.activeViewOptions.numberOfWeeks > 0) {
+            return this.parent.activeView.getStartDate().getTime() <= this.parent.getCurrentTime().getTime() &&
+                this.parent.activeView.getEndDate().getTime() >= this.parent.getCurrentTime().getTime();
+        }
         return date.getFullYear() ===
             this.parent.getCurrentTime().getFullYear() && date.getMonth() === this.parent.getCurrentTime().getMonth();
     }
@@ -20827,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);
@@ -20835,6 +21094,13 @@ class ViewBase {
                     setStyleAttribute(resourceColumn, { 'height': formatUnit(content.clientHeight) });
                 }
             }
+            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 colSpan = isNullOrUndefined(ele.getAttribute('colspan')) ? '1' : ele.getAttribute('colspan');
+                const headerCellColSpan = parseInt(colSpan, 10);
+                setStyleAttribute(ele, { 'width': formatUnit(colWidth * headerCellColSpan) });
+            });
         }
     }
     resetColWidth() {
@@ -21872,10 +22138,11 @@ class Month extends ViewBase {
     getDateSlots(renderDates, workDays) {
         const count = this.parent.activeViewOptions.showWeekend ? WEEK_LENGTH : workDays.length;
         const dateSlots = [];
+        const isCurrentMonth = this.isCurrentMonth(this.parent.selectedDate);
         for (let col = 0; col < count; col++) {
             const classList$$1 = [HEADER_CELLS_CLASS];
             const currentDateIndex = renderDates.slice(0, count).map((date) => date.getDay());
-            if (this.isCurrentMonth(this.parent.selectedDate) && currentDateIndex.indexOf(this.parent.getCurrentTime().getDay()) === col) {
+            if (isCurrentMonth && currentDateIndex.indexOf(this.parent.getCurrentTime().getDay()) === col) {
                 classList$$1.push(CURRENT_DAY_CLASS);
             }
             dateSlots.push({ date: renderDates[col], type: 'monthDay', className: classList$$1, colSpan: 1, workDays: workDays });
@@ -21914,6 +22181,9 @@ class Month extends ViewBase {
             this.renderResourceMobileLayout();
         }
         this.parent.notify(contentReady, {});
+        if (this.parent.uiStateValues.isCustomMonth) {
+            this.parent.uiStateValues.isCustomMonth = false;
+        }
     }
     refreshHeader() {
         remove(this.element.querySelector('tbody tr'));
@@ -22096,7 +22366,7 @@ class Month extends ViewBase {
         return slotDatas;
     }
     updateClassList(data) {
-        if (this.isOtherMonth(data.date)) {
+        if (!this.isCustomMonth() && this.isOtherMonth(data.date)) {
             data.className.push(OTHERMONTH_CLASS);
         }
         if (!this.parent.isMinMaxDate(data.date)) {
@@ -22205,15 +22475,34 @@ class Month extends ViewBase {
         }
     }
     getMonthStart(currentDate) {
-        const monthStart = getWeekFirstDate(this.parent.calendarUtil.firstDateOfMonth(currentDate), this.parent.activeViewOptions.firstDayOfWeek);
-        const start = new Date(monthStart.getFullYear(), monthStart.getMonth(), monthStart.getDate());
-        return start;
+        const useDisplayDate = this.parent.currentView === 'Month' && !isNullOrUndefined(this.parent.activeViewOptions.displayDate) && (this.parent.uiStateValues.isCustomMonth || this.isCustomRange());
+        const date = useDisplayDate ? this.parent.activeViewOptions.displayDate : !(this.parent.uiStateValues.isCustomMonth ||
+            this.isCustomRange()) && this.isCustomMonth() ? currentDate : this.parent.calendarUtil.firstDateOfMonth(currentDate);
+        const monthStart = getWeekFirstDate(date, this.parent.activeViewOptions.firstDayOfWeek);
+        return new Date(monthStart.getFullYear(), monthStart.getMonth(), monthStart.getDate());
     }
     getMonthEnd(currentDate) {
-        const endDate = addMonths(currentDate, this.parent.activeViewOptions.interval - 1);
-        const lastWeekOfMonth = getWeekFirstDate(this.parent.calendarUtil.lastDateOfMonth(endDate), this.parent.activeViewOptions.firstDayOfWeek);
-        const monthEnd = addDays(lastWeekOfMonth, WEEK_LENGTH - 1);
-        return monthEnd;
+        if (this.isCustomMonth()) {
+            const start = this.getMonthStart(currentDate);
+            const numberOfDays = WEEK_LENGTH * (this.parent.activeViewOptions.numberOfWeeks > 0 ?
+                this.parent.activeViewOptions.numberOfWeeks : DEFAULT_WEEKS);
+            return addDays(start, (numberOfDays - 1));
+        }
+        else {
+            const endDate = addMonths(currentDate, this.parent.activeViewOptions.interval - 1);
+            const lastWeekOfMonth = getWeekFirstDate(this.parent.calendarUtil.lastDateOfMonth(endDate), this.parent.activeViewOptions.firstDayOfWeek);
+            return addDays(lastWeekOfMonth, WEEK_LENGTH - 1);
+        }
+    }
+    isCustomRange() {
+        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(weekFirstDate, 6).getTime());
+        }
+        return false;
     }
     getRenderDates(workDays) {
         const renderDates = [];
@@ -22243,34 +22532,57 @@ class Month extends ViewBase {
         return renderDates;
     }
     getNextPreviousDate(type) {
-        if (type === 'next') {
-            return addMonths(this.parent.selectedDate, this.parent.activeViewOptions.interval);
+        if (this.isCustomMonth()) {
+            const dates = this.parent.getCurrentViewDates();
+            const date = getWeekFirstDate(type === 'next' ? dates[dates.length - 1]
+                : dates[0], this.parent.activeViewOptions.firstDayOfWeek);
+            return addDays(date, type === 'next' ? WEEK_LENGTH : -(this.parent.activeViewOptions.numberOfWeeks > 0 ?
+                this.parent.activeViewOptions.numberOfWeeks : DEFAULT_WEEKS) * WEEK_LENGTH);
         }
         else {
-            return addMonths(this.parent.selectedDate, -(this.parent.activeViewOptions.interval));
+            return addMonths(this.parent.selectedDate, ((type === 'next' ? 1 : -1) * this.parent.activeViewOptions.interval));
         }
     }
+    getStartDate() {
+        return this.getMonthStart(this.parent.selectedDate);
+    }
+    getEndDate() {
+        return this.getMonthEnd(this.parent.selectedDate);
+    }
     getEndDateFromStartDate(start) {
         return addDays(new Date(start.getTime()), 1);
     }
     getDateRangeText() {
         if (this.parent.isAdaptive || isNullOrUndefined(this.parent.activeViewOptions.dateFormat)) {
-            if (this.parent.activeViewOptions.interval > 1) {
-                const endDate = addMonths(lastDateOfMonth(this.parent.selectedDate), this.parent.activeViewOptions.interval - 1);
-                if (this.parent.selectedDate.getFullYear() === endDate.getFullYear()) {
-                    const monthNames = (this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM', calendar: this.parent.getCalendarMode() })) + ' - ' +
+            let startDate = this.parent.selectedDate;
+            let endDate;
+            let updateCustomRange = false;
+            if (this.isCustomMonth()) {
+                const dates = this.parent.getCurrentViewDates();
+                updateCustomRange = dates[0].getMonth() !== dates[dates.length - 1].getMonth() ||
+                    dates[0].getFullYear() !== dates[dates.length - 1].getFullYear();
+                if (updateCustomRange) {
+                    startDate = dates[0];
+                    endDate = dates[dates.length - 1];
+                }
+            }
+            const isUpdateDateRange = (this.parent.currentView !== 'Month' || !this.isCustomMonth());
+            if (this.parent.activeViewOptions.interval > 1 && isUpdateDateRange || updateCustomRange) {
+                endDate = endDate ? endDate : addMonths(lastDateOfMonth(startDate), this.parent.activeViewOptions.interval - 1);
+                if (startDate.getFullYear() === endDate.getFullYear()) {
+                    const monthNames = (this.parent.globalize.formatDate(startDate, { format: 'MMMM', calendar: this.parent.getCalendarMode() })) + ' - ' +
                         (this.parent.globalize.formatDate(endDate, { format: 'MMMM ', calendar: this.parent.getCalendarMode() })) +
                         this.parent.globalize.formatDate(endDate, { skeleton: 'y', calendar: this.parent.getCalendarMode() });
                     return capitalizeFirstWord(monthNames, 'single');
                 }
-                const text = (this.parent.globalize.formatDate(this.parent.selectedDate, { format: 'MMMM', calendar: this.parent.getCalendarMode() })) + ' ' +
-                    this.parent.selectedDate.getFullYear() + ' - ' +
+                const text = (this.parent.globalize.formatDate(startDate, { format: 'MMMM', calendar: this.parent.getCalendarMode() })) + ' ' +
+                    startDate.getFullYear() + ' - ' +
                     this.parent.globalize.formatDate(endDate, { format: 'MMMM ', calendar: this.parent.getCalendarMode() }) +
                     this.parent.globalize.formatDate(endDate, { skeleton: 'y', calendar: this.parent.getCalendarMode() });
                 return capitalizeFirstWord(text, 'single');
             }
             const format = (this.parent.activeViewOptions.dateFormat) ? this.parent.activeViewOptions.dateFormat : 'MMMM y';
-            return capitalizeFirstWord(this.parent.globalize.formatDate(this.parent.selectedDate, { format: format, calendar: this.parent.getCalendarMode() }), 'single');
+            return capitalizeFirstWord(this.parent.globalize.formatDate(startDate, { format: format, calendar: this.parent.getCalendarMode() }), 'single');
         }
         return this.formatDateRange(this.parent.selectedDate);
     }
@@ -22295,6 +22607,10 @@ class Month extends ViewBase {
             EventHandler.remove(contentScrollableEle, 'scroll', this.onContentScroll);
         }
     }
+    isCustomMonth() {
+        return this.parent.currentView === 'Month' &&
+            (!isNullOrUndefined(this.parent.activeViewOptions.displayDate) || this.parent.activeViewOptions.numberOfWeeks > 0);
+    }
     getModuleName() {
         return 'month';
     }
@@ -22526,12 +22842,29 @@ class Year extends ViewBase {
         return Array.apply(null, { length: this.parent.activeViewOptions.monthsCount }).map((value, index) => this.parent.firstMonthOfYear + index);
     }
     onCellClick(e) {
-        const target = closest(e.target, '.' + WORK_CELLS_CLASS);
+        let target = closest(e.target, '.' + WORK_CELLS_CLASS);
         const startDate = this.parent.getDateFromElement(target);
-        const endDate = addDays(new Date(startDate.getTime()), 1);
-        const filteredEvents = this.parent.eventBase.filterEvents(startDate, endDate);
-        const moreEventArgs = { date: startDate, event: filteredEvents, element: e.target };
-        this.parent.quickPopup.moreEventClick(moreEventArgs, endDate);
+        this.parent.activeCellsData = this.parent.getCellDetails(target);
+        const isPrevious = startDate.getTime() < this.getStartDate().getTime();
+        if (isPrevious || startDate.getTime() > this.getEndDate().getTime()) {
+            this.parent.changeDate(this.parent.activeView.getNextPreviousDate(isPrevious ? 'previous' : 'next'), e);
+            const activeDate = this.parent.activeCellsData.startTime.getTime();
+            const inRange = activeDate >= this.getStartDate().getTime() && activeDate <= this.getEndDate().getTime();
+            const dateAttr = inRange ? activeDate : (isPrevious ? this.getEndDate() : this.getStartDate()).getTime();
+            const selectedCell = this.parent.element.querySelector(':not(.' + OTHERMONTH_CLASS + ')[data-date="' + dateAttr + '"]');
+            this.parent.selectCell(selectedCell);
+            this.parent.activeCellsData = this.parent.getCellDetails(selectedCell);
+        }
+        else {
+            const endDate = addDays(new Date(startDate.getTime()), 1);
+            const filteredEvents = this.parent.eventBase.filterEvents(startDate, endDate);
+            const moreEventArgs = { date: startDate, event: filteredEvents, element: e.target };
+            if (target.classList.contains(OTHERMONTH_CLASS)) {
+                target = this.parent.element.querySelector(':not(.' + OTHERMONTH_CLASS + ')[data-date="' + target.getAttribute('data-date') + '"]');
+            }
+            this.parent.activeCellsData = this.parent.getCellDetails(target);
+            this.parent.quickPopup.moreEventClick(moreEventArgs, endDate);
+        }
     }
     onContentScroll(e) {
         const target = e.target;
@@ -22583,10 +22916,10 @@ class Year extends ViewBase {
         return addDays(addMonths(this.getStartDate(), this.parent.monthsCount), -1);
     }
     startDate() {
-        return getWeekFirstDate(this.getStartDate(), this.parent.firstDayOfWeek);
+        return this.parent.currentView === 'Year' ? getWeekFirstDate(this.getStartDate(), this.parent.firstDayOfWeek) : this.getStartDate();
     }
     endDate() {
-        return addDays(getWeekLastDate(this.getEndDate(), this.parent.firstDayOfWeek), 1);
+        return this.parent.currentView === 'Year' ? addDays(getWeekLastDate(this.getEndDate(), this.parent.firstDayOfWeek), 1) : this.getEndDate();
     }
     getEndDateFromStartDate(start) {
         let date = new Date(start.getTime());
@@ -22629,6 +22962,7 @@ class Year extends ViewBase {
                 EventHandler.add(element, 'click', this.onCellClick, this);
             }
             else {
+                EventHandler.add(element, 'mousedown', this.parent.workCellAction.cellMouseDown, this.parent.workCellAction);
                 EventHandler.add(element, 'click', this.parent.workCellAction.cellClick, this.parent.workCellAction);
                 if (!this.parent.isAdaptive) {
                     EventHandler.add(element, 'dblclick', this.parent.workCellAction.cellDblClick, this.parent.workCellAction);
@@ -23065,7 +23399,8 @@ class Agenda extends AgendaBase {
         for (const event of this.parent.eventsData) {
             delete event.generatedDates;
         }
-        let eventCollection = this.parent.activeViewOptions.allowVirtualScrolling ? args.processedData : this.parent.eventsProcessed;
+        let eventCollection = this.parent.activeViewOptions.allowVirtualScrolling ?
+            args.processedData : this.parent.eventsProcessed;
         if (this.parent.uiStateValues.isGroupAdaptive) {
             const resource = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];
             this.dataSource = this.parent.eventBase.filterEventsByResource(resource, this.dataSource);
@@ -24114,6 +24449,9 @@ class TimelineYear extends Year {
             tr.appendChild(leftHeaderCells);
             leftHeaderCells.appendChild(this.renderResourceHeader(LEFT_INDENT_WRAP_CLASS));
         }
+        const isHorizontal = this.parent.activeViewOptions.orientation === 'Horizontal';
+        const isGroup = this.parent.activeViewOptions.group.resources.length > 0;
+        this.isInverseTableSelect = isHorizontal && !isGroup ? false : true;
         const td = createElement('td');
         tr.appendChild(td);
         const container = createElement('div', { className: DATE_HEADER_CONTAINER_CLASS });
@@ -24146,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>`;
@@ -24791,8 +25129,8 @@ class ExcelExport {
     constructor(parent) {
         this.parent = parent;
     }
-    initializeExcelExport(excelExportOptions) {
-        const exportFields = excelExportOptions.fields || Object.keys(this.parent.eventFields).map((field) => this.parent.eventFields[field]);
+    initializeExcelExport(excelExportOptions = {}) {
+        const exportColumns = this.getExportColumns(excelExportOptions);
         const exportName = excelExportOptions.fileName || 'Schedule';
         const exportType = excelExportOptions.exportType || 'xlsx';
         const isIncludeOccurrences = excelExportOptions.includeOccurrences || false;
@@ -24804,34 +25142,40 @@ class ExcelExport {
         else {
             eventCollection = !isIncludeOccurrences ? this.parent.eventsData : this.parent.eventsProcessed;
         }
-        this.processWorkbook(exportFields, exportName, exportType, eventCollection);
+        this.processWorkbook(exportColumns, exportName, exportType, eventCollection);
     }
     processWorkbook(fields, name, type, eventCollection) {
         const columns = [];
         const rows = [];
         const columnHeader = [];
-        fields.forEach((field, i) => columns.push({ index: i + 1, width: (field === 'Id' ? 20 : 150) }));
+        fields.forEach((field, i) => { columns.push({ index: i + 1, width: (field.name === 'Id' ? 50 : 150) }); });
         const style = { fontSize: 12, borders: { color: '#E0E0E0' }, bold: true };
-        fields.forEach((field, i) => columnHeader.push({ index: i + 1, value: field, style: style }));
+        fields.forEach((field, i) => { columnHeader.push({ index: i + 1, value: field.text, style: style }); });
         rows.push({ index: 1, cells: columnHeader });
-        let i = 2;
-        for (const event of eventCollection) {
+        eventCollection.forEach((event, i) => {
             const columnData = [];
             fields.forEach((field, n) => {
-                let columnRule = { index: n + 1, value: event[field] || '' };
-                if (field === this.parent.eventFields.startTime || field === this.parent.eventFields.endTime) {
+                let columnRule = { index: n + 1, value: event[field.name] || '' };
+                if (field.name === this.parent.eventFields.startTime || field.name === this.parent.eventFields.endTime) {
                     const styleRule = { fontSize: 12, numberFormat: 'm/d/yyyy h:mm AM/PM' };
                     columnRule = extend({}, columnRule, { style: styleRule }, true);
                 }
                 columnData.push(columnRule);
             });
-            rows.push({ index: i, cells: columnData });
-            i++;
-        }
+            rows.push({ index: i + 2, cells: columnData });
+        });
         const workSheet = [{ columns: columns, rows: rows }];
         const book = new Workbook({ worksheets: workSheet }, type, this.parent.locale);
         book.save(name + '.' + type);
     }
+    getExportColumns(exportOptions) {
+        const exportColumns = exportOptions.fieldsInfo || [];
+        if (exportColumns.length === 0) {
+            const fields = exportOptions.fields || Object.keys(this.parent.eventFields).map((field) => this.parent.eventFields[field]);
+            fields.forEach((field) => { exportColumns.push({ name: field, text: field }); });
+        }
+        return exportColumns;
+    }
     getModuleName() {
         return 'excelExport';
     }
@@ -24976,5 +25320,5 @@ class Print {
  * Export Schedule components
  */
 
-export { Schedule, cellClick, cellDoubleClick, moreEventsClick, select, hover, actionBegin, actionComplete, actionFailure, navigating, renderCell, eventClick, eventRendered, dataBinding, dataBound, popupOpen, popupClose, dragStart, drag, dragStop, resizeStart, resizing, resizeStop, inlineClick, initialLoad, initialEnd, print$1 as print, dataReady, eventsLoaded, contentReady, scroll, virtualScroll, scrollUiUpdate, uiUpdate, documentClick, cellMouseDown, WEEK_LENGTH, MS_PER_DAY, MS_PER_MINUTE, getElementHeightFromClass, getTranslateY, getWeekFirstDate, getWeekLastDate, firstDateOfMonth, lastDateOfMonth, getWeekNumber, getWeekMiddleDate, setTime, resetTime, getDateInMs, getDateCount, addDays, addMonths, addYears, getStartEndHours, getMaxDays, getDaysCount, getDateFromString, getScrollBarWidth, 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, eventRendered, dataBinding, dataBound, popupOpen, popupClose, dragStart, drag, dragStop, resizeStart, resizing, resizeStop, inlineClick, 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, getTranslateY, getWeekFirstDate, getWeekLastDate, firstDateOfMonth, lastDateOfMonth, getWeekNumber, getWeekMiddleDate, setTime, resetTime, getDateInMs, getDateCount, addDays, addMonths, addYears, getStartEndHours, getMaxDays, getDaysCount, getDateFromString, getScrollBarWidth, 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 };
 //# sourceMappingURL=ej2-schedule.es2015.js.map