@syncfusion/ej2-schedule 22.2.11 → 23.1.36

package/src/schedule/exports/calendar-import.js

@@ -24,116 +24,144 @@ var ICalendarImport = /** @class */ (function () {
         }
     };
     ICalendarImport.prototype.iCalendarParser = function (iCalString) {
-        var _this = this;
-        var fields = this.parent.eventFields;
-        var events = [];
-        var uId = 'UID';
-        var calArray = iCalString.replace(new RegExp('\\r', 'g'), '').split('\n');
-        var descriptionIndex = calArray.findIndex(function (line) { return line.startsWith('DESCRIPTION:'); });
-        if (descriptionIndex !== -1) {
-            var description = calArray[descriptionIndex].substring('DESCRIPTION:'.length);
-            for (var i = descriptionIndex + 1; i < calArray.length; i++) {
-                if (calArray[i].startsWith(' ') || !(/[A-Z]{3}:/.test(calArray[i]))) {
-                    description += calArray[i];
-                }
-                else {
-                    calArray[descriptionIndex] = 'DESCRIPTION:' + description;
-                    break;
+        var iCalData = {
+            isEvent: false,
+            curEvent: null,
+            id: this.parent.eventBase.getEventMaxID(),
+            count: 0,
+            events: [],
+            key: null
+        };
+        var iStringLength = iCalString.length;
+        var lastPosition = iCalString.search(/[^ \t]/);
+        var position = lastPosition;
+        var iString;
+        var newlineOffset;
+        do {
+            position = iCalString.indexOf('\n', lastPosition) + 1;
+            if (position === 0) {
+                position = iStringLength;
+                newlineOffset = 0;
+            }
+            else if (position > 1 && iCalString[position - 2] === '\r') {
+                newlineOffset = 2;
+            }
+            else {
+                newlineOffset = 1;
+            }
+            // eslint-disable-next-line security/detect-object-injection
+            var firstChar = iCalString[lastPosition];
+            if (firstChar === ' ' || firstChar === '\n' || firstChar === '\t') {
+                iString += iCalString.slice(lastPosition + 1, position - newlineOffset);
+            }
+            else {
+                if (iString) {
+                    iCalData = this.updateEventData(iString, iCalData);
                 }
+                iString = iCalString.slice(lastPosition, position - newlineOffset);
             }
+            lastPosition = position;
+        } while (position !== iStringLength);
+        iString = iString.trim();
+        if (iString.length) {
+            iCalData = this.updateEventData(iString, iCalData);
         }
-        var isEvent = false;
-        var curEvent;
-        // eslint-disable-next-line prefer-const
-        var id = this.parent.eventBase.getEventMaxID();
-        var count = 0;
-        calArray.forEach(function (element) {
-            var index;
-            var type;
-            var value;
-            if (!isEvent && element === 'BEGIN:VEVENT') {
-                isEvent = true;
-                curEvent = {};
-            }
-            if (isEvent && element === 'END:VEVENT') {
-                isEvent = false;
-                events.push(curEvent);
-                curEvent = null;
-            }
-            if (isEvent) {
-                index = element.indexOf(':');
-                type = element.substr(0, index).replace(/^\s\s*/, '').replace(/\s\s*$/, '');
-                value = element.substr(index + 1, element.length - (index + 1)).replace(/^\s\s*/, '').replace(/\s\s*$/, '');
-                if (element.indexOf('SUMMARY') !== -1) {
-                    type = 'SUMMARY';
-                }
-                if (element.indexOf('DTSTART') !== -1) {
-                    curEvent[fields.startTime] = _this.dateParsing(element);
-                    curEvent[fields.isAllDay] = _this.allDay;
-                    _this.allDay = false;
-                }
-                else if (element.indexOf('DTEND') !== -1) {
-                    curEvent[fields.endTime] = _this.dateParsing(element);
-                }
-                else if (element.indexOf('EXDATE') !== -1) {
-                    value = getRecurrenceStringFromDate(_this.dateParsing(element));
-                    curEvent[fields.recurrenceException] = (isNullOrUndefined(curEvent[fields.recurrenceException])) ?
-                        value : curEvent[fields.recurrenceException] + ',' + value;
-                }
-                else if (element.indexOf('RECURRENCE-ID') !== -1) {
-                    value = getRecurrenceStringFromDate(_this.dateParsing(element));
-                    curEvent[fields.recurrenceException] = value;
-                    curEvent[fields.recurrenceID] = value;
-                }
-                else {
-                    switch (type) {
-                        case 'BEGIN':
-                            break;
-                        case 'UID':
-                            curEvent["" + uId] = value;
-                            if (typeof (id) == 'number') {
-                                curEvent[fields.id] = parseInt(value, 10);
-                                if (isNaN(curEvent[fields.id])) {
-                                    curEvent[fields.id] = id + count;
-                                    count++;
-                                }
-                            }
-                            else {
-                                curEvent[fields.id] = value;
-                            }
-                            break;
-                        case 'SUMMARY':
-                            curEvent[fields.subject] = value;
-                            break;
-                        case 'LOCATION':
-                            curEvent[fields.location] = value;
-                            break;
-                        case 'DESCRIPTION':
-                            if (!(curEvent[fields.description])) {
-                                curEvent[fields.description] = value.replace(/\\,/g, ',')
-                                    .replace(/\\n/g, '\n');
-                            }
-                            break;
-                        case 'ISREADONLY':
-                            curEvent[fields.isReadonly] = (value.indexOf('true') > -1);
-                            break;
-                        case 'RRULE':
-                            curEvent[fields.recurrenceRule] = value;
-                            break;
-                        default:
-                            if (_this.parent.resourceCollection.length > 0) {
-                                var resData = _this.parent.resourceCollection.filter(function (data) { return data.field === type; });
-                                curEvent["" + type] = (resData.length > 0 && (typeof (resData[0].dataSource[0][resData[0].idField]) == 'number')) ? parseInt(value, 10) : value;
-                            }
-                            else {
-                                curEvent["" + type] = value;
+        var app = extend([], iCalData.events, null, true);
+        this.parent.addEvent(this.processOccurrence(app, iCalData.id));
+    };
+    ICalendarImport.prototype.updateEventData = function (iString, iCalData) {
+        var fields = this.parent.eventFields;
+        var SEPARATOR = '\r\n';
+        var id = iCalData.id;
+        var events = iCalData.events;
+        var isEvent = iCalData.isEvent;
+        var count = iCalData.count;
+        var curEvent = iCalData.curEvent;
+        var key = iCalData.key;
+        if (!isEvent && iString === 'BEGIN:VEVENT') {
+            isEvent = true;
+            curEvent = {};
+        }
+        if (isEvent && iString === 'END:VEVENT') {
+            isEvent = false;
+            events.push(curEvent);
+            curEvent = null;
+        }
+        if (isEvent) {
+            var index = iString.indexOf(':');
+            var type_1 = iString.substring(0, index).replace(/^\s\s*/, '').replace(/\s\s*$/, '');
+            var value = iString.substring(index + 1, iString.length).replace(/^\s\s*/, '').replace(/\s\s*$/, '');
+            if (iString.indexOf('SUMMARY') !== -1) {
+                type_1 = 'SUMMARY';
+            }
+            if (iString.indexOf('DTSTART') !== -1) {
+                curEvent[fields.startTime] = this.dateParsing(iString);
+                curEvent[fields.isAllDay] = this.allDay;
+                this.allDay = false;
+            }
+            else if (iString.indexOf('DTEND') !== -1) {
+                curEvent[fields.endTime] = this.dateParsing(iString);
+            }
+            else if (iString.indexOf('EXDATE') !== -1) {
+                value = getRecurrenceStringFromDate(this.dateParsing(iString));
+                curEvent[fields.recurrenceException] = isNullOrUndefined(curEvent[fields.recurrenceException]) ?
+                    value : curEvent[fields.recurrenceException] + ',' + value;
+            }
+            else if (iString.indexOf('RECURRENCE-ID') !== -1) {
+                value = getRecurrenceStringFromDate(this.dateParsing(iString));
+                curEvent[fields.recurrenceException] = value;
+                curEvent[fields.recurrenceID] = value;
+            }
+            else {
+                key = type_1 || key;
+                switch (key) {
+                    case 'BEGIN':
+                        break;
+                    case 'UID':
+                        curEvent["" + type_1] = value;
+                        if (typeof (id) == 'number') {
+                            curEvent[fields.id] = parseInt(value, 10);
+                            if (isNaN(curEvent[fields.id])) {
+                                curEvent[fields.id] = id + count;
+                                count++;
                             }
-                    }
+                        }
+                        else {
+                            curEvent[fields.id] = value;
+                        }
+                        break;
+                    case 'SUMMARY':
+                        curEvent[fields.subject] = this.getFormattedString(value);
+                        break;
+                    case 'LOCATION':
+                        curEvent[fields.location] = this.getFormattedString(value);
+                        break;
+                    case 'DESCRIPTION':
+                        if (curEvent[fields.description]) {
+                            curEvent[fields.description] = this.getFormattedString(curEvent[fields.description] + SEPARATOR + value);
+                        }
+                        else {
+                            curEvent[fields.description] = this.getFormattedString(value);
+                        }
+                        break;
+                    case 'ISREADONLY':
+                        curEvent[fields.isReadonly] = (value.indexOf('true') > -1);
+                        break;
+                    case 'RRULE':
+                        curEvent[fields.recurrenceRule] = value;
+                        break;
+                    default:
+                        if (this.parent.resourceCollection.length > 0) {
+                            var resData = this.parent.resourceCollection.filter(function (data) { return data.field === type_1; });
+                            curEvent["" + type_1] = (resData.length > 0 && (typeof (resData[0].dataSource[0][resData[0].idField]) == 'number')) ? parseInt(value, 10) : value;
+                        }
+                        else {
+                            curEvent["" + type_1] = value;
+                        }
                 }
             }
-        });
-        var app = extend([], events, null, true);
-        this.parent.addEvent(this.processOccurrence(app, id));
+        }
+        return { isEvent: isEvent, curEvent: curEvent, id: id, count: count, events: events, key: key };
     };
     ICalendarImport.prototype.processOccurrence = function (app, maxId) {
         var _this = this;
@@ -198,7 +226,7 @@ var ICalendarImport = /** @class */ (function () {
         }
         return parentException + ',' + occurrenceException;
     };
-    ICalendarImport.prototype.getDateString = function (value) {
+    ICalendarImport.prototype.getFormattedString = function (value) {
         value = value || '';
         // eslint-disable-next-line no-useless-escape
         return (value.replace(/\\\,/g, ',').replace(/\\\;/g, ';').replace(/\\[nN]/g, '\n').replace(/\\\\/g, '\\'));
@@ -206,7 +234,7 @@ var ICalendarImport = /** @class */ (function () {
     ICalendarImport.prototype.dateParsing = function (element) {
         var split = element.split(':');
         var value = split[split.length - 1];
-        var newDate = new Date(this.getDateString(value));
+        var newDate = new Date(this.getFormattedString(value));
         if (element && (element.indexOf('VALUE=DATE') > -1 || element.indexOf('RECURRENCE-ID;TZID') > -1)) {
             var data_1 = /^(\d{4})(\d{2})(\d{2})$/.exec(value);
             if (data_1 !== null) {

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

@@ -68,7 +68,7 @@ export interface ViewsModel {
     endHour?: string;
 
     /**
-     * It is used to allow or disallow the virtual scrolling functionality on Agenda View. This is applicable only on Agenda view.
+     * It is used to allow or disallow the virtual scrolling functionality.
      *
      * @default false
      */
@@ -317,4 +317,13 @@ export interface ViewsModel {
      */
     displayDate?: Date;
 
+    /**
+     * Enables the lazy loading of events for scrolling actions only when the resources grouping property is enabled.
+     * Lazy loading allows the scheduler to fetch the appointments dynamically during scroll actions for the currently rendered resource collection.
+     * New event data is fetched on-demand as the user scrolls through the schedule content.
+     *
+     * @default false
+     */
+    enableLazyLoading?: boolean;
+
 }

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

@@ -62,7 +62,7 @@ export declare class Views extends ChildProperty<Views> {
      */
     endHour: string;
     /**
-     * It is used to allow or disallow the virtual scrolling functionality on Agenda View. This is applicable only on Agenda view.
+     * It is used to allow or disallow the virtual scrolling functionality.
      *
      * @default false
      */
@@ -286,4 +286,12 @@ export declare class Views extends ChildProperty<Views> {
      * @default null
      */
     displayDate: Date;
+    /**
+     * Enables the lazy loading of events for scrolling actions only when the resources grouping property is enabled.
+     * Lazy loading allows the scheduler to fetch the appointments dynamically during scroll actions for the currently rendered resource collection.
+     * New event data is fetched on-demand as the user scrolls through the schedule content.
+     *
+     * @default false
+     */
+    enableLazyLoading: boolean;
 }

package/src/schedule/models/views.js

@@ -122,6 +122,9 @@ var Views = /** @class */ (function (_super) {
     __decorate([
         Property()
     ], Views.prototype, "displayDate", void 0);
+    __decorate([
+        Property(false)
+    ], Views.prototype, "enableLazyLoading", void 0);
     return Views;
 }(ChildProperty));
 export { Views };

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { isNullOrUndefined, append, createElement, addClass, initializeCSPTemplate } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, append, createElement, addClass, initializeCSPTemplate, removeClass } from '@syncfusion/ej2-base';
 import { Tooltip } from '@syncfusion/ej2-popups';
 import * as cls from '../base/css-constant';
 import * as util from '../base/util';
@@ -19,7 +19,7 @@ var EventTooltip = /** @class */ (function () {
             cssClass: this.parent.cssClass + ' ' + cls.EVENT_TOOLTIP_ROOT_CLASS,
             target: this.getTargets(),
             beforeRender: this.onBeforeRender.bind(this),
-            afterClose: this.onTooltipClose.bind(this),
+            beforeClose: this.onTooltipClose.bind(this),
             enableRtl: this.parent.enableRtl,
             enableHtmlSanitizer: this.parent.enableHtmlSanitizer
         });
@@ -127,7 +127,11 @@ var EventTooltip = /** @class */ (function () {
         }
         this.parent.renderTemplates();
     };
-    EventTooltip.prototype.onTooltipClose = function () {
+    EventTooltip.prototype.onTooltipClose = function (args) {
+        if (args.element) {
+            removeClass([args.element], cls.POPUP_OPEN);
+            addClass([args.element], cls.POPUP_CLOSE);
+        }
         this.parent.resetTemplates(['tooltipTemplate', 'headerTooltipTemplate']);
     };
     EventTooltip.prototype.setContent = function (content) {

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

@@ -29,11 +29,18 @@ export declare class EventWindow {
     private dialogEvent;
     constructor(parent: Schedule);
     private renderEventWindow;
+    private renderDialogButtons;
+    private addEventHandlers;
     refresh(): void;
     refreshRecurrenceEditor(): void;
     setRecurrenceEditor(recurrenceEditor: RecurrenceEditor): void;
     openEditor(data: Record<string, any>, type: CurrentAction, isEventData?: boolean, repeatType?: number): void;
     setDialogContent(): void;
+    setDialogHeader(): void;
+    setDialogFooter(): void;
+    private createAdaptiveHeaderElement;
+    private getDialogHeader;
+    private getDialogFooter;
     private preventEventSave;
     private onBeforeOpen;
     private onBeforeClose;

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

@@ -50,40 +50,54 @@ var EventWindow = /** @class */ (function () {
         };
         if (this.parent.isAdaptive) {
             dialogModel.cssClass = cls.EVENT_WINDOW_DIALOG_CLASS + ' ' + cls.DEVICE_CLASS;
-            dialogModel.header = '<div class="e-title-header"><div class="e-back-icon e-icons"></div><div class="e-title-text">' +
-                this.l10n.getConstant('newEvent') + '</div><div class="e-save-icon e-icons"></div></div>';
+            if (!this.parent.editorHeaderTemplate) {
+                dialogModel.header = '<div class="e-title-header"><div class="e-back-icon e-icons"></div><div class="e-title-text">' +
+                    this.l10n.getConstant('newEvent') + '</div><div class="e-save-icon e-icons"></div></div>';
+            }
         }
         else {
-            dialogModel.buttons = [{
-                    buttonModel: {
-                        content: this.l10n.getConstant('deleteButton'), cssClass: cls.DELETE_EVENT_CLASS,
-                        disabled: !this.parent.eventSettings.allowDeleting || this.parent.readonly
-                    },
-                    click: this.eventDelete.bind(this)
-                }, {
-                    buttonModel: {
-                        content: this.l10n.getConstant('saveButton'), cssClass: 'e-primary ' + cls.EVENT_WINDOW_SAVE_BUTTON_CLASS,
-                        isPrimary: true, disabled: !this.parent.eventSettings.allowAdding || this.parent.readonly
-                    },
-                    click: this.eventSave.bind(this)
-                }, {
-                    buttonModel: { cssClass: cls.EVENT_WINDOW_CANCEL_BUTTON_CLASS, content: this.l10n.getConstant('cancelButton') },
-                    click: this.dialogClose.bind(this)
-                }];
-            dialogModel.header = '<div class="e-title-text">' + this.l10n.getConstant('newEvent') + '</div>';
+            if (!this.parent.editorFooterTemplate) {
+                this.renderDialogButtons(dialogModel);
+            }
+            if (!this.parent.editorHeaderTemplate) {
+                dialogModel.header = '<div class="e-title-text">' + this.l10n.getConstant('newEvent') + '</div>';
+            }
         }
         this.dialogObject = new Dialog(dialogModel, this.element);
         if (this.dialogObject.element.querySelector('.e-dlg-closeicon-btn')) {
             this.dialogObject.element.querySelector('.e-dlg-closeicon-btn').setAttribute('title', this.l10n.getConstant('close'));
         }
+        this.addEventHandlers();
         addClass([this.element.parentElement], cls.EVENT_WINDOW_DIALOG_CLASS + '-container');
-        if (this.parent.isAdaptive) {
-            EventHandler.add(this.element.querySelector('.' + cls.EVENT_WINDOW_BACK_ICON_CLASS), 'click', this.dialogClose, this);
-            EventHandler.add(this.element.querySelector('.' + cls.EVENT_WINDOW_SAVE_ICON_CLASS), 'click', this.eventSave, this);
-        }
         EventHandler.add(this.dialogObject.element, 'keydown', this.preventEventSave, this);
         this.applyFormValidation();
     };
+    EventWindow.prototype.renderDialogButtons = function (dialogButton) {
+        dialogButton.buttons = [{
+                buttonModel: {
+                    content: this.l10n.getConstant('deleteButton'), cssClass: cls.DELETE_EVENT_CLASS,
+                    disabled: !this.parent.eventSettings.allowDeleting || this.parent.readonly
+                },
+                click: this.eventDelete.bind(this)
+            }, {
+                buttonModel: {
+                    content: this.l10n.getConstant('saveButton'), cssClass: 'e-primary ' + cls.EVENT_WINDOW_SAVE_BUTTON_CLASS,
+                    isPrimary: true, disabled: !this.parent.eventSettings.allowAdding || this.parent.readonly
+                },
+                click: this.eventSave.bind(this)
+            }, {
+                buttonModel: { cssClass: cls.EVENT_WINDOW_CANCEL_BUTTON_CLASS, content: this.l10n.getConstant('cancelButton') },
+                click: this.dialogClose.bind(this)
+            }];
+    };
+    EventWindow.prototype.addEventHandlers = function () {
+        var backIcon = this.element.querySelector('.' + cls.EVENT_WINDOW_BACK_ICON_CLASS);
+        var saveIcon = this.element.querySelector('.' + cls.EVENT_WINDOW_SAVE_ICON_CLASS);
+        if (this.parent.isAdaptive && !isNullOrUndefined(backIcon) && !isNullOrUndefined(saveIcon)) {
+            EventHandler.add(backIcon, 'click', this.dialogClose, this);
+            EventHandler.add(saveIcon, 'click', this.eventSave, this);
+        }
+    };
     EventWindow.prototype.refresh = function () {
         this.destroy(true);
         this.renderEventWindow();
@@ -127,6 +141,23 @@ var EventWindow = /** @class */ (function () {
             }
             data = eventObj;
         }
+        if (!isNullOrUndefined(this.parent.editorHeaderTemplate)) {
+            this.parent.resetTemplates(['editorHeaderTemplate']);
+            if (this.parent.isAdaptive && !this.parent.editorFooterTemplate) {
+                this.dialogObject.header = this.createAdaptiveHeaderElement(data);
+            }
+            else {
+                this.dialogObject.header = this.getDialogHeader(data);
+            }
+        }
+        if (!isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.parent.resetTemplates(['editorFooterTemplate']);
+            this.dialogObject.footerTemplate = this.getDialogFooter(data);
+        }
+        if (!isNullOrUndefined(this.parent.editorHeaderTemplate) || !isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.dialogObject.dataBind();
+            this.addEventHandlers();
+        }
         if (!isNullOrUndefined(this.parent.editorTemplate)) {
             this.renderFormElements(this.element.querySelector('.e-schedule-form'), data);
         }
@@ -157,6 +188,65 @@ var EventWindow = /** @class */ (function () {
         this.dialogObject.dataBind();
         this.applyFormValidation();
     };
+    EventWindow.prototype.setDialogHeader = function () {
+        if (!isNullOrUndefined(this.parent.editorHeaderTemplate)) {
+            this.parent.resetTemplates(['editorHeaderTemplate']);
+            if (this.parent.isAdaptive && !this.parent.editorFooterTemplate) {
+                this.dialogObject.header = this.createAdaptiveHeaderElement();
+            }
+            else {
+                this.dialogObject.header = this.getDialogHeader();
+            }
+        }
+        else if (this.parent.isAdaptive) {
+            this.dialogObject.header = '<div class="e-title-header"><div class="e-back-icon e-icons"></div><div class="e-title-text">' +
+                this.l10n.getConstant('newEvent') + '</div><div class="e-save-icon e-icons"></div></div>';
+        }
+        else {
+            this.dialogObject.header = '<div class="e-title-text">' + this.l10n.getConstant('newEvent') + '</div>';
+        }
+        this.dialogObject.dataBind();
+        this.addEventHandlers();
+    };
+    EventWindow.prototype.setDialogFooter = function () {
+        if (!isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.parent.resetTemplates(['editorFooterTemplate']);
+            this.dialogObject.footerTemplate = this.getDialogFooter();
+        }
+        else if (!this.parent.isAdaptive && isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.renderDialogButtons(this.dialogObject);
+        }
+        else if (this.parent.isAdaptive && isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.dialogObject.footerTemplate = null;
+        }
+        this.dialogObject.dataBind();
+    };
+    EventWindow.prototype.createAdaptiveHeaderElement = function (data) {
+        var header = createElement('div', { className: 'e-title-header' });
+        var headerBackIcon = createElement('div', { className: 'e-back-icon e-icons' });
+        header.appendChild(headerBackIcon);
+        var headerTemplate = this.getDialogHeader(data);
+        header.appendChild(headerTemplate);
+        var headerSaveIcon = createElement('div', { className: 'e-save-icon e-icons' });
+        header.appendChild(headerSaveIcon);
+        return header;
+    };
+    EventWindow.prototype.getDialogHeader = function (args) {
+        var headerTemplate = [];
+        var headerTemplateId = this.parent.element.id + '_editorHeaderTemplate';
+        var temHeaderDiv = document.createElement('div');
+        headerTemplate = [].slice.call(this.parent.getEditorHeaderTemplate()(args || {}, this.parent, 'editorHeaderTemplate', headerTemplateId, false));
+        append(headerTemplate, temHeaderDiv);
+        return temHeaderDiv;
+    };
+    EventWindow.prototype.getDialogFooter = function (args) {
+        var footerTemplate = [];
+        var footerTemplateId = this.parent.element.id + '_editorFooterTemplate';
+        var temFooterDiv = document.createElement('div');
+        footerTemplate = [].slice.call(this.parent.getEditorFooterTemplate()(args || {}, this.parent, 'editorFooterTemplate', footerTemplateId, false));
+        append(footerTemplate, temFooterDiv);
+        return temFooterDiv;
+    };
     EventWindow.prototype.preventEventSave = function (e) {
         if (this.parent && !this.parent.allowKeyboardInteraction && e.code === 'Enter') {
             this.isEnterKey = true;
@@ -430,9 +520,9 @@ var EventWindow = /** @class */ (function () {
         var resourceDiv = this.createDivElement(value + '-container' + ' ' + 'e-resources');
         var resourceInput = this.createInputElement(value + ' ' + EVENT_FIELD, fieldName);
         resourceDiv.appendChild(resourceInput);
-        function resourceTemplate(data) {
+        var resourceTemplate = function (data) {
             return "<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>";
-        }
+        };
         initializeCSPTemplate(resourceTemplate, resourceData);
         if (resourceData.allowMultiple) {
             var listObj = new MultiSelect({
@@ -785,7 +875,9 @@ var EventWindow = /** @class */ (function () {
             this.renderRepeatDialog();
         }
         this.element.querySelector('.' + cls.FORM_CLASS).removeAttribute('data-id');
-        this.element.querySelector('.' + cls.EVENT_WINDOW_TITLE_TEXT_CLASS).innerHTML = this.l10n.getConstant('newEvent');
+        if (isNullOrUndefined(this.parent.editorHeaderTemplate)) {
+            this.element.querySelector('.' + cls.EVENT_WINDOW_TITLE_TEXT_CLASS).innerHTML = this.l10n.getConstant('newEvent');
+        }
         eventObj.Timezone = false;
         this.repeatStartDate = eventObj[this.fields.startTime];
         this.repeatRule = '';
@@ -1025,10 +1117,12 @@ var EventWindow = /** @class */ (function () {
         if (!this.parent.eventSettings.allowEditing) {
             return;
         }
-        if (!this.parent.isAdaptive) {
+        if (!this.parent.isAdaptive && isNullOrUndefined(this.parent.editorFooterTemplate)) {
             removeClass([this.element.querySelector('.' + cls.DELETE_EVENT_CLASS)], cls.DISABLE_CLASS);
         }
-        this.element.querySelector('.' + cls.EVENT_WINDOW_TITLE_TEXT_CLASS).innerHTML = this.l10n.getConstant('editEvent');
+        if (isNullOrUndefined(this.parent.editorHeaderTemplate)) {
+            this.element.querySelector('.' + cls.EVENT_WINDOW_TITLE_TEXT_CLASS).innerHTML = this.l10n.getConstant('editEvent');
+        }
         this.element.querySelector('.' + cls.FORM_CLASS).setAttribute('data-id', eventObj[this.fields.id].toString());
         if (isNullOrUndefined(this.parent.editorTemplate)) {
             eventObj = extend({}, eventObj, null, true);
@@ -1851,7 +1945,7 @@ var EventWindow = /** @class */ (function () {
     };
     EventWindow.prototype.destroy = function (isIgnore) {
         if (this.parent && !this.parent.isDestroyed) {
-            this.parent.resetTemplates(['editorTemplate']);
+            this.parent.resetTemplates(['editorTemplate', 'editorHeaderTemplate', 'editorFooterTemplate']);
         }
         this.destroyComponents();
         if (this.recurrenceEditor) {

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

@@ -317,6 +317,9 @@ var QuickPopups = /** @class */ (function () {
                         'aria-label': this_1.parent.getAnnouncementString(eventData)
                     }
                 });
+                if (eventData[fields.isReadonly]) {
+                    addClass([appointmentElement], 'e-read-only');
+                }
                 var templateElement = void 0;
                 if (!isNullOrUndefined(this_1.parent.activeViewOptions.eventTemplate)) {
                     var tempId = this_1.parent.element.id + '_' + this_1.parent.activeViewOptions.eventTemplateName + 'eventTemplate';

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

@@ -155,8 +155,11 @@ var TimelineViews = /** @class */ (function (_super) {
         var diffInMinutes = ((date.getHours() - startHour.getHours()) * 60) + (date.getMinutes() - startHour.getMinutes());
         if (!isNullOrUndefined(currentDateIndex)) {
             if (currentDateIndex[0] !== 0) {
-                if (this.parent.activeView.colLevels[0] && this.parent.activeView.colLevels[0][0].colSpan) {
-                    diffInDates = currentDateIndex[0] * this.parent.activeView.colLevels[0][0].colSpan * this.getWorkCellWidth();
+                var index = this.parent.activeView.colLevels.findIndex(function (level) { return level[0].type === 'dateHeader'; });
+                if (this.parent.activeView.colLevels[parseInt(index.toString(), 10)] &&
+                    this.parent.activeView.colLevels[parseInt(index.toString(), 10)][0].colSpan) {
+                    diffInDates = currentDateIndex[0] * this.parent.activeView.colLevels[parseInt(index.toString(), 10)][0].colSpan *
+                        this.getWorkCellWidth();
                 }
                 else {
                     var endHour = this.getEndHour();

package/styles/bootstrap-dark.css

@@ -3626,6 +3626,21 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.e-bigger .e-more-popup-wrapper .e-appointment .e-subject.e-disable,
+.e-more-popup-wrapper .e-appointment .e-subject.e-disable {
+  display: none;
+}
+.e-bigger .e-more-popup-wrapper .e-appointment .e-inline-subject,
+.e-more-popup-wrapper .e-appointment .e-inline-subject {
+  background: transparent;
+  border: 0;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  padding-top: 4px;
+  width: 100%;
+}
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-icon,
 .e-bigger .e-more-popup-wrapper .e-appointment .e-recurrence-edit-icon,
 .e-more-popup-wrapper .e-appointment .e-recurrence-icon,