@syncfusion/ej2-schedule - npm Package Compare versions

Comparing version 16.3.17 to 16.3.21

CHANGELOG.md

@@ -5,2 +5,4 @@ # Changelog
 
+## 16.3.17 (2018-09-12)
+
 ### Schedule
@@ -14,5 +16,5 @@
 - **Resize** - Appointment’s time can be easily extended either by resizing its start or end handlers.
-- * **Week Number** - Support added to display the week number of the current date, beside the date header section.
-- * Provided template support for customizing `quick popup`, that opens while clicking on the cells or appointments.
-- * The data type of the appointment ID field is made compatible to accept both string and number type values.
+- **Week Number** - Support added to display the week number of the current date, beside the date header section.
+- Provided template support for customizing `quick popup`, that opens while clicking on the cells or appointments.
+- The data type of the appointment ID field is made compatible to accept both string and number type values.
 
@@ -19,0 +21,0 @@ #### Bug Fixes

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 16.3.17
+*  version : 16.3.21
 *  Copyright Syncfusion Inc. 2001 - 2018. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "name": "@syncfusion/ej2-schedule",
-  "version": "16.3.17",
+  "version": "16.3.21",
   "author": "Syncfusion Inc.",
@@ -10,11 +10,11 @@ "license": "SEE LICENSE IN license",
   "dependencies": {
-    "@syncfusion/ej2-base": "~16.3.17",
-    "@syncfusion/ej2-data": "~16.3.17",
-    "@syncfusion/ej2-popups": "~16.3.17",
-    "@syncfusion/ej2-calendars": "~16.3.17",
-    "@syncfusion/ej2-navigations": "~16.3.17",
-    "@syncfusion/ej2-dropdowns": "~16.3.17",
-    "@syncfusion/ej2-buttons": "~16.3.17",
-    "@syncfusion/ej2-inputs": "~16.3.17",
-    "@syncfusion/ej2-lists": "~16.3.17"
+    "@syncfusion/ej2-base": "~16.3.21",
+    "@syncfusion/ej2-data": "~16.3.21",
+    "@syncfusion/ej2-popups": "~16.3.21",
+    "@syncfusion/ej2-calendars": "~16.3.21",
+    "@syncfusion/ej2-navigations": "~16.3.21",
+    "@syncfusion/ej2-dropdowns": "~16.3.21",
+    "@syncfusion/ej2-buttons": "~16.3.21",
+    "@syncfusion/ej2-inputs": "~16.3.21",
+    "@syncfusion/ej2-lists": "~16.3.21"
   },
@@ -53,3 +53,4 @@ "devDependencies": {
     "url": "https://github.com/syncfusion/ej2-schedule.git"
-  }
+  },
+  "sideEffects": false
 }

src/recurrence-editor/recurrence-editor.js

@@ -224,4 +224,9 @@ var __extends = (this && this.__extends) || (function () {
         }
-        this.startState(this.repeatType.value.toString().toUpperCase(), NEVER, this.startDate);
-        this.updateForm(this.repeatType.value.toString());
+        else {
+            this.startState(this.repeatType.value.toString().toUpperCase(), NEVER, this.startDate);
+            this.updateForm(this.repeatType.value.toString());
+            if (this.selectedType > 0) {
+                this.setProperties({ value: this.getRecurrenceRule() }, false);
+            }
+        }
         this.applyCustomClass(this.cssClass);
@@ -228,0 +233,0 @@ };

src/schedule/actions/action-base.d.ts

@@ -10,3 +10,2 @@ import { ActionBaseArgs, ResizeEdges, DragEventArgs, ResizeEventArgs } from '../base/interface';
     resizeEdges: ResizeEdges;
-    renderDates: Date[][];
     scrollArgs: ActionBaseArgs;
@@ -13,0 +12,0 @@ scrollEdges: ResizeEdges;

src/schedule/actions/action-base.js

@@ -9,8 +9,6 @@ import { addClass, createElement, compile, extend, isNullOrUndefined, closest } from '@syncfusion/ej2-base';
     function ActionBase(parent) {
-        this.renderDates = [];
         this.parent = parent;
         this.actionObj = {
-            X: 0, Y: 0, left: 0, top: 0, width: 0, height: 0, minIndex: 0, maxIndex: 0,
-            groupIndex: 0, cloneElement: [], originalElement: [], action: null, isAllDay: null,
-            cellWidth: 0, cellHeight: 0, slotCount: 0, slotInterval: 0, interval: 0
+            X: 0, Y: 0, groupIndex: 0, cellWidth: 0, cellHeight: 0, slotInterval: 0, interval: 0, actionIndex: 0,
+            cloneElement: [], originalElement: [], action: null, isAllDay: null, excludeSelectors: null
         };
@@ -44,6 +42,15 @@ this.scrollArgs = { element: null, width: 0, height: 0 };
         var eventObj = eventArgs.data;
+        var isSameResource = (this.parent.activeViewOptions.group.resources.length > 0) ?
+            parseInt(this.actionObj.element.getAttribute('data-group-index'), 10) === this.actionObj.groupIndex : true;
+        if (+eventObj[this.parent.eventFields.startTime] === +this.actionObj.event[this.parent.eventFields.startTime] &&
+            +eventObj[this.parent.eventFields.endTime] === +this.actionObj.event[this.parent.eventFields.endTime] && isSameResource) {
+            return;
+        }
+        if (eventObj[this.parent.eventFields.startTimezone] || eventObj[this.parent.eventFields.endTimezone]) {
+            this.parent.eventBase.timezoneConvert(eventObj);
+        }
         var currentAction;
         if (eventObj[this.parent.eventFields.recurrenceRule] &&
             eventObj[this.parent.eventFields.id] === eventObj[this.parent.eventFields.recurrenceID]) {
-            eventObj[this.parent.eventFields.id] = this.parent.eventBase.getEventMaxId();
+            eventObj[this.parent.eventFields.id] = this.parent.eventBase.getEventMaxID();
             currentAction = 'EditOccurrence';
@@ -61,26 +68,13 @@ }
         var trElement = [].slice.call(viewElement.querySelector('tr').children);
-        var leftOffset;
-        var rightOffset;
-        if (this.parent.activeView.isTimelineView()) {
-            leftOffset = this.parent.enableRtl ? trElement.slice(-1)[0].offsetLeft : trElement[0].offsetLeft;
-            rightOffset = this.parent.enableRtl ? trElement[0].offsetLeft + this.actionObj.cellWidth :
-                trElement.slice(-1)[0].offsetLeft + trElement.slice(-1)[0].offsetWidth;
+        if (!this.parent.activeView.isTimelineView() && this.parent.activeViewOptions.group.resources.length > 0 &&
+            !this.parent.isAdaptive) {
+            trElement = this.getResourceElements(trElement);
         }
-        else {
-            if (this.parent.activeViewOptions.group.resources.length > 0 && !this.parent.isAdaptive) {
-                trElement = this.getResourceElements(trElement);
-            }
-            leftOffset = trElement[0].getBoundingClientRect().left;
-            rightOffset = trElement.slice(-1)[0].getBoundingClientRect().right;
-            if (this.parent.enableRtl) {
-                leftOffset += trElement[0].offsetWidth - this.actionObj.element.offsetLeft;
-                rightOffset -= trElement.slice(-1)[0].offsetWidth;
-            }
-        }
+        var leftOffset = trElement[0].getBoundingClientRect();
+        var rightOffset = trElement.slice(-1)[0].getBoundingClientRect();
         var viewDimension = {
             bottom: viewElement.scrollHeight - 5,
-            left: this.parent.activeView.isTimelineView() ? leftOffset : this.parent.enableRtl ? rightOffset : leftOffset,
-            right: this.parent.activeView.isTimelineView() ? rightOffset : this.parent.enableRtl ? leftOffset : rightOffset,
-            top: 0,
-            offsetLeft: viewElement.offsetLeft
+            left: this.parent.enableRtl ? rightOffset.left : leftOffset.left,
+            right: this.parent.enableRtl ? leftOffset.right : rightOffset.right,
+            top: 0
         };
@@ -120,3 +114,4 @@ return viewDimension;
         }
-        if (!this.parent.activeViewOptions.timeScale.enable || !this.parent.isAdaptive || this.parent.currentView === 'Month') {
+        if (!this.parent.activeViewOptions.timeScale.enable || !this.parent.isAdaptive || this.parent.currentView === 'Month' ||
+            this.parent.currentView === 'TimelineMonth') {
             return;
@@ -135,3 +130,4 @@ }
                 var rightValue = parseInt(this.actionObj.clone.style.right, 10);
-                offsetValue = this.resizeEdges.left ? rightValue + this.actionObj.clone.offsetWidth : rightValue;
+                offsetValue = this.actionObj.action === 'drag' || this.resizeEdges.left ?
+                    rightValue + this.actionObj.clone.offsetWidth : rightValue;
                 timeIndicator.style.right = formatUnit(offsetValue);
@@ -141,3 +137,4 @@ }
                 var leftValue = parseInt(this.actionObj.clone.style.left, 10);
-                offsetValue = this.resizeEdges.left ? leftValue : leftValue + this.actionObj.clone.offsetWidth;
+                offsetValue = this.actionObj.action === 'drag' || this.resizeEdges.left ?
+                    leftValue : leftValue + this.actionObj.clone.offsetWidth;
                 timeIndicator.style.left = formatUnit(offsetValue);
@@ -175,11 +172,8 @@ }
         if (this.parent.currentView === 'Month' || this.parent.currentView === 'TimelineMonth') {
-            cloneClassLists.push('e-month-event');
+            cloneClassLists.push(cls.MONTH_CLONE_ELEMENT_CLASS);
         }
         addClass([cloneElement], cloneClassLists);
-        var isAllDay = element.classList.contains(cls.ALLDAY_APPOINTMENT_CLASS);
-        if (this.actionObj.action === 'drag' && (this.parent.currentView === 'Month' || isAllDay)) {
-            cloneElement.style.width = formatUnit(this.actionObj.cellWidth);
-        }
         addClass([element], cls.EVENT_ACTION_CLASS);
         element.parentElement.appendChild(cloneElement);
+        cloneElement.style.width = formatUnit(cloneElement.offsetWidth - 2);
         return cloneElement;
@@ -209,9 +203,15 @@ };
             parent.scrollTop += this.scrollEdges.top ? -this.actionObj.scroll.scrollBy : this.actionObj.scroll.scrollBy;
+            if (this.actionObj.action === 'resize') {
+                this.actionObj.Y += this.scrollEdges.top ? this.actionObj.scroll.scrollBy : -this.actionObj.scroll.scrollBy;
+            }
         }
         if (xInBounds && (this.scrollEdges.left || this.scrollEdges.right)) {
             parent.scrollLeft += this.scrollEdges.left ? -this.actionObj.scroll.scrollBy : this.actionObj.scroll.scrollBy;
+            if (this.actionObj.action === 'resize') {
+                this.actionObj.X += this.scrollEdges.left ? this.actionObj.scroll.scrollBy : -this.actionObj.scroll.scrollBy;
+            }
         }
     };
     ActionBase.prototype.autoScrollValidation = function (e) {
-        if (!this.actionObj.scroll.enable) {
+        if (!this.actionObj.scroll.enable || closest(e.target, '.' + cls.DATE_HEADER_WRAP_CLASS)) {
             return false;
@@ -262,2 +262,3 @@ }
         this.resizeEdges = { left: false, right: false, top: false, bottom: false };
+        this.scrollEdges = { left: false, right: false, top: false, bottom: false };
     };
@@ -264,0 +265,0 @@ return ActionBase;

src/schedule/actions/drag.d.ts

@@ -13,11 +13,13 @@ import { ActionBase } from '../actions/action-base';
     private dragStop(e);
-    private updateDraggingDateTime(e, actionArgs);
+    private updateDraggingDateTime(e);
+    private morePopupEventDragging(e);
     private calculateVerticalTime(e);
     private swapDragging(e);
-    private calculateVerticalDate(e, actionArgs);
-    private calculateTimelineTime(e, actionArgs);
-    private calculateTimelineDate(e, actionArgs);
-    private calculateResourceGroupingPosition(e, actionArgs);
+    private calculateVerticalDate(e);
+    private calculateTimelineTime(e);
+    private calculateTimelineDate(e);
+    private calculateResourceGroupingPosition(e);
     private getEventWrapper(index);
     private getAllDayEventHeight();
+    private isAllowDrop(e);
     /**
@@ -24,0 +26,0 @@ * Get module name.

src/schedule/actions/drag.js

@@ -59,5 +59,12 @@ var __extends = (this && this.__extends) || (function () {
         var cellHeight = (this.actionObj.cellHeight / slotInterval) * this.actionObj.interval;
-        var leftValue = formatUnit(Math.floor(Math.abs(parseInt(e.left, 10)) / cellWidth) * cellWidth);
+        var leftOffset = this.parent.enableRtl ? parseInt(e.left, 10) : Math.abs(parseInt(e.left, 10));
+        var leftValue;
+        if (this.parent.currentView === 'Month' || this.actionObj.clone.classList.contains(cls.ALLDAY_APPOINTMENT_CLASS)) {
+            leftValue = e.left;
+        }
+        else {
+            leftValue = formatUnit(Math.floor(leftOffset / cellWidth) * cellWidth);
+        }
         var topValue;
-        if (this.parent.activeView.isTimelineView()) {
+        if (this.parent.activeView.isTimelineView() || this.actionObj.element.offsetParent.classList.contains(cls.MORE_EVENT_POPUP_CLASS)) {
             topValue = formatUnit(this.actionObj.clone.offsetTop);
@@ -76,3 +83,8 @@ }
         else {
-            topValue = formatUnit(Math.floor(parseInt(e.top, 10) / cellHeight) * cellHeight);
+            topValue = formatUnit(Math.ceil(parseInt(e.top, 10) / cellHeight) * cellHeight);
+            var scrollHeight = this.parent.element.querySelector('.e-content-wrap').scrollHeight;
+            var cloneBottom = parseInt(topValue, 10) + this.actionObj.clone.offsetHeight;
+            if (cloneBottom > scrollHeight) {
+                topValue = (parseInt(topValue, 10) - (cloneBottom - scrollHeight)) + 'px';
+            }
         }
@@ -100,5 +112,6 @@ return { left: leftValue, top: topValue };
             event: e,
+            excludeSelectors: null,
             element: this.actionObj.element,
             interval: this.actionObj.interval,
-            scroll: { enable: true, scrollBy: 25 }
+            scroll: { enable: true, scrollBy: 10 }
         };
@@ -117,20 +130,12 @@ this.parent.trigger(events.dragStart, dragArgs);
         this.actionObj.scroll = dragArgs.scroll;
+        this.actionObj.excludeSelectors = dragArgs.excludeSelectors;
     };
     DragAndDrop.prototype.drag = function (e) {
         var eventObj = extend({}, this.actionObj.event, null, true);
-        var dragArea = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
         var eventArgs = this.getPageCoordinates(e);
-        var actionArgs = {};
-        actionArgs.X = eventArgs.pageX;
-        actionArgs.Y = eventArgs.pageY;
-        actionArgs.element = dragArea;
-        actionArgs.actionIndex = Math.floor((actionArgs.X + dragArea.scrollLeft -
-            this.parent.element.offsetLeft - dragArea.offsetLeft) / this.actionObj.cellWidth);
-        actionArgs.actionIndex = this.getIndex(actionArgs.actionIndex);
-        actionArgs.interval = eventObj[this.parent.eventFields.endTime].getTime() -
-            eventObj[this.parent.eventFields.startTime].getTime();
+        this.actionObj.Y = eventArgs.pageY;
         if (this.autoScrollValidation(e) && !this.actionObj.clone.classList.contains(cls.ALLDAY_APPOINTMENT_CLASS)) {
             this.autoScroll();
         }
-        this.updateDraggingDateTime(e, actionArgs);
+        this.updateDraggingDateTime(e);
         var dragArgs = { data: eventObj, event: e, element: this.actionObj.element };
@@ -143,2 +148,5 @@ this.parent.trigger(events.drag, dragArgs);
         this.parent.uiStateValues.action = false;
+        if (this.isAllowDrop(e)) {
+            return;
+        }
         var dragArgs = { cancel: false, data: this.getChangedData(), event: e, element: this.actionObj.element };
@@ -151,9 +159,12 @@ this.parent.trigger(events.dragStop, dragArgs);
     };
-    DragAndDrop.prototype.updateDraggingDateTime = function (e, actionArgs) {
-        if (this.parent.activeView.isTimelineView()) {
+    DragAndDrop.prototype.updateDraggingDateTime = function (e) {
+        if (this.actionObj.element.offsetParent.classList.contains(cls.MORE_EVENT_POPUP_CLASS)) {
+            this.morePopupEventDragging(e);
+        }
+        else if (this.parent.activeView.isTimelineView()) {
             if (this.parent.currentView === 'TimelineMonth') {
-                this.calculateTimelineDate(e, actionArgs);
+                this.calculateTimelineDate(e);
             }
             else {
-                this.calculateTimelineTime(e, actionArgs);
+                this.calculateTimelineTime(e);
             }
@@ -163,3 +174,3 @@ }
             if (this.parent.currentView === 'Month') {
-                this.calculateVerticalDate(e, actionArgs);
+                this.calculateVerticalDate(e);
             }
@@ -171,2 +182,34 @@ else {
     };
+    DragAndDrop.prototype.morePopupEventDragging = function (e) {
+        if (isNullOrUndefined(e.target) || (e.target && isNullOrUndefined(closest(e.target, 'td')))) {
+            return;
+        }
+        var eventObj = extend({}, this.actionObj.event, null, true);
+        var eventDuration = eventObj[this.parent.eventFields.endTime].getTime() -
+            eventObj[this.parent.eventFields.startTime].getTime();
+        var td = closest(e.target, 'td');
+        var dragStart = new Date(parseInt(td.getAttribute('data-date'), 10));
+        var dragEnd = new Date(dragStart.getTime());
+        dragEnd.setMilliseconds(eventDuration);
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            this.actionObj.groupIndex = parseInt(td.getAttribute('data-group-index'), 10);
+        }
+        this.actionObj.start = new Date(dragStart.getTime());
+        this.actionObj.end = new Date(dragEnd.getTime());
+        this.actionObj.clone.style.top = formatUnit(td.offsetParent.offsetTop);
+        this.actionObj.clone.style.left = formatUnit(td.offsetLeft);
+        this.actionObj.clone.style.width = formatUnit(td.offsetWidth);
+        var eventContainer = td;
+        var eventWrapper;
+        if (this.parent.activeView.isTimelineView()) {
+            var rowIndex = closest(td, 'tr').rowIndex;
+            eventContainer = this.parent.element.querySelectorAll('.e-appointment-container').item(rowIndex);
+        }
+        eventWrapper = eventContainer.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS);
+        if (!eventWrapper) {
+            eventWrapper = createElement('div', { className: cls.APPOINTMENT_WRAPPER_CLASS });
+            eventContainer.appendChild(eventWrapper);
+        }
+        eventWrapper.appendChild(this.actionObj.clone);
+    };
     DragAndDrop.prototype.calculateVerticalTime = function (e) {
@@ -207,3 +250,3 @@ if (isNullOrUndefined(e.target) || (e.target && isNullOrUndefined(closest(e.target, 'tr')))) {
             this.getEventWrapper(colIndex).appendChild(this.actionObj.clone);
-            var spanHours = 0;
+            var spanHours = -(((this.actionObj.slotInterval / this.actionObj.cellHeight) * diffInMinutes) * (1000 * 60));
             if (this.actionObj.clone.querySelector('.' + cls.EVENT_ICON_UP_CLASS)) {
@@ -217,2 +260,3 @@ var startTime = new Date(eventStart.getTime());
             dragStart = this.calculateIntervalTime(dragStart);
+            dragStart.setMilliseconds(spanHours);
             dragEnd = new Date(dragStart.getTime());
@@ -229,2 +273,3 @@ if (this.actionObj.element.classList.contains(cls.ALLDAY_APPOINTMENT_CLASS)) {
             dragStart = new Date(parseInt(td.getAttribute('data-date'), 10));
+            dragStart.setHours(eventStart.getHours(), eventStart.getMinutes(), eventStart.getSeconds());
             dragEnd = new Date(dragStart.getTime());
@@ -280,3 +325,3 @@ dragEnd.setMilliseconds(eventDuration);
     };
-    DragAndDrop.prototype.calculateVerticalDate = function (e, actionArgs) {
+    DragAndDrop.prototype.calculateVerticalDate = function (e) {
         if (isNullOrUndefined(e.target) || (e.target && isNullOrUndefined(closest(e.target, 'tr')))) {
@@ -287,5 +332,15 @@ return;
         var eventObj = extend({}, this.actionObj.event, null, true);
+        var eventDuration = eventObj[this.parent.eventFields.endTime].getTime() -
+            eventObj[this.parent.eventFields.startTime].getTime();
         var td = closest(e.target, 'td');
         var tr = td.parentElement;
         var colIndex = (tr.rowIndex * tr.childNodes.length) + td.cellIndex;
+        // let cellIndex: number = td.cellIndex;
+        // let daysCount: number = Math.floor(this.actionObj.element.offsetWidth / this.actionObj.cellWidth);
+        // let maxIndex: number = (tr.lastChild as HTMLTableCellElement).cellIndex;
+        // if (cellIndex + daysCount > maxIndex) {
+        //     this.actionObj.clone.style.width = formatUnit((this.actionObj.cellWidth - 2) * ((maxIndex + 1) - cellIndex));
+        // } else {
+        //     this.actionObj.clone.style.width = formatUnit(this.actionObj.element.offsetWidth);
+        // }
         var outerWrapper = this.parent.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS);
@@ -303,3 +358,4 @@ if (this.parent.activeViewOptions.group.resources.length > 0) {
         }
-        var dragStart = new Date(parseInt(td.getAttribute('data-date'), 10));
+        var timeString = td.getAttribute('data-date') || eventObj[this.parent.eventFields.startTime].getTime().toString();
+        var dragStart = new Date(parseInt(timeString, 10));
         var dragEnd = new Date(dragStart.getTime());
@@ -310,3 +366,3 @@ if (this.parent.enableRtl) {
             dragEnd = new Date(dragStart.getTime() + endTimeDiff);
-            dragStart = new Date(dragEnd.getTime() - actionArgs.interval);
+            dragStart = new Date(dragEnd.getTime() - eventDuration);
         }
@@ -317,3 +373,3 @@ else {
             dragStart = new Date(dragStart.getTime() + startTimeDiff);
-            dragEnd = new Date(dragStart.getTime() + actionArgs.interval);
+            dragEnd = new Date(dragStart.getTime() + eventDuration);
         }
@@ -324,3 +380,3 @@ this.actionObj.start = new Date(dragStart.getTime());
     };
-    DragAndDrop.prototype.calculateTimelineTime = function (e, actionArgs) {
+    DragAndDrop.prototype.calculateTimelineTime = function (e) {
         var eventObj = extend({}, this.actionObj.event, null, true);
@@ -347,3 +403,3 @@ var eventDuration = eventObj[this.parent.eventFields.endTime].getTime() -
         if (this.parent.activeViewOptions.group.resources.length > 0) {
-            this.calculateResourceGroupingPosition(e, actionArgs);
+            this.calculateResourceGroupingPosition(e);
         }
@@ -354,5 +410,7 @@ this.actionObj.start = new Date(eventStart.getTime());
     };
-    DragAndDrop.prototype.calculateTimelineDate = function (e, actionArgs) {
+    DragAndDrop.prototype.calculateTimelineDate = function (e) {
         var cloneIndex = 0;
         var eventObj = extend({}, this.actionObj.event, null, true);
+        var eventDuration = eventObj[this.parent.eventFields.endTime].getTime() -
+            eventObj[this.parent.eventFields.startTime].getTime();
         if (this.parent.enableRtl) {
@@ -375,5 +433,5 @@ cloneIndex = (Math.floor(parseInt(this.actionObj.clone.style.right, 10))) / this.actionObj.cellWidth;
         dragStart = new Date(dragStart.getTime() + srtDateDiff);
-        var dragEnd = new Date(dragStart.getTime() + actionArgs.interval);
+        var dragEnd = new Date(dragStart.getTime() + eventDuration);
         if (this.parent.activeViewOptions.group.resources.length > 0) {
-            this.calculateResourceGroupingPosition(e, actionArgs);
+            this.calculateResourceGroupingPosition(e);
         }
@@ -384,25 +442,18 @@ this.actionObj.start = new Date(dragStart.getTime());
     };
-    DragAndDrop.prototype.calculateResourceGroupingPosition = function (e, actionArgs) {
-        var trCollection = this.parent.element.querySelectorAll('.e-schedule-table.e-content-table tr:not(.e-hidden)');
-        var rowIndex = Math.floor(Math.floor((actionArgs.Y + actionArgs.element.scrollTop) -
-            actionArgs.element.getBoundingClientRect().top) / this.actionObj.cellHeight);
+    DragAndDrop.prototype.calculateResourceGroupingPosition = function (e) {
+        var dragArea = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
+        var trCollection = this.parent.element.querySelectorAll('.e-content-wrap .e-content-table tr:not(.e-hidden)');
+        var rowIndex = Math.floor(Math.floor((this.actionObj.Y + dragArea.scrollTop) -
+            dragArea.getBoundingClientRect().top) / this.actionObj.cellHeight);
         rowIndex = (rowIndex < 0) ? 0 : (rowIndex > trCollection.length - 1) ? trCollection.length - 1 : rowIndex;
         var eventContainer = this.parent.element.querySelectorAll('.e-appointment-container:not(.e-hidden)').item(rowIndex);
-        var tr = trCollection.item(rowIndex);
-        var isResourceHeader = tr.children.item(0).classList.contains(cls.RESOURCE_GROUP_CELLS_CLASS);
-        if (isResourceHeader) {
-            addClass([this.actionObj.clone], cls.DRAG_DISABLED_CLASS);
+        var eventWrapper = eventContainer.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS);
+        if (!eventWrapper) {
+            eventWrapper = createElement('div', { className: cls.APPOINTMENT_WRAPPER_CLASS });
+            eventContainer.appendChild(eventWrapper);
         }
-        else {
-            removeClass([this.actionObj.clone], cls.DRAG_DISABLED_CLASS);
-            var eventWrapper = eventContainer.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS);
-            if (!eventWrapper) {
-                eventWrapper = createElement('div', { className: cls.APPOINTMENT_WRAPPER_CLASS });
-                eventContainer.appendChild(eventWrapper);
-            }
-            eventWrapper.appendChild(this.actionObj.clone);
-            var td = closest(e.target, 'td');
-            this.actionObj.groupIndex = td ? parseInt(td.getAttribute('data-group-index'), 10) : this.actionObj.groupIndex;
-        }
-        this.actionObj.clone.style.top = formatUnit(rowIndex * this.actionObj.cellHeight);
+        eventWrapper.appendChild(this.actionObj.clone);
+        var td = closest(e.target, 'td');
+        this.actionObj.groupIndex = td ? parseInt(td.getAttribute('data-group-index'), 10) : this.actionObj.groupIndex;
+        this.actionObj.clone.style.top = formatUnit(trCollection.item(rowIndex).offsetTop);
     };
@@ -433,2 +484,17 @@ DragAndDrop.prototype.getEventWrapper = function (index) {
     };
+    DragAndDrop.prototype.isAllowDrop = function (e) {
+        if (!this.actionObj.excludeSelectors) {
+            return false;
+        }
+        var dropSelectors = this.actionObj.excludeSelectors.split(',');
+        var isAllowDrop = false;
+        for (var _i = 0, dropSelectors_1 = dropSelectors; _i < dropSelectors_1.length; _i++) {
+            var selector = dropSelectors_1[_i];
+            if (e.target.classList.contains(selector)) {
+                isAllowDrop = true;
+                break;
+            }
+        }
+        return isAllowDrop;
+    };
     /**
@@ -435,0 +501,0 @@ * Get module name.

src/schedule/actions/resize.d.ts

@@ -12,3 +12,3 @@ import { ActionBase } from '../actions/action-base';
     private verticalResizing(isTop);
-    private horizontalResizing(e, isLeft);
+    private horizontalResizing(isLeft);
     private getTopBottomStyles(e, isTop);
@@ -15,0 +15,0 @@ private getLeftRightStyles(e, isLeft);

src/schedule/actions/resize.js

@@ -11,3 +11,3 @@ var __extends = (this && this.__extends) || (function () {
 })();
-import { Browser, EventHandler, closest, extend, formatUnit, setStyleAttribute, addClass } from '@syncfusion/ej2-base';
+import { addClass, Browser, EventHandler, closest, extend, formatUnit, setStyleAttribute } from '@syncfusion/ej2-base';
 import { ActionBase } from '../actions/action-base';
@@ -35,3 +35,2 @@ import * as util from '../base/util';
                 var cloneElement = _this.createCloneElement(element);
-                addClass([cloneElement], cls.APPOINTMENT_BORDER);
                 _this.actionObj.cloneElement[index] = cloneElement;
@@ -45,3 +44,2 @@ if (_this.actionObj.element === element) {
             this.actionObj.clone = this.createCloneElement(this.actionObj.element);
-            addClass([this.actionObj.clone], cls.APPOINTMENT_BORDER);
             this.actionObj.cloneElement = [this.actionObj.clone];
@@ -53,3 +51,4 @@ this.actionObj.originalElement = [this.actionObj.element];
         this.actionObj.action = 'resize';
-        this.actionObj.interval = this.parent.activeViewOptions.timeScale.interval / this.parent.activeViewOptions.timeScale.slotCount;
+        this.actionObj.slotInterval = this.parent.activeViewOptions.timeScale.interval / this.parent.activeViewOptions.timeScale.slotCount;
+        this.actionObj.interval = this.actionObj.slotInterval;
         var resizeTarget = closest(e.target, '.' + cls.EVENT_RESIZE_CLASS);
@@ -65,3 +64,3 @@ this.actionObj.element = closest(resizeTarget, '.' + cls.APPOINTMENT_CLASS);
             interval: this.actionObj.interval,
-            scroll: { enable: true, scrollBy: 2 }
+            scroll: { enable: true, scrollBy: 10 }
         };
@@ -122,5 +121,6 @@ this.parent.trigger(event.resizeStart, resizeArgs);
                     setStyleAttribute(cloneElement, leftStyles);
+                    addClass([cloneElement], cls.LEFT_RESIZE_HANDLER);
                 }
             }
-            this.horizontalResizing(e, !this.parent.enableRtl);
+            this.horizontalResizing(!this.parent.enableRtl);
         }
@@ -133,5 +133,6 @@ if (this.resizeEdges.right) {
                     setStyleAttribute(cloneElement, rightStyles);
+                    addClass([cloneElement], cls.RIGHT_RESIZE_HANDLER);
                 }
             }
-            this.horizontalResizing(e, this.parent.enableRtl);
+            this.horizontalResizing(this.parent.enableRtl);
         }
@@ -144,2 +145,3 @@ if (this.resizeEdges.top) {
                     setStyleAttribute(cloneElement, topStyles);
+                    addClass([cloneElement], cls.TOP_RESIZE_HANDLER);
                 }
@@ -155,2 +157,3 @@ }
                     setStyleAttribute(cloneElement, bottomStyles);
+                    addClass([cloneElement], cls.BOTTOM_RESIZE_HANDLER);
                 }
@@ -189,4 +192,3 @@ }
         }
-        var minutes = (offsetValue / this.actionObj.cellHeight) *
-            (this.parent.activeViewOptions.timeScale.interval / this.parent.activeViewOptions.timeScale.slotCount);
+        var minutes = (offsetValue / this.actionObj.cellHeight) * this.actionObj.slotInterval;
         var resizeTime = util.resetTime(new Date(parseInt(this.actionObj.clone.offsetParent.getAttribute('data-date'), 10)));
@@ -203,3 +205,3 @@ resizeTime.setHours(this.parent.activeView.getStartHour().getHours());
     };
-    Resize.prototype.horizontalResizing = function (e, isLeft) {
+    Resize.prototype.horizontalResizing = function (isLeft) {
         var eventStart = new Date(this.actionObj.event[this.parent.eventFields.startTime].getTime());
@@ -233,3 +235,4 @@ var eventEnd = new Date(this.actionObj.event[this.parent.eventFields.endTime].getTime());
             else {
-                var cellWidth = this.parent.currentView === 'TimelineMonth' ? this.actionObj.cellWidth : 0;
+                var cellWidth = this.parent.currentView === 'TimelineMonth' || !this.parent.activeViewOptions.timeScale.enable ?
+                    this.actionObj.cellWidth - 2 : 0;
                 cellIndex = Math.floor(isLeft ? (this.actionObj.clone.offsetLeft / this.actionObj.cellWidth) :
@@ -261,3 +264,11 @@ (this.actionObj.clone.offsetLeft + (this.actionObj.clone.offsetWidth - cellWidth)) / this.actionObj.cellWidth);
             else {
-                resizeTime.setTime(resizeDate.getTime() + 0);
+                var offsetValue = this.parent.enableRtl ? parseFloat(this.actionObj.clone.style.right) :
+                    parseFloat(this.actionObj.clone.style.left);
+                if (!isLeft) {
+                    offsetValue += this.actionObj.clone.offsetWidth;
+                }
+                var spanMinutes = Math.ceil((this.actionObj.slotInterval / this.actionObj.cellWidth) *
+                    (offsetValue - Math.floor(offsetValue / this.actionObj.cellWidth) * this.actionObj.cellWidth));
+                resizeTime = new Date(resizeDate.getTime());
+                resizeTime.setMinutes(resizeTime.getMinutes() + spanMinutes);
                 this.updateTimePosition(resizeTime);
@@ -283,7 +294,9 @@ }
         if (isLeft) {
-            this.actionObj.start = this.calculateIntervalTime(resizeTime);
+            this.actionObj.start = this.parent.activeViewOptions.timeScale.enable ? this.calculateIntervalTime(resizeTime) : resizeTime;
         }
         else {
-            var resizeEnd = this.actionObj.event[this.parent.eventFields.isAllDay] ? util.addDays(resizeTime, 1) : resizeTime;
-            this.actionObj.end = this.calculateIntervalTime(resizeEnd);
+            var resizeEnd = (this.actionObj.event[this.parent.eventFields.isAllDay] && resizeTime.getHours() === 0 &&
+                resizeTime.getMinutes() === 0) ? util.addDays(resizeTime, 1) : resizeTime;
+            this.actionObj.end = this.parent.activeViewOptions.timeScale.enable && this.parent.currentView !== 'Month' ?
+                this.calculateIntervalTime(resizeEnd) : resizeEnd;
         }
@@ -294,4 +307,3 @@ };
         var viewElement = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
-        var slotInterval = (this.actionObj.cellHeight / (this.parent.activeViewOptions.timeScale.interval /
-            this.parent.activeViewOptions.timeScale.slotCount)) * this.actionObj.interval;
+        var slotInterval = (this.actionObj.cellHeight / this.actionObj.slotInterval) * this.actionObj.interval;
         var clnHeight = isTop ? this.actionObj.element.offsetHeight + (this.actionObj.Y - pages.pageY) :
@@ -315,51 +327,54 @@ this.actionObj.element.offsetHeight + (pages.pageY - this.actionObj.Y);
     Resize.prototype.getLeftRightStyles = function (e, isLeft) {
+        var styles = {};
         var pages = this.getPageCoordinates(e);
         var isTimelineView = this.parent.activeView.isTimelineView();
+        var isTimeViews = ['TimelineDay', 'TimelineWeek', 'TimelineWorkWeek'].indexOf(this.parent.currentView) > 0 &&
+            this.parent.activeViewOptions.timeScale.enable;
+        var slotInterval = (this.actionObj.cellWidth / this.actionObj.slotInterval) * this.actionObj.interval;
         var pageWidth = isLeft ? (this.actionObj.X - pages.pageX) : (pages.pageX - this.actionObj.X);
         var targetWidth = isTimelineView ?
             (this.actionObj.element.offsetWidth / this.actionObj.cellWidth) * this.actionObj.cellWidth :
-            Math.ceil(this.actionObj.element.offsetWidth / this.actionObj.cellWidth) * this.actionObj.cellWidth;
-        var clnWidth = targetWidth + (Math.ceil(pageWidth / this.actionObj.cellWidth) * this.actionObj.cellWidth);
-        var clnLeft = isLeft ? this.actionObj.element.offsetLeft - (this.actionObj.X - pages.pageX) :
-            this.parent.enableRtl ? this.actionObj.element.offsetLeft : 0;
-        if (isTimelineView) {
-            if (this.parent.enableRtl) {
-                clnLeft = !isLeft ? (pages.pageX < this.actionObj.X - this.actionObj.clone.offsetWidth) ?
-                    parseInt(this.actionObj.clone.style.right, 10) : clnLeft : clnLeft;
-            }
-            else {
-                clnLeft = isLeft ? (pages.pageX > this.actionObj.X + this.actionObj.clone.offsetWidth) ?
-                    parseInt(this.actionObj.clone.style.left, 10) : clnLeft : clnLeft;
-            }
+            this.parent.currentView === 'Month' ? this.actionObj.element.offsetWidth :
+                Math.ceil(this.actionObj.element.offsetWidth / this.actionObj.cellWidth) * this.actionObj.cellWidth;
+        var offsetWidth = targetWidth + (Math.ceil(pageWidth / this.actionObj.cellWidth) * this.actionObj.cellWidth);
+        if (isTimeViews) {
+            offsetWidth = targetWidth + (Math.ceil(pageWidth / slotInterval) * slotInterval);
         }
-        var leftValue = clnLeft;
-        clnLeft = isTimelineView ? Math.floor(clnLeft / this.actionObj.cellWidth) * this.actionObj.cellWidth :
-            Math.ceil(Math.abs(clnLeft) / this.actionObj.cellWidth) * this.actionObj.cellWidth;
-        var styles = {
-            height: formatUnit(this.actionObj.element.offsetHeight),
-            top: formatUnit(this.actionObj.element.offsetTop),
-            width: formatUnit((clnWidth < this.actionObj.cellWidth) ? this.actionObj.cellWidth : clnWidth)
-        };
+        styles.width = formatUnit((offsetWidth < this.actionObj.cellWidth) ? this.actionObj.cellWidth : offsetWidth);
         if (this.parent.enableRtl) {
             var rightValue = isTimelineView ?
                 Math.floor(parseInt(this.actionObj.element.style.right, 10) / this.actionObj.cellWidth) * this.actionObj.cellWidth :
-                -(clnWidth - this.actionObj.cellWidth);
-            styles.right = formatUnit(isTimelineView ? rightValue : isLeft ? 0 : rightValue > 0 ? 0 : rightValue);
+                -(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 +
+                    (pages.pageX - this.actionObj.X))) / this.actionObj.cellWidth) * this.actionObj.cellWidth;
+                rightValue = rightValue < 0 ? Math.abs(rightValue) : -rightValue;
+            }
+            styles.right = formatUnit(rightValue);
         }
         else {
-            styles.left = formatUnit(isTimelineView ? clnLeft : isLeft ? leftValue < 0 ? -clnLeft :
-                (Math.ceil((targetWidth - this.actionObj.clone.offsetWidth) / this.actionObj.cellWidth) * this.actionObj.cellWidth) :
-                clnLeft);
-        }
-        if (isTimelineView) {
-            delete styles.top;
-            if (!isLeft) {
-                styles.left = formatUnit('');
+            var offsetLeft = isLeft ? this.actionObj.element.offsetLeft - (this.actionObj.X - pages.pageX) :
+                this.parent.enableRtl ? this.actionObj.element.offsetLeft : 0;
+            if (isTimelineView) {
+                offsetLeft = isLeft ? offsetLeft : parseInt(this.actionObj.clone.style.left, 10);
                 if (this.parent.enableRtl) {
-                    var rightValue = this.actionObj.element.offsetLeft +
-                        (this.actionObj.element.offsetWidth + (pages.pageX - this.actionObj.X));
-                    rightValue = Math.ceil(rightValue / this.actionObj.cellWidth) * this.actionObj.cellWidth;
-                    styles.right = formatUnit(rightValue < 0 ? Math.abs(rightValue) : -rightValue);
+                    offsetLeft = !isLeft ? (pages.pageX < this.actionObj.X - this.actionObj.clone.offsetWidth) ?
+                        parseInt(this.actionObj.clone.style.right, 10) : offsetLeft : offsetLeft;
                 }
+                else {
+                    offsetLeft = isLeft ? (pages.pageX > this.actionObj.X + this.actionObj.clone.offsetWidth &&
+                        this.actionObj.clone.offsetWidth === this.actionObj.cellWidth) ?
+                        parseInt(this.actionObj.clone.style.left, 10) : offsetLeft : offsetLeft;
+                }
             }
+            var leftValue = offsetLeft;
+            offsetLeft = isTimelineView ? isTimeViews ? isLeft ? Math.floor(offsetLeft / slotInterval) * slotInterval : offsetLeft :
+                Math.floor(offsetLeft / this.actionObj.cellWidth) * this.actionObj.cellWidth :
+                Math.ceil(Math.abs(offsetLeft) / this.actionObj.cellWidth) * this.actionObj.cellWidth;
+            var cloneWidth = Math.ceil(this.actionObj.clone.offsetWidth / 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);
+            }
         }
@@ -373,22 +388,6 @@ return styles;
         if (this.resizeEdges.left) {
-            if (this.parent.activeView.isTimelineView()) {
-                resizeValidation = this.parent.enableRtl ?
-                    (parseInt(this.actionObj.clone.style.right, 10) + this.actionObj.clone.offsetWidth) <= viewDimension.right :
-                    (parseInt(this.actionObj.clone.style.left, 10)) >= viewDimension.left;
-            }
-            else {
-                resizeValidation = ((this.actionObj.element.parentElement.offsetLeft + (this.actionObj.element.offsetLeft -
-                    (this.actionObj.X - pages.pageX))) - viewDimension.offsetLeft) > viewDimension.left;
-            }
+            resizeValidation = (pages.pageX - this.actionObj.cellWidth) >= viewDimension.left;
         }
         if (this.resizeEdges.right) {
-            if (this.parent.activeView.isTimelineView()) {
-                resizeValidation = this.parent.enableRtl ?
-                    (parseInt(this.actionObj.clone.style.right, 10)) >= viewDimension.left :
-                    (parseInt(this.actionObj.clone.style.left, 10) + this.actionObj.clone.offsetWidth) <= viewDimension.right;
-            }
-            else {
-                resizeValidation = ((this.actionObj.element.parentElement.offsetLeft + (this.actionObj.clone.offsetWidth +
-                    (pages.pageX - this.actionObj.X))) - viewDimension.offsetLeft) < viewDimension.right;
-            }
+            resizeValidation = (pages.pageX + this.actionObj.cellWidth) <= viewDimension.right;
         }
@@ -395,0 +394,0 @@ if (this.resizeEdges.top) {

src/schedule/base/css-constant.d.ts

@@ -197,2 +197,4 @@ /**
 /** @hidden */
+export declare const MONTH_CLONE_ELEMENT_CLASS: string;
+/** @hidden */
 export declare const CLONE_TIME_INDICATOR_CLASS: string;
@@ -202,4 +204,2 @@ /** @hidden */
 /** @hidden */
-export declare const DRAG_DISABLED_CLASS: string;
-/** @hidden */
 export declare const EVENT_RESIZE_CLASS: string;
@@ -206,0 +206,0 @@ /** @hidden */

src/schedule/base/css-constant.js

@@ -197,2 +197,4 @@ /**
 /** @hidden */
+export var MONTH_CLONE_ELEMENT_CLASS = 'e-month-event';
+/** @hidden */
 export var CLONE_TIME_INDICATOR_CLASS = 'e-clone-time-indicator';
@@ -202,4 +204,2 @@ /** @hidden */
 /** @hidden */
-export var DRAG_DISABLED_CLASS = 'e-drag-disabled';
-/** @hidden */
 export var EVENT_RESIZE_CLASS = 'e-event-resize';
@@ -206,0 +206,0 @@ /** @hidden */

src/schedule/base/interface.d.ts

@@ -8,29 +8,2 @@ import { BaseEventArgs } from '@syncfusion/ej2-base';
  */
-/** @hidden */
-export interface TdData {
-    date?: Date;
-    renderDates?: Date[];
-    groupOrder?: string[];
-    groupIndex?: number;
-    className?: string[];
-    colSpan?: number;
-    rowSpan?: number;
-    type: string;
-    text?: string;
-    resourceLevelIndex?: number;
-    resource?: ResourcesModel;
-    resourceData?: {
-        [key: string]: Object;
-    };
-    startHour?: Date;
-    endHour?: Date;
-    workDays?: number[];
-    cssClass?: string;
-}
-/** @hidden */
-export interface TimeSlotData extends TdData {
-    first: boolean;
-    middle: boolean;
-    last: boolean;
-}
 export interface ActionEventArgs extends BaseEventArgs {
@@ -153,3 +126,3 @@ /** Returns the request type of the current action. */
     /** Allows to define the scroll related actions while resizing to the edges of scheduler. */
-    scroll?: ActionBaseArgs;
+    scroll?: ScrollOptions;
 }
@@ -167,2 +140,4 @@ export interface DragEventArgs extends BaseEventArgs {
     cancel?: boolean;
+    /** Defines the selectors to cancel the drop on selector target. */
+    excludeSelectors?: string;
     /** Returns the start time. */
@@ -175,7 +150,39 @@ startTime?: Date;
     /** Allows to define the scroll related actions while dragging to the edges of scheduler. */
-    scroll?: ActionBaseArgs;
-    /** Defines the navigation actions while dragging. */
-    navigation?: ActionBaseArgs;
+    scroll?: ScrollOptions;
 }
+/** An interface that holds options to control the scrolling action while performing drag and resizing action on appointments. */
+export interface ScrollOptions {
+    /** Allows to enable or disable the auto scrolling while performing drag and resizing action on appointments. */
+    enable: boolean;
+    /** Allows to define the scroll step value. */
+    scrollBy: number;
+}
 /** @hidden */
+export interface TdData {
+    date?: Date;
+    renderDates?: Date[];
+    groupOrder?: string[];
+    groupIndex?: number;
+    className?: string[];
+    colSpan?: number;
+    rowSpan?: number;
+    type: string;
+    text?: string;
+    resourceLevelIndex?: number;
+    resource?: ResourcesModel;
+    resourceData?: {
+        [key: string]: Object;
+    };
+    startHour?: Date;
+    endHour?: Date;
+    workDays?: number[];
+    cssClass?: string;
+}
+/** @hidden */
+export interface TimeSlotData extends TdData {
+    first: boolean;
+    middle: boolean;
+    last: boolean;
+}
+/** @hidden */
 export interface KeyEventArgs {
@@ -332,17 +339,9 @@ element: HTMLTableElement;
     isAllDay?: boolean;
-    top?: number;
-    left?: number;
+    action?: string;
+    height?: number;
     width?: number;
-    height?: number;
-    action?: string;
-    enable?: boolean;
-    minIndex?: number;
-    maxIndex?: number;
     interval?: number;
-    scrollBy?: number;
-    timeDelay?: number;
     cellWidth?: number;
     cellHeight?: number;
     groupIndex?: number;
-    slotCount?: number;
     actionIndex?: number;
@@ -357,4 +356,4 @@ slotInterval?: number;
     };
-    scroll?: ActionBaseArgs;
-    navigation?: ActionBaseArgs;
+    excludeSelectors?: string;
+    scroll?: ScrollOptions;
 }

src/schedule/base/resource.js

@@ -169,2 +169,6 @@ import { extend, isNullOrUndefined, createElement, EventHandler, addClass, append, removeClass, remove, closest, classList } from '@syncfusion/ej2-base';
         var eventRows = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CONTENT_WRAP_CLASS + ' .' + cls.APPOINTMENT_CONTAINER_CLASS));
+        var eventElements = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
+        for (var i = 0; i < eventElements.length; i++) {
+            remove(eventElements[i]);
+        }
         for (var j = 0; j < clickedRes.Count; j++) {
@@ -171,0 +175,0 @@ rowCollection.push(resRows[index + j + 1]);

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

@@ -61,2 +61,6 @@ import { Component, ModuleDeclaration, Property, Event, Animation, Collection } from '@syncfusion/ej2-base';import { EventHandler, EmitType, Browser, Internationalization, getDefaultDateObject, cldrData, L10n } from '@syncfusion/ej2-base';import { getValue, compile, extend, isNullOrUndefined, NotifyPropertyChanges, INotifyPropertyChanged, Complex } from '@syncfusion/ej2-base';import { removeClass, addClass, classList } from '@syncfusion/ej2-base';import { createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';import { HeaderRenderer } from '../renderer/header-renderer';import { Scroll } from '../actions/scroll';import { ScheduleTouch } from '../actions/touch';import { KeyboardInteraction } from '../actions/keyboard';import { Data } from '../actions/data';import { View, CurrentAction, ReturnType } from '../base/type';import { EventBase } from '../event-renderer/event-base';import { QuickPopups } from '../popups/quick-popups';import { EventTooltip } from '../popups/event-tooltip';import { EventWindow } from '../popups/event-window';import { Render } from '../renderer/renderer';import { Day } from '../renderer/day';import { Week } from '../renderer/week';import { WorkWeek } from '../renderer/work-week';import { Month } from '../renderer/month';import { Agenda } from '../renderer/agenda';import { MonthAgenda } from '../renderer/month-agenda';import { TimelineViews } from '../renderer/timeline-view';import { TimelineMonth } from '../renderer/timeline-month';import { WorkHours } from '../models/work-hours';import { TimeScale } from '../models/time-scale';import { QuickInfoTemplates } from '../models/quick-info-templates';import { HeaderRows } from '../models/header-rows';import { Crud } from '../actions/crud';import { Resize } from '../actions/resize';import { DragAndDrop } from '../actions/drag';import { WorkHoursModel, ViewsModel, EventSettingsModel, GroupModel, ResourcesModel, TimeScaleModel } from '../models/models';import { QuickInfoTemplatesModel, HeaderRowsModel } from '../models/models';import { EventSettings } from '../models/event-settings';import { Group } from '../models/group';import { Resources } from '../models/resources';import { IRenderer, ActionEventArgs, NavigatingEventArgs, CellClickEventArgs, RenderCellEventArgs, ScrollCss } from '../base/interface';import { EventClickArgs, EventRenderedArgs, PopupOpenEventArgs, UIStateArgs, DragEventArgs, ResizeEventArgs } from '../base/interface';import { EventFieldsMapping, TdData, ResourceDetails } from '../base/interface';import { ResourceBase } from '../base/resource';import * as events from '../base/constant';import * as cls from '../base/css-constant';import * as util from '../base/util';
      *  Schedule displays all the views namely `Day`, `Week`, `Work Week`, `Month` and `Agenda`.
+     * Example for array of views:
+     * {% codeBlock src="schedule/view-api/index.ts" %}{% endcodeBlock %}
+     * Example for array of view objects:
+     * {% codeBlock src="schedule/view-api/array.ts" %}{% endcodeBlock %}
      * @default '['Day', 'Week', 'WorkWeek', 'Month', 'Agenda']'
@@ -139,2 +143,3 @@ */
      *  customize the time slots with required time values in its own format.
+     * {% codeBlock src="schedule/timescale-api/index.ts" %}{% endcodeBlock %}
      * @default { enable: true, interval: 60, slotCount: 2, majorSlotTemplate: null, minorSlotTemplate: null }
@@ -160,2 +165,3 @@ */
      *  the date header cells. The field that can be accessed via this template is `date`.
+     * {% codeBlock src="schedule/date-header-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -168,3 +174,8 @@ */
      *  the string or HTMLElement as template design and then the parsed design is displayed onto the work cells.
-     *  The field accessible via template is `date`.
+     *  The fields accessible via template are as follows.
+     *  * date
+     *  * groupIndex
+     *  * type
+     * {% codeBlock src="schedule/cell-template-api/index.html" %}{% endcodeBlock %}
+     * {% codeBlock src="schedule/cell-template-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -197,2 +208,4 @@ */
      *  with `e-field` class, so as to fetch and process it from internally.
+     * {% codeBlock src="schedule/editor-api/index.html" %}{% endcodeBlock %}
+     * {% codeBlock src="schedule/editor-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -205,2 +218,4 @@ */
      *  and footer can be easily customized with individual template option.
+     * {% codeBlock src="schedule/quick-info-template-api/index.html" %}{% endcodeBlock %}
+     * {% codeBlock src="schedule/quick-info-template-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -244,3 +259,7 @@ */
      *  the string or HTMLElement as template design and then the parsed design is displayed onto the resource header cells.
-     *  All the resource fields can be accessible via template.
+     * The following can be accessible via template.
+     * * resource - All the resource fields.
+     * * resourceData - object collection of current resource.
+     * {% codeBlock src="schedule/resource-header-api/index.html" %}{% endcodeBlock %}
+     * {% codeBlock src="schedule/resource-header-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -253,2 +272,3 @@ */
      *  that the resources will be grouped on the schedule layout based on the provided resource names.
+     * {% codeBlock src="schedule/group-api/index.ts" %}{% endcodeBlock %}
      * @default {}
@@ -261,2 +281,3 @@ */
      *  with unique resource names to identify it along with the respective dataSource and field mapping options.
+     * {% codeBlock src="schedule/resources-api/index.ts" %}{% endcodeBlock %}
      * @default []
@@ -269,2 +290,3 @@ */
      *  on the timeline view of the scheduler.
+     * {% codeBlock src="schedule/header-rows-api/index.ts" %}{% endcodeBlock %}
      * @default []
@@ -271,0 +293,0 @@ */

src/schedule/base/schedule.d.ts

@@ -149,2 +149,6 @@ import { Component, ModuleDeclaration } from '@syncfusion/ej2-base';
      *  Schedule displays all the views namely `Day`, `Week`, `Work Week`, `Month` and `Agenda`.
+     * Example for array of views:
+     * {% codeBlock src="schedule/view-api/index.ts" %}{% endcodeBlock %}
+     * Example for array of view objects:
+     * {% codeBlock src="schedule/view-api/array.ts" %}{% endcodeBlock %}
      * @default '['Day', 'Week', 'WorkWeek', 'Month', 'Agenda']'
@@ -217,2 +221,3 @@ */
      *  customize the time slots with required time values in its own format.
+     * {% codeBlock src="schedule/timescale-api/index.ts" %}{% endcodeBlock %}
      * @default { enable: true, interval: 60, slotCount: 2, majorSlotTemplate: null, minorSlotTemplate: null }
@@ -235,2 +240,3 @@ */
      *  the date header cells. The field that can be accessed via this template is `date`.
+     * {% codeBlock src="schedule/date-header-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -242,3 +248,8 @@ */
      *  the string or HTMLElement as template design and then the parsed design is displayed onto the work cells.
-     *  The field accessible via template is `date`.
+     *  The fields accessible via template are as follows.
+     *  * date
+     *  * groupIndex
+     *  * type
+     * {% codeBlock src="schedule/cell-template-api/index.html" %}{% endcodeBlock %}
+     * {% codeBlock src="schedule/cell-template-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -267,2 +278,4 @@ */
      *  with `e-field` class, so as to fetch and process it from internally.
+     * {% codeBlock src="schedule/editor-api/index.html" %}{% endcodeBlock %}
+     * {% codeBlock src="schedule/editor-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -274,2 +287,4 @@ */
      *  and footer can be easily customized with individual template option.
+     * {% codeBlock src="schedule/quick-info-template-api/index.html" %}{% endcodeBlock %}
+     * {% codeBlock src="schedule/quick-info-template-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -308,3 +323,7 @@ */
      *  the string or HTMLElement as template design and then the parsed design is displayed onto the resource header cells.
-     *  All the resource fields can be accessible via template.
+     * The following can be accessible via template.
+     * * resource - All the resource fields.
+     * * resourceData - object collection of current resource.
+     * {% codeBlock src="schedule/resource-header-api/index.html" %}{% endcodeBlock %}
+     * {% codeBlock src="schedule/resource-header-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -316,2 +335,3 @@ */
      *  that the resources will be grouped on the schedule layout based on the provided resource names.
+     * {% codeBlock src="schedule/group-api/index.ts" %}{% endcodeBlock %}
      * @default {}
@@ -323,2 +343,3 @@ */
      *  with unique resource names to identify it along with the respective dataSource and field mapping options.
+     * {% codeBlock src="schedule/resources-api/index.ts" %}{% endcodeBlock %}
      * @default []
@@ -330,2 +351,3 @@ */
      *  on the timeline view of the scheduler.
+     * {% codeBlock src="schedule/header-rows-api/index.ts" %}{% endcodeBlock %}
      * @default []
@@ -332,0 +354,0 @@ */

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

@@ -21,2 +21,6 @@ import { EventClickArgs, TdData } from '../base/interface';
     timezonePropertyChange(oldTimezone: string): void;
+    /** @private */
+    timezoneConvert(eventData: {
+        [key: string]: Object;
+    }): void;
     private processTimezoneChange(event, oldTimezone);
@@ -62,4 +66,4 @@ private processTimezone(event);
     generateGuid(): string;
-    getEventIdType(): string;
-    getEventMaxId(resourceId?: number): number | string;
+    getEventIDType(): string;
+    getEventMaxID(resourceId?: number): number | string;
     private activeEventData(eventData);
@@ -66,0 +70,0 @@ generateOccurrence(event: {

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

@@ -64,2 +64,16 @@ import { isNullOrUndefined, closest, extend, EventHandler, uniqueID } from '@syncfusion/ej2-base';
     };
+    /** @private */
+    EventBase.prototype.timezoneConvert = function (eventData) {
+        var fields = this.parent.eventFields;
+        eventData[fields.startTimezone] = eventData[fields.startTimezone] || eventData[fields.endTimezone];
+        eventData[fields.endTimezone] = eventData[fields.endTimezone] || eventData[fields.startTimezone];
+        if (this.parent.timezone) {
+            var startTz = eventData[fields.startTimezone];
+            var endTz = eventData[fields.endTimezone];
+            eventData[fields.startTime] =
+                this.timezone.convert(eventData[fields.startTime], this.parent.timezone, startTz);
+            eventData[fields.endTime] =
+                this.timezone.convert(eventData[fields.endTime], this.parent.timezone, endTz);
+        }
+    };
     EventBase.prototype.processTimezoneChange = function (event, oldTimezone) {
@@ -444,3 +458,3 @@ var fields = this.parent.eventFields;
             }
-            if (this.parent.dragAndDropModule) {
+            if (this.parent.dragAndDropModule && !this.parent.isAdaptive) {
                 this.parent.dragAndDropModule.wireDragEvent(element, isAllDay);
@@ -540,6 +554,6 @@ }
     };
-    EventBase.prototype.getEventIdType = function () {
+    EventBase.prototype.getEventIDType = function () {
         return typeof (this.parent.eventsData[0][this.parent.eventFields.id]);
     };
-    EventBase.prototype.getEventMaxId = function (resourceId) {
+    EventBase.prototype.getEventMaxID = function (resourceId) {
         var _this = this;
@@ -550,3 +564,3 @@ if (this.parent.eventsData.length < 1) {
         var eventId;
-        var idType = this.getEventIdType();
+        var idType = this.getEventIDType();
         if (idType === 'string') {
@@ -553,0 +567,0 @@ eventId = uniqueID().toString();

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

@@ -24,2 +24,5 @@ import { EventFieldsMapping, TdData } from '../base/interface';
     renderEventsHandler(dateRender: Date[], workDays: number[], resData?: TdData): void;
+    updateIndicatorIcon(event: {
+        [key: string]: Object;
+    }): void;
     renderResourceEvents(): void;
@@ -26,0 +29,0 @@ getSlotDates(workDays?: number[]): void;

src/schedule/event-renderer/month.js

@@ -83,2 +83,3 @@ var __extends = (this && this.__extends) || (function () {
                 var event_2 = splittedEvents_1[_a];
+                this.updateIndicatorIcon(event_2);
                 this.renderEvents(event_2, resIndex);
@@ -90,3 +91,13 @@ }
     };
-    ;
+    MonthEvent.prototype.updateIndicatorIcon = function (event) {
+        if (this.parent.currentView.indexOf('Timeline') === -1 || this.parent.currentView === 'TimelineMonth'
+            || event[this.fields.isAllDay]) {
+            return;
+        }
+        var cloneData = event.data;
+        var startHour = util.getStartEndHours(event[this.fields.startTime], this.parent.activeView.getStartHour(), this.parent.activeView.getEndHour());
+        var endHour = util.getStartEndHours(event[this.fields.endTime], this.parent.activeView.getStartHour(), this.parent.activeView.getEndHour());
+        cloneData.isLeft = cloneData.isLeft || cloneData[this.fields.startTime].getTime() < startHour.startHour.getTime();
+        cloneData.isRight = cloneData.isRight || cloneData[this.fields.endTime].getTime() > endHour.endHour.getTime();
+    };
     MonthEvent.prototype.renderResourceEvents = function () {
@@ -239,3 +250,3 @@ var resources = this.parent.uiStateValues.isGroupAdaptive ?
         if (startTime.getTime() <= endTime.getTime()) {
-            var appWidth = (diffInDays * this.cellWidth) - 1;
+            var appWidth = (diffInDays * this.cellWidth) - 3;
             var cellTd = this.workCells[day];
@@ -248,3 +259,2 @@ var appTop = (overlapCount * (appHeight + EVENT_GAP));
                 setStyleAttribute(appointmentElement, { 'width': appWidth + 'px', 'top': appTop + 'px' });
-                var args = { data: event, element: appointmentElement, cancel: false };
                 this.renderEventElement(event, appointmentElement, cellTd);
@@ -268,3 +278,3 @@ }
                         moreIndicatorElement.style.top = appArea + 'px';
-                        moreIndicatorElement.style.width = cellTd_1.offsetWidth + 'px';
+                        moreIndicatorElement.style.width = cellTd_1.offsetWidth - 2 + 'px';
                         this.renderElement(cellTd_1, moreIndicatorElement);
@@ -271,0 +281,0 @@ EventHandler.add(moreIndicatorElement, 'click', this.moreIndicatorClick, this);

src/schedule/event-renderer/timeline-view.js

@@ -102,3 +102,4 @@ var __extends = (this && this.__extends) || (function () {
             if (this.renderType === 'day' || event[this.fields.isAllDay]) {
-                appWidth = ((diffInDays * this.slotsPerDay) * this.cellWidth);
+                appWidth = this.renderType === 'day' ? (((diffInDays * this.slotsPerDay) * this.cellWidth) - 2) :
+                    ((diffInDays * this.slotsPerDay) * this.cellWidth);
                 position = ((this.day * this.slotsPerDay) * this.cellWidth);
@@ -111,2 +112,3 @@ }
             }
+            appWidth = (appWidth === 0) ? this.cellWidth : appWidth; // appWidth 0 when start and end time as same
             this.renderedEvents.push(extend({}, event, null, true));
@@ -113,0 +115,0 @@ var cellTd = this.appContainers[wrapIndex];

src/schedule/event-renderer/vertical-view.js

@@ -50,3 +50,3 @@ var __extends = (this && this.__extends) || (function () {
         wrapperElements.forEach(function (element) { return remove(element); });
-        this.allDayElement = [].slice.call(this.element.querySelectorAll('.' + cls.ALLDAY_CELLS_CLASS + ':first-child'));
+        this.allDayElement = [].slice.call(this.element.querySelectorAll('.' + cls.ALLDAY_CELLS_CLASS));
         this.setAllDayRowHeight(0);
@@ -53,0 +53,0 @@ if (this.parent.eventsProcessed.length === 0) {

src/schedule/models/event-settings-model.d.ts

@@ -11,2 +11,3 @@ import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';import { Query, DataManager } from '@syncfusion/ej2-data';import { Field } from './fields';import { FieldModel } from './fields-model';
      *  it onto the event background. All the event fields mapped to Schedule from dataSource can be accessed within this template code.
+     * {% codeBlock src="schedule/event-template-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -49,2 +50,3 @@ */
      *  All the event fields mapped with Schedule dataSource can be accessed within this template code.
+     * {% codeBlock src="schedule/tooltip-template-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -57,2 +59,3 @@ */
      *  grouping is enabled on scheduler.
+     * {% codeBlock src="schedule/resource-color-field-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -59,0 +62,0 @@ */

src/schedule/models/event-settings.d.ts

@@ -11,2 +11,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      *  it onto the event background. All the event fields mapped to Schedule from dataSource can be accessed within this template code.
+     * {% codeBlock src="schedule/event-template-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -44,2 +45,3 @@ */
      *  All the event fields mapped with Schedule dataSource can be accessed within this template code.
+     * {% codeBlock src="schedule/tooltip-template-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -51,2 +53,3 @@ */
      *  grouping is enabled on scheduler.
+     * {% codeBlock src="schedule/resource-color-field-api/index.ts" %}{% endcodeBlock %}
      * @default null
@@ -53,0 +56,0 @@ */

src/schedule/models/field-options-model.d.ts

@@ -28,2 +28,3 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';
      * Defines the validation rules to be applied on the event fields within the event editor.
+     * {% codeBlock src="schedule/validation-api/index.ts" %}{% endcodeBlock %}
      * @default {}
@@ -30,0 +31,0 @@ */

src/schedule/models/field-options.d.ts

@@ -23,2 +23,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * Defines the validation rules to be applied on the event fields within the event editor.
+     * {% codeBlock src="schedule/validation-api/index.ts" %}{% endcodeBlock %}
      * @default {}
@@ -25,0 +26,0 @@ */

src/schedule/popups/event-window.d.ts

@@ -9,3 +9,3 @@ import { Dialog } from '@syncfusion/ej2-popups';
 export declare class EventWindow {
-    parent: Schedule;
+    private parent;
     dialogObject: Dialog;
@@ -12,0 +12,0 @@ private element;

src/schedule/popups/quick-popups.js

@@ -519,3 +519,11 @@ import { closest, EventHandler, isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base';
                 var eventData = args.event;
-                var resourceData = eventData[this.parent.resourceBase.resourceCollection.slice(-1)[0].field];
+                var resourceData = void 0;
+                var lastResource_1;
+                for (var i = this.parent.resourceBase.resourceCollection.length - 1; i >= 0; i--) {
+                    resourceData = eventData[this.parent.resourceBase.resourceCollection[i].field];
+                    if (!isNullOrUndefined(resourceData)) {
+                        lastResource_1 = this.parent.resourceBase.resourceCollection[i];
+                        break;
+                    }
+                }
                 if (!Array.isArray(resourceData)) {
@@ -525,3 +533,2 @@ resourceData = [resourceData];
                 var resNames_1 = [];
-                var lastResource_1 = this.parent.resourceBase.resourceCollection.slice(-1)[0];
                 var lastResourceData_1 = lastResource_1.dataSource;
@@ -593,5 +600,5 @@ resourceData.map(function (value) {
         this.morePopup.element.querySelector('.' + cls.MORE_EVENT_POPUP_CLASS).appendChild(moreEventElements);
-        removeClass(this.morePopup.element.querySelector('.' + cls.MORE_EVENT_DATE_HEADER_CLASS).children, cls.CURRENTDATE_CLASS);
+        removeClass(this.morePopup.element.querySelector('.' + cls.MORE_EVENT_DATE_HEADER_CLASS).childNodes, cls.CURRENTDATE_CLASS);
         if (util.resetTime(data.date).getTime() === util.resetTime(new Date()).getTime()) {
-            addClass(this.morePopup.element.querySelector('.' + cls.MORE_EVENT_DATE_HEADER_CLASS).children, cls.CURRENTDATE_CLASS);
+            addClass(this.morePopup.element.querySelector('.' + cls.MORE_EVENT_DATE_HEADER_CLASS).childNodes, cls.CURRENTDATE_CLASS);
         }
@@ -624,3 +631,3 @@ if (this.parent.currentView.indexOf('Timeline') !== -1) {
         }
-        saveObj[fields.id] = this.parent.eventBase.getEventMaxId();
+        saveObj[fields.id] = this.parent.eventBase.getEventMaxID();
         saveObj[fields.startTime] = this.parent.activeCellsData.startTime;
@@ -804,3 +811,3 @@ saveObj[fields.endTime] = this.parent.activeCellsData.endTime;
             var collide = isCollide(this.quickPopup.element, this.parent.element);
-            if (collide.indexOf('right') > -1) {
+            if (collide.indexOf(this.parent.enableRtl ? 'left' : 'right') > -1) {
                 this.quickPopup.offsetX = -target.offsetWidth - 10 - this.quickPopup.element.offsetWidth;
@@ -807,0 +814,0 @@ this.quickPopup.dataBind();

src/schedule/renderer/month.d.ts

@@ -25,5 +25,4 @@ import { IRenderer, TdData, NotifyEventArgs, CellClickEventArgs } from '../base/interface';
     getLeftPanelElement(): HTMLElement;
-    onScrollUiUpdate(args: NotifyEventArgs): void;
+    onScrollUIUpdate(args: NotifyEventArgs): void;
     setContentHeight(content: HTMLElement, leftPanelElement: HTMLElement, height: number): void;
-    setPaddingBottom(element: HTMLElement, content: HTMLElement, scrollBarWidth: number): void;
     generateColumnLevels(): TdData[][];
@@ -30,0 +29,0 @@ getDateSlots(renderDates: Date[], workDays: number[]): TdData[];

src/schedule/renderer/month.js

@@ -37,3 +37,3 @@ var __extends = (this && this.__extends) || (function () {
     Month.prototype.addEventListener = function () {
-        this.parent.on(event.scrollUiUpdate, this.onScrollUiUpdate, this);
+        this.parent.on(event.scrollUiUpdate, this.onScrollUIUpdate, this);
         this.parent.on(event.dataReady, this.onDataReady, this);
@@ -43,3 +43,3 @@ this.parent.on(event.cellClick, this.onCellClick, this);
     Month.prototype.removeEventListener = function () {
-        this.parent.off(event.scrollUiUpdate, this.onScrollUiUpdate);
+        this.parent.off(event.scrollUiUpdate, this.onScrollUIUpdate);
         this.parent.off(event.dataReady, this.onDataReady);
@@ -68,3 +68,3 @@ this.parent.off(event.cellClick, this.onCellClick);
     };
-    Month.prototype.onScrollUiUpdate = function (args) {
+    Month.prototype.onScrollUIUpdate = function (args) {
         var headerHeight = this.getHeaderBarHeight();
@@ -86,3 +86,2 @@ var header = this.getDatesHeaderElement();
         }
-        this.setPaddingBottom(leftPanel, content, scrollBarWidth);
         // tslint:enable:no-any
@@ -100,10 +99,5 @@ };
             leftPanelElement.style.height = 'auto';
-            leftPanelElement.style.height = formatUnit(height);
+            leftPanelElement.style.height = formatUnit(height - this.getScrollXIndent(content));
         }
     };
-    Month.prototype.setPaddingBottom = function (element, content, scrollBarWidth) {
-        if (!isNullOrUndefined(element)) {
-            element.style.paddingBottom = (content.offsetHeight - content.clientHeight > 0) ? formatUnit(scrollBarWidth) : '';
-        }
-    };
     Month.prototype.generateColumnLevels = function () {
@@ -110,0 +104,0 @@ var colLevels = [];

src/schedule/renderer/timeline-month.js

@@ -50,3 +50,3 @@ var __extends = (this && this.__extends) || (function () {
         if (leftPanelElement) {
-            leftPanelElement.style.height = formatUnit(height);
+            leftPanelElement.style.height = formatUnit(height - this.getScrollXIndent(content));
         }
@@ -53,0 +53,0 @@ content.style.height = formatUnit(height);

src/schedule/renderer/timeline-view.d.ts

@@ -8,9 +8,5 @@ import { Schedule } from '../base/schedule';
 export declare class TimelineViews extends VerticalView {
-    /**
-     * Constructor for timeline views
-     */
     dateHeaderTemplate: string;
     constructor(parent: Schedule);
     getLeftPanelElement(): HTMLElement;
-    setContentHeight(element: HTMLElement, leftPanelElement: HTMLElement, height: string): void;
     scrollTopPanel(target: HTMLElement): void;
@@ -17,0 +13,0 @@ scrollToWorkHour(): void;

src/schedule/renderer/timeline-view.js

@@ -24,5 +24,2 @@ var __extends = (this && this.__extends) || (function () {
         var _this = _super.call(this, parent) || this;
-        /**
-         * Constructor for timeline views
-         */
         _this.dateHeaderTemplate = '<span class="e-header-date e-navigate">${getTimelineDate(date)}</span>';
@@ -35,8 +32,2 @@ _this.baseCssClass = 'e-timeline-view';
     };
-    TimelineViews.prototype.setContentHeight = function (element, leftPanelElement, height) {
-        if (!isNullOrUndefined(leftPanelElement)) {
-            leftPanelElement.style.height = height;
-        }
-        element.style.height = height;
-    };
     TimelineViews.prototype.scrollTopPanel = function (target) {
@@ -43,0 +34,0 @@ _super.prototype.scrollTopPanel.call(this, target);

src/schedule/renderer/vertical-view.d.ts

@@ -24,7 +24,7 @@ import { Schedule } from '../base/schedule';
     private onContentScroll(e);
+    private onApaptiveMove(e);
     private onApaptiveScroll(e);
     scrollLeftPanel(target: HTMLElement): void;
     private scrollUiUpdate(args);
-    setContentHeight(element: HTMLElement, leftPanelElement: HTMLElement, height: string): void;
-    setPaddingBottom(element: HTMLElement, content: HTMLElement, scrollBarWidth: number): void;
+    setContentHeight(element: HTMLElement, leftPanelElement: HTMLElement, height: number): void;
     scrollToWorkHour(): void;
@@ -31,0 +31,0 @@ scrollToHour(hour: string): void;

src/schedule/renderer/vertical-view.js

@@ -62,7 +62,11 @@ var __extends = (this && this.__extends) || (function () {
         this.scrollTopPanel(target);
-        this.parent.uiStateValues.top = target.scrollTop;
+        if (!this.parent.isAdaptive) {
+            this.parent.uiStateValues.top = target.scrollTop;
+        }
         this.parent.uiStateValues.left = target.scrollLeft;
-        this.parent.quickPopup.quickPopupHide();
+        if (!isNullOrUndefined(this.parent.quickPopup)) {
+            this.parent.quickPopup.quickPopupHide();
+        }
     };
-    VerticalView.prototype.onApaptiveScroll = function (e) {
+    VerticalView.prototype.onApaptiveMove = function (e) {
         if (this.parent.uiStateValues.action) {
@@ -72,2 +76,5 @@ e.preventDefault();
     };
+    VerticalView.prototype.onApaptiveScroll = function (e) {
+        this.parent.uiStateValues.top = e.target.scrollTop;
+    };
     VerticalView.prototype.scrollLeftPanel = function (target) {
@@ -84,3 +91,3 @@ var leftPanel = this.getLeftPanelElement();
         var header = this.getDatesHeaderElement();
-        var scrollerHeight = formatUnit(this.parent.element.offsetHeight - headerBarHeight - header.offsetHeight);
+        var scrollerHeight = this.parent.element.offsetHeight - headerBarHeight - header.offsetHeight;
         this.setContentHeight(content, timecells, scrollerHeight);
@@ -98,6 +105,5 @@ var scrollBarWidth = util.getScrollBarWidth();
         // tslint:enable:no-any
-        this.setPaddingBottom(timecells, content, scrollBarWidth);
         if (this.parent.uiStateValues.isInitial || this.isTimelineView()) {
             this.scrollToWorkHour();
-            this.parent.uiStateValues.isInitial = false;
+            this.parent.uiStateValues.isInitial = this.isTimelineView();
         }
@@ -112,17 +118,12 @@ else {
     VerticalView.prototype.setContentHeight = function (element, leftPanelElement, height) {
-        if (this.parent.isAdaptive) {
-            element.style.height = height;
+        if (this.parent.isAdaptive && !this.isTimelineView()) {
+            element.style.height = formatUnit(height);
         }
         else {
             if (!isNullOrUndefined(leftPanelElement)) {
-                leftPanelElement.style.height = height;
+                leftPanelElement.style.height = formatUnit(height - this.getScrollXIndent(element));
             }
-            element.style.height = height;
+            element.style.height = formatUnit(height);
         }
     };
-    VerticalView.prototype.setPaddingBottom = function (element, content, scrollBarWidth) {
-        if (!isNullOrUndefined(element)) {
-            element.style.paddingBottom = (content.offsetHeight - content.clientHeight > 0) ? formatUnit(scrollBarWidth) : '';
-        }
-    };
     VerticalView.prototype.scrollToWorkHour = function () {
@@ -370,3 +371,4 @@ if (this.parent.workHours.highlight) {
             workTd.appendChild(scrollContainer);
-            EventHandler.add(scrollContainer, Browser.touchMoveEvent, this.onApaptiveScroll, this);
+            EventHandler.add(scrollContainer, 'scroll', this.onApaptiveScroll, this);
+            EventHandler.add(scrollContainer, Browser.touchMoveEvent, this.onApaptiveMove, this);
             tr.appendChild(workTd);
@@ -512,2 +514,3 @@ }
         EventHandler.add(wrap, 'scroll', this.onContentScroll, this);
+        EventHandler.add(wrap, Browser.touchMoveEvent, this.onApaptiveMove, this);
         return wrap;
@@ -514,0 +517,0 @@ };

src/schedule/renderer/view-base.d.ts

@@ -20,2 +20,3 @@ import { Schedule } from '../base/schedule';
     createColGroup(table: Element, lastRow: TdData[]): void;
+    getScrollXIndent(content: HTMLElement): number;
     scrollTopPanel(target: HTMLElement): void;
@@ -22,0 +23,0 @@ scrollHeaderLabels(target: HTMLElement): void;

src/schedule/renderer/view-base.js

 import { createElement, append, prepend, isNullOrUndefined, getValue, getDefaultDateObject, cldrData, addClass } from '@syncfusion/ej2-base';
-import { getDateInMs, addDays, resetTime, WEEK_LENGTH, getWeekFirstDate, getOuterHeight } from '../base/util';
+import { getDateInMs, addDays, resetTime, WEEK_LENGTH, getWeekFirstDate, getOuterHeight, getScrollBarWidth } from '../base/util';
 import * as cls from '../base/css-constant';
@@ -69,2 +69,5 @@ /**
     };
+    ViewBase.prototype.getScrollXIndent = function (content) {
+        return content.offsetHeight - content.clientHeight > 0 ? getScrollBarWidth() : 0;
+    };
     ViewBase.prototype.scrollTopPanel = function (target) {
@@ -71,0 +74,0 @@ this.getDatesHeaderElement().firstChild.scrollLeft = target.scrollLeft;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9294786

increased by1%

Lines of code

81348

increased by1.08%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@syncfusion/ej2-base@~16.3.21

• Updated@syncfusion/ej2-buttons@~16.3.21

• Updated@syncfusion/ej2-calendars@~16.3.21

• Updated@syncfusion/ej2-data@~16.3.21

• Updated@syncfusion/ej2-dropdowns@~16.3.21

• Updated@syncfusion/ej2-inputs@~16.3.21

• Updated@syncfusion/ej2-lists@~16.3.21

• Updated@syncfusion/ej2-navigations@~16.3.21

• Updated@syncfusion/ej2-popups@~16.3.21