@syncfusion/ej2-schedule 30.2.7 → 31.1.17

package/dist/ts/schedule/event-renderer/month.ts

@@ -0,0 +1,760 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { append, prepend, createElement, extend, EventHandler, closest, addClass } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, setStyleAttribute, remove } from '@syncfusion/ej2-base';
+import { EventFieldsMapping, EventClickArgs, EventRenderedArgs, TdData, NotifyEventArgs, MoreEventsClickArgs } from '../base/interface';
+import { Schedule } from '../base/schedule';
+import { EventBase } from './event-base';
+import * as cls from '../base/css-constant';
+import * as events from '../base/constant';
+import * as util from '../base/util';
+
+const EVENT_GAP: number = 0;
+/**
+ * Month view events render
+ */
+export class MonthEvent extends EventBase {
+    public element: HTMLElement;
+    public fields: EventFieldsMapping;
+    public dateRender: Date[];
+    public renderedEvents: Record<string, any>[] = [];
+    public eventHeight: number;
+    private monthHeaderHeight: number = 0;
+    public workCells: HTMLElement[];
+    public cellWidth: number;
+    public cellHeight: number;
+    public moreIndicatorHeight: number = 19;
+    public renderType: string = 'day';
+    public maxHeight: boolean;
+    public withIndicator: boolean;
+    public maxOrIndicator: boolean;
+    public inlineValue: boolean;
+    private isResourceEventTemplate: boolean;
+
+    constructor(parent: Schedule) {
+        super(parent);
+        this.element = this.parent.activeView.getPanel();
+        this.fields = this.parent.eventFields;
+        this.maxHeight = this.parent.eventSettings.enableMaxHeight && !this.parent.eventSettings.enableIndicator
+            && !this.parent.rowAutoHeight;
+        this.withIndicator = this.parent.eventSettings.enableMaxHeight && this.parent.eventSettings.enableIndicator
+            && !this.parent.rowAutoHeight;
+        this.maxOrIndicator = (this.maxHeight || this.withIndicator);
+        this.moreIndicatorHeight =
+            (this.parent.rowAutoHeight && this.parent.eventSettings.ignoreWhitespace) ? 0 : this.moreIndicatorHeight;
+        this.addEventListener();
+    }
+
+    private removeEventWrapper(appElement: Element[]): void {
+        if (appElement.length > 0) {
+            appElement = (this.parent.currentView === 'Month' || (!this.parent.activeView.isTimelineView() &&
+                !this.parent.activeViewOptions.timeScale.enable)) ? appElement : [appElement[0]];
+            for (const wrap of appElement) {
+                if (wrap.parentElement && wrap.parentElement.parentNode) {
+                    remove(wrap.parentElement);
+                }
+            }
+        }
+    }
+
+    public renderAppointments(): void {
+        if (this.parent.dragAndDropModule) {
+            this.parent.dragAndDropModule.setDragArea();
+        }
+        this.isResourceEventTemplate = this.parent.isSpecificResourceEvents();
+        const conWrap: HTMLElement = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS) as HTMLElement;
+        if (this.parent.rowAutoHeight) {
+            this.parent.uiStateValues.top = conWrap.scrollTop;
+            this.parent.uiStateValues.left = conWrap.scrollLeft;
+        }
+        const appointmentWrapper: HTMLElement[] = [].slice.call(this.element.querySelectorAll('.' + cls.APPOINTMENT_WRAPPER_CLASS));
+        if (this.parent.crudModule && this.parent.crudModule.crudObj.isCrudAction) {
+            for (let i: number = 0, len: number = this.parent.crudModule.crudObj.sourceEvent.length; i < len; i++) {
+                const appElement: Element[] = [].slice.call(this.element.querySelectorAll('.e-appointment-wrapper ' + '[data-group-index="' +
+                    this.parent.crudModule.crudObj.sourceEvent[parseInt(i.toString(), 10)].groupIndex + '"]'));
+                this.removeEventWrapper(appElement);
+                if (this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)] &&
+                    this.parent.crudModule.crudObj.sourceEvent[parseInt(i.toString(), 10)].groupIndex !==
+                    this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)].groupIndex) {
+                    const ele: Element[] = [].slice.call(this.element.querySelectorAll('.e-appointment-wrapper ' + '[data-group-index="' +
+                        this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)].groupIndex + '"]'));
+                    this.removeEventWrapper(ele);
+                }
+            }
+        } else {
+            for (const wrap of appointmentWrapper) {
+                remove(wrap);
+            }
+        }
+        this.removeHeightProperty(cls.CONTENT_TABLE_CLASS);
+        if (!this.element.querySelector('.' + cls.WORK_CELLS_CLASS)) {
+            return;
+        }
+        if (this.parent.currentView === 'Month') {
+            const wrapper: HTMLElement = createElement('div', { className: cls.APPOINTMENT_WRAPPER_CLASS });
+            const cellTd: HTMLTableCellElement = this.parent.element.querySelector('.' + cls.WORK_CELLS_CLASS);
+            cellTd.appendChild(wrapper);
+            this.monthHeaderHeight = wrapper.offsetTop - cellTd.offsetTop;
+            cellTd.removeChild(wrapper);
+        }
+        this.eventHeight = this.parent.getElementHeightFromClass(this.element, cls.APPOINTMENT_CLASS);
+        const selector: string = '.' + cls.CONTENT_TABLE_CLASS + ' tbody tr';
+        this.addCellHeight(selector, this.eventHeight, (this.parent.currentView === 'Month' ? EVENT_GAP : 2), this.monthHeaderHeight, this.moreIndicatorHeight);
+        const scrollTop: number = conWrap.scrollTop;
+        if (this.parent.rowAutoHeight && this.parent.virtualScrollModule && !this.parent.virtualScrollModule.isHorizontalScroll
+            && !isNullOrUndefined(this.parent.currentAction)) {
+            conWrap.scrollTop = conWrap.scrollTop - 1;
+        }
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            this.renderResourceEvents();
+            if (this.parent.virtualScrollModule) {
+                this.parent.virtualScrollModule.updateFocusedWorkCell();
+            }
+        } else {
+            this.renderEventsHandler(this.parent.activeView.renderDates, this.parent.activeViewOptions.workDays);
+        }
+        if (this.parent.rowAutoHeight) {
+            this.updateBlockElements();
+            const data: NotifyEventArgs = {
+                cssProperties: this.parent.getCssProperties(),
+                module: this.parent.getModuleName(),
+                isPreventScrollUpdate: true,
+                scrollPosition: { left: this.parent.uiStateValues.left, top: this.parent.uiStateValues.top }
+            };
+            if (this.parent.virtualScrollModule && !this.parent.virtualScrollModule.isHorizontalScroll) {
+                if (this.parent.currentAction) {
+                    conWrap.scrollTop = scrollTop;
+                    this.parent.currentAction = null;
+                } else {
+                    this.parent.virtualScrollModule.updateVirtualScrollHeight();
+                }
+            }
+            if (!this.parent.enablePersistence) {
+                this.parent.notify(events.contentReady, {});
+            }
+            this.parent.notify(events.scrollUiUpdate, data);
+            if (this.parent.currentView === 'Month' && this.parent.showWeekNumber) {
+                const totalCells: HTMLElement[] =
+                    [].slice.call(this.parent.element.querySelectorAll('.e-content-wrap table tr td:first-child'));
+                const weekNumberCells: HTMLElement[] = [].slice.call(this.parent.element.querySelectorAll('td' + '.' + cls.WEEK_NUMBER_CLASS));
+                weekNumberCells.forEach((cell: HTMLElement, i: number) => {
+                    const height: number = totalCells[parseInt(i.toString(), 10)].offsetHeight;
+                    setStyleAttribute(cell, { 'height': height + 'px' });
+                });
+                const weekNumberWrapper: HTMLElement = this.parent.element.querySelector('.' + cls.WEEK_NUMBER_WRAPPER_CLASS) as HTMLElement;
+                if (!isNullOrUndefined(weekNumberWrapper)) {
+                    weekNumberWrapper.scrollTop = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS).scrollTop;
+                }
+            }
+        }
+        this.parent.renderTemplates();
+    }
+
+    public renderEventsHandler(dateRender: Date[], workDays: number[], resData?: TdData): void {
+        this.renderedEvents = [];
+        let eventsList: Record<string, any>[];
+        let blockList: Record<string, any>[];
+        let resIndex: number = 0;
+        if (resData) {
+            resIndex = resData.groupIndex;
+            this.cssClass = resData.cssClass;
+            this.groupOrder = resData.groupOrder;
+            eventsList = this.parent.eventBase.filterEventsByResource(resData, this.parent.eventsProcessed) as Record<string, any>[];
+            blockList = this.parent.eventBase.filterEventsByResource(resData, this.parent.blockProcessed) as Record<string, any>[];
+            this.workCells = [].slice.call(this.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS + '[data-group-index="' + resIndex + '"]'));
+        } else {
+            eventsList = this.parent.eventsProcessed;
+            blockList = this.parent.blockProcessed;
+            this.workCells = [].slice.call(this.element.querySelectorAll('.' + cls.WORK_CELLS_CLASS));
+        }
+        this.sortByDateTime(eventsList);
+        this.sortByDateTime(blockList);
+        if (this.parent.currentView === 'Month' && this.parent.rowAutoHeight && this.parent.activeViewOptions.group.resources.length === 0) {
+            const totalCells: HTMLElement[] = [].slice.call(this.parent.element.querySelectorAll('.e-content-wrap table tr td:first-child'));
+            const height: number = this.parent.element.querySelector('.' + cls.CONTENT_TABLE_CLASS).clientHeight / totalCells.length;
+            totalCells.forEach((cell: HTMLElement) => {
+                setStyleAttribute(cell, { 'height': height + 'px' });
+            });
+        }
+        const cellDetail: HTMLElement = this.workCells[this.parent.activeView.isTimelineView() ? 0 : this.workCells.length - 1];
+        this.cellWidth = this.parent.getElementWidth(cellDetail);
+        this.cellHeight = this.parent.getElementHeight(cellDetail);
+        this.dateRender = dateRender;
+        const filteredDates: Date[] = this.getRenderedDates(dateRender);
+        this.getSlotDates(workDays || this.parent.activeViewOptions.workDays);
+        this.processBlockEvents(blockList, resIndex, resData);
+        let events: Record<string, any>[] = [];
+        for (const event of eventsList) {
+            if (this.parent.resourceBase && !resData) {
+                this.cssClass = this.parent.resourceBase.getCssClass(event);
+            }
+            events = events.concat(this.splitEvent(event, filteredDates || this.dateRender));
+        }
+        for (let level: number = 0; level < this.slots.length; level++) {
+            this.renderedEvents = [];
+            const slot: number[] = this.slots[parseInt(level.toString(), 10)] as any;
+            const endDate: Date = util.addDays(new Date(slot[slot.length - 1]), 1);
+            const spannedEvents: Record<string, any>[] = this.filterEvents(new Date(slot[0]), endDate, events);
+            for (const event of spannedEvents) {
+                if (this.maxHeight) {
+                    const sDate: Date = this.parent.currentView === 'Month' ? event[this.fields.startTime] as Date :
+                        this.getStartTime(event, event.data as Record<string, any>);
+                    if (this.getIndex(sDate) > 0) {
+                        continue;
+                    }
+                }
+                this.updateIndicatorIcon(event);
+                this.renderEvents(event, resIndex, eventsList);
+            }
+        }
+        this.cssClass = null;
+        this.groupOrder = null;
+    }
+
+    private processBlockEvents(blockEvents: Record<string, any>[], resIndex: number, resData?: TdData): void {
+        for (const event of blockEvents) {
+            if (this.parent.resourceBase && !resData) {
+                this.cssClass = this.parent.resourceBase.getCssClass(event);
+            }
+            const blockSpannedList: Record<string, any>[] = [];
+            if (this.renderType === 'day' && !event[this.fields.isAllDay]) {
+                const temp: Record<string, any> = extend({}, event, null, true) as Record<string, any>;
+                let isSameDate: boolean = this.isSameDate(temp[this.fields.startTime] as Date, temp[this.fields.endTime] as Date);
+                temp.isBlockIcon = isSameDate;
+                if (!isSameDate && util.getDateInMs(temp[this.fields.startTime] as Date) > 0) {
+                    const e: Record<string, any> = extend({}, event, null, true) as Record<string, any>;
+                    e[this.fields.endTime] = util.addDays(util.resetTime(new Date(event[this.fields.startTime] + '')), 1);
+                    e.isBlockIcon = true;
+                    temp[this.fields.startTime] = e[this.fields.endTime];
+                    blockSpannedList.push(e);
+                }
+                isSameDate = this.isSameDate(temp[this.fields.startTime] as Date, temp[this.fields.endTime] as Date);
+                if (!isSameDate && util.getDateInMs(temp[this.fields.endTime] as Date) > 0) {
+                    const e: Record<string, any> = extend({}, event, null, true) as Record<string, any>;
+                    e[this.fields.startTime] = util.resetTime(new Date(event[this.fields.endTime] + ''));
+                    e.isBlockIcon = true;
+                    blockSpannedList.push(e);
+                    temp[this.fields.endTime] = e[this.fields.startTime];
+                }
+                blockSpannedList.push(temp);
+            } else {
+                blockSpannedList.push(event);
+            }
+            for (const blockEvent of blockSpannedList) {
+                const spannedEvents: Record<string, any>[] = this.splitEvent(blockEvent, this.dateRender);
+                for (const event of spannedEvents) {
+                    this.renderBlockEvents(event, resIndex, !!blockEvent.isBlockIcon);
+                }
+            }
+        }
+    }
+
+    private isSameDate(start: Date, end: Date): boolean {
+        return new Date(+start).setHours(0, 0, 0, 0) === new Date(+end).setHours(0, 0, 0, 0);
+    }
+
+    public renderBlockEvents(event: Record<string, any>, resIndex: number, isIcon: boolean): void {
+        const eventData: Record<string, any> = event.data as Record<string, any>;
+        const startTime: Date = this.getStartTime(event, eventData);
+        const endTime: Date = this.getEndTime(event, eventData);
+        const day: number = this.parent.getIndexOfDate(this.dateRender, util.resetTime(new Date(startTime.getTime())));
+        if (day < 0 || startTime > endTime) {
+            return;
+        }
+        const cellTd: HTMLElement = this.getCellTd(day);
+        const position: number = this.getPosition(startTime, endTime, event[this.fields.isAllDay] as boolean, day);
+        if (!isIcon) {
+            const diffInDays: number = eventData.count as number;
+            let appWidth: number = this.getEventWidth(startTime, endTime, event[this.fields.isAllDay] as boolean, diffInDays);
+            appWidth = (appWidth <= 0) ? this.cellWidth : appWidth;
+            appWidth = event.IsBlock ? appWidth - 1 : appWidth;
+            const appLeft: number = (this.parent.enableRtl) ? 0 : event.IsBlock ? position + 1 : position;
+            const appRight: number = (this.parent.enableRtl) ? event.IsBlock ? position + 1 : position : 0;
+            let appHeight: number = this.cellHeight - this.monthHeaderHeight;
+            appHeight = event.IsBlock ? appHeight - 1 : appHeight;
+            const appTop: number = this.getRowTop(resIndex);
+            const blockElement: HTMLElement = this.createBlockAppointmentElement(event, resIndex, this.isResourceEventTemplate);
+            setStyleAttribute(blockElement, {
+                'width': appWidth + 'px', 'height': appHeight + 'px', 'left': appLeft + 'px',
+                'right': appRight + 'px', 'top': appTop + 'px'
+            });
+            this.renderEventElement(event, blockElement, cellTd);
+        } else {
+            this.renderBlockIndicator(cellTd, position, resIndex);
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    public renderBlockIndicator(cellTd: HTMLElement, position: number, resIndex: number): void {
+        const blockIndicator: HTMLElement = createElement('div', { className: 'e-icons ' + cls.BLOCK_INDICATOR_CLASS });
+        if (isNullOrUndefined(cellTd.querySelector('.' + cls.BLOCK_INDICATOR_CLASS))) {
+            cellTd.appendChild(blockIndicator);
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    public getStartTime(event: Record<string, any>, eventData: Record<string, any>): Date {
+        return event[this.fields.startTime] as Date;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    public getEndTime(event: Record<string, any>, eventData: Record<string, any>): Date {
+        return event[this.fields.endTime] as Date;
+    }
+
+    public getCellTd(day: number): HTMLElement {
+        return this.workCells[parseInt(day.toString(), 10)];
+    }
+
+    public getEventWidth(startDate: Date, endDate: Date, isAllDay: boolean, count: number): number {
+        return count * this.cellWidth - 1;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    public getPosition(startTime: Date, endTime: Date, isAllDay: boolean, day: number): number {
+        return 0;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    public getRowTop(resIndex: number): number {
+        return 0;
+    }
+
+    public updateIndicatorIcon(event: Record<string, any>): void {
+        if (this.parent.currentView.indexOf('Timeline') === -1 || this.parent.currentView === 'TimelineMonth'
+            || event[this.fields.isAllDay]) {
+            return;
+        }
+        const cloneData: Record<string, any> = event.data as Record<string, any>;
+        const start: Date = this.parent.activeView.getStartHour();
+        const end: Date = this.parent.activeView.getEndHour();
+        const startHour: Record<string, Date> = util.getStartEndHours(event[this.fields.startTime] as Date, start, end);
+        const endHour: Record<string, Date> = util.getStartEndHours(event[this.fields.endTime] as Date, start, end);
+        const actualStartTime: Date = <Date>cloneData[this.fields.startTime];
+        const actualEndTime: Date = <Date>cloneData[this.fields.endTime];
+        cloneData.isLeft = cloneData.isLeft || actualStartTime.getTime() < startHour.startHour.getTime();
+        cloneData.isRight = cloneData.isRight || actualEndTime.getTime() > endHour.endHour.getTime();
+        if (util.resetTime(actualStartTime).getTime() !== util.resetTime(actualEndTime).getTime()) {
+            const actualStartHour: Date = startHour.startHour;
+            const actualEndHour: Date = endHour.endHour;
+            const startTime: Date = new Date(util.resetTime(actualStartTime));
+            startTime.setHours(actualEndHour.getHours(), actualEndHour.getMinutes(), actualEndHour.getSeconds());
+            cloneData.isLeft = cloneData.isLeft || actualStartTime.getTime() >= (actualStartHour.getDate() === startHour.endHour.getDate() ?
+                startTime.getTime() : util.addDays(startTime, 1).getTime());
+            if (actualEndTime.getTime() !== util.resetTime(actualEndTime).getTime()) {
+                const endTime: Date = new Date(util.resetTime(actualEndTime));
+                cloneData.isRight = cloneData.isRight || actualEndTime.getTime() <=
+                    endTime.setHours(actualStartHour.getHours(), actualStartHour.getMinutes(), actualStartHour.getSeconds());
+            }
+        }
+    }
+
+    public renderResourceEvents(): void {
+        const resources: TdData[] = this.parent.uiStateValues.isGroupAdaptive ?
+            [this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex]] :
+            this.parent.resourceBase.renderedResources;
+        if (this.parent.crudModule && this.parent.crudModule.crudObj.isCrudAction) {
+            for (let i: number = 0, len: number = this.parent.crudModule.crudObj.sourceEvent.length; i < len; i++) {
+                const sourceRes: TdData = this.parent.crudModule.crudObj.sourceEvent[parseInt(i.toString(), 10)];
+                if (!this.parent.uiStateValues.isGroupAdaptive ||
+                    (this.parent.uiStateValues.groupIndex === sourceRes.groupIndex && this.parent.uiStateValues.isGroupAdaptive)) {
+                    this.renderEventsHandler(sourceRes.renderDates, sourceRes.workDays, sourceRes);
+                }
+                if (this.parent.crudModule.crudObj.sourceEvent[parseInt(i.toString(), 10)].groupIndex !==
+                    this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)].groupIndex) {
+                    const target: TdData = this.parent.crudModule.crudObj.targetEvent[parseInt(i.toString(), 10)];
+                    this.renderEventsHandler(target.renderDates, target.workDays, target);
+                }
+            }
+            this.parent.crudModule.crudObj.isCrudAction = false;
+        } else {
+            for (const slotData of resources) {
+                this.renderEventsHandler(slotData.renderDates, slotData.workDays, slotData);
+            }
+        }
+    }
+
+    public getSlotDates(workDays?: number[]): void {
+        this.slots = [];
+        const dates: number[] = this.dateRender.map((date: Date) => { return +date; });
+        const noOfDays: number = !this.parent.activeViewOptions.showWeekend || (this.parent.activeViewOptions.group.byDate &&
+            this.parent.activeViewOptions.group.hideNonWorkingDays) ? workDays.length : util.WEEK_LENGTH;
+        while (dates.length > 0) {
+            this.slots.push(dates.splice(0, noOfDays) as any);
+        }
+    }
+
+    public createAppointmentElement(record: Record<string, any>, resIndex: number, isCloneElement: boolean = false): HTMLElement {
+        const eventSubject: string = (record[this.fields.subject] || this.parent.eventSettings.fields.subject.default ||
+            this.parent.localeObj.getConstant('addTitle')) as string;
+        const newRecord: Record<string, any> = extend({}, record, record.data, true) as Record<string, any>;
+        const attrs: { [key: string]: string } = {
+            'data-id': 'Appointment_' + record[this.fields.id],
+            'role': 'button', 'tabindex': '0',
+            'aria-disabled': this.parent.eventBase.getReadonlyAttribute(record),
+            'aria-label': this.parent.getAnnouncementString(newRecord, eventSubject)
+        };
+        if (!isCloneElement) {
+            attrs['data-guid'] = record.Guid;
+        }
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            attrs['data-group-index'] = resIndex.toString();
+        }
+        const appointmentWrapper: HTMLElement = createElement('div', { className: cls.APPOINTMENT_CLASS, attrs: attrs });
+
+        if (!isNullOrUndefined(this.cssClass)) {
+            addClass([appointmentWrapper], this.cssClass);
+        }
+        if (record[this.fields.isReadonly]) {
+            addClass([appointmentWrapper], 'e-read-only');
+        }
+        const appointmentDetails: HTMLElement = createElement('div', { className: cls.APPOINTMENT_DETAILS });
+        appointmentWrapper.appendChild(appointmentDetails);
+        let templateElement: HTMLElement[];
+        const eventData: Record<string, any> = record.data as Record<string, any>;
+        const eventObj: Record<string, any> = this.getEventData(record);
+        if (!isNullOrUndefined(this.parent.activeViewOptions.eventTemplate)) {
+            const scheduleId: string = this.parent.element.id + '_';
+            const viewName: string = this.parent.activeViewOptions.eventTemplateName;
+            const templateId: string = scheduleId + viewName + 'eventTemplate';
+            const eventTemplate: string = this.isResourceEventTemplate ? this.parent.getEventTemplateName(resIndex) : 'eventTemplate';
+            templateElement = this.parent.getAppointmentTemplate()(eventObj, this.parent, eventTemplate, templateId, false,
+                                                                   undefined, undefined, this.parent.root);
+        } else {
+            const eventLocation: string = (record[this.fields.location] || this.parent.eventSettings.fields.location.default || '') as string;
+            const appointmentSubject: HTMLElement = createElement('div', { className: cls.SUBJECT_CLASS });
+            this.parent.sanitize((eventSubject + (eventLocation ? '; ' + eventLocation : '')), appointmentSubject);
+            const appointmentStartTime: HTMLElement = createElement('div', {
+                className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''),
+                innerHTML: this.parent.getTimeString(eventData[this.fields.startTime] as Date)
+            });
+            const appointmentEndTime: HTMLElement = createElement('div', {
+                className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''),
+                innerHTML: this.parent.getTimeString(eventData[this.fields.endTime] as Date)
+            });
+            if (this.parent.currentView === 'Month') {
+                if (record[this.fields.isAllDay]) {
+                    templateElement = [appointmentSubject];
+                    addClass([appointmentSubject], 'e-text-center');
+                } else if (eventData.count <= 1 && !eventData.isLeft && !eventData.isRight) {
+                    templateElement = [appointmentStartTime, appointmentSubject];
+                } else {
+                    templateElement = [];
+                    addClass([appointmentSubject], 'e-text-center');
+                    if (!eventData.isLeft) {
+                        templateElement.push(appointmentStartTime);
+                    }
+                    templateElement.push(appointmentSubject);
+                    if (!eventData.isRight) {
+                        templateElement.push(appointmentEndTime);
+                    }
+                }
+            } else {
+                let innerElement: HTMLElement[];
+                if (record[this.fields.isAllDay]) {
+                    const allDayString: HTMLElement = createElement('div', {
+                        className: cls.APPOINTMENT_TIME, innerHTML: this.parent.localeObj.getConstant('allDay')
+                    });
+                    innerElement = [appointmentSubject, allDayString];
+                } else {
+                    const timeString: string = this.parent.getTimeString(eventData[this.fields.startTime] as Date)
+                        + ' - ' + this.parent.getTimeString(eventData[this.fields.endTime] as Date);
+                    const appTime: HTMLElement = createElement('div', {
+                        className: cls.APPOINTMENT_TIME + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : ''), innerHTML: timeString
+                    });
+                    const appLocation: HTMLElement = createElement('div', { className: cls.LOCATION_CLASS });
+                    this.parent.sanitize(eventLocation, appLocation);
+                    innerElement = [appointmentSubject, appTime, appLocation];
+                }
+                const wrap: HTMLElement = createElement('div', { className: 'e-inner-wrap' });
+                append(innerElement, wrap);
+                templateElement = [wrap];
+            }
+        }
+        append(templateElement, appointmentDetails);
+        this.appendEventIcons(record, appointmentDetails);
+        this.renderResizeHandler(appointmentWrapper, record.data as Record<string, any>, record[this.fields.isReadonly] as boolean);
+        return appointmentWrapper;
+    }
+
+    private appendEventIcons(record: Record<string, any>, appointmentDetails: HTMLElement): void {
+        const eventData: Record<string, any> = record.data as Record<string, any>;
+        if (!isNullOrUndefined(record[this.fields.recurrenceRule]) || !isNullOrUndefined(record[this.fields.recurrenceID])) {
+            const iconClass: string = (record[this.fields.id] === record[this.fields.recurrenceID]) ?
+                cls.EVENT_RECURRENCE_ICON_CLASS : cls.EVENT_RECURRENCE_EDIT_ICON_CLASS;
+            appointmentDetails.appendChild(createElement('div', {
+                className: cls.ICON + ' ' + iconClass + (this.parent.isAdaptive ? ' ' + cls.DISABLE_CLASS : '')
+            }));
+        }
+        if (eventData.isLeft) {
+            const iconLeft: HTMLElement = createElement('div', {
+                className: cls.EVENT_INDICATOR_CLASS + ' ' + cls.ICON + ' ' + cls.EVENT_ICON_LEFT_CLASS
+            });
+            prepend([iconLeft], appointmentDetails);
+        }
+        if (eventData.isRight) {
+            const iconRight: HTMLElement = createElement('div', {
+                className: cls.EVENT_INDICATOR_CLASS + ' ' + cls.ICON + ' ' + cls.EVENT_ICON_RIGHT_CLASS
+            });
+            append([iconRight], appointmentDetails);
+        }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    public renderEvents(event: Record<string, any>, resIndex: number, eventsList?: Record<string, any>[]): void {
+        const startTime: Date = event[this.fields.startTime] as Date;
+        const endTime: Date = event[this.fields.endTime] as Date;
+        const day: number = this.parent.getIndexOfDate(this.dateRender, util.resetTime(startTime));
+        if ((day < 0) || (startTime.getTime() < this.parent.minDate.getTime()) || (endTime.getTime() > this.parent.maxDate.getTime())) {
+            return;
+        }
+        const eventsPerRow: number = this.parent.rowAutoHeight ? 1 : this.parent.activeViewOptions.maxEventsPerRow;
+        const overlapCount: number = this.getIndex(startTime);
+        event.Index = overlapCount;
+        const diffInDays: number = (event.data as Record<string, any>).count as number;
+        if (startTime.getTime() <= endTime.getTime()) {
+            const appWidth: number = (diffInDays * this.cellWidth) - 5;
+            const cellTd: Element = this.workCells[parseInt(day.toString(), 10)];
+            const appTop: number = (overlapCount * (this.eventHeight + EVENT_GAP));
+            const height: number =
+                this.monthHeaderHeight + ((overlapCount + 1) * (this.eventHeight + EVENT_GAP)) + this.moreIndicatorHeight;
+            const enableAppRender: boolean = this.parent.activeViewOptions.maxEventsPerRow && !this.parent.rowAutoHeight &&
+                !this.parent.eventSettings.enableIndicator ? overlapCount < eventsPerRow : this.maxOrIndicator ? overlapCount < 1
+                    ? true : false : this.cellHeight > height;
+            if (this.parent.rowAutoHeight || enableAppRender) {
+                this.renderedEvents.push(extend({}, event, null, true) as Record<string, any>);
+                let appointmentElement: HTMLElement;
+                if (this.inlineValue) {
+                    appointmentElement = this.parent.inlineModule.createInlineAppointmentElement();
+                } else {
+                    appointmentElement = this.createAppointmentElement(event, resIndex);
+                }
+                this.applyResourceColor(appointmentElement, event, 'backgroundColor', this.groupOrder);
+                this.wireAppointmentEvents(appointmentElement, event);
+                setStyleAttribute(appointmentElement, { 'width': appWidth + 'px', 'top': appTop + 'px' });
+                this.renderEventElement(event, appointmentElement, cellTd);
+                if (this.parent.rowAutoHeight) {
+                    const conWrap: HTMLElement = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS) as HTMLElement;
+                    const conWidth: number = this.parent.getElementWidth(conWrap);
+                    const isWithoutScroll: boolean = conWrap.offsetHeight === conWrap.clientHeight &&
+                    conWrap.offsetWidth === conWrap.clientWidth;
+                    const firstChild: HTMLElement = cellTd.parentElement.firstElementChild as HTMLElement;
+                    this.updateCellHeight(firstChild, height);
+                    if (isWithoutScroll &&
+                        (conWrap.offsetWidth > conWrap.clientWidth || conWidth !== this.parent.getElementWidth(conWrap))) {
+                        this.adjustAppointments(conWidth);
+                    }
+                }
+            } else {
+                for (let i: number = 0; i < diffInDays; i++) {
+                    if (this.workCells[day + i]) {
+                        const indicator: HTMLElement = this.workCells[day + i].querySelector('.' + cls.MORE_INDICATOR_CLASS);
+                        if (indicator) {
+                            const count: number = parseInt(indicator.getAttribute('data-count'), 10) + 1;
+                            indicator.setAttribute('data-count', count.toString());
+                            indicator.setAttribute('aria-label', count + ' ' + this.parent.localeObj.getConstant('moreEvents'));
+                            indicator.innerHTML = this.getMoreIndicatorText(count);
+                        } else {
+                            const startDate: Date = new Date(this.dateRender[day + i].getTime());
+                            const endDate: Date = util.addDays(this.dateRender[day + i], 1);
+                            const groupIndex: string = this.workCells[day + i].getAttribute('data-group-index');
+                            const moreIndicatorElement: HTMLElement = this.getMoreIndicatorElement(1, startDate, endDate);
+                            if (!isNullOrUndefined(groupIndex)) {
+                                moreIndicatorElement.setAttribute('data-group-index', groupIndex);
+                            }
+                            moreIndicatorElement.style.top = (this.cellHeight - this.monthHeaderHeight - this.moreIndicatorHeight) + 'px';
+                            moreIndicatorElement.style.width = this.cellWidth - 2 + 'px';
+                            this.renderElement(this.workCells[day + i], moreIndicatorElement);
+                            EventHandler.add(moreIndicatorElement, 'click', this.moreIndicatorClick, this);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    public adjustAppointments(conWidth: number): void {
+        const tr: HTMLElement = this.parent.element.querySelector('.' + cls.CONTENT_TABLE_CLASS + ' tbody tr');
+        const actualCellWidth: number = this.parent.getElementWidth(this.workCells[0]);
+        this.cellWidth = actualCellWidth / +(this.workCells[0].getAttribute('colspan') || 1);
+        const currentPercentage: number = (actualCellWidth * tr.children.length) / (conWidth / 100);
+        const apps: HTMLElement[] = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS));
+        apps.forEach((app: HTMLElement) => {
+            if (this.parent.enableRtl && app.style.right !== '0px') {
+                app.style.right = ((parseFloat(app.style.right) / 100) * currentPercentage) + 'px';
+            } else if (app.style.left !== '0px') {
+                app.style.left = ((parseFloat(app.style.left) / 100) * currentPercentage) + 'px';
+            }
+            app.style.width = ((parseFloat(app.style.width) / 100) * currentPercentage) + 'px';
+        });
+    }
+
+    public updateCellHeight(cell: HTMLElement, height: number): void {
+        if ((height > cell.offsetHeight)) {
+            setStyleAttribute(cell as HTMLElement, { 'height': height + 'px' });
+        }
+    }
+
+    public updateBlockElements(): void {
+        const blockElement: HTMLElement[] = [].slice.call(this.element.querySelectorAll('.' + cls.BLOCK_APPOINTMENT_CLASS));
+        for (const element of blockElement) {
+            const target: HTMLElement = closest(element, 'tr') as HTMLElement;
+            this.monthHeaderHeight = (<HTMLElement>element.offsetParent).offsetTop - target.offsetTop;
+            element.style.height = ((target.offsetHeight - 1) - this.monthHeaderHeight) + 'px';
+            const firstChild: HTMLElement = target.firstElementChild as HTMLElement;
+            const width: number = Math.round(element.offsetWidth / firstChild.offsetWidth);
+            element.style.width = (firstChild.offsetWidth * width) + 'px';
+        }
+    }
+
+    // eslint-disable-next-line max-len
+    public getFilteredEvents(startDate: Date, endDate: Date, groupIndex: string, eventsList?: Record<string, any>[]): Record<string, any>[] {
+        let filteredEvents: Record<string, any>[];
+        if (isNullOrUndefined(groupIndex)) {
+            filteredEvents = this.filterEvents(startDate, endDate);
+        } else {
+            const data: TdData = this.parent.resourceBase.lastResourceLevel[parseInt(groupIndex, 10)];
+            filteredEvents = this.filterEvents(startDate, endDate, isNullOrUndefined(eventsList) ? undefined : eventsList, data);
+        }
+        return filteredEvents;
+    }
+
+    public getOverlapEvents(date: Date, appointments: Record<string, any>[]): Record<string, any>[] {
+        const appointmentsList: Record<string, any>[] = [];
+        const dateTime: number = util.resetTime(date).getTime();
+        for (const app of appointments) {
+            if ((util.resetTime(<Date>app[this.fields.startTime]).getTime() <= dateTime) &&
+                (util.resetTime(<Date>app[this.fields.endTime]).getTime() >= dateTime)) {
+                appointmentsList.push(app);
+            }
+        }
+        return appointmentsList;
+    }
+
+    public getIndex(date: Date): number {
+        let appIndex: number = -1;
+        const appointments: Record<string, any>[] = <Record<string, any>[]>this.renderedEvents;
+        if (appointments.length > 0) {
+            const appointmentsList: Record<string, any>[] = this.getOverlapEvents(date, appointments);
+            const appLevel: number[] = appointmentsList.map((obj: Record<string, any>) => obj.Index) as number[];
+            appIndex = (appLevel.length > 0) ? this.getSmallestMissingNumber(appLevel) : 0;
+        }
+        return (appIndex === -1) ? 0 : appIndex;
+    }
+
+    public moreIndicatorClick(event: Event): void {
+        const target: Element = closest((event.target as Element), '.' + cls.MORE_INDICATOR_CLASS);
+        const startDate: Date = new Date(parseInt(target.getAttribute('data-start-date'), 10));
+        const endDate: Date = new Date(parseInt(target.getAttribute('data-end-date'), 10));
+        const groupIndex: string = target.getAttribute('data-group-index');
+        const moreArgs: MoreEventsClickArgs = {
+            cancel: false, event: event, element: target, isPopupOpen: true,
+            startTime: startDate, endTime: endDate, viewName: this.parent.getNavigateView()
+        };
+        if (groupIndex) {
+            moreArgs.groupIndex = parseInt(groupIndex, 10);
+        }
+        this.parent.trigger(events.moreEventsClick, moreArgs, (clickArgs: MoreEventsClickArgs) => {
+            if (!clickArgs.cancel) {
+                if (clickArgs.isPopupOpen) {
+                    const filteredEvents: Record<string, any>[] = this.getFilteredEvents(startDate, endDate, groupIndex);
+                    const moreArgs: EventClickArgs = { date: startDate, event: filteredEvents, element: event.target } as EventClickArgs;
+                    this.parent.quickPopup.moreEventClick(moreArgs, endDate, groupIndex);
+                } else {
+                    this.parent.setProperties({ selectedDate: startDate }, true);
+                    this.parent.changeView(clickArgs.viewName, event);
+                }
+            }
+        });
+    }
+
+    public renderEventElement(event: Record<string, any>, appointmentElement: HTMLElement, cellTd: Element): void {
+        const eventType: string = appointmentElement.classList.contains(cls.BLOCK_APPOINTMENT_CLASS) ? 'blockEvent' : 'event';
+        const isAppointment: boolean = appointmentElement.classList.contains(cls.APPOINTMENT_CLASS);
+        const eventObj: Record<string, any> = this.parent.currentView === 'Month' ? this.getSpannedTime(event) : this.getEventData(event);
+        const args: EventRenderedArgs = { data: eventObj, element: appointmentElement, cancel: false, type: eventType };
+        this.parent.trigger(events.eventRendered, args, (eventArgs: EventRenderedArgs) => {
+            if (eventArgs.cancel) {
+                this.renderedEvents.pop();
+            } else {
+                this.renderElement(cellTd, appointmentElement, isAppointment);
+            }
+        });
+    }
+
+    private getSpannedTime(event: Record<string, any>): Record<string, any> {
+        const eventObj: Record<string, any> = extend({}, event, null, true) as Record<string, any>;
+        if ((eventObj[this.fields.startTime]).getDate() === (eventObj.data[this.fields.startTime]).getDate()) {
+            eventObj[this.fields.startTime] = eventObj.data[this.fields.startTime];
+        }
+        if ((eventObj[this.fields.endTime]).getDate() === (eventObj.data[this.fields.endTime]).getDate()) {
+            eventObj[this.fields.endTime] = eventObj.data[this.fields.endTime];
+        }
+        return eventObj;
+    }
+
+    public getEventData(event: Record<string, any>): Record<string, any> {
+        const eventObj: Record<string, any> = extend({}, event, null, true) as Record<string, any>;
+        eventObj[this.fields.startTime] = (event.data as Record<string, any>)[this.fields.startTime];
+        eventObj[this.fields.endTime] = (event.data as Record<string, any>)[this.fields.endTime];
+        return eventObj;
+    }
+
+    public renderElement(cellTd: HTMLElement | Element, element: HTMLElement, isAppointment: boolean = false): void {
+        if (this.maxOrIndicator && isAppointment) {
+            this.setMaxEventHeight(element, cellTd as HTMLElement);
+        }
+        const wrapperEle: HTMLElement = cellTd.querySelector('.' + cls.APPOINTMENT_WRAPPER_CLASS);
+        if (wrapperEle) {
+            wrapperEle.appendChild(element);
+        } else {
+            const wrapper: HTMLElement = createElement('div', { className: cls.APPOINTMENT_WRAPPER_CLASS });
+            wrapper.appendChild(element);
+            cellTd.appendChild(wrapper);
+        }
+    }
+
+    public getMoreIndicatorElement(count: number, startDate: Date, endDate: Date): HTMLElement {
+        const moreIndicatorElement: HTMLElement = createElement('div', {
+            className: cls.MORE_INDICATOR_CLASS,
+            innerHTML: this.getMoreIndicatorText(count),
+            attrs: {
+                'role': 'button',
+                'tabindex': '0',
+                'aria-label': this.parent.globalize.formatNumber(count) + ' ' + this.parent.localeObj.getConstant('moreEvents'),
+                'data-count': count.toString(),
+                'data-start-date': startDate.getTime().toString(),
+                'data-end-date': endDate.getTime().toString()
+            }
+        });
+        return moreIndicatorElement;
+    }
+
+    private getMoreIndicatorText(count: number): string {
+        return '+' + this.parent.globalize.formatNumber(count) + '&nbsp;' + (this.parent.isAdaptive ? '' : this.parent.localeObj.getConstant('more'));
+    }
+
+    public removeHeightProperty(selector: string): void {
+        const rows: HTMLElement[] = [].slice.call(this.element.querySelectorAll('.' + selector + ' tbody tr'));
+        for (const row of rows) {
+            (row.firstElementChild as HTMLElement).style.height = '';
+        }
+    }
+
+    public setMaxEventHeight(event: HTMLElement, cell: HTMLElement): void {
+        const headerHeight: number = util.getOuterHeight(cell.querySelector('.' + cls.DATE_HEADER_CLASS));
+        const height: number = (cell.offsetHeight - headerHeight) - (this.maxHeight ? 0 : this.moreIndicatorHeight);
+        setStyleAttribute(event, { 'height': height + 'px', 'align-items': 'center' });
+    }
+
+    public destroy(): void {
+        this.element = null;
+        this.fields = null;
+        this.maxHeight = null;
+        this.withIndicator = null;
+        this.maxOrIndicator = null;
+        this.moreIndicatorHeight = null;
+        this.removeEventListener();
+        super.destroy();
+    }
+
+}