@syncfusion/ej2-schedule 30.2.7 → 31.1.17

package/dist/ts/schedule/popups/quick-popups.ts

@@ -0,0 +1,1470 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { L10n, closest, EventHandler, isNullOrUndefined, formatUnit, append, AnimationModel, KeyboardEventArgs } from '@syncfusion/ej2-base';
+import { addClass, removeClass, createElement, remove, extend } from '@syncfusion/ej2-base';
+import { Dialog, Popup, isCollide, ButtonPropsModel, BeforeCloseEventArgs } from '@syncfusion/ej2-popups';
+import { Button } from '@syncfusion/ej2-buttons';
+import { Input, FormValidator } from '@syncfusion/ej2-inputs';
+import { Schedule } from '../base/schedule';
+import { ResourcesModel } from '../models/models';
+import { RecurrenceEditor } from '../../recurrence-editor/index';
+import {
+    CellClickEventArgs, EventClickArgs, EventFieldsMapping, PopupOpenEventArgs,
+    EventRenderedArgs, EJ2Instance, TdData, PopupCloseEventArgs, CallbackFunction
+} from '../base/interface';
+import { PopupType, TemplateType } from '../base/type';
+import { FieldValidator } from './form-validator';
+import * as event from '../base/constant';
+import * as cls from '../base/css-constant';
+import * as util from '../base/util';
+
+const EVENT_FIELD: string = 'e-field';
+
+/**
+ * Quick Popups interactions
+ */
+export class QuickPopups {
+    private l10n: L10n;
+    private parent: Schedule;
+    private isMultipleEventSelect: boolean = false;
+    public quickDialog: Dialog;
+    public quickPopup: Popup;
+    public morePopup: Popup;
+    private fieldValidator: FieldValidator;
+    private isCrudAction: boolean = false;
+    public lastEvent: Record<string, any>;
+    private dialogEvent: Event;
+
+    constructor(parent: Schedule) {
+        this.parent = parent;
+        this.l10n = this.parent.localeObj;
+        this.fieldValidator = new FieldValidator();
+        this.render();
+        this.addEventListener();
+    }
+
+    private render(): void {
+        this.renderQuickPopup();
+        this.renderMorePopup();
+        this.renderQuickDialog();
+    }
+
+    private renderQuickPopup(): void {
+        const quickPopupWrapper: HTMLElement = createElement('div', { className: cls.POPUP_WRAPPER_CLASS + ' e-popup-close', attrs: { role: 'dialog' } });
+        if (this.parent.isAdaptive) {
+            document.body.appendChild(quickPopupWrapper);
+            addClass([quickPopupWrapper], cls.DEVICE_CLASS);
+        } else {
+            this.parent.element.appendChild(quickPopupWrapper);
+        }
+        this.quickPopup = new Popup(quickPopupWrapper, {
+            targetType: (this.parent.isAdaptive ? 'container' : 'relative'),
+            enableRtl: this.parent.enableRtl,
+            open: this.quickPopupOpen.bind(this),
+            close: this.quickPopupClose.bind(this),
+            hideAnimation: (this.parent.isAdaptive ? { name: 'ZoomOut' } : { name: 'FadeOut', duration: 150 }),
+            showAnimation: (this.parent.isAdaptive ? { name: 'ZoomIn' } : { name: 'FadeIn', duration: 150 }),
+            collision: (this.parent.isAdaptive ? { X: 'fit', Y: 'fit' } :
+                (this.parent.enableRtl ? { X: 'flip', Y: 'fit' } : { X: 'none', Y: 'fit' })),
+            position: (this.parent.isAdaptive || this.parent.enableRtl ? { X: 'left', Y: 'top' } : { X: 'right', Y: 'top' }),
+            viewPortElement: (this.parent.isAdaptive ? document.body : this.parent.element),
+            zIndex: (this.parent.isAdaptive ? 1004 : 3)
+        });
+    }
+
+    private renderMorePopup(): void {
+        const moreEventPopup: string = `<div class="${cls.MORE_EVENT_POPUP_CLASS}"><div class="${cls.MORE_EVENT_HEADER_CLASS}">` +
+            `<div class="${cls.MORE_EVENT_CLOSE_CLASS}" title="${this.l10n.getConstant('close')}" tabindex="0" role="button"></div>` +
+            `<div class="${cls.MORE_EVENT_DATE_HEADER_CLASS}"><div class="${cls.MORE_EVENT_HEADER_DAY_CLASS}" id="${this.parent.element.id}_more_popup"></div>` +
+            `<div class="${cls.MORE_EVENT_HEADER_DATE_CLASS} ${cls.NAVIGATE_CLASS}" tabindex="0" role="link"></div></div></div></div>`;
+        const moreEventWrapper: HTMLElement = createElement('div', {
+            className: cls.MORE_POPUP_WRAPPER_CLASS + ' e-popup-close',
+            innerHTML: moreEventPopup
+        });
+        if (this.parent.isAdaptive) {
+            document.body.appendChild(moreEventWrapper);
+            addClass([moreEventWrapper], cls.DEVICE_CLASS);
+        } else {
+            this.parent.element.appendChild(moreEventWrapper);
+        }
+        this.morePopup = new Popup(moreEventWrapper, {
+            targetType: (this.parent.isAdaptive ? 'container' : 'relative'),
+            enableRtl: this.parent.enableRtl,
+            hideAnimation: { name: 'ZoomOut', duration: 300 },
+            showAnimation: { name: 'ZoomIn', duration: 300 },
+            open: this.morePopupOpen.bind(this),
+            close: this.morePopupClose.bind(this),
+            collision: (this.parent.isAdaptive ? { X: 'fit', Y: 'fit' } :
+                (this.parent.enableRtl ? { X: 'flip', Y: 'fit' } : { X: 'flip', Y: 'flip' })),
+            viewPortElement: (this.parent.isAdaptive ? document.body : this.parent.element),
+            zIndex: (this.parent.isAdaptive ? 1002 : 2)
+        });
+        this.morePopup.element.setAttribute('role', 'dialog');
+        this.morePopup.element.setAttribute('aria-labelledby', this.parent.element.id + '_more_popup');
+        const closeButton: HTMLButtonElement = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_CLOSE_CLASS) as HTMLButtonElement;
+        this.renderButton('e-round', cls.ICON + ' ' + cls.CLOSE_ICON_CLASS, false, closeButton, this.closeClick);
+        EventHandler.add(this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS), 'click', this.navigationClick, this);
+    }
+
+    private renderQuickDialog(): void {
+        const buttonModel: ButtonPropsModel[] = [
+            { buttonModel: { cssClass: 'e-quick-alertok e-flat', isPrimary: true }, click: this.dialogButtonClick.bind(this) },
+            { buttonModel: { cssClass: 'e-quick-alertcancel e-flat', isPrimary: false }, click: this.dialogButtonClick.bind(this) },
+            {
+                buttonModel: { cssClass: 'e-quick-dialog-cancel e-disable e-flat', isPrimary: false },
+                click: this.dialogButtonClick.bind(this)
+            }];
+        if (this.parent.eventSettings.editFollowingEvents) {
+            const followingSeriesButton: ButtonPropsModel = {
+                buttonModel: { cssClass: 'e-quick-alertfollowing e-flat', isPrimary: false }, click: this.dialogButtonClick.bind(this)
+            };
+            buttonModel.splice(1, 0, followingSeriesButton);
+        }
+        this.quickDialog = new Dialog({
+            animationSettings: { effect: 'Zoom' },
+            buttons: buttonModel,
+            cssClass: cls.QUICK_DIALOG_CLASS,
+            closeOnEscape: true,
+            enableRtl: this.parent.enableRtl,
+            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
+            beforeClose: this.beforeQuickDialogClose.bind(this),
+            isModal: true,
+            position: { X: 'center', Y: 'center' },
+            showCloseIcon: true,
+            target: document.body,
+            visible: false,
+            width: 'auto'
+        });
+        const dialogElement: HTMLElement = createElement('div', { id: this.parent.element.id + 'QuickDialog' });
+        this.parent.element.appendChild(dialogElement);
+        this.quickDialog.appendTo(dialogElement);
+        const okButton: Element = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_OK);
+        if (okButton) {
+            okButton.setAttribute('aria-label', this.l10n.getConstant('occurrence'));
+            okButton.setAttribute('aria-label', okButton.innerHTML);
+        }
+        const cancelButton: Element = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_CANCEL);
+        if (cancelButton) {
+            cancelButton.setAttribute('aria-label', this.l10n.getConstant('series'));
+            cancelButton.setAttribute('aria-label', cancelButton.innerHTML);
+        }
+        if (this.quickDialog.element.querySelector('.e-dlg-closeicon-btn')) {
+            this.quickDialog.element.querySelector('.e-dlg-closeicon-btn').setAttribute('title', this.l10n.getConstant('close'));
+        }
+    }
+
+    // eslint-disable-next-line max-len
+    private renderButton(className: string, iconName: string, isDisabled: boolean, element: HTMLButtonElement, clickEvent: CallbackFunction): void {
+        const buttonObj: Button = new Button({
+            cssClass: className,
+            disabled: isDisabled,
+            enableRtl: this.parent.enableRtl,
+            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
+            iconCss: iconName
+        });
+        buttonObj.appendTo(element);
+        EventHandler.add(element, 'click', clickEvent, this);
+        removeClass([element], cls.ICON);
+    }
+
+    private quickDialogClass(action: string): void {
+        const classList: string[] = [
+            cls.QUICK_DIALOG_OCCURRENCE_CLASS, cls.QUICK_DIALOG_SERIES_CLASS, cls.QUICK_DIALOG_DELETE_CLASS,
+            cls.QUICK_DIALOG_CANCEL_CLASS, cls.QUICK_DIALOG_ALERT_BTN_CLASS, cls.DISABLE_CLASS
+        ];
+        const okButton: Element = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_OK);
+        const cancelButton: Element = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_CANCEL);
+        const followingEventButton: Element = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_FOLLOWING);
+        removeClass([okButton, cancelButton], classList);
+        addClass([this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_CANCEL_CLASS)], cls.DISABLE_CLASS);
+        if (this.parent.eventSettings.editFollowingEvents) {
+            addClass([followingEventButton], cls.DISABLE_CLASS);
+            removeClass([this.quickDialog.element], cls.FOLLOWING_EVENTS_DIALOG);
+        }
+        switch (action) {
+        case 'Recurrence':
+            addClass([okButton], cls.QUICK_DIALOG_OCCURRENCE_CLASS);
+            addClass([cancelButton], cls.QUICK_DIALOG_SERIES_CLASS);
+            if (this.parent.eventSettings.editFollowingEvents) {
+                removeClass([followingEventButton], cls.DISABLE_CLASS);
+                addClass([this.quickDialog.element], cls.FOLLOWING_EVENTS_DIALOG);
+                addClass([followingEventButton], cls.QUICK_DIALOG_FOLLOWING_EVENTS_CLASS);
+            }
+            break;
+        case 'Delete':
+            addClass([okButton], cls.QUICK_DIALOG_DELETE_CLASS);
+            addClass([cancelButton], cls.QUICK_DIALOG_CANCEL_CLASS);
+            break;
+        case 'Alert':
+            addClass([okButton], [cls.QUICK_DIALOG_ALERT_OK, cls.QUICK_DIALOG_ALERT_BTN_CLASS]);
+            addClass([cancelButton], [cls.QUICK_DIALOG_ALERT_CANCEL, cls.DISABLE_CLASS]);
+            break;
+        }
+    }
+
+    private applyFormValidation(): void {
+        const form: HTMLFormElement = this.quickPopup.element.querySelector('.' + cls.FORM_CLASS) as HTMLFormElement;
+        const rules: Record<string, any> = {};
+        rules[this.parent.eventSettings.fields.subject.name] = this.parent.eventSettings.fields.subject.validation;
+        this.fieldValidator.renderFormValidator(form, rules, this.quickPopup.element, this.parent.locale);
+    }
+
+    public openRecurrenceAlert(): void {
+        const editDeleteOnly: Element = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_OK);
+        if (editDeleteOnly) {
+            editDeleteOnly.innerHTML = this.l10n.getConstant(this.parent.currentAction === 'Delete' ? 'deleteEvent' : 'editEvent');
+            editDeleteOnly.setAttribute('aria-label', editDeleteOnly.innerHTML);
+        }
+        const editFollowingEventsOnly: Element = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_FOLLOWING);
+        if (editFollowingEventsOnly) {
+            editFollowingEventsOnly.innerHTML = this.l10n.getConstant('editFollowingEvent');
+            editFollowingEventsOnly.setAttribute('aria-label', editFollowingEventsOnly.innerHTML);
+        }
+        const editDeleteSeries: Element = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_CANCEL);
+        if (editDeleteSeries) {
+            editDeleteSeries.innerHTML = this.l10n.getConstant(this.parent.currentAction === 'Delete' ? 'deleteSeries' : 'editSeries');
+            editDeleteSeries.setAttribute('aria-label', editDeleteSeries.innerHTML);
+        }
+        this.quickDialog.content = this.l10n.getConstant('editContent');
+        this.quickDialog.header = this.l10n.getConstant(this.parent.currentAction === 'Delete' ? 'deleteTitle' : 'editTitle');
+        this.quickDialogClass('Recurrence');
+        this.showQuickDialog('RecurrenceAlert');
+    }
+
+    public openRecurrenceValidationAlert(type: string): void {
+        this.quickDialogClass('Alert');
+        const okButton: Element = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_OK);
+        okButton.innerHTML = this.l10n.getConstant('ok');
+        okButton.setAttribute('aria-label', okButton.innerHTML);
+        const cancelButton: Element = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_CANCEL);
+        cancelButton.innerHTML = this.l10n.getConstant('cancel');
+        cancelButton.setAttribute('aria-label', cancelButton.innerHTML);
+        this.quickDialog.header = this.l10n.getConstant('alert');
+        let dialogCancel: Element;
+        switch (type) {
+        case 'wrongPattern':
+            addClass([cancelButton], cls.DISABLE_CLASS);
+            this.quickDialog.content = this.l10n.getConstant('wrongPattern');
+            break;
+        case 'createError':
+            addClass([cancelButton], cls.DISABLE_CLASS);
+            this.quickDialog.content = this.l10n.getConstant('createError');
+            break;
+        case 'sameDayAlert':
+            addClass([cancelButton], cls.DISABLE_CLASS);
+            this.quickDialog.content = this.l10n.getConstant('sameDayAlert');
+            break;
+        case 'seriesChangeAlert':
+            dialogCancel = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_CANCEL_CLASS);
+            removeClass([cancelButton, dialogCancel], cls.DISABLE_CLASS);
+            this.quickDialog.content = this.l10n.getConstant('seriesChangeAlert');
+            okButton.innerHTML = this.l10n.getConstant('yes');
+            cancelButton.innerHTML = this.l10n.getConstant('no');
+            dialogCancel.innerHTML = this.l10n.getConstant('cancel');
+            break;
+        case 'occurrenceAlert':
+            addClass([cancelButton], cls.DISABLE_CLASS);
+            this.quickDialog.content = this.l10n.getConstant('occurenceAlert');
+            break;
+        }
+        if ((!this.parent.enableRecurrenceValidation && type === 'wrongPattern') || this.parent.enableRecurrenceValidation) {
+            this.showQuickDialog('RecurrenceValidationAlert');
+        }
+    }
+
+    public openDeleteAlert(): void {
+        if (this.parent.activeViewOptions.readonly) {
+            return;
+        }
+        const okButton: Element = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_OK);
+        if (okButton) {
+            okButton.innerHTML = this.l10n.getConstant('delete');
+            okButton.setAttribute('aria-label', okButton.innerHTML);
+        }
+        const cancelButton: Element = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_CANCEL);
+        if (cancelButton) {
+            cancelButton.innerHTML = this.l10n.getConstant('cancel');
+            cancelButton.setAttribute('aria-label', cancelButton.innerHTML);
+        }
+        this.quickDialog.content = ((<Record<string, any>[]>this.parent.activeEventData.event).length > 1) ?
+            this.l10n.getConstant('deleteMultipleContent') : this.l10n.getConstant('deleteContent');
+        this.quickDialog.header = ((<Record<string, any>[]>this.parent.activeEventData.event).length > 1) ?
+            this.l10n.getConstant('deleteMultipleEvent') : this.l10n.getConstant('deleteEvent');
+        this.quickDialogClass('Delete');
+        this.showQuickDialog('DeleteAlert');
+    }
+
+    public openValidationError(type: string, eventData?: Record<string, any> | Record<string, any>[]): void {
+        this.quickDialog.header = this.l10n.getConstant('alert');
+        this.quickDialog.content = this.l10n.getConstant(type);
+        const okButton: Element = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_OK);
+        if (okButton) {
+            okButton.innerHTML = this.l10n.getConstant('ok');
+            okButton.setAttribute('aria-label', okButton.innerHTML);
+        }
+        const cancelButton: Element = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_CANCEL);
+        if (cancelButton) {
+            cancelButton.innerHTML = this.l10n.getConstant('cancel');
+            okButton.setAttribute('aria-label', cancelButton.innerHTML);
+        }
+        this.quickDialogClass('Alert');
+        this.showQuickDialog(type === 'overlapAlert' ? 'OverlapAlert' : 'ValidationAlert', eventData);
+    }
+
+    private showQuickDialog(popupType: PopupType, eventData?: Record<string, any> | Record<string, any>[]): void {
+        this.quickDialog.dataBind();
+        const eventProp: PopupOpenEventArgs = {
+            type: popupType, cancel: false, element: this.quickDialog.element,
+            data: extend({}, (eventData || this.parent.activeEventData.event), null, true) as Record<string, any>
+        };
+        if (!this.parent.activeViewOptions.allowOverlap) {
+            eventProp.overlapEvents = this.parent.overlapAppointments;
+        }
+        this.parent.trigger(event.popupOpen, eventProp, (popupArgs: PopupOpenEventArgs) => {
+            if (!popupArgs.cancel) {
+                this.quickDialog.show();
+            }
+        });
+    }
+
+    private createMoreEventList(eventCollection: Record<string, any>[], groupOrder: string[], groupIndex: string): HTMLElement {
+        const fields: EventFieldsMapping = this.parent.eventFields;
+        const moreEventContentEle: HTMLElement = createElement('div', { className: cls.MORE_EVENT_CONTENT_CLASS });
+        let moreEventWrapperEle: HTMLElement = createElement('div', { className: cls.MORE_EVENT_WRAPPER_CLASS });
+        if (eventCollection.length === 0) {
+            moreEventWrapperEle = createElement('div', {
+                className: cls.MORE_EVENT_CONTENT_CLASS,
+                innerHTML: this.l10n.getConstant('emptyContainer')
+            });
+        } else {
+            for (const eventData of eventCollection) {
+                const eventText: string = (eventData[fields.subject] || this.parent.eventSettings.fields.subject.default
+                    || this.parent.localeObj.getConstant('addTitle')) as string;
+                const appointmentElement: HTMLElement = createElement('div', {
+                    className: cls.APPOINTMENT_CLASS,
+                    attrs: {
+                        'data-id': '' + eventData[fields.id],
+                        'data-guid': eventData.Guid as string, 'role': 'button', 'tabindex': '0',
+                        'aria-disabled': this.parent.eventBase.getReadonlyAttribute(eventData),
+                        'aria-label': this.parent.getAnnouncementString(eventData)
+                    }
+                });
+                if (eventData[fields.isReadonly]) {
+                    addClass([appointmentElement], 'e-read-only');
+                }
+                let templateElement: HTMLElement[];
+                if (!isNullOrUndefined(this.parent.activeViewOptions.eventTemplate)) {
+                    const tempId: string = this.parent.element.id + '_' + this.parent.activeViewOptions.eventTemplateName + 'eventTemplate';
+                    templateElement = this.parent.getAppointmentTemplate()(eventData, this.parent, 'eventTemplate', tempId, false,
+                                                                           undefined, undefined, this.parent.root);
+                    append(templateElement, appointmentElement);
+                } else {
+                    appointmentElement.appendChild(createElement('div', { className: cls.SUBJECT_CLASS }));
+                    this.parent.sanitize(eventText, appointmentElement.firstElementChild as HTMLElement);
+                }
+                if (!isNullOrUndefined(groupIndex)) {
+                    appointmentElement.setAttribute('data-group-index', groupIndex);
+                }
+                if (!isNullOrUndefined(eventData[fields.recurrenceRule])) {
+                    const iconClass: string = (eventData[fields.id] === eventData[fields.recurrenceID]) ?
+                        cls.EVENT_RECURRENCE_ICON_CLASS : cls.EVENT_RECURRENCE_EDIT_ICON_CLASS;
+                    appointmentElement.appendChild(createElement('div', { className: cls.ICON + ' ' + iconClass }));
+                }
+                const args: EventRenderedArgs = {
+                    data: extend({}, eventData, null, true) as Record<string, any>,
+                    element: appointmentElement, cancel: false
+                };
+                this.parent.trigger(event.eventRendered, args, (eventArgs: EventRenderedArgs) => {
+                    if (!eventArgs.cancel) {
+                        moreEventWrapperEle.appendChild(appointmentElement);
+                        const isPreventCrud: boolean = this.parent.isAdaptive || this.parent.currentView === 'Year';
+                        this.parent.eventBase.wireAppointmentEvents(appointmentElement, eventData, isPreventCrud);
+                        this.parent.eventBase.applyResourceColor(appointmentElement, eventData, 'backgroundColor', groupOrder);
+                    }
+                });
+            }
+        }
+        moreEventContentEle.appendChild(moreEventWrapperEle);
+        return moreEventContentEle;
+    }
+
+    public tapHoldEventPopup(e: Event): void {
+        const target: Element = closest(<HTMLElement>e.target, '.' + cls.APPOINTMENT_CLASS);
+        this.parent.selectedElements = [];
+        this.isMultipleEventSelect = true;
+        this.parent.eventBase.getSelectedEventElements(target);
+        this.parent.activeEventData = this.parent.eventBase.getSelectedEvents();
+        const guid: string = target.getAttribute('data-guid');
+        const eventObj: Record<string, any> = this.parent.eventBase.getEventByGuid(guid);
+        if (isNullOrUndefined(eventObj)) {
+            return;
+        }
+        const eventTitle: string = (eventObj[this.parent.eventFields.subject] || this.l10n.getConstant('noTitle')) as string;
+        const eventTemplate: string = `<div class="${cls.MULTIPLE_EVENT_POPUP_CLASS}"><div class="${cls.POPUP_HEADER_CLASS}">` +
+            `<button class="${cls.CLOSE_CLASS}" title="${this.l10n.getConstant('close')}"></button>` +
+            `<div class="${cls.SUBJECT_CLASS}">${eventTitle}</div>` +
+            `<button class="${cls.EDIT_CLASS}" title="${this.l10n.getConstant('edit')}"></button>` +
+            `<button class="${cls.DELETE_CLASS}" title="${this.l10n.getConstant('delete')}"></button></div></div>`;
+        this.quickPopup.element.innerHTML = eventTemplate;
+        const closeIcon: HTMLButtonElement = this.quickPopup.element.querySelector('.' + cls.CLOSE_CLASS) as HTMLButtonElement;
+        this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.CLOSE_ICON_CLASS, false, closeIcon, this.closeClick);
+        const readonly: boolean = this.parent.activeViewOptions.readonly || eventObj[this.parent.eventFields.isReadonly] as boolean;
+        const editAction: boolean = !this.parent.eventSettings.allowEditing || readonly;
+        const deleteAction: boolean = !this.parent.eventSettings.allowDeleting || readonly;
+        const editIcon: HTMLButtonElement = this.quickPopup.element.querySelector('.' + cls.EDIT_CLASS) as HTMLButtonElement;
+        if (editIcon) {
+            this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.EDIT_ICON_CLASS, editAction, editIcon, this.editClick);
+        }
+        const deleteIcon: HTMLButtonElement = this.quickPopup.element.querySelector('.' + cls.DELETE_CLASS) as HTMLButtonElement;
+        if (deleteIcon) {
+            this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.DELETE_ICON_CLASS, deleteAction, deleteIcon, this.deleteClick);
+        }
+        this.beforeQuickPopupOpen(target, this.parent.eventBase.getPageCoordinates(e as MouseEvent & TouchEvent));
+    }
+
+    private isCellBlocked(args: CellClickEventArgs): boolean {
+        const tempObj: Record<string, any> = {};
+        tempObj[this.parent.eventFields.startTime] = this.parent.activeCellsData.startTime;
+        tempObj[this.parent.eventFields.endTime] = this.parent.activeCellsData.endTime;
+        tempObj[this.parent.eventFields.isAllDay] = this.parent.activeCellsData.isAllDay;
+        if (this.parent.activeViewOptions.group.resources.length > 0) {
+            const targetCell: HTMLElement = args.element instanceof Array ? args.element[0] : args.element;
+            const groupIndex: number = parseInt(targetCell.getAttribute('data-group-index'), 10);
+            this.parent.resourceBase.setResourceValues(tempObj, isNaN(groupIndex) ? null : groupIndex);
+        }
+        return this.parent.eventBase.isBlockRange(tempObj);
+    }
+
+    private cellClick(args: CellClickEventArgs): void {
+        const date: Date = new Date(args.startTime.getTime());
+        if (!this.parent.showQuickInfo || !this.parent.eventSettings.allowAdding ||
+            this.parent.currentView === 'MonthAgenda' || this.isCellBlocked(args) ||
+            !this.parent.isMinMaxDate(new Date(date.setHours(0, 0, 0, 0)))) {
+            this.quickPopupHide();
+            return;
+        }
+        const targetEle: Element = !isNullOrUndefined(args.event) ? args.event.target as Element : args.element as Element;
+        if (this.parent.isAdaptive) {
+            this.quickPopupHide();
+            let newEventClone: HTMLElement = this.parent.element.querySelector('.' + cls.NEW_EVENT_CLASS) as HTMLElement;
+            if (isNullOrUndefined(newEventClone)) {
+                newEventClone = createElement('div', {
+                    className: cls.NEW_EVENT_CLASS,
+                    innerHTML: `<div class="e-title">+ ${this.l10n.getConstant('newEvent')}</div>`
+                });
+            }
+            const targetCell: Element = closest(targetEle, '.' + cls.WORK_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS);
+            if (targetCell) {
+                targetCell.appendChild(newEventClone);
+            }
+            return;
+        }
+        const target: Element = closest(targetEle, '.' + cls.WORK_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS + ',.' +
+            cls.HEADER_CELLS_CLASS);
+        if (isNullOrUndefined(target) || targetEle.classList.contains(cls.MORE_INDICATOR_CLASS)) {
+            return;
+        }
+        const isSameTarget: boolean = this.quickPopup.relateTo === target;
+        if (isSameTarget && this.quickPopup.element.classList.contains(cls.POPUP_OPEN)) {
+            const subjectElement: HTMLInputElement = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS) as HTMLInputElement;
+            if (subjectElement) {
+                subjectElement.focus();
+            }
+            return;
+        } else if (this.quickPopup.element) {
+            this.destroyPopupButtons('quickPopup');
+        }
+        const temp: Record<string, any> = {};
+        temp[this.parent.eventFields.startTime] = this.parent.activeCellsData.startTime;
+        temp[this.parent.eventFields.endTime] = this.parent.activeCellsData.endTime;
+        temp[this.parent.eventFields.isAllDay] = this.parent.activeCellsData.isAllDay;
+        const quickCellPopup: HTMLElement = createElement('div', { className: cls.CELL_POPUP_CLASS });
+        quickCellPopup.appendChild(this.getPopupHeader('Cell', temp));
+        quickCellPopup.appendChild(this.getPopupContent('Cell', args, temp));
+        quickCellPopup.appendChild(this.getPopupFooter('Cell', temp));
+        this.quickPopup.element.setAttribute('aria-label', this.l10n.getConstant('newEvent'));
+        const subjectElement: HTMLInputElement = quickCellPopup.querySelector('.' + cls.SUBJECT_CLASS) as HTMLInputElement;
+        if (subjectElement) {
+            Input.createInput({ element: subjectElement, properties: { placeholder: this.l10n.getConstant('addTitle') } });
+        }
+        if (!isNullOrUndefined(this.parent.eventSettings.fields.subject.default)) {
+            subjectElement.value = this.parent.eventSettings.fields.subject.default;
+        }
+        const closeIcon: HTMLButtonElement = quickCellPopup.querySelector('.' + cls.CLOSE_CLASS) as HTMLButtonElement;
+        if (closeIcon) {
+            this.renderButton('e-flat e-round e-small', cls.ICON + ' ' + cls.CLOSE_ICON_CLASS, false, closeIcon, this.popupClose);
+        }
+        const moreButton: HTMLButtonElement = quickCellPopup.querySelector('.' + cls.QUICK_POPUP_EVENT_DETAILS_CLASS) as HTMLButtonElement;
+        if (moreButton) {
+            this.renderButton('e-flat', '', false, moreButton, this.detailsClick);
+        }
+        const saveButton: HTMLButtonElement = quickCellPopup.querySelector('.' + cls.EVENT_CREATE_CLASS) as HTMLButtonElement;
+        if (saveButton) {
+            this.renderButton('e-flat e-primary', '', this.parent.activeViewOptions.readonly, saveButton, this.saveClick);
+        }
+        if (this.morePopup) { this.morePopup.hide(); }
+        this.quickPopup.content = quickCellPopup;
+        this.quickPopup.relateTo = target as HTMLElement;
+        this.quickPopup.dataBind();
+        this.beforeQuickPopupOpen(target, this.parent.eventBase.getPageCoordinates(args.event as MouseEvent & TouchEvent));
+    }
+
+    private isSameEventClick(events: EventClickArgs): boolean {
+        const isSameTarget: boolean = this.quickPopup.relateTo === closest(<HTMLElement>events.element, '.' + cls.APPOINTMENT_CLASS);
+        if (isSameTarget && this.quickPopup.element.classList.contains(cls.POPUP_OPEN)) {
+            const editIcon: HTMLButtonElement = this.quickPopup.element.querySelector('.' + cls.EDIT_CLASS) as HTMLButtonElement;
+            if (editIcon) {
+                editIcon.focus();
+            }
+            if (!this.parent.isAdaptive) {
+                const editButton: HTMLButtonElement = this.quickPopup.element.querySelector('.' + cls.EDIT_EVENT_CLASS) as HTMLButtonElement;
+                if (editButton) {
+                    editButton.focus();
+                }
+            }
+            return true;
+        }
+        return false;
+    }
+
+    private isQuickTemplate(type: TemplateType): boolean {
+        return this.parent.quickInfoTemplates.templateType === 'Both' || this.parent.quickInfoTemplates.templateType === type;
+    }
+
+    private eventClick(events: EventClickArgs): void {
+        if (this.parent.eventTooltip) {
+            this.parent.eventTooltip.close();
+        }
+        if (!this.parent.showQuickInfo) { return; }
+        if (this.parent.isAdaptive && this.isMultipleEventSelect) {
+            this.updateTapHoldEventPopup(closest(<HTMLElement>events.element, '.' + cls.APPOINTMENT_CLASS));
+        } else {
+            const isSameTarget: boolean = this.isSameEventClick(events);
+            this.parent.selectedElements = [];
+            if (isSameTarget) {
+                return;
+            } else if (this.quickPopup.element) {
+                this.destroyPopupButtons('quickPopup');
+            }
+            const eventData: Record<string, any> = <Record<string, any>>events.event;
+            const quickEventPopup: HTMLElement = createElement('div', { className: cls.EVENT_POPUP_CLASS });
+            quickEventPopup.appendChild(this.getPopupHeader('Event', eventData));
+            quickEventPopup.appendChild(this.getPopupContent('Event', events, eventData));
+            quickEventPopup.appendChild(this.getPopupFooter('Event', eventData));
+            this.quickPopup.element.setAttribute('aria-label', this.l10n.getConstant('editEvent'));
+            const readonly: boolean = this.parent.activeViewOptions.readonly || eventData[this.parent.eventFields.isReadonly] as boolean;
+            const editAction: boolean = !this.parent.eventSettings.allowEditing || readonly;
+            const deleteAction: boolean = !this.parent.eventSettings.allowDeleting || readonly;
+            const editIcon: HTMLButtonElement = quickEventPopup.querySelector('.' + cls.EDIT_CLASS) as HTMLButtonElement;
+            const buttonClass: string = 'e-flat e-round e-small';
+            if (editIcon) {
+                this.renderButton(buttonClass, cls.ICON + ' ' + cls.EDIT_ICON_CLASS, editAction, editIcon, this.editClick);
+            }
+            const deleteIcon: HTMLButtonElement = quickEventPopup.querySelector('.' + cls.DELETE_CLASS) as HTMLButtonElement;
+            if (deleteIcon) {
+                this.renderButton(buttonClass, cls.ICON + ' ' + cls.DELETE_ICON_CLASS, deleteAction, deleteIcon, this.deleteClick);
+            }
+            const closeIcon: HTMLButtonElement = quickEventPopup.querySelector('.' + cls.CLOSE_CLASS) as HTMLButtonElement;
+            if (closeIcon) {
+                this.renderButton(buttonClass, cls.ICON + ' ' + cls.CLOSE_ICON_CLASS, false, closeIcon, this.popupClose);
+            }
+            const editButton: HTMLButtonElement = quickEventPopup.querySelector('.' + cls.EDIT_EVENT_CLASS) as HTMLButtonElement;
+            if (editButton) {
+                this.renderButton('e-flat e-primary', '', editAction, editButton, this.editClick);
+            }
+            const deleteButton: HTMLButtonElement = quickEventPopup.querySelector('.' + cls.DELETE_EVENT_CLASS) as HTMLButtonElement;
+            if (deleteButton) {
+                this.renderButton('e-flat', '', deleteAction, deleteButton, this.deleteClick);
+            }
+            if (this.morePopup && !closest(<Element>events.element, '.' + cls.MORE_EVENT_WRAPPER_CLASS)) { this.morePopup.hide(); }
+            this.quickPopup.content = quickEventPopup;
+            this.quickPopup.relateTo = this.parent.isAdaptive ? document.body :
+                closest(<HTMLElement>events.element, '.' + cls.APPOINTMENT_CLASS) as HTMLElement;
+            this.quickPopup.dataBind();
+            this.beforeQuickPopupOpen(events.element as Element, this.parent.eventBase.getPageCoordinates((events as any).originalEvent));
+        }
+    }
+
+    private getPopupHeader(headerType: TemplateType, headerData: Record<string, any>): HTMLElement {
+        const headerTemplate: HTMLElement = createElement('div', { className: cls.POPUP_HEADER_CLASS });
+        if (this.isQuickTemplate(headerType) && this.parent.quickInfoTemplates.header) {
+            const headerArgs: Record<string, any> =
+                extend({}, headerData, { elementType: headerType.toLowerCase() }, true) as Record<string, any>;
+            const templateId: string = this.parent.element.id;
+            const headerTemp: HTMLElement[] = [].slice.call(
+                this.parent.getQuickInfoTemplatesHeader()(headerArgs, this.parent, 'header', templateId + '_headerTemplate', false));
+            append([].slice.call(headerTemp), headerTemplate);
+        } else {
+            let header: string;
+            let args: Record<string, any>;
+            switch (headerType) {
+            case 'Cell':
+                header = `<div class="${cls.POPUP_HEADER_ICON_WRAPPER}"><button class="${cls.CLOSE_CLASS}" title=` +
+                    `"${this.l10n.getConstant('close')}"></button></div>`;
+                break;
+            case 'Event':
+                args = this.getFormattedString(headerData);
+                header = `<div class="${cls.POPUP_HEADER_ICON_WRAPPER}">` +
+                    `<button class="${cls.EDIT_CLASS + ' ' + cls.ICON}" title="${this.l10n.getConstant('edit')}"></button>` +
+                    `<button class="${cls.DELETE_CLASS + ' ' + cls.ICON}" title="${this.l10n.getConstant('delete')}"></button>` +
+                    `<button class="${cls.CLOSE_CLASS}" title="${this.l10n.getConstant('close')}"></button></div>` +
+                    `<div class="${cls.SUBJECT_WRAP}"><div class="${cls.SUBJECT_CLASS} ${cls.TEXT_ELLIPSIS}" ` +
+                    `title="${args.eventSubject ? args.eventSubject.replaceAll('"', '\'') : args.eventSubject}"></div></div >`;
+                break;
+            }
+            const templateWrapper: HTMLElement = createElement('div', { innerHTML: header });
+            if (headerType === 'Event') {
+                const subjectText: HTMLElement = templateWrapper.querySelector('.' + cls.SUBJECT_CLASS);
+                this.parent.sanitize(args.eventSubject, subjectText);
+            }
+            append([].slice.call(templateWrapper.childNodes), headerTemplate);
+        }
+        return headerTemplate;
+    }
+
+    private getPopupContent(type: TemplateType, args: CellClickEventArgs | EventClickArgs, data: Record<string, any>): HTMLElement {
+        const contentTemplate: HTMLElement = createElement('div', { className: cls.POPUP_CONTENT_CLASS });
+        if (this.isQuickTemplate(type) && this.parent.quickInfoTemplates.content) {
+            const contentArgs: Record<string, any> =
+                extend({}, data, { elementType: type.toLowerCase() }, true) as Record<string, any>;
+            const templateId: string = this.parent.element.id;
+            const contentTemp: HTMLElement[] = [].slice.call(
+                this.parent.getQuickInfoTemplatesContent()(contentArgs, this.parent, 'content', templateId + '_contentTemplate', false));
+            append([].slice.call(contentTemp), contentTemplate);
+        } else {
+            let content: string;
+            let cellDetails: Record<string, any>;
+            let argsData: Record<string, any>;
+            const resourceText: string = this.getResourceText(args, type.toLowerCase());
+            switch (type) {
+            case 'Cell':
+                cellDetails = this.getFormattedString(data);
+                content = `<table class="${cls.POPUP_TABLE_CLASS}"><tbody><tr><td><form class="${cls.FORM_CLASS}">
+                    <input class="${cls.SUBJECT_CLASS} ${EVENT_FIELD}" type="text" name=` +
+                    `"${this.parent.eventFields.subject}" /></form></td></tr><tr><td><div class="${cls.DATE_TIME_CLASS}">` +
+                    `<div class="${cls.DATE_TIME_ICON_CLASS} ${cls.ICON}"></div><div class="${cls.DATE_TIME_DETAILS_CLASS} ` +
+                    `${cls.TEXT_ELLIPSIS}">${cellDetails.details}</div></div>` +
+                    `${this.parent.activeViewOptions.group.resources.length > 0 ? `<div class="${cls.RESOURCE_CLASS}">` +
+                        `<div class="${cls.RESOURCE_ICON_CLASS} ${cls.ICON} "></div><div class="${cls.RESOURCE_DETAILS_CLASS} ` +
+                        `${cls.TEXT_ELLIPSIS}"></div></div>` : ''}</td></tr></tbody></table>`;
+                break;
+            case 'Event':
+                argsData = this.getFormattedString(data);
+                content = '<div class="' + cls.DATE_TIME_CLASS + '"><div class="' + cls.DATE_TIME_ICON_CLASS + ' ' + cls.ICON +
+                    '"></div><div class="' + cls.DATE_TIME_WRAPPER_CLASS + ' ' + cls.TEXT_ELLIPSIS + '"><div class="' +
+                    cls.DATE_TIME_DETAILS_CLASS + ' ' + cls.TEXT_ELLIPSIS + '">' + argsData.details + '</div>';
+                if (data[this.parent.eventFields.recurrenceRule]) {
+                    content += '<div class="' + cls.RECURRENCE_SUMMARY_CLASS + ' ' + cls.TEXT_ELLIPSIS + '">' +
+                        this.getRecurrenceSummary(data) + '</div>';
+                }
+                content += '</div></div>';
+                if (data[this.parent.eventFields.location]) {
+                    content += '<div class="' + cls.LOCATION_CLASS + '"><div class="' + cls.LOCATION_ICON_CLASS + ' ' +
+                    cls.ICON + '"></div><div class="' + cls.LOCATION_DETAILS_CLASS + ' ' + cls.TEXT_ELLIPSIS + '"></div></div>';
+                }
+                if (data[this.parent.eventFields.startTimezone] || data[this.parent.eventFields.endTimezone]) {
+                    content += '<div class="' + cls.TIME_ZONE_CLASS + '"><div class="' + cls.TIME_ZONE_ICON_CLASS + ' ' + cls.ICON +
+                        '"></div><div class="' + cls.TIME_ZONE_DETAILS_CLASS + ' ' + cls.TEXT_ELLIPSIS + '">' +
+                        this.getTimezone(data) + '</div></div>';
+                }
+                if (data[this.parent.eventFields.description]) {
+                    content += '<div class="' + cls.DESCRIPTION_CLASS + '"><div class="' + cls.DESCRIPTION_ICON_CLASS + ' ' + cls.ICON +
+                    '"></div><div class="' + cls.DESCRIPTION_DETAILS_CLASS + ' ' + cls.TEXT_ELLIPSIS + '"></div></div>';
+                }
+                if (this.parent.resourceCollection.length > 0) {
+                    content += '<div class="' + cls.RESOURCE_CLASS + '"><div class="' + cls.RESOURCE_ICON_CLASS + ' ' + cls.ICON +
+                    '"></div><div class="' + cls.RESOURCE_DETAILS_CLASS + ' ' + cls.TEXT_ELLIPSIS + '"></div></div>';
+                }
+                break;
+            }
+            const templateWrapper: HTMLElement = createElement('div', { innerHTML: content });
+            const form: HTMLElement = templateWrapper.querySelector('form');
+            if (form) {
+                form.onsubmit = () => { return false; };
+            }
+            if (data[this.parent.eventFields.location]) {
+                const locationDetails: HTMLElement = templateWrapper.querySelector('.' + cls.LOCATION_DETAILS_CLASS);
+                if (!isNullOrUndefined(locationDetails)) {
+                    this.parent.sanitize(data[this.parent.eventFields.location], locationDetails);
+                }
+            }
+            if (data[this.parent.eventFields.description]) {
+                const descriptionDetails: HTMLElement = templateWrapper.querySelector('.' + cls.DESCRIPTION_DETAILS_CLASS);
+                if (!isNullOrUndefined(descriptionDetails)) {
+                    this.parent.sanitize(data[this.parent.eventFields.description], descriptionDetails);
+                }
+            }
+            if (resourceText) {
+                const resourceDetails: HTMLElement = templateWrapper.querySelector('.' + cls.RESOURCE_DETAILS_CLASS);
+                if (!isNullOrUndefined(resourceDetails)) {
+                    this.parent.sanitize(resourceText, resourceDetails);
+                }
+            }
+            append([].slice.call(templateWrapper.childNodes), contentTemplate);
+        }
+        return contentTemplate;
+    }
+
+    private getPopupFooter(footerType: TemplateType, footerData: Record<string, any>): HTMLElement {
+        const footerTemplate: HTMLElement = createElement('div', { className: cls.POPUP_FOOTER_CLASS });
+        if (this.isQuickTemplate(footerType) && this.parent.quickInfoTemplates.footer) {
+            const footerArgs: Record<string, any> =
+                extend({}, footerData, { elementType: footerType.toLowerCase() }, true) as Record<string, any>;
+            const templateId: string = this.parent.element.id;
+            const footerTemp: HTMLElement[] = [].slice.call(
+                this.parent.getQuickInfoTemplatesFooter()(footerArgs, this.parent, 'footer', templateId + '_footerTemplate', false));
+            append([].slice.call(footerTemp), footerTemplate);
+        } else {
+            let footer: string;
+            switch (footerType) {
+            case 'Cell':
+                footer = `<button class="${cls.QUICK_POPUP_EVENT_DETAILS_CLASS + ' ' + cls.TEXT_ELLIPSIS}" title=` +
+                    `"${this.l10n.getConstant('moreDetails')}">${this.l10n.getConstant('moreDetails')}</button>` +
+                    `<button class="${cls.EVENT_CREATE_CLASS} ${cls.TEXT_ELLIPSIS}" title="${this.l10n.getConstant('save')}">` +
+                    `${this.l10n.getConstant('save')}</button>`;
+                break;
+            case 'Event':
+                footer = `${this.parent.isAdaptive ? '' : `<button class="${cls.EDIT_EVENT_CLASS} ` +
+                    `${cls.TEXT_ELLIPSIS}" title="${this.l10n.getConstant('edit')}">${this.l10n.getConstant('edit')}</button>` +
+                    `<button class="${cls.DELETE_EVENT_CLASS} ${cls.TEXT_ELLIPSIS}" title="${this.l10n.getConstant('delete')}">` +
+                    `${this.l10n.getConstant('delete')}</button>`}`;
+                break;
+            }
+            const templateWrapper: HTMLElement = createElement('div', { innerHTML: footer });
+            append([].slice.call(templateWrapper.childNodes), footerTemplate);
+        }
+        return footerTemplate;
+    }
+
+    public getResourceText(args: CellClickEventArgs | EventClickArgs, type: string): string {
+        if (this.parent.resourceCollection.length === 0) {
+            return null;
+        }
+        let resourceValue: string = '';
+        if (this.parent.activeViewOptions.group.resources.length === 0) {
+            const resourceCollection: ResourcesModel = this.parent.resourceBase.resourceCollection.slice(-1)[0];
+            const resourceData: Record<string, number>[] = resourceCollection.dataSource as Record<string, number>[];
+            if (type === 'event') {
+                const eventData: Record<string, any> = args.event as Record<string, any>;
+                for (const data of resourceData) {
+                    const resourceId: number | number[] = eventData[resourceCollection.field] as number | number[];
+                    if (resourceId instanceof Array) {
+                        if (resourceId.indexOf(data[resourceCollection.idField]) > -1) {
+                            const id: number = resourceId[resourceId.indexOf(data[resourceCollection.idField])];
+                            const resource: Record<string, number> = resourceData.filter((e: Record<string, number>) =>
+                                e[resourceCollection.idField] === id)[0];
+                            resourceValue += (resourceValue === '') ? resource[resourceCollection.textField] :
+                                ', ' + resource[resourceCollection.textField];
+                        }
+                    } else if (data[resourceCollection.idField] === resourceId) {
+                        resourceValue = data[resourceCollection.textField].toString();
+                    }
+                }
+            } else {
+                resourceValue = resourceData[0][resourceCollection.textField].toString();
+            }
+        } else {
+            if (type === 'event') {
+                const eventData: Record<string, any> = args.event as Record<string, any>;
+                let resourceData: string[];
+                let lastResource: ResourcesModel;
+                for (let i: number = this.parent.resourceBase.resourceCollection.length - 1; i >= 0; i--) {
+                    resourceData = eventData[this.parent.resourceBase.resourceCollection[parseInt(i.toString(), 10)].field] as string[];
+                    if (!isNullOrUndefined(resourceData)) {
+                        lastResource = this.parent.resourceBase.resourceCollection[parseInt(i.toString(), 10)];
+                        break;
+                    }
+                }
+                if (!Array.isArray(resourceData)) {
+                    resourceData = [resourceData];
+                }
+                const resNames: string[] = [];
+                const lastResourceData: Record<string, any>[] = lastResource.dataSource as Record<string, any>[];
+                resourceData.forEach((value: string) => {
+                    let text: string;
+                    const i: number = util.findIndexInData(lastResourceData, lastResource.idField, value);
+                    if (i > -1) {
+                        text = lastResourceData[parseInt(i.toString(), 10)][lastResource.textField] as string;
+                    }
+                    if (text) { resNames.push(text); }
+                });
+                resourceValue = resNames.join(', ');
+            } else {
+                const argsData: CellClickEventArgs = args as CellClickEventArgs;
+                const groupIndex: number = !isNullOrUndefined(argsData.groupIndex) ? argsData.groupIndex : 0;
+                const resourceDetails: TdData = this.parent.resourceBase.lastResourceLevel[parseInt(groupIndex.toString(), 10)];
+                resourceValue = resourceDetails.resourceData[resourceDetails.resource.textField] as string;
+            }
+        }
+        return resourceValue;
+    }
+
+    private getFormattedString(eventData: Record<string, any>): Record<string, any> {
+        const fields: EventFieldsMapping = this.parent.eventFields;
+        const eventSubject: string = (eventData[fields.subject] || this.l10n.getConstant('noTitle')) as string;
+        const startDate: Date = eventData[fields.startTime] as Date;
+        const endDate: Date = eventData[fields.endTime] as Date;
+        const startDateDetails: string = this.getDateFormat(startDate, 'long');
+        const endDateDetails: string = (eventData[fields.isAllDay] && endDate.getHours() === 0 && endDate.getMinutes() === 0) ?
+            this.getDateFormat(util.addDays(new Date(endDate.getTime()), -1), 'long') :
+            this.getDateFormat(endDate, 'long');
+        const startTimeDetail: string = this.parent.getTimeString(startDate);
+        const endTimeDetail: string = this.parent.getTimeString(endDate);
+        let details: string = '';
+        const spanLength: number = endDate.getDate() !== startDate.getDate() &&
+            (endDate.getTime() - startDate.getTime()) / (60 * 60 * 1000) < 24 ? 1 : 0;
+        if (eventData[fields.isAllDay]) {
+            details = startDateDetails + ' (' + this.l10n.getConstant('allDay') + ')';
+            if (((util.getUniversalTime(endDate) - util.getUniversalTime(startDate)) / util.MS_PER_DAY) > 1) {
+                details += '&nbsp;-&nbsp;' + endDateDetails + ' (' + this.l10n.getConstant('allDay') + ')';
+            }
+        } else if ((((util.getUniversalTime(endDate) - util.getUniversalTime(startDate)) / util.MS_PER_DAY) >= 1) || spanLength > 0) {
+            details = startDateDetails + ' (' + startTimeDetail + ')' + '&nbsp;-&nbsp;' + endDateDetails + ' (' + endTimeDetail + ')';
+        } else {
+            details = startDateDetails + ' (' + (startTimeDetail + '&nbsp;-&nbsp;' + endTimeDetail) + ')';
+        }
+        return { eventSubject: eventSubject, details: details };
+    }
+
+    public moreEventClick(data: EventClickArgs, endDate: Date, groupIndex?: string): void {
+        this.quickPopupHide(true);
+        const moreEventContentEle: Element = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_CONTENT_CLASS);
+        if (moreEventContentEle) {
+            remove(moreEventContentEle);
+        }
+        const selectedDate: string = ((data.date).getTime()).toString();
+        const target: Element = closest(<Element>data.element, '.' + cls.MORE_INDICATOR_CLASS + ',.' + cls.WORK_CELLS_CLASS);
+        const day: string = this.parent.globalize.formatDate(data.date, { format: 'E', calendar: this.parent.getCalendarMode() });
+        this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DAY_CLASS).innerHTML = util.capitalizeFirstWord(day, 'single');
+        const dateElement: Element = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS);
+        dateElement.innerHTML = this.getDateFormat(data.date, 'd');
+        dateElement.setAttribute('data-date', selectedDate);
+        dateElement.setAttribute('data-end-date', endDate.getTime().toString());
+        let groupOrder: string[];
+        if (!isNullOrUndefined(groupIndex)) {
+            dateElement.setAttribute('data-group-index', groupIndex);
+            groupOrder = this.parent.resourceBase.lastResourceLevel[parseInt(groupIndex, 10)].groupOrder;
+        }
+        const moreEventElements: HTMLElement = this.createMoreEventList(data.event as Record<string, any>[], groupOrder, groupIndex);
+        this.morePopup.element.querySelector('.' + cls.MORE_EVENT_POPUP_CLASS).appendChild(moreEventElements);
+        removeClass(this.morePopup.element.querySelector('.' + cls.MORE_EVENT_DATE_HEADER_CLASS).childNodes, cls.CURRENTDATE_CLASS);
+        if (util.resetTime(data.date).getTime() === util.resetTime(this.parent.getCurrentTime()).getTime()) {
+            addClass(this.morePopup.element.querySelector('.' + cls.MORE_EVENT_DATE_HEADER_CLASS).childNodes, cls.CURRENTDATE_CLASS);
+        }
+        if (!this.parent.isAdaptive) {
+            if (this.parent.currentView.indexOf('Timeline') !== -1) {
+                const gIndex: string = target.getAttribute('data-group-index');
+                const startDate: Date = new Date(parseInt(target.getAttribute('data-start-date'), 10));
+                startDate.setHours(startDate.getHours(), startDate.getMinutes(), 0);
+                const tdDate: string = startDate.getTime().toString();
+                if (isNullOrUndefined(gIndex)) {
+                    this.morePopup.relateTo = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS +
+                        ' tbody tr td[data-date="' + tdDate + '"]') as HTMLElement;
+                } else {
+                    this.morePopup.relateTo = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS +
+                        ' tbody tr td[data-group-index="' + gIndex + '"][data-date="' + tdDate + '"]') as HTMLElement;
+                    if (isNullOrUndefined(this.morePopup.relateTo)) {
+                        const workCells: HTMLElement[] = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CONTENT_WRAP_CLASS +
+                            ' tbody tr td[data-group-index="' + gIndex + '"]'));
+                        for (let i: number = 0; i < workCells.length; i++) {
+                            const date: string = workCells[parseInt(i.toString(), 10)].getAttribute('data-date');
+                            if (date < tdDate) {
+                                this.morePopup.relateTo = workCells[parseInt(i.toString(), 10)] as HTMLElement;
+                            }
+                        }
+                    }
+                }
+            } else {
+                this.morePopup.relateTo = closest(<Element>target, '.' + cls.WORK_CELLS_CLASS) as HTMLElement;
+            }
+        }
+        this.parent.renderTemplates(() => {
+            const eventProp: PopupOpenEventArgs = {
+                type: 'EventContainer', cancel: false,
+                element: this.morePopup.element, data: data as unknown as Record<string, any>
+            };
+            this.parent.trigger(event.popupOpen, eventProp, (popupArgs: PopupOpenEventArgs) => {
+                if (!popupArgs.cancel) {
+                    this.morePopup.show();
+                }
+            });
+        });
+    }
+
+    private saveClick(event: Event): void {
+        this.applyFormValidation();
+        this.dialogEvent = event;
+        this.isCrudAction = true;
+        this.quickPopupHide();
+    }
+
+    private detailsClick(event: Event): void {
+        const subjectEle: HTMLInputElement = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS) as HTMLInputElement;
+        if (subjectEle && subjectEle.value !== '') {
+            extend(this.parent.activeCellsData, { subject: subjectEle.value });
+        }
+        this.dialogEvent = event;
+        this.isCrudAction = false;
+        this.fieldValidator.destroyToolTip();
+        this.quickPopupHide();
+        this.parent.eventWindow.openEditor(this.parent.activeCellsData as unknown as Record<string, any>, 'Add');
+    }
+
+    private editClick(event: Event): void {
+        this.dialogEvent = event;
+        this.quickPopupHide(true);
+        const data: Record<string, any> = this.parent.activeEventData.event as Record<string, any>;
+        this.parent.currentAction = 'EditSeries';
+        if (!isNullOrUndefined(data[this.parent.eventFields.recurrenceRule])) {
+            this.parent.currentAction = 'EditOccurrence';
+            this.openRecurrenceAlert();
+        } else {
+            this.parent.eventWindow.openEditor(data, this.parent.currentAction);
+        }
+    }
+
+    public deleteClick(event: Event): void {
+        this.dialogEvent = event;
+        this.quickPopupHide(true);
+        this.parent.currentAction = 'Delete';
+        if ((<Record<string, any>>this.parent.activeEventData.event)[this.parent.eventFields.recurrenceRule]) {
+            this.openRecurrenceAlert();
+        } else {
+            this.openDeleteAlert();
+        }
+    }
+    private updateMoreEventContent(): void {
+        if (this.morePopup.element.classList.contains('e-popup-close')) {
+            return;
+        }
+        const moreEventContentEle: Element = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_CONTENT_CLASS);
+        if (moreEventContentEle) {
+            remove(moreEventContentEle);
+        }
+        const dateElement: Element = this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS);
+        const startDate: Date = new Date(parseInt(dateElement.getAttribute('data-date'), 10));
+        const endDate: Date = new Date(parseInt(dateElement.getAttribute('data-end-date'), 10));
+        const groupIndex: string = dateElement.getAttribute('data-group-index');
+        let data: TdData;
+        let groupOrder: string[];
+        if (!isNullOrUndefined(groupIndex)) {
+            data = this.parent.resourceBase.lastResourceLevel[parseInt(groupIndex, 10)];
+            groupOrder = data.groupOrder;
+        }
+        const events: Record<string, any>[] = this.parent.eventBase.filterEvents(startDate, endDate, this.parent.eventsProcessed, data);
+        const moreElement: HTMLElement = this.createMoreEventList(events, groupOrder, groupIndex);
+        this.morePopup.element.querySelector('.' + cls.MORE_EVENT_POPUP_CLASS).appendChild(moreElement);
+    }
+
+    private closeClick(event: Event): void {
+        this.dialogEvent = event;
+        if (this.parent.currentView === 'Year' && this.parent.activeCellsData && this.parent.activeCellsData.element) {
+            this.parent.selectCell(this.parent.activeCellsData.element as HTMLTableCellElement);
+        }
+        this.quickPopupHide();
+        this.morePopup.hide();
+    }
+
+    private dialogButtonClick(event: Event): void {
+        this.dialogEvent = event;
+        this.quickDialog.hide();
+        const target: HTMLElement = event.target as HTMLElement;
+        const cancelBtn: Element = this.quickDialog.element.querySelector('.' + cls.QUICK_DIALOG_ALERT_CANCEL);
+        const eventData: Record<string, any> = this.parent.activeEventData.event as Record<string, any>;
+        if (target.classList.contains(cls.QUICK_DIALOG_OCCURRENCE_CLASS)) {
+            this.parent.currentAction = (this.parent.currentAction === 'Delete') ? 'DeleteOccurrence' : 'EditOccurrence';
+            switch (this.parent.currentAction) {
+            case 'EditOccurrence':
+                this.parent.eventWindow.openEditor(eventData, this.parent.currentAction);
+                break;
+            case 'DeleteOccurrence':
+                this.parent.crudModule.deleteEvent(eventData, this.parent.currentAction);
+                break;
+            }
+        } else if (target.classList.contains(cls.QUICK_DIALOG_FOLLOWING_EVENTS_CLASS)) {
+            this.parent.currentAction = (this.parent.currentAction === 'Delete') ? 'DeleteFollowingEvents' : 'EditFollowingEvents';
+            switch (this.parent.currentAction) {
+            case 'EditFollowingEvents':
+                this.parent.eventWindow.openEditor(eventData, this.parent.currentAction);
+                break;
+            case 'DeleteFollowingEvents':
+                this.parent.crudModule.deleteEvent(eventData, this.parent.currentAction);
+                break;
+            }
+        } else if (target.classList.contains(cls.QUICK_DIALOG_SERIES_CLASS)) {
+            this.parent.currentAction = (this.parent.currentAction === 'Delete') ? 'DeleteSeries' : 'EditSeries';
+            switch (this.parent.currentAction) {
+            case 'EditSeries':
+                this.parent.eventWindow.openEditor(this.parent.eventBase.getParentEvent(eventData, true), this.parent.currentAction);
+                break;
+            case 'DeleteSeries':
+                this.parent.crudModule.deleteEvent(eventData, this.parent.currentAction);
+                break;
+            }
+        } else if (target.classList.contains(cls.QUICK_DIALOG_DELETE_CLASS)) {
+            this.parent.crudModule.deleteEvent(eventData, this.parent.currentAction);
+        } else if (!cancelBtn.classList.contains(cls.DISABLE_CLASS) && (target.classList.contains(cls.QUICK_DIALOG_ALERT_OK) ||
+            (target.classList.contains(cls.QUICK_DIALOG_ALERT_CANCEL) && !cancelBtn.classList.contains(cls.QUICK_DIALOG_CANCEL_CLASS)))) {
+            this.parent.uiStateValues.isIgnoreOccurrence = target.classList.contains(cls.QUICK_DIALOG_ALERT_CANCEL);
+            this.parent.eventWindow.eventSave(event, this.l10n.getConstant('ok'));
+        }
+    }
+
+    private updateTapHoldEventPopup(target: Element): void {
+        const selectedElements: Element[] = this.parent.eventBase.getSelectedEventElements(target);
+        this.parent.activeEventData = this.parent.eventBase.getSelectedEvents();
+        if (selectedElements.length > 0) {
+            const eventObj: Record<string, any> = this.parent.eventBase.getEventByGuid(selectedElements[0].getAttribute('data-guid'));
+            const titleContent: string = (selectedElements.length === 1) ?
+                ((<Record<string, any>>eventObj)[this.parent.eventFields.subject] || this.l10n.getConstant('noTitle')) as string :
+                '(' + selectedElements.length + ')' + '&nbsp;' + this.l10n.getConstant('selectedItems');
+            this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS).innerHTML = titleContent;
+            if (selectedElements.length > 1) {
+                addClass([this.quickPopup.element.querySelector('.' + cls.EDIT_ICON_CLASS)], cls.HIDDEN_CLASS);
+            } else {
+                removeClass([this.quickPopup.element.querySelector('.' + cls.EDIT_ICON_CLASS)], cls.HIDDEN_CLASS);
+            }
+        } else {
+            this.parent.selectedElements = [];
+            this.quickPopupHide();
+        }
+    }
+
+    private getTimezone(event: Record<string, any>): string {
+        let zoneDetails: string = '';
+        zoneDetails += event[this.parent.eventFields.startTimezone] as string || '';
+        zoneDetails += zoneDetails === '' ? '' : ' - ';
+        zoneDetails += event[this.parent.eventFields.endTimezone] as string || '';
+        return zoneDetails;
+    }
+
+    private getRecurrenceSummary(event: Record<string, any>): string {
+        const recurrenceEditor: RecurrenceEditor = this.parent.eventWindow.getRecurrenceEditorInstance();
+        if (recurrenceEditor) {
+            const ruleSummary: string = recurrenceEditor.getRuleSummary(<string>event[this.parent.eventFields.recurrenceRule]);
+            return ruleSummary.charAt(0).toUpperCase() + ruleSummary.slice(1);
+        }
+        return '';
+    }
+
+    private getDateFormat(date: Date, skeletonString: string): string {
+        return util.capitalizeFirstWord(
+            this.parent.globalize.formatDate(date, { skeleton: skeletonString, calendar: this.parent.getCalendarMode() }),
+            'single'
+        );
+    }
+
+    private getDataFromTarget(target: Element): Record<string, any> {
+        if (target.classList.contains(cls.APPOINTMENT_CLASS)) {
+            return this.parent.activeEventData.event as Record<string, any>;
+        }
+        // Deprecated cells data in quick popups
+        const eventObj: Record<string, any> = {
+            startTime: this.parent.activeCellsData.startTime,
+            endTime: this.parent.activeCellsData.endTime,
+            isAllDay: this.parent.activeCellsData.isAllDay,
+            groupIndex: this.parent.activeCellsData.groupIndex
+        };
+        const cellsData: Record<string, any> = this.parent.activeCellsData as unknown as Record<string, any>;
+        this.parent.eventWindow.convertToEventData(cellsData, eventObj);
+        return eventObj;
+    }
+
+    private beforeQuickDialogClose(e: BeforeCloseEventArgs): void {
+        const args: PopupCloseEventArgs = {
+            event: e.event || this.dialogEvent,
+            type: (isNullOrUndefined(this.parent.activeEventData.event)) ? 'ValidationAlert' :
+                !isNullOrUndefined((<Record<string, any>>this.parent.activeEventData.event)[this.parent.eventFields.recurrenceRule])
+                    ? 'RecurrenceAlert' : 'DeleteAlert', cancel: false, data: this.parent.activeEventData.event as Record<string, any>,
+            element: this.quickDialog.element
+        };
+        this.parent.trigger(event.popupClose, args, (popupCloseArgs: PopupCloseEventArgs) => {
+            if (!popupCloseArgs.cancel) {
+                this.parent.eventBase.focusElement(true);
+            }
+        });
+    }
+
+    private beforeQuickPopupOpen(target: Element, originalEvent: (MouseEvent & TouchEvent) | Touch): void {
+        this.parent.renderTemplates(() => {
+            const isEventPopup: Element = this.quickPopup.element.querySelector('.' + cls.EVENT_POPUP_CLASS);
+            const popupType: PopupType = this.parent.isAdaptive ? isEventPopup ? 'ViewEventInfo' : 'EditEventInfo' : 'QuickInfo';
+            const eventProp: PopupOpenEventArgs = {
+                type: popupType, cancel: false, data: extend({}, this.getDataFromTarget(target), null, true) as Record<string, any>,
+                target: target, element: this.quickPopup.element
+            };
+            this.parent.trigger(event.popupOpen, eventProp, (popupArgs: PopupOpenEventArgs) => {
+                if (popupArgs.cancel) {
+                    this.quickPopupHide();
+                    this.destroyPopupButtons('quickPopup');
+                    if (popupArgs.element.classList.contains(cls.POPUP_OPEN)) {
+                        this.quickPopupClose();
+                    }
+                    util.removeChildren(this.quickPopup.element);
+                    this.isMultipleEventSelect = false;
+                } else {
+                    const display: string = this.quickPopup.element.style.display;
+                    this.quickPopup.element.style.display = 'block';
+                    if (this.parent.isAdaptive) {
+                        this.quickPopup.element.removeAttribute('style');
+                        this.quickPopup.element.style.display = 'block';
+                        this.quickPopup.element.style.height = formatUnit((popupType === 'EditEventInfo') ? 65 : window.innerHeight);
+                    } else {
+                        const isVirtualScroll: boolean =
+                            this.parent.virtualScrollModule && this.parent.virtualScrollModule.isHorizontalScroll
+                            && !isNullOrUndefined(closest(target, '.' + cls.CONTENT_TABLE_CLASS));
+                        const conTable: HTMLElement = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS + ' table');
+                        this.quickPopup.offsetX = isVirtualScroll && !this.parent.enableRtl ? (util.getTranslateX(conTable) + 10) : 10;
+                        this.quickPopup.offsetY = this.parent.virtualScrollModule && !this.parent.virtualScrollModule.isHorizontalScroll ?
+                            this.quickPopup.offsetY : 0;
+                        this.quickPopup.collision = { X: this.parent.enableRtl ? 'flip' : 'none', Y: 'fit' };
+                        this.quickPopup.position = { X: this.parent.enableRtl ? 'left' : 'right', Y: this.parent.enableRtl ? 'bottom' : 'top' };
+                        this.quickPopup.dataBind();
+                        this.quickPopup.refreshPosition(null, true);
+                        const collide: string[] = isCollide(this.quickPopup.element, this.parent.element);
+                        if (collide.indexOf(this.parent.enableRtl ? 'left' : 'right') > -1) {
+                            this.quickPopup.offsetX = -(target as HTMLElement).offsetWidth - 10 - this.quickPopup.element.offsetWidth;
+                            if (isVirtualScroll && !this.parent.enableRtl) {
+                                this.quickPopup.offsetX = util.getTranslateX(conTable) + this.quickPopup.offsetX;
+                            }
+                            this.quickPopup.dataBind();
+                            this.quickPopup.refreshPosition(null, true);
+                            const leftCollide: string[] = isCollide(this.quickPopup.element, this.parent.element);
+                            if (leftCollide.indexOf('left') > -1) {
+                                this.quickPopup.position = { X: 'center', Y: 'center' };
+                                this.quickPopup.collision = { X: 'fit', Y: 'fit' };
+                                this.quickPopup.offsetX = -(this.quickPopup.element.offsetWidth / 2);
+                                this.quickPopup.dataBind();
+                            }
+                        }
+                        if (this.parent.virtualScrollModule && !this.parent.virtualScrollModule.isHorizontalScroll && (collide.indexOf('top') > -1 || collide.indexOf('bottom') > -1)) {
+                            const translateY: number = util.getTranslateY(conTable);
+                            this.quickPopup.offsetY = translateY;
+                            this.quickPopup.dataBind();
+                            this.quickPopup.refreshPosition(null, true);
+                        }
+                        if (this.quickPopup.position.X === 'center' && this.quickPopup.position.Y === 'center' && !isNullOrUndefined(originalEvent) &&
+                            (originalEvent as MouseEvent).clientX && (originalEvent as MouseEvent).clientY) {
+                            const clientX: number = (originalEvent as MouseEvent).clientX;
+                            const clientY: number = (originalEvent as MouseEvent).clientY;
+                            const targetRect: ClientRect | DOMRect = target.getBoundingClientRect();
+                            const offsetY: number = (originalEvent as MouseEvent).offsetY || Math.ceil(clientY - (targetRect as any).y);
+                            const previousOffset: number = this.quickPopup.offsetY;
+                            let collision: string[] = isCollide(this.quickPopup.element, target as HTMLElement);
+                            const popupRect: ClientRect | DOMRect = this.quickPopup.element.getBoundingClientRect();
+                            const targetEle: Element = document.elementFromPoint(clientX, clientY);
+                            if (collision.indexOf('top') > -1 || collision.indexOf('bottom') > -1 || closest(targetEle, '.' + cls.POPUP_WRAPPER_CLASS)) {
+                                if (popupRect.top <= clientY &&
+                                    clientY <= popupRect.top + popupRect.height) {
+                                    this.quickPopup.offsetY = previousOffset - popupRect.height - 10;
+                                    this.quickPopup.dataBind();
+                                    collision = isCollide(this.quickPopup.element, this.parent.element);
+                                    if (collision.indexOf('top') > -1) {
+                                        this.quickPopup.offsetY = previousOffset + offsetY + 10;
+                                        this.quickPopup.dataBind();
+                                    }
+                                } else if (isCollide(this.quickPopup.element, this.parent.element).indexOf('bottom') > -1) {
+                                    this.quickPopup.offsetY =
+                                        previousOffset - offsetY - Math.ceil(popupRect.height) - 10;
+                                    this.quickPopup.dataBind();
+                                }
+                            }
+                        }
+                    }
+                    if (isEventPopup) {
+                        this.applyEventColor();
+                    }
+                    this.quickPopup.element.style.display = display;
+                    this.quickPopup.dataBind();
+                    this.quickPopup.show();
+                }
+            });
+        });
+    }
+
+    private applyEventColor(): void {
+        let colorField: string = '';
+        if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') {
+            colorField = this.parent.enableRtl ? 'border-right-color' : 'border-left-color';
+        } else {
+            colorField = 'background-color';
+        }
+        let color: string = (<HTMLElement>this.parent.activeEventData.element).style[<any>colorField];
+        if (color === '') {
+            return;
+        }
+        let colorEle: HTMLElement = this.quickPopup.element.querySelector('.' + cls.POPUP_HEADER_CLASS) as HTMLElement;
+        const footerEle: HTMLElement = this.quickPopup.element.querySelector('.' + cls.POPUP_FOOTER_CLASS) as HTMLElement;
+        if (footerEle && footerEle.offsetParent) {
+            colorEle = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS) as HTMLElement;
+            if (colorEle) {
+                colorEle.style.borderLeftColor = color;
+                color = `rgba(${color.match(/\d+/g).join()},0.3)`;
+            }
+        }
+        if (colorEle) {
+            colorEle.style.backgroundColor = color;
+        }
+    }
+
+    private quickPopupOpen(): void {
+        if (this.parent.isAdaptive) {
+            this.quickPopup.element.style.top = '0px';
+            return;
+        }
+        if (this.quickPopup.element.querySelector('.' + cls.CELL_POPUP_CLASS)) {
+            const subjectElement: HTMLInputElement = this.quickPopup.element.querySelector('.' + cls.SUBJECT_CLASS) as HTMLInputElement;
+            if (subjectElement) {
+                subjectElement.focus();
+            }
+        } else {
+            const editElement: HTMLInputElement = this.quickPopup.element.querySelector('.' + cls.EDIT_EVENT_CLASS) as HTMLInputElement;
+            if (editElement) {
+                editElement.focus();
+            }
+            const editIcon: HTMLInputElement = this.quickPopup.element.querySelector('.' + cls.EDIT_CLASS) as HTMLInputElement;
+            if (editIcon) {
+                editIcon.focus();
+            }
+        }
+    }
+
+    private quickPopupClose(): void {
+        this.parent.eventBase.focusElement();
+        this.quickPopup.relateTo = '.' + cls.WORK_CELLS_CLASS;
+        this.fieldValidator.destroyToolTip();
+        if (this.quickPopup.element.querySelectorAll('.e-formvalidator').length) {
+            this.fieldValidator.destroy();
+        }
+        this.destroyPopupButtons('quickPopup');
+        util.removeChildren(this.quickPopup.element);
+    }
+
+    private morePopupOpen(): void {
+        if (this.parent.isAdaptive) {
+            this.morePopup.element.style.top = '0px';
+            this.morePopup.element.style.left = '0px';
+            this.morePopup.element.style.height = formatUnit(window.innerHeight);
+            return;
+        }
+        (this.morePopup.element.querySelector('.' + cls.MORE_EVENT_HEADER_DATE_CLASS) as HTMLElement).focus();
+        this.morePopup.refreshPosition();
+    }
+
+    private morePopupClose(): void {
+        const moreWrapper: Element = this.parent.element.querySelector('.' + cls.MORE_EVENT_WRAPPER_CLASS);
+        if (moreWrapper) {
+            remove(moreWrapper);
+        }
+    }
+
+    private popupClose(event: Event): void {
+        this.dialogEvent = event;
+        this.isCrudAction = false;
+        this.quickPopupHide(true);
+    }
+
+    public quickPopupHide(hideAnimation?: boolean): void {
+        if (!this.quickPopup.element.classList.contains(cls.POPUP_OPEN)) {
+            return;
+        }
+        const isCellPopup: Element = this.quickPopup.element.querySelector('.' + cls.CELL_POPUP_CLASS);
+        let popupData: Record<string, any>;
+        if (isCellPopup) {
+            const formvalidator: Element = this.quickPopup.element.querySelector('.e-formvalidator');
+            if (this.isCrudAction && formvalidator &&
+                !((formvalidator as EJ2Instance).ej2_instances[0] as FormValidator).validate()) {
+                return;
+            }
+            const fields: EventFieldsMapping = this.parent.eventFields;
+            const saveObj: Record<string, any> = this.parent.eventWindow.getObjectFromFormData(cls.POPUP_WRAPPER_CLASS);
+            this.parent.eventWindow.setDefaultValueToObject(saveObj);
+            saveObj[fields.id] = this.parent.eventBase.getEventMaxID();
+            saveObj[fields.startTime] = this.parent.activeCellsData.startTime;
+            saveObj[fields.endTime] = this.parent.activeCellsData.endTime;
+            saveObj[fields.isAllDay] = this.parent.activeCellsData.isAllDay;
+            if (this.parent.resourceBase) {
+                this.parent.resourceBase.setResourceValues(saveObj);
+            }
+            popupData = saveObj;
+        } else {
+            popupData = this.parent.activeEventData.event as Record<string, any>;
+        }
+        const isEventPopup: Element = this.quickPopup.element.querySelector('.' + cls.EVENT_POPUP_CLASS);
+        const args: PopupCloseEventArgs = {
+            event: this.dialogEvent,
+            type: this.parent.isAdaptive ? isEventPopup ? 'ViewEventInfo' : 'EditEventInfo' : 'QuickInfo',
+            cancel: false, data: popupData, element: this.quickPopup.element,
+            target: (isCellPopup ? this.parent.activeCellsData.element : this.parent.activeEventData.element) as Element
+        };
+        this.parent.trigger(event.popupClose, args, (popupCloseArgs: PopupCloseEventArgs) => {
+            if (!popupCloseArgs.cancel) {
+                if (this.quickPopup.element.classList.contains('e-popup-open')) {
+                    if (isCellPopup && this.isCrudAction) {
+                        this.parent.currentAction = 'Add';
+                        this.parent.crudModule.addEvent(popupCloseArgs.data);
+                    }
+                    if (hideAnimation) {
+                        const animation: AnimationModel = this.quickPopup.hideAnimation;
+                        this.quickPopup.hideAnimation = null;
+                        this.quickPopup.hide();
+                        this.quickPopup.hideAnimation = animation;
+                    } else {
+                        this.quickPopup.hide();
+                    }
+                    this.isMultipleEventSelect = false;
+                    this.isCrudAction = false;
+                }
+            }
+        });
+    }
+
+    private navigationClick(e: Event): void {
+        const navigateEle: Element = closest((e.target as Element), '.' + cls.NAVIGATE_CLASS);
+        if (!isNullOrUndefined(navigateEle)) {
+            const date: Date = this.parent.getDateFromElement(e.currentTarget as HTMLTableCellElement);
+            if (!isNullOrUndefined(date)) {
+                this.closeClick(e);
+                this.parent.setProperties({ selectedDate: date }, true);
+                this.parent.changeView(this.parent.getNavigateView(), e);
+            }
+        }
+    }
+
+    private documentClick(e: { event: Event }): void {
+        const target: Element = e.event.target as Element;
+        const isInsideDialog: boolean = !!closest(target, '.e-dialog');
+        let classNames: string = '.' + cls.POPUP_WRAPPER_CLASS + ',.' + cls.HEADER_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS +
+            ',.' + cls.WORK_CELLS_CLASS + ',.' + cls.APPOINTMENT_CLASS;
+        if (!isInsideDialog) {
+            classNames += ',.e-popup';
+        }
+        const popupWrap: Element = this.parent.element.querySelector('.' + cls.POPUP_WRAPPER_CLASS);
+        if ((popupWrap && popupWrap.childElementCount > 0 && !closest(target, classNames)) || !closest(target, classNames)) {
+            this.quickPopupHide();
+            this.parent.removeNewEventElement();
+        }
+        const tar: HTMLInputElement | null = this.parent.allowInline ? this.parent.inlineModule.getInlineElement() : null;
+        if (tar && tar !== target) {
+            this.parent.inlineModule.documentClick(tar);
+        }
+        if (closest(target, '.' + cls.APPOINTMENT_CLASS + ',.' + cls.HEADER_CELLS_CLASS)) {
+            this.parent.removeNewEventElement();
+        }
+        const isQuickPopupClick: boolean | Element | null = closest(target, '.' + cls.POPUP_WRAPPER_CLASS) ||
+            closest(target, '.' + cls.QUICK_DIALOG_CLASS);
+        const isEditButton: boolean = target.classList.contains(cls.EDIT_EVENT_CLASS) ||
+            target.classList.contains(cls.EDIT_CLASS) || target.classList.contains(cls.EDIT_ICON_CLASS);
+        if (isEditButton || !isQuickPopupClick && !closest(target, '.' + cls.MORE_POPUP_WRAPPER_CLASS) && (target.classList &&
+            !target.classList.contains(cls.MORE_INDICATOR_CLASS))
+            && (!closest(target, '.' + cls.MORE_POPUP_WRAPPER_CLASS + '.' + cls.POPUP_OPEN))
+            && !closest(target, '.' + cls.WORK_CELLS_CLASS)) {
+            this.morePopup.hide();
+        }
+    }
+
+    public onClosePopup(event?: Event): void {
+        if (!isNullOrUndefined(event)) {
+            this.dialogEvent = event;
+        }
+        this.quickPopupHide();
+        if (isNullOrUndefined(event) || (!isNullOrUndefined(event) && (event as KeyboardEventArgs).action !== 'escape') ||
+            (this.parent.inlineModule && this.parent.element.querySelector('.' + cls.INLINE_APPOINTMENT_CLASS))) {
+            this.parent.eventBase.focusElement();
+        }
+    }
+
+    private addEventListener(): void {
+        this.parent.on(event.cellClick, this.cellClick, this);
+        this.parent.on(event.eventClick, this.eventClick, this);
+        this.parent.on(event.documentClick, this.documentClick, this);
+        this.parent.on(event.dataReady, this.updateMoreEventContent, this);
+    }
+
+    private removeEventListener(): void {
+        this.parent.off(event.cellClick, this.cellClick);
+        this.parent.off(event.eventClick, this.eventClick);
+        this.parent.off(event.documentClick, this.documentClick);
+        this.parent.off(event.dataReady, this.updateMoreEventContent);
+    }
+
+    private destroyPopupButtons(popupName: string): void {
+        const popup: Popup = popupName === 'quickPopup' ? this.quickPopup : this.morePopup;
+        const buttonCollections: HTMLElement[] = [].slice.call(popup.element.querySelectorAll('.e-control.e-btn'));
+        for (const button of buttonCollections) {
+            const instance: Button = (button as EJ2Instance).ej2_instances ? (button as EJ2Instance).ej2_instances[0] as Button : null;
+            if (instance) {
+                instance.destroy();
+            }
+        }
+        if (popupName === 'quickPopup') {
+            const input: HTMLInputElement = popup.element.querySelector('input.' + cls.SUBJECT_CLASS);
+            if (input) {
+                input.remove();
+            }
+            const form: HTMLFormElement = this.quickPopup.element.querySelector('form.' + cls.FORM_CLASS);
+            if (form) {
+                util.removeChildren(form);
+                form.remove();
+            }
+            this.parent.resetTemplates(['content', 'header', 'footer']);
+        }
+    }
+
+    public refreshQuickDialog(): void {
+        this.destroyQuickDialog();
+        this.renderQuickDialog();
+    }
+
+    public refreshQuickPopup(): void {
+        this.destroyQuickPopup();
+        this.renderQuickPopup();
+    }
+
+    public refreshMorePopup(): void {
+        this.destroyMorePopup();
+        this.renderMorePopup();
+    }
+
+    private destroyQuickDialog(): void {
+        if (this.quickDialog.element) {
+            this.quickDialog.destroy();
+            remove(this.quickDialog.element);
+            this.quickDialog = null;
+        }
+    }
+
+    private destroyQuickPopup(): void {
+        if (this.quickPopup.element) {
+            this.destroyPopupButtons('quickPopup');
+            this.quickPopup.destroy();
+            remove(this.quickPopup.element);
+            this.quickPopup = null;
+        }
+    }
+
+    private destroyMorePopup(): void {
+        if (this.morePopup.element) {
+            this.destroyPopupButtons('morePopup');
+            this.morePopup.destroy();
+            remove(this.morePopup.element);
+            this.morePopup = null;
+        }
+    }
+
+    public destroy(): void {
+        if (this.quickPopup.element.querySelectorAll('.e-formvalidator').length) {
+            this.fieldValidator.destroy();
+        }
+        this.removeEventListener();
+        this.destroyQuickPopup();
+        this.destroyMorePopup();
+        this.destroyQuickDialog();
+        this.dialogEvent = null;
+        this.parent = null;
+        this.l10n = null;
+        this.isCrudAction = null;
+        this.fieldValidator = null;
+        this.isMultipleEventSelect = null;
+    }
+
+}