@syncfusion/ej2-schedule 28.2.11 → 29.1.34

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

@@ -1,4 +1,4 @@
-import { Component, ModuleDeclaration, Property, Event, Animation, Collection, append } 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 { getElement, removeClass, addClass, classList, remove, SanitizeHtmlHelper } 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, WeekRule, NavigationDirection } from '../base/type';import { EventBase } from '../event-renderer/event-base';import { InlineEdit } from '../event-renderer/inline-edit';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 { Year } from '../renderer/year';import { Agenda } from '../renderer/agenda';import { MonthAgenda } from '../renderer/month-agenda';import { TimelineViews } from '../renderer/timeline-view';import { TimelineMonth } from '../renderer/timeline-month';import { TimelineYear } from '../renderer/timeline-year';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 { VirtualScroll } from '../actions/virtual-scroll';import { WorkCellInteraction } from '../actions/work-cells';import { WorkHoursModel, ViewsModel, EventSettingsModel, GroupModel, ResourcesModel, TimeScaleModel, ToolbarItemModel } 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 { ICalendarExport } from '../exports/calendar-export';import { ICalendarImport } from '../exports/calendar-import';import { ExcelExport } from '../exports/excel-export';import { Print } from '../exports/print';import { IRenderer, ActionEventArgs, NavigatingEventArgs, CellClickEventArgs, RenderCellEventArgs, ScrollCss, TimezoneFields, BeforePasteEventArgs } from '../base/interface';import { EventClickArgs, EventRenderedArgs, PopupOpenEventArgs, UIStateArgs, DragEventArgs, ResizeEventArgs } from '../base/interface';import { EventFieldsMapping, TdData, ResourceDetails, ResizeEdges, StateArgs, ExportOptions, SelectEventArgs } from '../base/interface';import { ViewsData, PopupCloseEventArgs, HoverEventArgs, MoreEventsClickArgs, ScrollEventArgs, CallbackFunction } from '../base/interface';import { CalendarUtil, Gregorian, Islamic, CalendarType } from '../../common/calendar-util';import { ResourceBase } from '../base/resource';import { Timezone, timezoneData } from '../timezone/timezone';import { RecurrenceEditor } from '../../recurrence-editor/recurrence-editor';import * as events from '../base/constant';import * as cls from '../base/css-constant';import * as util from '../base/util';import { ToolbarItem } from '../models/toolbar';
+import { Component, ModuleDeclaration, Property, Event, Animation, Collection, append } 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 { getElement, removeClass, addClass, classList, remove, SanitizeHtmlHelper } 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, WeekRule, NavigationDirection } from '../base/type';import { EventBase } from '../event-renderer/event-base';import { InlineEdit } from '../event-renderer/inline-edit';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 { Year } from '../renderer/year';import { Agenda } from '../renderer/agenda';import { MonthAgenda } from '../renderer/month-agenda';import { TimelineViews } from '../renderer/timeline-view';import { TimelineMonth } from '../renderer/timeline-month';import { TimelineYear } from '../renderer/timeline-year';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 { VirtualScroll } from '../actions/virtual-scroll';import { WorkCellInteraction } from '../actions/work-cells';import { WorkHoursModel, ViewsModel, EventSettingsModel, GroupModel, ResourcesModel, TimeScaleModel, ToolbarItemModel } 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 { ICalendarExport } from '../exports/calendar-export';import { ICalendarImport } from '../exports/calendar-import';import { ExcelExport } from '../exports/excel-export';import { Print } from '../exports/print';import { IRenderer, ActionEventArgs, NavigatingEventArgs, CellClickEventArgs, RenderCellEventArgs, ScrollCss, TimezoneFields, ExcelExportEventArgs, BeforePasteEventArgs, TooltipOpenEventArgs } from '../base/interface';import { EventClickArgs, EventRenderedArgs, PopupOpenEventArgs, UIStateArgs, DragEventArgs, ResizeEventArgs } from '../base/interface';import { EventFieldsMapping, TdData, ResourceDetails, ResizeEdges, StateArgs, ExportOptions, SelectEventArgs } from '../base/interface';import { ViewsData, PopupCloseEventArgs, HoverEventArgs, MoreEventsClickArgs, ScrollEventArgs, CallbackFunction, BeforePrintEventArgs } from '../base/interface';import { CalendarUtil, Gregorian, Islamic, CalendarType } from '../../common/calendar-util';import { ResourceBase } from '../base/resource';import { Timezone, timezoneData } from '../timezone/timezone';import { RecurrenceEditor } from '../../recurrence-editor/recurrence-editor';import * as events from '../base/constant';import * as cls from '../base/css-constant';import * as util from '../base/util';import { ToolbarItem } from '../models/toolbar';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -54,6 +54,38 @@ export interface ScheduleModel extends ComponentModel{
      */
     allowSwiping?: 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;
+
     /**
      * To render the custom toolbar items, the `toolbarItems` property can be used. It contains built-in and custom toolbar items.
      * To avail the built-in toolbar items, the below string values are assigned to the `name` property of the `ToolbarItemModel`.
@@ -874,4 +906,25 @@ export interface ScheduleModel extends ComponentModel{
      */
     beforePaste?: EmitType<BeforePasteEventArgs>;
 
+    /**
+     * Triggers when the print event is called.
+     *
+     * @event 'beforePrint'
+     */
+    beforePrint?: EmitType<BeforePrintEventArgs>;
+
+    /**
+     * Triggers before the Excel export process begins.
+     *
+     * @event 'excelExport'
+     */
+    excelExport?: EmitType<ExcelExportEventArgs>;
+
+    /**
+     * Triggers before the tooltip is rendered.
+     *
+     * @event 'tooltipOpen'
+     */
+    tooltipOpen?: EmitType<TooltipOpenEventArgs>;
+
 }

package/src/schedule/base/schedule.d.ts

@@ -35,10 +35,10 @@ import { ICalendarExport } from '../exports/calendar-export';
 import { ICalendarImport } from '../exports/calendar-import';
 import { ExcelExport } from '../exports/excel-export';
 import { Print } from '../exports/print';
-import { IRenderer, ActionEventArgs, NavigatingEventArgs, CellClickEventArgs, RenderCellEventArgs, ScrollCss, TimezoneFields, BeforePasteEventArgs } from '../base/interface';
+import { IRenderer, ActionEventArgs, NavigatingEventArgs, CellClickEventArgs, RenderCellEventArgs, ScrollCss, TimezoneFields, ExcelExportEventArgs, BeforePasteEventArgs, TooltipOpenEventArgs } from '../base/interface';
 import { EventClickArgs, EventRenderedArgs, PopupOpenEventArgs, UIStateArgs, DragEventArgs, ResizeEventArgs } from '../base/interface';
 import { EventFieldsMapping, TdData, ResourceDetails, ResizeEdges, ExportOptions, SelectEventArgs } from '../base/interface';
-import { ViewsData, PopupCloseEventArgs, HoverEventArgs, MoreEventsClickArgs, ScrollEventArgs, CallbackFunction } from '../base/interface';
+import { ViewsData, PopupCloseEventArgs, HoverEventArgs, MoreEventsClickArgs, ScrollEventArgs, CallbackFunction, BeforePrintEventArgs } from '../base/interface';
 import { CalendarUtil, CalendarType } from '../../common/calendar-util';
 import { ResourceBase } from '../base/resource';
 import { Timezone } from '../timezone/timezone';
@@ -125,6 +125,7 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
     editorTitles: EventFieldsMapping;
     eventsData: Record<string, any>[];
     eventsProcessed: Record<string, any>[];
+    overlapAppointments: Record<string, any>[];
     blockData: Record<string, any>[];
     blockProcessed: Record<string, any>[];
     resourceCollection: ResourcesModel[];
@@ -183,6 +184,36 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @default true
      */
     allowSwiping: 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;
     /**
      * To render the custom toolbar items, the `toolbarItems` property can be used. It contains built-in and custom toolbar items.
      * To avail the built-in toolbar items, the below string values are assigned to the `name` property of the `ToolbarItemModel`.
@@ -917,6 +948,24 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @event 'beforePaste'
      */
     beforePaste: EmitType<BeforePasteEventArgs>;
+    /**
+     * Triggers when the print event is called.
+     *
+     * @event 'beforePrint'
+     */
+    beforePrint: EmitType<BeforePrintEventArgs>;
+    /**
+     * Triggers before the Excel export process begins.
+     *
+     * @event 'excelExport'
+     */
+    excelExport: EmitType<ExcelExportEventArgs>;
+    /**
+     * Triggers before the tooltip is rendered.
+     *
+     * @event 'tooltipOpen'
+     */
+    tooltipOpen: EmitType<TooltipOpenEventArgs>;
     /**
      * Constructor for creating the Schedule widget
      *
@@ -1821,6 +1870,23 @@ export declare class Schedule extends Component<HTMLElement> implements INotifyP
      * @returns {void}
      */
     closeQuickInfoPopup(): void;
+    /**
+     * To manually open the overlap validation Alert.
+     *
+     * @param {PopupOpenEventArgs} args The arguments for opening the popup.
+     * @param {string} args.type Defines the type of overlap alert (e.g., 'OverlapAlert').
+     * @param {Record<string, any>} args.data The data associated with the popup.
+     * @param {Record<string, any>[]} args.overlapEvents The overlap events.
+     * @returns {void}
+     */
+    openOverlapAlert(args: PopupOpenEventArgs): void;
+    /**
+     * To manually close the overlap validation Alert.
+     *
+     * @function closeOverlapValidationAlert
+     * @returns {void}
+     */
+    closeOverlapAlert(): void;
     /**
      * Closes the tooltip.
      * For example, when the context menu is opened for an event,

package/src/schedule/base/schedule.js

@@ -393,6 +393,8 @@ var Schedule = /** @class */ (function (_super) {
             readonly: this.readonly,
             startHour: this.startHour,
             allowVirtualScrolling: false,
+            allowOverlap: this.allowOverlap,
+            overscanCount: this.overscanCount,
             cellHeaderTemplate: this.cellHeaderTemplate,
             dayHeaderTemplate: this.dayHeaderTemplate,
             monthHeaderTemplate: this.monthHeaderTemplate,
@@ -852,6 +854,7 @@ var Schedule = /** @class */ (function (_super) {
             startEndError: 'The selected end date occurs before the start date.',
             invalidDateError: 'The entered date value is invalid.',
             blockAlert: 'Events cannot be scheduled within the blocked time range.',
+            overlapAlert: 'Events cannot be scheduled during the chosen time as it overlaps with another event.',
             ok: 'Ok',
             yes: 'Yes',
             no: 'No',
@@ -1751,6 +1754,7 @@ var Schedule = /** @class */ (function (_super) {
             case 'allowDragAndDrop':
             case 'allowResizing':
             case 'eventDragArea':
+            case 'allowOverlap':
                 this.refreshEvents(false);
                 break;
             case 'weekRule':
@@ -2806,6 +2810,54 @@ var Schedule = /** @class */ (function (_super) {
             this.quickPopup.quickPopupHide(true);
         }
     };
+    /**
+     * To manually open the overlap validation Alert.
+     *
+     * @param {PopupOpenEventArgs} args The arguments for opening the popup.
+     * @param {string} args.type Defines the type of overlap alert (e.g., 'OverlapAlert').
+     * @param {Record<string, any>} args.data The data associated with the popup.
+     * @param {Record<string, any>[]} args.overlapEvents The overlap events.
+     * @returns {void}
+     */
+    Schedule.prototype.openOverlapAlert = function (args) {
+        var _this = this;
+        if (this.quickPopup) {
+            var eventProp = {
+                type: 'OverlapAlert',
+                cancel: false,
+                element: this.quickPopup.quickDialog.element,
+                data: args.data,
+                overlapEvents: args.overlapEvents
+            };
+            this.trigger(events.popupOpen, eventProp, function (popupArgs) {
+                if (!popupArgs.cancel) {
+                    _this.quickPopup.openValidationError('overlapAlert', args.data);
+                }
+            });
+        }
+    };
+    /**
+     * To manually close the overlap validation Alert.
+     *
+     * @function closeOverlapValidationAlert
+     * @returns {void}
+     */
+    Schedule.prototype.closeOverlapAlert = function () {
+        var _this = this;
+        if (this.quickPopup) {
+            var args = {
+                type: 'OverlapAlert',
+                cancel: false,
+                data: this.activeEventData.event,
+                element: this.quickPopup.quickDialog.element
+            };
+            this.trigger(events.popupClose, args, function (popupArgs) {
+                if (!popupArgs.cancel) {
+                    _this.quickPopup.quickDialog.hide();
+                }
+            });
+        }
+    };
     /**
      * Closes the tooltip.
      * For example, when the context menu is opened for an event,
@@ -3001,6 +3053,12 @@ var Schedule = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], Schedule.prototype, "allowSwiping", void 0);
+    __decorate([
+        Property(true)
+    ], Schedule.prototype, "allowOverlap", void 0);
+    __decorate([
+        Property(3)
+    ], Schedule.prototype, "overscanCount", void 0);
     __decorate([
         Collection([], ToolbarItem)
     ], Schedule.prototype, "toolbarItems", void 0);
@@ -3259,6 +3317,15 @@ var Schedule = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Schedule.prototype, "beforePaste", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "beforePrint", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "excelExport", void 0);
+    __decorate([
+        Event()
+    ], Schedule.prototype, "tooltipOpen", void 0);
     Schedule = __decorate([
         NotifyPropertyChanges
     ], Schedule);

package/src/schedule/base/type.d.ts

@@ -51,13 +51,14 @@ export declare type ReturnType = {
  * Editor :- Denotes the detailed editor window.
  * EventContainer :- Denotes the more indicator popup.
  * QuickInfo :- Denotes the quick popup.
+ * OverlapAlert :- Denotes the popup showing overlap events.
  * RecurrenceAlert :- Denotes the popup showing recurrence alerts.
  * RecurrenceValidationAlert :- Denotes the popup showing recurrence validation alerts.
  * ValidationAlert :- Denotes the popup showing validation alerts.
  * ViewEventInfo :- Denotes the quick popup on the cells in responsive mode.
  * ```
  */
-export declare type PopupType = 'Editor' | 'EventContainer' | 'QuickInfo' | 'RecurrenceAlert' | 'DeleteAlert' | 'ViewEventInfo' | 'EditEventInfo' | 'ValidationAlert' | 'RecurrenceValidationAlert';
+export declare type PopupType = 'Editor' | 'EventContainer' | 'QuickInfo' | 'RecurrenceAlert' | 'DeleteAlert' | 'ViewEventInfo' | 'EditEventInfo' | 'ValidationAlert' | 'RecurrenceValidationAlert' | 'OverlapAlert';
 /**
  * An enum that holds the header row type in the timeline scheduler.
  * ```props

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

@@ -9,6 +9,7 @@ export declare class EventBase {
     slots: number[];
     cssClass: string;
     groupOrder: string[];
+    processedData: Record<string, any>[];
     private isDoubleTapped;
     /**
      * Constructor for EventBase
@@ -17,6 +18,10 @@ export declare class EventBase {
      */
     constructor(parent: Schedule);
     processData(events: Record<string, any>[], timeZonePropChanged?: boolean, oldTimezone?: string): Record<string, any>[];
+    private findOverlappingData;
+    private isOverlapRange;
+    private compareResourceValues;
+    checkOverlap(eventData: Record<string, any> | Record<string, any>[]): boolean;
     updateEventDateTime(eventData: Record<string, any>): Record<string, any>;
     getProcessedEvents(eventCollection?: Record<string, any>[]): Record<string, any>[];
     timezonePropertyChange(oldTimezone: string): void;

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

@@ -18,6 +18,7 @@ var EventBase = /** @class */ (function () {
      */
     function EventBase(parent) {
         this.slots = [];
+        this.processedData = [];
         this.isDoubleTapped = false;
         this.parent = parent;
     }
@@ -97,11 +98,35 @@ var EventBase = /** @class */ (function () {
             return !data[_this.parent.eventFields.isBlock];
         });
         this.parent.eventsProcessed = this.filterEvents(start, end, eventData);
+        if (!this.parent.activeViewOptions.allowOverlap && this.parent.eventsProcessed.length > 0) {
+            this.processedData = this.parent.eventsProcessed;
+            var nonOverlapList = [];
+            var fields_1 = this.parent.eventFields;
+            for (var _a = 0, _b = this.parent.eventsProcessed; _a < _b.length; _a++) {
+                var data = _b[_a];
+                var overlappingData = this.findOverlappingData(data, nonOverlapList);
+                if (!overlappingData) {
+                    nonOverlapList.push(data);
+                }
+                else if (!this.parent.eventSettings.sortComparer) {
+                    var dataDuration = new Date(data[fields_1.endTime]).getTime() - new Date(data[fields_1.startTime]).getTime();
+                    var duplicateDuration = new Date(overlappingData[fields_1.endTime]).getTime() - new Date(overlappingData[fields_1.startTime]).getTime();
+                    if ((dataDuration > duplicateDuration && data[fields_1.startTime] === overlappingData[fields_1.startTime]) || (data[fields_1.isAllDay] === true)) {
+                        var index = nonOverlapList.indexOf(overlappingData);
+                        if (index !== -1) {
+                            nonOverlapList.splice(index, 1);
+                        }
+                        nonOverlapList.push(data);
+                    }
+                }
+            }
+            this.parent.eventsProcessed = nonOverlapList;
+        }
         var blockData = processed.filter(function (data) {
             return data[_this.parent.eventFields.isBlock];
         });
-        for (var _a = 0, blockData_1 = blockData; _a < blockData_1.length; _a++) {
-            var eventObj = blockData_1[_a];
+        for (var _c = 0, blockData_1 = blockData; _c < blockData_1.length; _c++) {
+            var eventObj = blockData_1[_c];
             if (eventObj[fields.isAllDay]) {
                 var isDifferentDate = util.resetTime(new Date(eventObj[fields.startTime].getTime())) <
                     util.resetTime(new Date(eventObj[fields.endTime].getTime()));
@@ -114,6 +139,77 @@ var EventBase = /** @class */ (function () {
         this.parent.blockProcessed = blockData;
         return eventData;
     };
+    EventBase.prototype.findOverlappingData = function (eventData, eventList) {
+        var isResource = this.parent.activeViewOptions.group.resources.length > 0;
+        var resourceCollection = isResource ? this.parent.resourceBase.resourceCollection : [];
+        var lastLevelResource = isResource ? resourceCollection[resourceCollection.length - 1].field : null;
+        var fields = this.parent.eventFields;
+        var newStartTime = new Date(eventData[fields.startTime]);
+        var newEndTime = new Date(eventData[fields.endTime]);
+        for (var _i = 0, eventList_1 = eventList; _i < eventList_1.length; _i++) {
+            var existingEvent = eventList_1[_i];
+            if (newStartTime < existingEvent[fields.endTime] &&
+                newEndTime > existingEvent[fields.startTime] &&
+                existingEvent[fields.id] !== eventData[fields.id] &&
+                (!isResource || isNullOrUndefined(lastLevelResource) ||
+                    this.compareResourceValues(existingEvent["" + lastLevelResource], eventData["" + lastLevelResource]))) {
+                return existingEvent;
+            }
+        }
+        return undefined;
+    };
+    EventBase.prototype.isOverlapRange = function (eventData, currentAction) {
+        var _this = this;
+        if (currentAction === void 0) { currentAction = null; }
+        var isResource = this.parent.activeViewOptions.group.resources.length > 0;
+        var resourceCollection = isResource ? this.parent.resourceBase.resourceCollection : [];
+        var lastLevelResource = isResource ? resourceCollection[resourceCollection.length - 1].field : null;
+        var eventCollection = Array.isArray(eventData) ? eventData : [eventData];
+        var fields = this.parent.eventFields;
+        var processOverlappingEvents = function (data) {
+            return _this.processedData.filter(function (x) {
+                return data[fields.startTime] < x[fields.endTime] &&
+                    data[fields.endTime] > x[fields.startTime] &&
+                    x[fields.id] !== data[fields.id] &&
+                    (!isResource || isNullOrUndefined(lastLevelResource) || _this.compareResourceValues(x["" + lastLevelResource], data["" + lastLevelResource]));
+            });
+        };
+        var overlappedEvents = [];
+        var isOverlapAlert = false;
+        for (var _i = 0, eventCollection_1 = eventCollection; _i < eventCollection_1.length; _i++) {
+            var event_2 = eventCollection_1[_i];
+            var dataCol = !isNullOrUndefined(event_2[fields.recurrenceRule]) &&
+                (isNullOrUndefined(event_2[fields.recurrenceID]) || event_2[fields.recurrenceID] === event_2[fields.id]) &&
+                (isNullOrUndefined(event_2[fields.recurrenceID]) || currentAction === 'EditSeries')
+                ? this.generateOccurrence(event_2)
+                : [event_2];
+            for (var _a = 0, dataCol_1 = dataCol; _a < dataCol_1.length; _a++) {
+                var data = dataCol_1[_a];
+                var overlappingEvents = processOverlappingEvents(data);
+                if (overlappingEvents.length > 0) {
+                    overlappedEvents.push.apply(overlappedEvents, overlappingEvents);
+                }
+                if (this.findOverlappingData(data, this.parent.eventsProcessed)) {
+                    isOverlapAlert = true;
+                }
+            }
+        }
+        this.parent.overlapAppointments = overlappedEvents;
+        return isOverlapAlert;
+    };
+    EventBase.prototype.compareResourceValues = function (a, b) {
+        var getValue = function (value) { return Array.isArray(value) ? value[0] : value; };
+        return getValue(a) === getValue(b);
+    };
+    EventBase.prototype.checkOverlap = function (eventData) {
+        if (!this.parent.activeViewOptions.allowOverlap) {
+            if (this.isOverlapRange(eventData)) {
+                this.parent.quickPopup.openValidationError('overlapAlert', eventData);
+                return true;
+            }
+        }
+        return false;
+    };
     EventBase.prototype.updateEventDateTime = function (eventData) {
         if (typeof eventData[this.parent.eventFields.startTime] === 'string') {
             eventData[this.parent.eventFields.startTime] = util.getDateFromString(eventData[this.parent.eventFields.startTime]);
@@ -126,14 +222,14 @@ var EventBase = /** @class */ (function () {
     EventBase.prototype.getProcessedEvents = function (eventCollection) {
         if (eventCollection === void 0) { eventCollection = this.parent.eventsData; }
         var processed = [];
-        for (var _i = 0, eventCollection_1 = eventCollection; _i < eventCollection_1.length; _i++) {
-            var event_2 = eventCollection_1[_i];
-            if (!isNullOrUndefined(event_2[this.parent.eventFields.recurrenceRule]) &&
-                isNullOrUndefined(event_2[this.parent.eventFields.recurrenceID])) {
-                processed = processed.concat(this.generateOccurrence(event_2));
+        for (var _i = 0, eventCollection_2 = eventCollection; _i < eventCollection_2.length; _i++) {
+            var event_3 = eventCollection_2[_i];
+            if (!isNullOrUndefined(event_3[this.parent.eventFields.recurrenceRule]) &&
+                isNullOrUndefined(event_3[this.parent.eventFields.recurrenceID])) {
+                processed = processed.concat(this.generateOccurrence(event_3));
             }
             else {
-                processed.push(event_2);
+                processed.push(event_3);
             }
         }
         return processed;
@@ -1031,13 +1127,13 @@ var EventBase = /** @class */ (function () {
         } while (followingEvent);
         var collections = {};
         if (childObj) {
-            var fields_1 = this.parent.eventFields;
+            var fields_2 = this.parent.eventFields;
             collections = {
                 follow: followingCollection.filter(function (eventData) {
-                    return eventData[fields_1.startTime] >= childObj[fields_1.startTime];
+                    return eventData[fields_2.startTime] >= childObj[fields_2.startTime];
                 }),
                 occurrence: occurrenceCollection.filter(function (eventData) {
-                    return eventData[fields_1.startTime] >= childObj[fields_1.startTime];
+                    return eventData[fields_2.startTime] >= childObj[fields_2.startTime];
                 })
             };
         }
@@ -1079,9 +1175,9 @@ var EventBase = /** @class */ (function () {
         var occurrenceCollection = [];
         var parentObject = this.parent.eventsData.filter(function (obj) { return obj[fields.id] === id; });
         for (var _i = 0, parentObject_1 = parentObject; _i < parentObject_1.length; _i++) {
-            var event_3 = parentObject_1[_i];
-            if (!isNullOrUndefined(event_3[fields.recurrenceRule])) {
-                occurrenceCollection = occurrenceCollection.concat(this.generateOccurrence(event_3));
+            var event_4 = parentObject_1[_i];
+            if (!isNullOrUndefined(event_4[fields.recurrenceRule])) {
+                occurrenceCollection = occurrenceCollection.concat(this.generateOccurrence(event_4));
             }
         }
         return occurrenceCollection;
@@ -1090,9 +1186,9 @@ var EventBase = /** @class */ (function () {
         var fields = this.parent.eventFields;
         var occurrenceCollection = [];
         for (var _i = 0, _a = this.parent.eventsData; _i < _a.length; _i++) {
-            var event_4 = _a[_i];
-            if (!isNullOrUndefined(event_4[fields.recurrenceRule])) {
-                occurrenceCollection = occurrenceCollection.concat(this.generateOccurrence(event_4));
+            var event_5 = _a[_i];
+            if (!isNullOrUndefined(event_5[fields.recurrenceRule])) {
+                occurrenceCollection = occurrenceCollection.concat(this.generateOccurrence(event_5));
             }
         }
         var filter = occurrenceCollection.filter(function (obj) {
@@ -1200,17 +1296,17 @@ var EventBase = /** @class */ (function () {
         var isBlockAlert = false;
         var fields = this.parent.eventFields;
         for (var _i = 0, _a = eventCollection; _i < _a.length; _i++) {
-            var event_5 = _a[_i];
+            var event_6 = _a[_i];
             var dataCol = [];
-            if (!isNullOrUndefined(event_5[fields.recurrenceRule]) &&
-                (isNullOrUndefined(event_5[fields.recurrenceID]) || event_5[fields.id] === event_5[fields.recurrenceID])) {
-                dataCol = this.generateOccurrence(event_5);
+            if (!isNullOrUndefined(event_6[fields.recurrenceRule]) &&
+                (isNullOrUndefined(event_6[fields.recurrenceID]) || event_6[fields.id] === event_6[fields.recurrenceID])) {
+                dataCol = this.generateOccurrence(event_6);
             }
             else {
-                dataCol.push(event_5);
+                dataCol.push(event_6);
             }
-            for (var _b = 0, dataCol_1 = dataCol; _b < dataCol_1.length; _b++) {
-                var data = dataCol_1[_b];
+            for (var _b = 0, dataCol_2 = dataCol; _b < dataCol_2.length; _b++) {
+                var data = dataCol_2[_b];
                 var filterBlockEvents = this.filterBlockEvents(data);
                 if (filterBlockEvents.length > 0) {
                     isBlockAlert = true;
@@ -1255,9 +1351,9 @@ var EventBase = /** @class */ (function () {
         var deleteRecurrenceEventList = [];
         var delEditedEvents;
         for (var _i = 0, deleteFutureEditEventList_1 = deleteFutureEditEventList; _i < deleteFutureEditEventList_1.length; _i++) {
-            var event_6 = deleteFutureEditEventList_1[_i];
-            var delEventQuery = new Predicate(fields.recurrenceID, 'equal', event_6[fields.id]).
-                or(new Predicate(fields.recurrenceID, 'equal', event_6[fields.followingID]).
+            var event_7 = deleteFutureEditEventList_1[_i];
+            var delEventQuery = new Predicate(fields.recurrenceID, 'equal', event_7[fields.id]).
+                or(new Predicate(fields.recurrenceID, 'equal', event_7[fields.followingID]).
                 and(new Predicate(fields.recurrenceID, 'notequal', undefined)).
                 and(new Predicate(fields.recurrenceID, 'notequal', null)));
             if (this.parent.currentAction === 'EditFollowingEvents' || this.parent.currentAction === 'DeleteFollowingEvents') {

package/src/schedule/event-renderer/inline-edit.d.ts

@@ -4,6 +4,7 @@ import { Schedule } from '../base/schedule';
  */
 export declare class InlineEdit {
     private parent;
+    private inlineInputEle;
     constructor(parent: Schedule);
     private inlineEdit;
     private cellEdit;
@@ -13,9 +14,10 @@ export declare class InlineEdit {
     private createTimelineViewInline;
     private getEventDaysCount;
     private generateEventData;
-    documentClick(): void;
+    documentClick(target: HTMLInputElement): void;
     inlineCrudActions(target: HTMLTableCellElement): void;
     createInlineAppointmentElement(inlineData?: Record<string, any>): HTMLElement;
     removeInlineAppointmentElement(): void;
+    getInlineElement(): HTMLInputElement | null;
     destroy(): void;
 }

package/src/schedule/event-renderer/inline-edit.js

@@ -77,7 +77,8 @@ var InlineEdit = /** @class */ (function () {
             else {
                 subject = args.data[this.parent.eventFields.subject];
             }
-            inlineSubject = createElement('input', { className: cls.INLINE_SUBJECT_CLASS, attrs: { value: subject } });
+            inlineSubject = this.inlineInputEle =
+                createElement('input', { className: cls.INLINE_SUBJECT_CLASS, attrs: { value: subject } });
             if (closest(args.element, '.' + cls.MORE_POPUP_WRAPPER_CLASS)) {
                 args.element.insertBefore(inlineSubject, subEle);
             }
@@ -196,8 +197,7 @@ var InlineEdit = /** @class */ (function () {
         }
         return saveObj;
     };
-    InlineEdit.prototype.documentClick = function () {
-        var target = this.parent.element.querySelector('.' + cls.INLINE_SUBJECT_CLASS);
+    InlineEdit.prototype.documentClick = function (target) {
         if (target && target.value !== '') {
             this.inlineCrudActions(target);
         }
@@ -229,7 +229,8 @@ var InlineEdit = /** @class */ (function () {
         });
         var inlineDetails = createElement('div', { className: cls.APPOINTMENT_DETAILS });
         inlineAppointmentElement.appendChild(inlineDetails);
-        var inline = createElement('input', { className: cls.INLINE_SUBJECT_CLASS });
+        var inline = this.inlineInputEle =
+            createElement('input', { className: cls.INLINE_SUBJECT_CLASS });
         inlineDetails.appendChild(inline);
         if (inlineData) {
             this.parent.eventBase.applyResourceColor(inlineAppointmentElement, inlineData, 'backgroundColor');
@@ -239,9 +240,15 @@ var InlineEdit = /** @class */ (function () {
     InlineEdit.prototype.removeInlineAppointmentElement = function () {
         var inlineAppointment = [].slice.call(this.parent.element.querySelectorAll('.' + cls.INLINE_APPOINTMENT_CLASS));
         if (inlineAppointment.length > 0) {
-            inlineAppointment.forEach(function (node) { return remove(node); });
+            inlineAppointment.forEach(function (node) {
+                var inlineSubject = node.querySelector('.' + cls.INLINE_SUBJECT_CLASS);
+                if (!isNullOrUndefined(inlineSubject)) {
+                    inlineSubject.blur();
+                }
+                remove(node);
+            });
         }
-        var inlineSubject = this.parent.element.querySelector('.' + cls.INLINE_SUBJECT_CLASS);
+        var inlineSubject = this.getInlineElement();
         if (inlineSubject) {
             var appointmentSubject = closest(inlineSubject, '.' + cls.APPOINTMENT_CLASS);
             var subject = appointmentSubject.querySelector('.' + cls.SUBJECT_CLASS);
@@ -250,8 +257,13 @@ var InlineEdit = /** @class */ (function () {
             }
             remove(inlineSubject);
         }
+        this.inlineInputEle = null;
+    };
+    InlineEdit.prototype.getInlineElement = function () {
+        return this.inlineInputEle;
     };
     InlineEdit.prototype.destroy = function () {
+        this.inlineInputEle = null;
         this.parent.off(events.inlineClick, this.inlineEdit);
     };
     return InlineEdit;

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

@@ -41,6 +41,7 @@ export declare class MonthEvent extends EventBase {
     createAppointmentElement(record: Record<string, any>, resIndex: number, isCloneElement?: boolean): HTMLElement;
     private appendEventIcons;
     renderEvents(event: Record<string, any>, resIndex: number, eventsList?: Record<string, any>[]): void;
+    adjustAppointments(conWidth: number): void;
     updateCellHeight(cell: HTMLElement, height: number): void;
     updateBlockElements(): void;
     getFilteredEvents(startDate: Date, endDate: Date, groupIndex: string, eventsList?: Record<string, any>[]): Record<string, any>[];