@syncfusion/ej2-schedule 28.2.11 → 29.1.34

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

@@ -527,8 +527,16 @@ var MonthEvent = /** @class */ (function (_super) {
                 setStyleAttribute(appointmentElement, { 'width': appWidth + 'px', 'top': appTop + 'px' });
                 this.renderEventElement(event, appointmentElement, cellTd);
                 if (this.parent.rowAutoHeight) {
+                    var conWrap = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
+                    var conWidth = this.parent.getElementWidth(conWrap);
+                    var isWithoutScroll = conWrap.offsetHeight === conWrap.clientHeight &&
+                        conWrap.offsetWidth === conWrap.clientWidth;
                     var firstChild = cellTd.parentElement.firstElementChild;
                     this.updateCellHeight(firstChild, height);
+                    if (isWithoutScroll &&
+                        (conWrap.offsetWidth > conWrap.clientWidth || conWidth !== this.parent.getElementWidth(conWrap))) {
+                        this.adjustAppointments(conWidth);
+                    }
                 }
             }
             else {
@@ -559,6 +567,23 @@ var MonthEvent = /** @class */ (function (_super) {
             }
         }
     };
+    MonthEvent.prototype.adjustAppointments = function (conWidth) {
+        var _this = this;
+        var tr = this.parent.element.querySelector('.' + cls.CONTENT_TABLE_CLASS + ' tbody tr');
+        var actualCellWidth = this.parent.getElementWidth(this.workCells[0]);
+        this.cellWidth = actualCellWidth / +(this.workCells[0].getAttribute('colspan') || 1);
+        var currentPercentage = (actualCellWidth * tr.children.length) / (conWidth / 100);
+        var apps = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
+        apps.forEach(function (app) {
+            if (_this.parent.enableRtl && app.style.right !== '0px') {
+                app.style.right = ((parseFloat(app.style.right) / 100) * currentPercentage) + 'px';
+            }
+            else if (app.style.left !== '0px') {
+                app.style.left = ((parseFloat(app.style.left) / 100) * currentPercentage) + 'px';
+            }
+            app.style.width = ((parseFloat(app.style.width) / 100) * currentPercentage) + 'px';
+        });
+    };
     MonthEvent.prototype.updateCellHeight = function (cell, height) {
         if ((height > cell.offsetHeight)) {
             setStyleAttribute(cell, { 'height': height + 'px' });

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

@@ -26,7 +26,6 @@ export declare class TimelineEvent extends MonthEvent {
     private adjustToNearestTimeSlot;
     private renderTimelineMoreIndicator;
     updateCellHeight(cell: HTMLElement, height: number): void;
-    private adjustAppointments;
     private getFirstChild;
     updateBlockElements(): void;
     getStartTime(event: Record<string, any>, eventData: Record<string, any>): Date;
@@ -36,6 +35,7 @@ export declare class TimelineEvent extends MonthEvent {
     getEventWidth(startDate: Date, endDate: Date, isAllDay: boolean, count: number): number;
     private getSameDayEventsWidth;
     private getSpannedEventsWidth;
+    private getEndTimeOfLastSlot;
     private isSameDay;
     private getAppointmentLeft;
     getPosition(startTime: Date, endTime: Date, isAllDay: boolean, day: number): number;

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

@@ -344,23 +344,6 @@ var TimelineEvent = /** @class */ (function (_super) {
             }
         }
     };
-    TimelineEvent.prototype.adjustAppointments = function (conWidth) {
-        var _this = this;
-        var tr = this.parent.element.querySelector('.' + cls.CONTENT_TABLE_CLASS + ' tbody tr');
-        var actualCellWidth = this.parent.getElementWidth(this.workCells[0]);
-        this.cellWidth = actualCellWidth / +(this.workCells[0].getAttribute('colspan') || 1);
-        var currentPercentage = (actualCellWidth * tr.children.length) / (conWidth / 100);
-        var apps = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
-        apps.forEach(function (app) {
-            if (_this.parent.enableRtl && app.style.right !== '0px') {
-                app.style.right = ((parseFloat(app.style.right) / 100) * currentPercentage) + 'px';
-            }
-            else if (app.style.left !== '0px') {
-                app.style.left = ((parseFloat(app.style.left) / 100) * currentPercentage) + 'px';
-            }
-            app.style.width = ((parseFloat(app.style.width) / 100) * currentPercentage) + 'px';
-        });
-    };
     TimelineEvent.prototype.getFirstChild = function (index) {
         var query = '.' + cls.CONTENT_TABLE_CLASS + ' tbody td';
         var groupIndex = '';
@@ -477,13 +460,23 @@ var TimelineEvent = /** @class */ (function (_super) {
             endWidth = 0;
         }
         else {
-            var end = util.getStartEndHours(util.resetTime(new Date(endDate.getTime())), this.startHour, this.endHour);
-            endWidth = this.getSameDayEventsWidth(endDate, end.endHour);
+            var _a = util.getStartEndHours(util.resetTime(new Date(endDate.getTime())), this.startHour, this.endHour), startHour = _a.startHour, endHour = _a.endHour;
+            var interval = this.interval / this.slotCount;
+            var lastSlotEndTime = this.getEndTimeOfLastSlot(startHour, endHour, interval);
+            var adjustedEndDate = endHour < lastSlotEndTime ? endHour : lastSlotEndTime;
+            endWidth = this.getSameDayEventsWidth(endDate, adjustedEndDate);
             endWidth = ((this.slotsPerDay * this.cellWidth) === endWidth) ? 0 : endWidth;
         }
         var spannedWidth = startWidth + endWidth;
         return (width > spannedWidth) ? width - spannedWidth : width - startWidth;
     };
+    TimelineEvent.prototype.getEndTimeOfLastSlot = function (startHour, endHour, interval) {
+        var minutesInDay = (endHour.getTime() - startHour.getTime()) / (1000 * 60);
+        var lastSlotEndMinutes = Math.floor(minutesInDay / interval) * interval;
+        var lastSlotEndTime = new Date(startHour);
+        lastSlotEndTime.setMinutes(lastSlotEndMinutes);
+        return lastSlotEndTime;
+    };
     TimelineEvent.prototype.isSameDay = function (startTime, endTime) {
         var startDay = this.parent.getIndexOfDate(this.dateRender, util.resetTime(new Date(startTime.getTime())));
         var endDay = this.parent.getIndexOfDate(this.dateRender, util.resetTime(new Date(endTime.getTime())));

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

@@ -520,7 +520,7 @@ var VerticalEvent = /** @class */ (function (_super) {
                 var widthAdjustment = record.data.isRight ? 0 :
                     this.parent.currentView === 'Day' ? 4 : 7;
                 if (allDayDifference_1 >= 0) {
-                    appWidth = (allDayDifference_1 * 100) - widthAdjustment;
+                    appWidth = (allDayDifference_1 * 100) - (!this.parent.activeViewOptions.allowOverlap ? 0 : widthAdjustment);
                 }
                 if (isNullOrUndefined(this.renderedAllDayEvents[parseInt(resource.toString(), 10)])) {
                     this.renderedAllDayEvents[parseInt(resource.toString(), 10)] = [];
@@ -613,7 +613,7 @@ var VerticalEvent = /** @class */ (function (_super) {
                 appointmentElement = this.createAppointmentElement(eventObj, false, record.isSpanned, resource);
             }
             setStyleAttribute(appointmentElement, {
-                'width': (this.parent.eventSettings.enableMaxHeight ? '100%' : tempData.appWidth),
+                'width': (this.parent.eventSettings.enableMaxHeight || !this.parent.activeViewOptions.allowOverlap ? '100%' : tempData.appWidth),
                 'height': appHeight + 'px', 'top': topValue + 'px'
             });
             var iconHeight = appointmentElement.querySelectorAll('.' + cls.EVENT_INDICATOR_CLASS).length * 15;

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

@@ -34,7 +34,7 @@ var YearEvent = /** @class */ (function (_super) {
             this.parent.dragAndDropModule.setDragArea();
         }
         this.fields = this.parent.eventFields;
-        var elementSelector = (this.parent.currentView === 'Year') ? '.' + cls.APPOINTMENT_CLASS :
+        var elementSelector = (this.parent.currentView === 'Year') ? '.' + cls.WORK_CELLS_CLASS + ' ' + '.' + cls.APPOINTMENT_CLASS :
             '.' + cls.APPOINTMENT_WRAPPER_CLASS + ',.' + cls.MORE_INDICATOR_CLASS;
         var eventWrappers = [].slice.call(this.parent.element.querySelectorAll(elementSelector));
         for (var _i = 0, eventWrappers_1 = eventWrappers; _i < eventWrappers_1.length; _i++) {

package/src/schedule/exports/excel-export.js

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Workbook } from '@syncfusion/ej2-excel-export';
 import { extend, isNullOrUndefined } from '@syncfusion/ej2-base';
+import * as events from '../base/constant';
 /**
  * Excel Export Module
  */
@@ -50,8 +51,14 @@ var ExcelExport = /** @class */ (function () {
             rows.push({ index: i + 2, cells: columnData });
         });
         var workSheet = [{ columns: columns, rows: rows }];
-        var book = new Workbook({ worksheets: workSheet }, type, this.parent.locale, undefined, separator);
-        book.save(name + '.' + type);
+        var args = { cancel: false, worksheets: workSheet };
+        this.parent.trigger(events.excelExport, args, function (args) {
+            if (args.cancel) {
+                return;
+            }
+            var book = new Workbook({ worksheets: args.worksheets }, type, _this.parent.locale, undefined, separator);
+            book.save(name + '.' + type);
+        });
     };
     ExcelExport.prototype.getExportColumns = function (exportOptions) {
         var _this = this;

package/src/schedule/exports/print.d.ts

@@ -13,6 +13,8 @@ export declare class Print {
     private printSchedulerWithModel;
     private getPrintScheduleModel;
     private contentReady;
+    private closePrintWindow;
+    private printCleanup;
     protected getModuleName(): string;
     destroy(): void;
 }

package/src/schedule/exports/print.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { print as basePrint, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { print as basePrint, createElement, isNullOrUndefined, Browser } from '@syncfusion/ej2-base';
 import { Schedule } from '../base/schedule';
 import { TimelineYear } from '../renderer/timeline-year';
 import { Year } from '../renderer/year';
@@ -28,51 +28,59 @@ var Print = /** @class */ (function () {
         }
     };
     Print.prototype.printScheduler = function () {
+        var _this = this;
         var clone = this.parent.element.cloneNode(true);
         clone.id = this.parent.element.id + '_print';
-        document.body.appendChild(clone);
-        var className = this.parent.currentView === 'MonthAgenda' ? '.e-appointment-wrap' : '.e-content-wrap';
-        var scrollableEle = this.parent.element.querySelector(className);
-        var links = [].slice.call(document.getElementsByTagName('head')[0].querySelectorAll('link, style'));
-        var reference = '';
-        for (var _i = 0, links_1 = links; _i < links_1.length; _i++) {
-            var link = links_1[_i];
-            reference += link.outerHTML;
-        }
-        var div = createElement('div');
-        clone.style.width = this.parent.element.offsetWidth + 'px';
-        var elementWidth = Math.round((parseInt(clone.style.width, 10)) / 100) * 100;
-        div.appendChild(clone);
-        var printWindow = window.open('', 'print', 'height=550,width=' + elementWidth + ',tabbar=no');
-        printWindow.document.write('<!DOCTYPE html><html><head>' + reference + '</head><body>' + div.innerHTML +
-            '<script>(function() { window.ready = true; })();</script></body></html>');
-        printWindow.document.close();
-        printWindow.focus();
-        setTimeout(function () {
-            if (printWindow.ready && scrollableEle) {
-                // eslint-disable-next-line no-self-assign
-                scrollableEle.scrollLeft = scrollableEle.scrollLeft;
-                // eslint-disable-next-line no-self-assign
-                scrollableEle.scrollTop = scrollableEle.scrollTop;
-                var headerTimeCellsScroll = printWindow.document.querySelector('.e-date-header-wrap');
-                if (headerTimeCellsScroll) {
-                    headerTimeCellsScroll.scrollLeft = scrollableEle.scrollLeft;
-                }
-                var timeCellsScroll = printWindow.document.querySelector('.e-time-cells-wrap');
-                if (timeCellsScroll) {
-                    timeCellsScroll.scrollTop = scrollableEle.scrollTop;
-                }
-                var contentCellScroll = printWindow.document.querySelector(className);
-                if (contentCellScroll) {
-                    contentCellScroll.scrollLeft = scrollableEle.scrollLeft;
-                    contentCellScroll.scrollTop = scrollableEle.scrollTop;
-                }
-                printWindow.print();
-                printWindow.close();
+        var args = { cancel: false, printElement: clone };
+        this.parent.trigger(events.beforePrint, args, function (printElement) {
+            if (printElement.cancel) {
+                return;
+            }
+            document.body.appendChild(clone);
+            var className = _this.parent.currentView === 'MonthAgenda' ? '.e-appointment-wrap' : '.e-content-wrap';
+            var scrollableEle = _this.parent.element.querySelector(className);
+            var links = [].slice.call(document.getElementsByTagName('head')[0].querySelectorAll('link, style'));
+            var reference = '';
+            for (var _i = 0, links_1 = links; _i < links_1.length; _i++) {
+                var link = links_1[_i];
+                reference += link.outerHTML;
             }
-        }, 500);
+            var div = createElement('div');
+            clone.style.width = _this.parent.element.offsetWidth + 'px';
+            var elementWidth = Math.round((parseInt(clone.style.width, 10)) / 100) * 100;
+            div.appendChild(clone);
+            var printWindow = window.open('', 'print', 'height=550,width=' + elementWidth + ',tabbar=no');
+            printWindow.document.write('<!DOCTYPE html><html><head>' + reference + '</head><body>' + div.innerHTML +
+                '<script>(function() { window.ready = true; })();</script></body></html>');
+            printWindow.document.close();
+            printWindow.focus();
+            setTimeout(function () {
+                if (printWindow.ready && scrollableEle) {
+                    // eslint-disable-next-line no-self-assign
+                    scrollableEle.scrollLeft = scrollableEle.scrollLeft;
+                    // eslint-disable-next-line no-self-assign
+                    scrollableEle.scrollTop = scrollableEle.scrollTop;
+                    var headerTimeCellsScroll = printWindow.document.querySelector('.e-date-header-wrap');
+                    if (headerTimeCellsScroll) {
+                        headerTimeCellsScroll.scrollLeft = scrollableEle.scrollLeft;
+                    }
+                    var timeCellsScroll = printWindow.document.querySelector('.e-time-cells-wrap');
+                    if (timeCellsScroll) {
+                        timeCellsScroll.scrollTop = scrollableEle.scrollTop;
+                    }
+                    var contentCellScroll = printWindow.document.querySelector(className);
+                    if (contentCellScroll) {
+                        contentCellScroll.scrollLeft = scrollableEle.scrollLeft;
+                        contentCellScroll.scrollTop = scrollableEle.scrollTop;
+                    }
+                    printWindow.print();
+                    printWindow.close();
+                }
+            }, 500);
+        });
     };
     Print.prototype.printSchedulerWithModel = function (printOptions) {
+        var _this = this;
         var element = createElement('div', { id: this.parent.element.id + '_print', className: 'e-print-schedule' });
         document.body.appendChild(element);
         Schedule.Inject(Day, Week, WorkWeek, Month, Agenda, MonthAgenda, TimelineViews, TimelineMonth, Year, TimelineYear);
@@ -81,10 +89,17 @@ var Print = /** @class */ (function () {
         this.printInstance.registeredTemplate = this.parent.registeredTemplate;
         this.printInstance.root = this.parent.root ? this.parent.root : this.parent;
         this.printInstance.appendTo(element);
-        this.printInstance.on(events.print, this.contentReady, this);
-        this.printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
-        this.printWindow.moveTo(0, 0);
-        this.printWindow.resizeTo(screen.availWidth, screen.availHeight);
+        var args = { cancel: false, printElement: element };
+        this.parent.trigger(events.beforePrint, args, function (printElement) {
+            if (printElement.cancel) {
+                _this.printCleanup();
+                return;
+            }
+            _this.printInstance.on(events.print, _this.contentReady, _this);
+            _this.printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
+            _this.printWindow.moveTo(0, 0);
+            _this.printWindow.resizeTo(screen.availWidth, screen.availHeight);
+        });
     };
     Print.prototype.getPrintScheduleModel = function (printOptions) {
         var printModel = {};
@@ -168,16 +183,39 @@ var Print = /** @class */ (function () {
     Print.prototype.contentReady = function () {
         var _this = this;
         this.printWindow = basePrint(this.printInstance.element, this.printWindow);
+        this.closePrintWindow(this.printWindow, true);
         this.printWindow.onbeforeunload = function () {
-            if (_this.printInstance) {
-                _this.printInstance.off(events.print, _this.contentReady);
-                _this.printInstance.element.remove();
-                _this.printInstance.destroy();
-                _this.printInstance = null;
-            }
-            _this.printWindow = null;
+            _this.printCleanup();
         };
     };
+    Print.prototype.closePrintWindow = function (printWindow, cleanupRequired) {
+        var _this = this;
+        if (Browser.isIos) {
+            var printInterval_1 = setInterval(function () {
+                if (printWindow.opener) {
+                    printWindow.close();
+                }
+                else if (isNullOrUndefined(printWindow.opener)) {
+                    if (cleanupRequired) {
+                        _this.printCleanup();
+                    }
+                    clearInterval(printInterval_1);
+                }
+            }, 500);
+        }
+    };
+    Print.prototype.printCleanup = function () {
+        if (this.printInstance) {
+            this.printInstance.off(events.print, this.contentReady);
+            this.printInstance.element.remove();
+            this.printInstance.destroy();
+            this.printInstance = null;
+        }
+        if (this.printWindow) {
+            this.printWindow.onbeforeunload = null;
+            this.printWindow = null;
+        }
+    };
     Print.prototype.getModuleName = function () {
         return 'print';
     };

package/src/schedule/models/views-model.d.ts

@@ -74,6 +74,38 @@ export interface ViewsModel {
      */
     allowVirtualScrolling?: boolean;
 
+    /**
+     * Specifies whether overlapping appointments are allowed within the same time slot in the Scheduler.
+     *
+     * @remarks
+     * When set to `false`, the Scheduler enforces restrictions to prevent creating or displaying overlapping appointments within the same time duration.
+     * This setting includes the following limitations:
+     *
+     * - **Initial Loading**: The alert for overlapping appointments will not display during the initial load. Overlapping events will be ignored in rendering, including occurrences.
+     *
+     * - **Dynamic Add/Edit**: When adding or editing events dynamically, overlapping validation is performed. If an overlap is detected for a single event, an alert will be shown, and the event will not be saved.
+     *
+     * For recurring events, an alert will be displayed, and the event will not be saved. To save recurring events while ignoring overlapping occurrences, trigger the `PopupOpen` event. The `Data` field will contain the parent recurrence data, and the `overlapEvents` field will contain the overlap events. Using these details, users can include exceptions in the recurrence events and save them with the `addEvent` method.
+     *
+     * - **Out-of-Date-Range Events**: The `allowOverlap` setting only prevents overlaps for events within the current view date range. To validate overlap events outside the current date range, use the `actionBegin` event to send a request to the server for validation and return a promise-based response. Assign this promise response to the `promise` field in `ActionEventArgs` to handle asynchronous server validation.
+     *
+     * @default true
+     */
+    allowOverlap?: boolean;
+
+    /**
+     * Specifies the number of additional rows or columns to render outside the visible area during virtual scrolling.
+     * This property helps in achieving smoother scrolling by pre-loading data just outside the visible region.
+     *
+     * @remarks
+     * The default value is 3. Increasing this value can result in smoother scrolling but may impact performance
+     * with larger datasets. Decreasing it can improve performance but may cause more frequent data fetches during scrolling.
+     * This property only takes effect when `allowVirtualScrolling` is enabled for the current view.
+     *
+     * @default 3
+     */
+    overscanCount?: number;
+
     /**
      * Specifies the maximum number of events to be displayed in a single row.
      * This property is applicable when the 'rowAutoHeight' property is disabled.

package/src/schedule/models/views.d.ts

@@ -67,6 +67,36 @@ export declare class Views extends ChildProperty<Views> {
      * @default false
      */
     allowVirtualScrolling: boolean;
+    /**
+     * Specifies whether overlapping appointments are allowed within the same time slot in the Scheduler.
+     *
+     * @remarks
+     * When set to `false`, the Scheduler enforces restrictions to prevent creating or displaying overlapping appointments within the same time duration.
+     * This setting includes the following limitations:
+     *
+     * - **Initial Loading**: The alert for overlapping appointments will not display during the initial load. Overlapping events will be ignored in rendering, including occurrences.
+     *
+     * - **Dynamic Add/Edit**: When adding or editing events dynamically, overlapping validation is performed. If an overlap is detected for a single event, an alert will be shown, and the event will not be saved.
+     *
+     * For recurring events, an alert will be displayed, and the event will not be saved. To save recurring events while ignoring overlapping occurrences, trigger the `PopupOpen` event. The `Data` field will contain the parent recurrence data, and the `overlapEvents` field will contain the overlap events. Using these details, users can include exceptions in the recurrence events and save them with the `addEvent` method.
+     *
+     * - **Out-of-Date-Range Events**: The `allowOverlap` setting only prevents overlaps for events within the current view date range. To validate overlap events outside the current date range, use the `actionBegin` event to send a request to the server for validation and return a promise-based response. Assign this promise response to the `promise` field in `ActionEventArgs` to handle asynchronous server validation.
+     *
+     * @default true
+     */
+    allowOverlap: boolean;
+    /**
+     * Specifies the number of additional rows or columns to render outside the visible area during virtual scrolling.
+     * This property helps in achieving smoother scrolling by pre-loading data just outside the visible region.
+     *
+     * @remarks
+     * The default value is 3. Increasing this value can result in smoother scrolling but may impact performance
+     * with larger datasets. Decreasing it can improve performance but may cause more frequent data fetches during scrolling.
+     * This property only takes effect when `allowVirtualScrolling` is enabled for the current view.
+     *
+     * @default 3
+     */
+    overscanCount: number;
     /**
      * Specifies the maximum number of events to be displayed in a single row.
      * This property is applicable when the 'rowAutoHeight' property is disabled.

package/src/schedule/models/views.js

@@ -50,6 +50,12 @@ var Views = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], Views.prototype, "allowVirtualScrolling", void 0);
+    __decorate([
+        Property(true)
+    ], Views.prototype, "allowOverlap", void 0);
+    __decorate([
+        Property(3)
+    ], Views.prototype, "overscanCount", void 0);
     __decorate([
         Property(null)
     ], Views.prototype, "maxEventsPerRow", void 0);

package/src/schedule/popups/event-tooltip.js

@@ -3,6 +3,7 @@ import { isNullOrUndefined, append, createElement, addClass, initializeCSPTempla
 import { Tooltip } from '@syncfusion/ej2-popups';
 import * as cls from '../base/css-constant';
 import * as util from '../base/util';
+import * as events from '../base/constant';
 /**
  * Tooltip for Schedule
  */
@@ -145,6 +146,23 @@ var EventTooltip = /** @class */ (function () {
         if (args.element && this.parent.isReact && !isNullOrUndefined(this.parent.eventSettings.tooltipTemplate)) {
             addClass([args.element], cls.TOOLTIP_HIDDEN_CLASS);
         }
+        var record = this.parent.eventBase.getEventByGuid(args.target.getAttribute('data-guid'));
+        if (isNullOrUndefined(record)) {
+            return;
+        }
+        var callbackArgs = {
+            cancel: false,
+            data: record,
+            content: args.element,
+            target: args.target
+        };
+        this.parent.trigger(events.tooltipOpen, callbackArgs, function (callbackArgs) {
+            if (callbackArgs.cancel) {
+                args.cancel = true;
+                return;
+            }
+            args.element = callbackArgs.content;
+        });
     };
     EventTooltip.prototype.onTooltipClose = function (args) {
         if (args.element) {

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

@@ -56,6 +56,7 @@ export declare class EventWindow {
     refreshDateTimePicker(duration?: number): void;
     private onTimeChange;
     private renderResourceDetails;
+    private applyStylesAfterRender;
     private renderDropDown;
     private onMultiselectResourceChange;
     private createInstance;

package/src/schedule/popups/event-window.js

@@ -283,6 +283,7 @@ var EventWindow = /** @class */ (function () {
         var callBackPromise = new Deferred();
         this.parent.trigger(event.popupOpen, eventProp, function (popupArgs) {
             args.cancel = popupArgs.cancel;
+            args.maxHeight = _this.parent.isAdaptive ? 'max-content' : args.maxHeight;
             _this.duration = _this.cellClickAction ? popupArgs.duration : null;
             if (_this.eventData[_this.fields.endTime].getTime() === endTime && !_this.cellClickAction &&
                 _this.eventData[_this.fields.endTime].getHours() === 0 &&
@@ -436,7 +437,8 @@ var EventWindow = /** @class */ (function () {
         var description = this.createDivElement(cls.DESCRIPTION_CLASS + '-row');
         description.appendChild(this.renderTextBox(cls.DESCRIPTION_CLASS));
         parentDiv.appendChild(description);
-        var submit = createElement('button', { attrs: { type: 'hidden', title: 'submit', style: 'display:none' } });
+        var submit = createElement('button', { attrs: { type: 'hidden', title: 'submit' } });
+        submit.style.display = 'none';
         parentDiv.appendChild(submit);
         return parentDiv;
     };
@@ -522,6 +524,7 @@ var EventWindow = /** @class */ (function () {
         }
     };
     EventWindow.prototype.renderResourceDetails = function (resourceData) {
+        var _this = this;
         var fieldName = resourceData.field;
         var value = 'e-' + fieldName;
         var labelValue = resourceData.title;
@@ -529,7 +532,7 @@ var EventWindow = /** @class */ (function () {
         var resourceInput = this.createInputElement(value + ' ' + EVENT_FIELD, fieldName);
         resourceDiv.appendChild(resourceInput);
         var resourceTemplate = function (data) {
-            return SanitizeHtmlHelper.sanitize("<div class=\"e-resource-template\"><div class=\"e-resource-color\" style=\"background-color:" + data[resourceData.colorField] + "\"></div><div class=\"e-resource-text\">" + data[resourceData.textField] + "</div></div>");
+            return SanitizeHtmlHelper.sanitize("<div class=\"e-resource-template\">\n                <div class=\"e-resource-color\" data-resource-color=\"" + data[resourceData.colorField] + "\"></div>\n                <div class=\"e-resource-text\">" + data[resourceData.textField] + "</div></div>");
         };
         initializeCSPTemplate(resourceTemplate, resourceData);
         if (resourceData.allowMultiple) {
@@ -549,7 +552,12 @@ var EventWindow = /** @class */ (function () {
                 placeholder: labelValue,
                 popupHeight: '230px',
                 popupWidth: '447px',
-                mode: 'Box'
+                mode: 'Box',
+                open: function (args) {
+                    Promise.resolve().then(function () {
+                        _this.applyStylesAfterRender(args);
+                    });
+                }
             });
             listObj.appendTo(resourceInput);
         }
@@ -568,12 +576,29 @@ var EventWindow = /** @class */ (function () {
                 placeholder: labelValue,
                 popupHeight: '230px',
                 popupWidth: '447px',
-                itemTemplate: resourceTemplate
+                itemTemplate: resourceTemplate,
+                open: function (args) {
+                    Promise.resolve().then(function () {
+                        _this.applyStylesAfterRender(args);
+                    });
+                }
             });
             dropDownList.appendTo(resourceInput);
         }
         return resourceDiv;
     };
+    EventWindow.prototype.applyStylesAfterRender = function (args) {
+        if (!args.popup || !args.popup.element) {
+            return;
+        }
+        var resourceColors = args.popup.element.querySelectorAll('.e-resource-color[data-resource-color]');
+        resourceColors.forEach(function (element) {
+            var color = element.getAttribute('data-resource-color');
+            if (color) {
+                element.style.backgroundColor = color;
+            }
+        });
+    };
     EventWindow.prototype.renderDropDown = function (value) {
         var _this = this;
         var fieldName = this.getFieldName(value);
@@ -1391,6 +1416,9 @@ var EventWindow = /** @class */ (function () {
             if (eventObj[this.fields.isReadonly]) {
                 return false;
             }
+            if (this.parent.eventBase.checkOverlap(eventObj)) {
+                return true;
+            }
             var currentAction = void 0;
             if (!isNullOrUndefined(editedData[this.fields.recurrenceRule])) {
                 currentAction = this.parent.currentAction;
@@ -1425,6 +1453,9 @@ var EventWindow = /** @class */ (function () {
         }
         else {
             this.parent.currentAction = 'Add';
+            if (this.parent.eventBase.checkOverlap(eventObj)) {
+                return true;
+            }
             if (isResourceEventExpand) {
                 this.resourceSaveEvent(eventObj, this.parent.currentAction);
             }

package/src/schedule/popups/quick-popups.js

@@ -280,7 +280,7 @@ var QuickPopups = /** @class */ (function () {
             okButton.setAttribute('aria-label', cancelButton.innerHTML);
         }
         this.quickDialogClass('Alert');
-        this.showQuickDialog('ValidationAlert', eventData);
+        this.showQuickDialog(type === 'overlapAlert' ? 'OverlapAlert' : 'ValidationAlert', eventData);
     };
     QuickPopups.prototype.showQuickDialog = function (popupType, eventData) {
         var _this = this;
@@ -289,6 +289,9 @@ var QuickPopups = /** @class */ (function () {
             type: popupType, cancel: false, element: this.quickDialog.element,
             data: extend({}, (eventData || this.parent.activeEventData.event), null, true)
         };
+        if (!this.parent.activeViewOptions.allowOverlap) {
+            eventProp.overlapEvents = this.parent.overlapAppointments;
+        }
         this.parent.trigger(event.popupOpen, eventProp, function (popupArgs) {
             if (!popupArgs.cancel) {
                 _this.quickDialog.show();
@@ -1306,16 +1309,20 @@ var QuickPopups = /** @class */ (function () {
     };
     QuickPopups.prototype.documentClick = function (e) {
         var target = e.event.target;
+        var isInsideDialog = !!closest(target, '.e-dialog');
         var classNames = '.' + cls.POPUP_WRAPPER_CLASS + ',.' + cls.HEADER_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS +
             ',.' + cls.WORK_CELLS_CLASS + ',.' + cls.APPOINTMENT_CLASS;
+        if (!isInsideDialog) {
+            classNames += ',.e-popup';
+        }
         var popupWrap = this.parent.element.querySelector('.' + cls.POPUP_WRAPPER_CLASS);
         if ((popupWrap && popupWrap.childElementCount > 0 && !closest(target, classNames)) || !closest(target, classNames)) {
             this.quickPopupHide();
             this.parent.removeNewEventElement();
         }
-        var tar = this.parent.element.querySelector('.' + cls.INLINE_SUBJECT_CLASS);
-        if (tar && tar !== target && this.parent.allowInline) {
-            this.parent.inlineModule.documentClick();
+        var tar = this.parent.allowInline ? this.parent.inlineModule.getInlineElement() : null;
+        if (tar && tar !== target) {
+            this.parent.inlineModule.documentClick(tar);
         }
         if (closest(target, '.' + cls.APPOINTMENT_CLASS + ',.' + cls.HEADER_CELLS_CLASS)) {
             this.parent.removeNewEventElement();

package/src/schedule/renderer/month.js

@@ -109,8 +109,10 @@ var Month = /** @class */ (function (_super) {
         this.retainScrollPosition();
     };
     Month.prototype.scrollToSelectedDate = function () {
+        var selectedDate = new Date(this.parent.selectedDate);
+        selectedDate.setHours(0, 0, 0, 0);
         var headerCell = this.element.querySelector('.' + cls.HEADER_CELLS_CLASS + '[data-date="'
-            + this.parent.selectedDate.getTime().toString() + '"]');
+            + selectedDate.getTime().toString() + '"]');
         var content = this.getContentAreaElement();
         if (!isNullOrUndefined(headerCell)) {
             content.scrollLeft = !this.parent.enableRtl ?