@syncfusion/ej2-schedule 19.2.60 → 19.3.48

package/src/schedule/base/schedule.js

@@ -18,7 +18,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, Property, Event, Animation, Collection } from '@syncfusion/ej2-base';
+import { Component, Property, Event, Animation, Collection, append } from '@syncfusion/ej2-base';
 import { EventHandler, Browser, Internationalization, getDefaultDateObject, cldrData, L10n } from '@syncfusion/ej2-base';
 import { getValue, compile, extend, isNullOrUndefined, NotifyPropertyChanges, Complex } from '@syncfusion/ej2-base';
 import { getElement, removeClass, addClass, classList, remove } from '@syncfusion/ej2-base';
@@ -110,11 +110,6 @@ var Schedule = /** @class */ (function (_super) {
         }
         classList(this.element, addClasses, removeClasses);
         this.validateDate();
-        this.eventTooltipTemplateFn = this.templateParser(this.eventSettings.tooltipTemplate);
-        this.editorTemplateFn = this.templateParser(this.editorTemplate);
-        this.quickInfoTemplatesHeaderFn = this.templateParser(this.quickInfoTemplates.header);
-        this.quickInfoTemplatesContentFn = this.templateParser(this.quickInfoTemplates.content);
-        this.quickInfoTemplatesFooterFn = this.templateParser(this.quickInfoTemplates.footer);
         createSpinner({ target: this.element });
         this.scrollModule = new Scroll(this);
         this.scrollModule.setWidth();
@@ -264,6 +259,7 @@ var Schedule = /** @class */ (function (_super) {
             obj.dayHeaderTemplateName = obj.dayHeaderTemplate ? obj.option : '';
             obj.monthHeaderTemplateName = obj.monthHeaderTemplate ? obj.option : '';
             obj.resourceHeaderTemplateName = obj.resourceHeaderTemplate ? obj.option : '';
+            obj.headerIndentTemplateName = obj.headerIndentTemplate ? obj.option : '';
             obj.eventTemplateName = obj.eventTemplate ? obj.option : '';
             if (!isNullOrUndefined(obj.firstDayOfWeek) && obj.firstDayOfWeek === 0) {
                 delete obj.firstDayOfWeek;
@@ -322,6 +318,7 @@ var Schedule = /** @class */ (function (_super) {
             eventTemplate: this.eventSettings.template,
             dateHeaderTemplate: this.dateHeaderTemplate,
             resourceHeaderTemplate: this.resourceHeaderTemplate,
+            headerIndentTemplate: this.headerIndentTemplate,
             firstMonthOfYear: this.firstMonthOfYear,
             firstDayOfWeek: this.firstDayOfWeek,
             workDays: workDays,
@@ -397,7 +394,13 @@ var Schedule = /** @class */ (function (_super) {
         this.minorSlotTemplateFn = this.templateParser(this.activeViewOptions.timeScale.minorSlotTemplate);
         this.appointmentTemplateFn = this.templateParser(this.activeViewOptions.eventTemplate);
         this.resourceHeaderTemplateFn = this.templateParser(this.activeViewOptions.resourceHeaderTemplate);
+        this.headerIndentTemplateFn = this.templateParser(this.activeViewOptions.headerIndentTemplate);
         this.headerTooltipTemplateFn = this.templateParser(this.activeViewOptions.group.headerTooltipTemplate);
+        this.eventTooltipTemplateFn = this.templateParser(this.eventSettings.tooltipTemplate);
+        this.editorTemplateFn = this.templateParser(this.editorTemplate);
+        this.quickInfoTemplatesHeaderFn = this.templateParser(this.quickInfoTemplates.header);
+        this.quickInfoTemplatesContentFn = this.templateParser(this.quickInfoTemplates.content);
+        this.quickInfoTemplatesFooterFn = this.templateParser(this.quickInfoTemplates.footer);
     };
     Schedule.prototype.initializePopups = function () {
         this.eventWindow = new EventWindow(this);
@@ -1037,6 +1040,15 @@ var Schedule = /** @class */ (function (_super) {
     Schedule.prototype.getResourceHeaderTemplate = function () {
         return this.resourceHeaderTemplateFn;
     };
+    /**
+     * Method to process indent template
+     *
+     * @returns {CallbackFunction} Returns the callback function
+     * @private
+     */
+    Schedule.prototype.getHeaderIndentTemplate = function () {
+        return this.headerIndentTemplateFn;
+    };
     /**
      * Method to get dynamic CSS properties
      *
@@ -1100,7 +1112,7 @@ var Schedule = /** @class */ (function (_super) {
             && !this.activeViewOptions.timeScale.enable) || this.activeView.isTimelineView()) {
             this.activeView.resetColWidth();
             this.notify(events.scrollUiUpdate, { cssProperties: this.getCssProperties(), isPreventScrollUpdate: true });
-            this.notify(events.dataReady, {});
+            this.refreshEvents(false);
         }
         else {
             this.notify(events.contentReady, {});
@@ -1210,6 +1222,23 @@ var Schedule = /** @class */ (function (_super) {
         }
         return weekNumber;
     };
+    /**
+     * Method to render the header indent template.
+     *
+     * @param {TdData} data Accepts the td data
+     * @param {Element} td Accepts the td element
+     * @returns {void}
+     * @private
+     */
+    Schedule.prototype.renderHeaderIndentTemplate = function (data, td) {
+        if (this.activeViewOptions.headerIndentTemplate) {
+            var scheduleId = this.element.id + '_';
+            var viewName = this.activeViewOptions.headerIndentTemplateName;
+            var templateId = scheduleId + viewName + 'headerIndentTemplate';
+            var indentTemplate = [].slice.call(this.getHeaderIndentTemplate()(data, this, 'headerIndentTemplate', templateId, false));
+            append(indentTemplate, td);
+        }
+    };
     Schedule.prototype.unWireEvents = function () {
         EventHandler.remove(window, 'resize', this.onScheduleResize);
         EventHandler.remove(window, 'orientationchange', this.onScheduleResize);
@@ -1278,7 +1307,7 @@ var Schedule = /** @class */ (function (_super) {
                     }
                     this.notify(events.scrollUiUpdate, { cssProperties: this.getCssProperties() });
                     if (this.activeView.isTimelineView()) {
-                        this.notify(events.dataReady, {});
+                        this.refreshEvents(false);
                     }
                     break;
                 case 'showWeekend':
@@ -1474,10 +1503,8 @@ var Schedule = /** @class */ (function (_super) {
                 break;
             case 'allowDragAndDrop':
             case 'allowResizing':
-                this.notify(events.dataReady, { processedData: this.eventBase.processData(this.eventsData) });
-                break;
             case 'eventDragArea':
-                this.notify(events.dataReady, {});
+                this.refreshEvents(false);
                 break;
             case 'weekRule':
                 state.isLayout = true;
@@ -1507,6 +1534,11 @@ var Schedule = /** @class */ (function (_super) {
                 }
                 state.isLayout = true;
                 break;
+            case 'headerIndentTemplate':
+                this.activeViewOptions.headerIndentTemplate = newProp.headerIndentTemplate;
+                this.headerIndentTemplateFn = this.templateParser(this.activeViewOptions.headerIndentTemplate);
+                state.isLayout = true;
+                break;
         }
     };
     Schedule.prototype.setRtlClass = function () {
@@ -1579,9 +1611,10 @@ var Schedule = /** @class */ (function (_super) {
                         this.eventWindow.refresh();
                     }
                     break;
+                case 'spannedEventPlacement':
                 case 'enableMaxHeight':
                 case 'enableIndicator':
-                    this.notify(events.dataReady, { processedData: this.eventBase.processData(this.eventsData) });
+                    this.refreshEvents(false);
                     break;
                 case 'ignoreWhitespace':
                     state.isLayout = true;
@@ -2125,14 +2158,103 @@ var Schedule = /** @class */ (function (_super) {
      * Refreshes the event dataSource. This method may be useful when the events alone in the schedule needs to be re-rendered.
      *
      * @function refreshEvents
+     * @param {boolean} isRemoteRefresh Accepts the boolean to refresh data from remote or local
      * @returns {void}
      */
-    Schedule.prototype.refreshEvents = function () {
+    Schedule.prototype.refreshEvents = function (isRemoteRefresh) {
+        if (isRemoteRefresh === void 0) { isRemoteRefresh = true; }
         if (this.dragAndDropModule) {
             this.dragAndDropModule.actionObj.action = '';
             removeClass([this.element], cls.EVENT_ACTION_CLASS);
         }
-        this.crudModule.refreshDataManager();
+        if (isRemoteRefresh) {
+            this.crudModule.refreshDataManager();
+        }
+        else {
+            var eventsData = this.eventsData || [];
+            var blockData = this.blockData || [];
+            var data = eventsData.concat(blockData);
+            this.notify(events.dataReady, { processedData: this.eventBase ? this.eventBase.processData(data) : [] });
+        }
+    };
+    /**
+     * Method to refresh the given Schedule templates
+     *
+     * @param {string} templateName Accepts the template name
+     * @returns {void}
+     */
+    Schedule.prototype.refreshTemplates = function (templateName) {
+        if (templateName) {
+            this.resetTemplates([templateName]);
+        }
+        else {
+            this.resetTemplates();
+        }
+        switch (templateName) {
+            case 'eventTemplate':
+                this.appointmentTemplateFn = this.templateParser(this.activeViewOptions.eventTemplate);
+                this.refreshEvents(false);
+                break;
+            case 'dateHeaderTemplate':
+                this.dateHeaderTemplateFn = this.templateParser(this.activeViewOptions.dateHeaderTemplate);
+                this.activeView.refreshHeader();
+                break;
+            case 'resourceHeaderTemplate':
+                this.resourceHeaderTemplateFn = this.templateParser(this.activeViewOptions.resourceHeaderTemplate);
+                if (this.activeView.isTimelineView()) {
+                    this.activeView.refreshResourceHeader();
+                }
+                else {
+                    this.activeView.refreshHeader();
+                }
+                break;
+            case 'quickInfoTemplates':
+                if (this.quickPopup) {
+                    this.quickPopup.destroy();
+                    this.quickPopup = null;
+                }
+                this.quickPopup = new QuickPopups(this);
+                this.quickInfoTemplatesHeaderFn = this.templateParser(this.quickInfoTemplates.header);
+                this.quickInfoTemplatesContentFn = this.templateParser(this.quickInfoTemplates.content);
+                this.quickInfoTemplatesFooterFn = this.templateParser(this.quickInfoTemplates.footer);
+                break;
+            case 'editorTemplate':
+                if (this.eventWindow) {
+                    this.eventWindow.destroy();
+                    this.eventWindow = null;
+                }
+                this.eventWindow = new EventWindow(this);
+                this.editorTemplateFn = this.templateParser(this.editorTemplate);
+                break;
+            case 'tooltipTemplate':
+            case 'headerTooltipTemplate':
+                if (this.eventTooltip) {
+                    this.eventTooltip.destroy();
+                    this.eventTooltip = null;
+                }
+                this.eventTooltip = new EventTooltip(this);
+                this.eventTooltipTemplateFn = this.templateParser(this.eventSettings.tooltipTemplate);
+                this.headerTooltipTemplateFn = this.templateParser(this.activeViewOptions.group.headerTooltipTemplate);
+                break;
+            default:
+                this.initializeView(this.currentView);
+                break;
+        }
+    };
+    /**
+     * Refreshes the Schedule layout without re-render.
+     *
+     * @function refreshLayout
+     * @returns {void}
+     */
+    Schedule.prototype.refreshLayout = function () {
+        this.onScheduleResize();
+        if (this.headerModule) {
+            this.headerModule.refresh();
+        }
+        if (this.eventWindow) {
+            this.eventWindow.refresh();
+        }
     };
     /**
      * To retrieve the appointment object from element.
@@ -2520,6 +2642,9 @@ var Schedule = /** @class */ (function (_super) {
     __decorate([
         Property()
     ], Schedule.prototype, "resourceHeaderTemplate", void 0);
+    __decorate([
+        Property()
+    ], Schedule.prototype, "headerIndentTemplate", void 0);
     __decorate([
         Complex({}, Group)
     ], Schedule.prototype, "group", void 0);

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

@@ -41,3 +41,7 @@ export declare type TemplateType = 'Both' | 'Cell' | 'Event';
  * An enum that holds the different type of week number options in the scheduler.
  */
 export declare type WeekRule = 'FirstDay' | 'FirstFourDayWeek' | 'FirstFullWeek';
+/**
+ * An enum that holds the options to render the spanned events in all day row or time slot.
+ */
+export declare type SpannedEventPlacement = 'AllDayRow' | 'TimeSlot';

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

@@ -17,6 +17,7 @@ export declare class EventBase {
      */
     constructor(parent: Schedule);
     processData(events: Record<string, any>[], timeZonePropChanged?: boolean, oldTimezone?: string): Record<string, any>[];
+    updateEventDateTime(eventData: Record<string, any>): Record<string, any>;
     getProcessedEvents(eventCollection?: Record<string, any>[]): Record<string, any>[];
     timezonePropertyChange(oldTimezone: string): void;
     timezoneConvert(eventData: Record<string, any>): void;
@@ -26,7 +27,7 @@ export declare class EventBase {
     filterEvents(startDate: Date, endDate: Date, appointments?: Record<string, any>[], resourceTdData?: TdData): Record<string, any>[];
     filterEventsByRange(eventCollection: Record<string, any>[], startDate?: Date, endDate?: Date): Record<string, any>[];
     filterEventsByResource(resourceTdData: TdData, appointments?: Record<string, any>[]): Record<string, any>[];
-    sortByTime(appointments: Record<string, any>[]): Record<string, any>[];
+    sortByTime(appointmentsCollection: Record<string, any>[]): Record<string, any>[];
     sortByDateTime(appointments: Record<string, any>[]): Record<string, any>[];
     getSmallestMissingNumber(array: number[]): number;
     splitEventByDay(event: Record<string, any>): Record<string, any>[];

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

@@ -37,12 +37,7 @@ var EventBase = /** @class */ (function () {
             if (generateID) {
                 event_1[fields.id] = temp++;
             }
-            if (typeof event_1[fields.startTime] === 'string') {
-                event_1[fields.startTime] = util.getDateFromString(event_1[fields.startTime]);
-            }
-            if (typeof event_1[fields.endTime] === 'string') {
-                event_1[fields.endTime] = util.getDateFromString(event_1[fields.endTime]);
-            }
+            event_1 = this_1.updateEventDateTime(event_1);
             if (timeZonePropChanged) {
                 this_1.processTimezoneChange(event_1, oldTimezone);
             }
@@ -119,6 +114,15 @@ var EventBase = /** @class */ (function () {
         this.parent.blockProcessed = blockData;
         return eventData;
     };
+    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]);
+        }
+        if (typeof eventData[this.parent.eventFields.endTime] === 'string') {
+            eventData[this.parent.eventFields.endTime] = util.getDateFromString(eventData[this.parent.eventFields.endTime]);
+        }
+        return eventData;
+    };
     EventBase.prototype.getProcessedEvents = function (eventCollection) {
         if (eventCollection === void 0) { eventCollection = this.parent.eventsData; }
         var processed = [];
@@ -279,26 +283,36 @@ var EventBase = /** @class */ (function () {
         }); });
         return filteredCollection;
     };
-    EventBase.prototype.sortByTime = function (appointments) {
-        var fieldMapping = this.parent.eventFields;
-        appointments.sort(function (a, b) {
-            var d1 = a[fieldMapping.startTime];
-            var d2 = b[fieldMapping.startTime];
-            return d1.getTime() - d2.getTime();
-        });
-        return appointments;
+    EventBase.prototype.sortByTime = function (appointmentsCollection) {
+        if (this.parent.eventSettings.sortComparer) {
+            appointmentsCollection = this.parent.eventSettings.sortComparer.call(this.parent, appointmentsCollection);
+        }
+        else {
+            var fieldMappings_1 = this.parent.eventFields;
+            appointmentsCollection.sort(function (a, b) {
+                var d1 = a[fieldMappings_1.startTime];
+                var d2 = b[fieldMappings_1.startTime];
+                return d1.getTime() - d2.getTime();
+            });
+        }
+        return appointmentsCollection;
     };
     EventBase.prototype.sortByDateTime = function (appointments) {
-        var fieldMapping = this.parent.eventFields;
-        appointments.sort(function (object1, object2) {
-            var d3 = object1[fieldMapping.startTime];
-            var d4 = object2[fieldMapping.startTime];
-            var d5 = object1[fieldMapping.endTime];
-            var d6 = object2[fieldMapping.endTime];
-            var d1 = d5.getTime() - d3.getTime();
-            var d2 = d6.getTime() - d4.getTime();
-            return (d3.getTime() - d4.getTime() || d2 - d1);
-        });
+        if (this.parent.eventSettings.sortComparer) {
+            appointments = this.parent.eventSettings.sortComparer.call(this.parent, appointments);
+        }
+        else {
+            var fieldMapping_1 = this.parent.eventFields;
+            appointments.sort(function (object1, object2) {
+                var d3 = object1[fieldMapping_1.startTime];
+                var d4 = object2[fieldMapping_1.startTime];
+                var d5 = object1[fieldMapping_1.endTime];
+                var d6 = object2[fieldMapping_1.endTime];
+                var d1 = d5.getTime() - d3.getTime();
+                var d2 = d6.getTime() - d4.getTime();
+                return (d3.getTime() - d4.getTime() || d2 - d1);
+            });
+        }
         return appointments;
     };
     EventBase.prototype.getSmallestMissingNumber = function (array) {
@@ -351,10 +365,10 @@ var EventBase = /** @class */ (function () {
     };
     EventBase.prototype.splitEvent = function (event, dateRender) {
         var fields = this.parent.eventFields;
-        var start = util.resetTime(new Date(event[fields.startTime] + '')).getTime();
-        var end = util.resetTime(new Date(event[fields.endTime] + '')).getTime();
+        var start = util.resetTime(event[fields.startTime]).getTime();
+        var end = util.resetTime(event[fields.endTime]).getTime();
         if (util.getDateInMs(event[fields.endTime]) <= 0) {
-            var temp = util.addDays(util.resetTime(new Date(event[fields.endTime] + '')), -1).getTime();
+            var temp = util.addDays(util.resetTime(event[fields.endTime]), -1).getTime();
             end = start > temp ? start : temp;
         }
         var orgStart = start;
@@ -626,7 +640,7 @@ var EventBase = /** @class */ (function () {
         var isAllDay = event[fieldMapping.isAllDay];
         var isFullDay = ((event[fieldMapping.endTime].getTime() - event[fieldMapping.startTime].getTime())
             / util.MS_PER_DAY) >= 1;
-        return (isAllDay || isFullDay) ? true : false;
+        return (isAllDay || (!(this.parent.eventSettings.spannedEventPlacement == 'TimeSlot') && isFullDay)) ? true : false;
     };
     EventBase.prototype.addEventListener = function () {
         this.parent.on(event.documentClick, this.appointmentBorderRemove, this);

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

@@ -49,7 +49,6 @@ export declare class MonthEvent extends EventBase {
     renderEventElement(event: Record<string, any>, appointmentElement: HTMLElement, cellTd: Element): void;
     getEventData(event: Record<string, any>): Record<string, any>;
     renderElement(cellTd: HTMLElement | Element, element: HTMLElement, isAppointment?: boolean): void;
-    private renderWrapperElement;
     getMoreIndicatorElement(count: number, startDate: Date, endDate: Date): HTMLElement;
     removeHeightProperty(selector: string): void;
     setMaxEventHeight(event: HTMLElement, cell: HTMLElement): void;

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

@@ -54,6 +54,9 @@ var MonthEvent = /** @class */ (function (_super) {
         }
     };
     MonthEvent.prototype.renderAppointments = function () {
+        if (this.parent.dragAndDropModule) {
+            this.parent.dragAndDropModule.setDragArea();
+        }
         var conWrap = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS);
         if (this.parent.rowAutoHeight) {
             this.parent.uiStateValues.top = conWrap.scrollTop;
@@ -83,6 +86,13 @@ var MonthEvent = /** @class */ (function (_super) {
         if (!this.element.querySelector('.' + cls.WORK_CELLS_CLASS)) {
             return;
         }
+        if (this.parent.currentView === 'Month') {
+            var wrapper = createElement('div', { className: cls.APPOINTMENT_WRAPPER_CLASS });
+            var cellTd = this.parent.element.querySelector('.' + cls.WORK_CELLS_CLASS);
+            cellTd.appendChild(wrapper);
+            this.monthHeaderHeight = wrapper.offsetTop - cellTd.offsetTop;
+            cellTd.removeChild(wrapper);
+        }
         this.eventHeight = util.getElementHeightFromClass(this.element, cls.APPOINTMENT_CLASS);
         var scrollTop = conWrap.scrollTop;
         if (this.parent.rowAutoHeight && this.parent.virtualScrollModule && !isNullOrUndefined(this.parent.currentAction)) {
@@ -114,10 +124,10 @@ var MonthEvent = /** @class */ (function (_super) {
                     this.parent.virtualScrollModule.updateVirtualScrollHeight();
                 }
             }
-            this.parent.notify(events.scrollUiUpdate, data);
             if (!this.parent.enablePersistence) {
                 this.parent.notify(events.contentReady, {});
             }
+            this.parent.notify(events.scrollUiUpdate, data);
             if (this.parent.currentView === 'Month' && this.parent.showWeekNumber) {
                 var totalCells_1 = [].slice.call(this.parent.element.querySelectorAll('.e-content-wrap table tr td:first-child'));
                 var weekNumberCells = [].slice.call(this.parent.element.querySelectorAll('.' + cls.WEEK_NUMBER_CLASS));
@@ -153,7 +163,9 @@ var MonthEvent = /** @class */ (function (_super) {
         this.sortByDateTime(blockList);
         if (this.parent.currentView === 'Month' && this.parent.rowAutoHeight && this.parent.activeViewOptions.group.resources.length === 0) {
             var totalCells = [].slice.call(this.parent.element.querySelectorAll('.e-content-wrap table tr td:first-child'));
-            var height_1 = this.parent.element.querySelector('.e-schedule-table').clientHeight / totalCells.length;
+            var height_1 = this.parent.height === 'auto' ? (this.parent.element.querySelector('.e-content-wrap').clientHeight +
+                this.parent.element.querySelector('.e-date-header-wrap').clientHeight) / totalCells.length
+                : this.parent.element.querySelector('.e-schedule-table').clientHeight / totalCells.length;
             totalCells.forEach(function (cell) {
                 setStyleAttribute(cell, { 'height': height_1 + 'px' });
             });
@@ -247,7 +259,6 @@ var MonthEvent = /** @class */ (function (_super) {
             appWidth = (appWidth <= 0) ? this.cellWidth : appWidth;
             var appLeft = (this.parent.enableRtl) ? 0 : position;
             var appRight = (this.parent.enableRtl) ? position : 0;
-            this.renderWrapperElement(cellTd);
             var appHeight = this.cellHeight - this.monthHeaderHeight;
             var appTop = this.getRowTop(resIndex);
             var blockElement = this.createBlockAppointmentElement(event, resIndex);
@@ -354,18 +365,19 @@ var MonthEvent = /** @class */ (function (_super) {
         var eventSubject = (record[this.fields.subject] || this.parent.eventSettings.fields.subject.default ||
             this.parent.localeObj.getConstant('addTitle'));
         var newRecord = extend({}, record, record.data, true);
-        var appointmentWrapper = createElement('div', {
-            className: cls.APPOINTMENT_CLASS,
-            attrs: {
-                'data-id': 'Appointment_' + record[this.fields.id],
-                'role': 'button', 'tabindex': '0',
-                'aria-readonly': this.parent.eventBase.getReadonlyAttribute(record), 'aria-selected': 'false', 'aria-grabbed': 'true',
-                'aria-label': this.parent.getAnnouncementString(newRecord, eventSubject)
-            }
-        });
+        var attrs = {
+            'data-id': 'Appointment_' + record[this.fields.id],
+            'role': 'button', 'tabindex': '0',
+            'aria-readonly': this.parent.eventBase.getReadonlyAttribute(record), 'aria-selected': 'false', 'aria-grabbed': 'true',
+            'aria-label': this.parent.getAnnouncementString(newRecord, eventSubject)
+        };
         if (!isCloneElement) {
-            appointmentWrapper.setAttribute('data-guid', record.Guid);
+            attrs['data-guid'] = record.Guid;
         }
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            attrs['data-group-index'] = resIndex.toString();
+        }
+        var appointmentWrapper = createElement('div', { className: cls.APPOINTMENT_CLASS, attrs: attrs });
         if (!isNullOrUndefined(this.cssClass)) {
             addClass([appointmentWrapper], this.cssClass);
         }
@@ -374,9 +386,6 @@ var MonthEvent = /** @class */ (function (_super) {
         }
         var appointmentDetails = createElement('div', { className: cls.APPOINTMENT_DETAILS });
         appointmentWrapper.appendChild(appointmentDetails);
-        if (this.parent.activeViewOptions.group.resources.length > 0) {
-            appointmentWrapper.setAttribute('data-group-index', resIndex.toString());
-        }
         var templateElement;
         var eventData = record.data;
         var eventObj = this.getEventData(record);
@@ -489,7 +498,6 @@ var MonthEvent = /** @class */ (function (_super) {
             var appWidth = (diffInDays * this.cellWidth) - 5;
             var cellTd = this.workCells[day];
             var appTop = (overlapCount * (appHeight + EVENT_GAP));
-            this.renderWrapperElement(cellTd);
             var height = this.monthHeaderHeight + ((overlapCount + 1) * (appHeight + EVENT_GAP)) + this.moreIndicatorHeight;
             var enableAppRender = this.maxOrIndicator ? overlapCount < 1 ? true : false : this.cellHeight > height;
             if (this.parent.rowAutoHeight || enableAppRender) {
@@ -526,7 +534,7 @@ var MonthEvent = /** @class */ (function (_super) {
                             moreIndicatorElement.setAttribute('data-group-index', groupIndex);
                         }
                         moreIndicatorElement.style.top = appArea + 'px';
-                        moreIndicatorElement.style.width = cellTd_1.offsetWidth - 2 + 'px';
+                        moreIndicatorElement.style.width = this.cellWidth - 2 + 'px';
                         this.renderElement(cellTd_1, moreIndicatorElement);
                         EventHandler.add(moreIndicatorElement, 'click', this.moreIndicatorClick, this);
                     }
@@ -567,8 +575,9 @@ var MonthEvent = /** @class */ (function (_super) {
         var appointmentsList = [];
         for (var _i = 0, appointments_1 = appointments; _i < appointments_1.length; _i++) {
             var app = appointments_1[_i];
-            if ((util.resetTime(app[this.fields.startTime]).getTime() <= util.resetTime(date).getTime()) &&
-                (util.resetTime(app[this.fields.endTime]).getTime() >= util.resetTime(date).getTime())) {
+            var dateTime = util.resetTime(date).getTime();
+            if ((util.resetTime(app[this.fields.startTime]).getTime() <= dateTime) &&
+                (util.resetTime(app[this.fields.endTime]).getTime() >= dateTime)) {
                 appointmentsList.push(app);
             }
         }
@@ -637,8 +646,9 @@ var MonthEvent = /** @class */ (function (_super) {
         if (this.maxOrIndicator && isAppointment) {
             this.setMaxEventHeight(element, cellTd);
         }
-        if (cellTd.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS)) {
-            cellTd.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS).appendChild(element);
+        var wrapperEle = cellTd.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS);
+        if (wrapperEle) {
+            wrapperEle.appendChild(element);
         }
         else {
             var wrapper = createElement('div', { className: cls.APPOINTMENT_WRAPPER_CLASS });
@@ -646,17 +656,6 @@ var MonthEvent = /** @class */ (function (_super) {
             cellTd.appendChild(wrapper);
         }
     };
-    MonthEvent.prototype.renderWrapperElement = function (cellTd) {
-        var element = cellTd.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS);
-        if (!isNullOrUndefined(element)) {
-            this.monthHeaderHeight = element.offsetTop - cellTd.offsetTop;
-        }
-        else {
-            var wrapper = createElement('div', { className: cls.APPOINTMENT_WRAPPER_CLASS });
-            cellTd.appendChild(wrapper);
-            this.monthHeaderHeight = wrapper.offsetTop - cellTd.offsetTop;
-        }
-    };
     MonthEvent.prototype.getMoreIndicatorElement = function (count, startDate, endDate) {
         var moreIndicatorElement = createElement('div', {
             className: cls.MORE_INDICATOR_CLASS,

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

@@ -18,6 +18,8 @@ export declare class TimelineEvent extends MonthEvent {
     constructor(parent: Schedule, type: string);
     getSlotDates(): void;
     getOverlapEvents(date: Date, appointments: Record<string, any>[]): Record<string, any>[];
+    getSortComparerIndex(startDate: Date, endDate: Date): number;
+    getOverlapSortComparerEvents(startDate: Date, endDate: Date, appointmentsCollection: Record<string, any>[]): Record<string, any>[];
     renderResourceEvents(): void;
     renderEvents(event: Record<string, any>, resIndex: number, appointmentsList?: Record<string, any>[]): void;
     private renderTimelineMoreIndicator;

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

@@ -76,6 +76,36 @@ var TimelineEvent = /** @class */ (function (_super) {
         }
         return appointmentsList;
     };
+    TimelineEvent.prototype.getSortComparerIndex = function (startDate, endDate) {
+        var appIndex = -1;
+        var appointments = this.renderedEvents;
+        if (appointments.length > 0) {
+            var appointmentsList = this.getOverlapSortComparerEvents(startDate, endDate, appointments);
+            var appLevel = appointmentsList.map(function (obj) { return obj.Index; });
+            appIndex = (appLevel.length > 0) ? this.getSmallestMissingNumber(appLevel) : 0;
+        }
+        return (appIndex === -1) ? 0 : appIndex;
+    };
+    TimelineEvent.prototype.getOverlapSortComparerEvents = function (startDate, endDate, appointmentsCollection) {
+        var appointments = [];
+        for (var _i = 0, appointmentsCollection_1 = appointmentsCollection; _i < appointmentsCollection_1.length; _i++) {
+            var app = appointmentsCollection_1[_i];
+            if (this.renderType === 'day') {
+                if ((util.resetTime(app[this.fields.startTime]).getTime() <= util.resetTime(new Date(startDate.getTime())).getTime()) &&
+                    (util.resetTime(app[this.fields.endTime]).getTime() >= util.resetTime(new Date(startDate.getTime())).getTime())) {
+                    appointments.push(app);
+                }
+            }
+            else {
+                var eventData = app.data;
+                if (((eventData.trimStartTime.getTime() <= startDate.getTime()) && (startDate.getTime() < eventData.trimEndTime.getTime())) ||
+                    ((startDate.getTime() <= eventData.trimStartTime.getTime()) && (eventData.trimStartTime.getTime() < endDate.getTime()))) {
+                    appointments.push(app);
+                }
+            }
+        }
+        return appointments;
+    };
     TimelineEvent.prototype.renderResourceEvents = function () {
         this.removeHeightProperty(cls.RESOURCE_COLUMN_TABLE_CLASS);
         var resources = this.parent.uiStateValues.isGroupAdaptive ?
@@ -116,7 +146,7 @@ var TimelineEvent = /** @class */ (function (_super) {
             return;
         }
         var cellTd = this.getCellTd();
-        var overlapCount = this.getIndex(startTime);
+        var overlapCount = (isNullOrUndefined(this.parent.eventSettings.sortComparer)) ? this.getIndex(startTime) : this.getSortComparerIndex(startTime, endTime);
         event.Index = overlapCount;
         var elem = this.element.querySelector('.' + cls.APPOINTMENT_CLASS);
         var eleHeight = (elem) ? elem.getBoundingClientRect().height : 0;