@syncfusion/ej2-schedule 30.2.4 → 31.1.17

package/dist/ts/schedule/popups/event-window.ts

@@ -0,0 +1,2055 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { createElement, L10n, isNullOrUndefined, addClass, remove, EventHandler, extend, append, EmitType, detach } from '@syncfusion/ej2-base';
+import { cldrData, removeClass, getValue, getDefaultDateObject, closest, KeyboardEventArgs, SanitizeHtmlHelper, initializeCSPTemplate } from '@syncfusion/ej2-base';
+import { Query, Deferred } from '@syncfusion/ej2-data';
+import { CheckBox, ChangeEventArgs, Button } from '@syncfusion/ej2-buttons';
+import { Dialog, DialogModel, BeforeOpenEventArgs, BeforeCloseEventArgs } from '@syncfusion/ej2-popups';
+import { DropDownList, FilteringEventArgs, MultiSelect, ChangeEventArgs as ddlChangeEventArgs, MultiSelectChangeEventArgs, PopupEventArgs } from '@syncfusion/ej2-dropdowns';
+import { Input, FormValidator, NumericTextBox } from '@syncfusion/ej2-inputs';
+import { DatePicker, DateTimePicker, ChangedEventArgs } from '@syncfusion/ej2-calendars';
+import { Schedule } from '../base/schedule';
+import { EJ2Instance, EventFieldsMapping, PopupOpenEventArgs, TdData, CellClickEventArgs, PopupCloseEventArgs, CallbackFunction } from '../base/interface';
+import { CurrentAction } from '../base/type';
+import { FieldValidator } from './form-validator';
+import { RecurrenceEditor } from '../../recurrence-editor/recurrence-editor';
+import { ResourcesModel } from '../models/resources-model';
+import * as cls from '../base/css-constant';
+import * as event from '../base/constant';
+import * as util from '../base/util';
+
+const EVENT_FIELD: string = 'e-field';
+const REPEAT_CONTAINER_CLASS: string = 'e-recurrence-container';
+const REPEAT_BUTTON_ICON_CLASS: string = 'e-recurrence-edit';
+const REPEAT_BUTTON_CLASS: string = 'e-recurrence-edit-button';
+const REPEAT_DIALOG_CLASS: string = 'e-recurrence-dialog';
+const HIDE_STYLE_CLASS: string = 'e-hide';
+
+/**
+ * Event editor window
+ */
+export class EventWindow {
+    private parent: Schedule;
+    public dialogObject: Dialog;
+    private element: HTMLElement;
+    private fields: EventFieldsMapping;
+    private l10n: L10n;
+    private eventData: Record<string, any>;
+    private eventCrudData: Record<string, any>;
+    private fieldValidator: FieldValidator;
+    private recurrenceEditor: RecurrenceEditor;
+    private repeatDialogObject: Dialog;
+    private repeatTempRule: string;
+    private repeatRule: string;
+    private repeatStatus: CheckBox;
+    private buttonObj: Button;
+    private repeatStartDate: Date;
+    private cellClickAction: boolean;
+    private duration: number;
+    private isCrudAction: boolean;
+    private eventWindowTime: Record<string, Date>;
+    private isEnterKey: boolean;
+    private dialogEvent: Event;
+
+    constructor(parent: Schedule) {
+        this.parent = parent;
+        this.l10n = this.parent.localeObj;
+        this.fields = this.parent.eventFields;
+        this.eventWindowTime = { startTime: new Date(), endTime: new Date() };
+        this.renderEventWindow();
+    }
+
+    private renderEventWindow(): void {
+        this.element = createElement('div', { id: this.parent.element.id + '_dialog_wrapper' });
+        this.parent.element.appendChild(this.element);
+        const dialogModel: DialogModel = {
+            animationSettings: { effect: 'Zoom' },
+            content: this.getEventWindowContent(),
+            cssClass: cls.EVENT_WINDOW_DIALOG_CLASS,
+            enableRtl: this.parent.enableRtl,
+            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
+            height: this.parent.isAdaptive ? '100%' : 'auto',
+            minHeight: '300px',
+            isModal: true,
+            showCloseIcon: this.parent.isAdaptive ? false : true,
+            target: document.body,
+            visible: false,
+            width: '500px',
+            beforeOpen: this.onBeforeOpen.bind(this),
+            beforeClose: this.onBeforeClose.bind(this)
+        };
+        if (this.parent.isAdaptive) {
+            dialogModel.cssClass = cls.EVENT_WINDOW_DIALOG_CLASS + ' ' + cls.DEVICE_CLASS;
+            if (!this.parent.editorHeaderTemplate) {
+                dialogModel.header = '<div class="e-title-header"><div class="e-back-icon e-icons"></div><div class="e-title-text">' +
+                    this.l10n.getConstant('newEvent') + '</div><div class="e-save-icon e-icons"></div></div>';
+            }
+        } else {
+            if (!this.parent.editorFooterTemplate) {
+                this.renderDialogButtons(dialogModel);
+            }
+            if (!this.parent.editorHeaderTemplate) {
+                dialogModel.header = '<div class="e-title-text">' + this.l10n.getConstant('newEvent') + '</div>';
+            }
+        }
+        this.dialogObject = new Dialog(dialogModel, this.element);
+        if (this.dialogObject.element.querySelector('.e-dlg-closeicon-btn')) {
+            this.dialogObject.element.querySelector('.e-dlg-closeicon-btn').setAttribute('title', this.l10n.getConstant('close'));
+        }
+        this.addEventHandlers();
+        addClass([this.element.parentElement], cls.EVENT_WINDOW_DIALOG_CLASS + '-container');
+        EventHandler.add(this.dialogObject.element, 'keydown', this.preventEventSave, this);
+        this.applyFormValidation();
+    }
+
+    private renderDialogButtons(dialogButton: DialogModel | Dialog): void {
+        dialogButton.buttons = [{
+            buttonModel: {
+                content: this.l10n.getConstant('deleteButton'), cssClass: cls.DELETE_EVENT_CLASS,
+                disabled: !this.parent.eventSettings.allowDeleting || this.parent.readonly
+            },
+            click: this.eventDelete.bind(this)
+        }, {
+            buttonModel: {
+                content: this.l10n.getConstant('saveButton'), cssClass: 'e-primary ' + cls.EVENT_WINDOW_SAVE_BUTTON_CLASS,
+                isPrimary: true, disabled: !this.parent.eventSettings.allowAdding || this.parent.readonly
+            },
+            click: this.eventSave.bind(this)
+        }, {
+            buttonModel: { cssClass: cls.EVENT_WINDOW_CANCEL_BUTTON_CLASS, content: this.l10n.getConstant('cancelButton') },
+            click: this.dialogClose.bind(this)
+        }];
+    }
+
+    private addEventHandlers(): void {
+        const backIcon: Element = this.element.querySelector('.' + cls.EVENT_WINDOW_BACK_ICON_CLASS);
+        const saveIcon: Element = this.element.querySelector('.' + cls.EVENT_WINDOW_SAVE_ICON_CLASS);
+        if (this.parent.isAdaptive && !isNullOrUndefined(backIcon) && !isNullOrUndefined(saveIcon)) {
+            EventHandler.add(backIcon, 'click', this.dialogClose, this);
+            EventHandler.add(saveIcon, 'click', this.eventSave, this);
+        }
+    }
+
+    public refresh(): void {
+        this.destroy(true);
+        this.renderEventWindow();
+    }
+
+    public refreshRecurrenceEditor(): void {
+        if (this.recurrenceEditor) {
+            const recurrenceEditor: HTMLElement = this.recurrenceEditor.element;
+            this.recurrenceEditor.destroy();
+            this.createRecurrenceEditor(recurrenceEditor);
+        }
+    }
+
+    public setRecurrenceEditor(recurrenceEditor: RecurrenceEditor): void {
+        if (this.parent.editorTemplate) {
+            this.recurrenceEditor = recurrenceEditor;
+        }
+    }
+
+    public openEditor(data: Record<string, any>, type: CurrentAction, isEventData?: boolean, repeatType?: number): void {
+        this.parent.currentAction = type;
+        this.parent.removeNewEventElement();
+        if (this.parent.quickPopup) {
+            this.parent.quickPopup.quickPopupHide(true);
+        }
+        this.parent.inlineModule.removeInlineAppointmentElement();
+        if (type === 'Add') {
+            let eventObj: Record<string, any> = {};
+            this.cellClickAction = !isEventData;
+            this.parent.activeCellsData = data as unknown as CellClickEventArgs;
+            const event: Record<string, any> = data;
+            if (this.cellClickAction) {
+                this.convertToEventData(event, eventObj);
+            } else {
+                this.parent.activeCellsData = {
+                    startTime: <Date>(event.startTime || event[this.fields.startTime]),
+                    endTime: <Date>(event.endTime || event[this.fields.endTime]),
+                    isAllDay: <boolean>(event.isAllDay || event[this.fields.isAllDay]),
+                    element: <HTMLElement>event.element,
+                    groupIndex: <number>event.groupIndex
+                };
+                eventObj = event;
+            }
+            data = eventObj;
+        }
+        if (!isNullOrUndefined(this.parent.editorHeaderTemplate)) {
+            this.parent.resetTemplates(['editorHeaderTemplate']);
+            if (this.parent.isAdaptive && !this.parent.editorFooterTemplate) {
+                this.dialogObject.header = this.createAdaptiveHeaderElement(data);
+            } else {
+                this.dialogObject.header = this.getDialogHeader(data);
+            }
+        }
+        if (!isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.parent.resetTemplates(['editorFooterTemplate']);
+            this.dialogObject.footerTemplate = this.getDialogFooter(data);
+        }
+        if (!isNullOrUndefined(this.parent.editorHeaderTemplate) || !isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.dialogObject.dataBind();
+            this.addEventHandlers();
+        }
+        if (!isNullOrUndefined(this.parent.editorTemplate)) {
+            this.renderFormElements(this.element.querySelector('.e-schedule-form'), data, type, repeatType);
+        } else {
+            this.setEditorContent(data, type, repeatType);
+        }
+    }
+
+    private setEditorContent(data: Record<string, any>, type: CurrentAction, repeatType: number): void {
+        if (!this.parent.isAdaptive && isNullOrUndefined(this.parent.editorTemplate)) {
+            removeClass([this.dialogObject.element.querySelector('.e-recurrenceeditor')], cls.DISABLE_CLASS);
+        }
+        if (this.recurrenceEditor) {
+            this.recurrenceEditor.firstDayOfWeek = this.parent.activeViewOptions.firstDayOfWeek;
+        }
+        switch (type) {
+        case 'Add':
+            this.onCellDetailsUpdate(data, repeatType);
+            break;
+        case 'Save':
+        case 'EditOccurrence':
+        case 'EditSeries':
+        case 'EditFollowingEvents':
+            if (type === 'EditOccurrence' && !this.parent.isAdaptive && isNullOrUndefined(this.parent.editorTemplate)) {
+                addClass([this.dialogObject.element.querySelector('.e-recurrenceeditor')], cls.DISABLE_CLASS);
+            }
+            this.cellClickAction = false;
+            this.onEventDetailsUpdate(data);
+            break;
+        }
+    }
+
+    public setDialogContent(): void {
+        this.dialogObject.content = this.getEventWindowContent();
+        this.dialogObject.dataBind();
+        this.applyFormValidation();
+    }
+    public setDialogHeader(): void {
+        if (!isNullOrUndefined(this.parent.editorHeaderTemplate)) {
+            this.parent.resetTemplates(['editorHeaderTemplate']);
+            if (this.parent.isAdaptive && !this.parent.editorFooterTemplate) {
+                this.dialogObject.header = this.createAdaptiveHeaderElement();
+            }
+            else {
+                this.dialogObject.header = this.getDialogHeader();
+            }
+        } else if (this.parent.isAdaptive) {
+            this.dialogObject.header = '<div class="e-title-header"><div class="e-back-icon e-icons"></div><div class="e-title-text">' +
+                this.l10n.getConstant('newEvent') + '</div><div class="e-save-icon e-icons"></div></div>';
+        } else {
+            this.dialogObject.header = '<div class="e-title-text">' + this.l10n.getConstant('newEvent') + '</div>';
+        }
+        this.dialogObject.dataBind();
+        this.addEventHandlers();
+    }
+    public setDialogFooter(): void {
+        if (!isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.parent.resetTemplates(['editorFooterTemplate']);
+            this.dialogObject.footerTemplate = this.getDialogFooter();
+        } else if (!this.parent.isAdaptive && isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.renderDialogButtons(this.dialogObject);
+        } else if (this.parent.isAdaptive && isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            this.dialogObject.footerTemplate = null;
+        }
+        this.dialogObject.dataBind();
+    }
+
+    private createAdaptiveHeaderElement(data?: Record<string, any>): HTMLElement {
+        const header: HTMLElement = createElement('div', { className: 'e-title-header' });
+        const headerBackIcon: HTMLElement = createElement('div', { className: 'e-back-icon e-icons' });
+        header.appendChild(headerBackIcon);
+        const headerTemplate: HTMLElement = this.getDialogHeader(data);
+        header.appendChild(headerTemplate);
+        const headerSaveIcon: HTMLElement = createElement('div', { className: 'e-save-icon e-icons' });
+        header.appendChild(headerSaveIcon);
+        return header;
+    }
+    private getDialogHeader(args?: Record<string, any>): HTMLElement {
+        let headerTemplate: Element[] = [];
+        const headerTemplateId: string = this.parent.element.id + '_editorHeaderTemplate';
+        const temHeaderDiv: HTMLElement = document.createElement('div');
+        headerTemplate = [].slice.call(this.parent.getEditorHeaderTemplate()(args || {}, this.parent, 'editorHeaderTemplate', headerTemplateId, false));
+        append(headerTemplate, temHeaderDiv);
+        return temHeaderDiv;
+    }
+
+    private getDialogFooter(args?: Record<string, any>): HTMLElement {
+        let footerTemplate: Element[] = [];
+        const footerTemplateId: string = this.parent.element.id + '_editorFooterTemplate';
+        const temFooterDiv: HTMLElement = document.createElement('div');
+        footerTemplate = [].slice.call(this.parent.getEditorFooterTemplate()(args || {}, this.parent, 'editorFooterTemplate', footerTemplateId, false));
+        append(footerTemplate, temFooterDiv);
+        return temFooterDiv;
+    }
+
+    private preventEventSave(e: KeyboardEventArgs): void {
+        if (this.parent && !this.parent.allowKeyboardInteraction && (e as KeyboardEventArgs).code === 'Enter') {
+            this.isEnterKey = true;
+        }
+    }
+
+    private onBeforeOpen(args: BeforeOpenEventArgs): Deferred {
+        const endTime: number = this.eventData[this.fields.endTime].getTime();
+        const eventProp: PopupOpenEventArgs = {
+            type: 'Editor',
+            data: this.eventData,
+            cancel: false,
+            element: this.element,
+            target: (this.cellClickAction ? this.parent.activeCellsData.element : this.parent.activeEventData.element) as HTMLElement
+        };
+        if (this.cellClickAction) {
+            eventProp.duration = this.getSlotDuration();
+        }
+        const saveObj: Button = this.getInstance(cls.EVENT_WINDOW_SAVE_BUTTON_CLASS) as unknown as Button;
+        if (saveObj) {
+            saveObj.disabled = !(this.cellClickAction ? this.parent.eventSettings.allowAdding : this.parent.eventSettings.allowEditing);
+            saveObj.dataBind();
+        }
+        const deleteObj: Button = this.getInstance(cls.DELETE_EVENT_CLASS) as unknown as Button;
+        if (deleteObj) {
+            deleteObj.disabled = !this.parent.eventSettings.allowDeleting;
+            deleteObj.dataBind();
+        }
+        const callBackPromise: Deferred = new Deferred();
+        this.parent.trigger(event.popupOpen, eventProp, (popupArgs: PopupOpenEventArgs) => {
+            args.cancel = popupArgs.cancel;
+            args.maxHeight = this.parent.isAdaptive ? 'max-content' : args.maxHeight;
+            this.duration = this.cellClickAction ? popupArgs.duration : null;
+            if (this.eventData[this.fields.endTime].getTime() === endTime && !this.cellClickAction &&
+                (<Date>this.eventData[this.fields.endTime]).getHours() === 0 &&
+                (<Date>this.eventData[this.fields.endTime]).getMinutes() === 0) {
+                this.eventData = <Record<string, any>>extend({}, this.eventData, null, true);
+                this.trimAllDay(this.eventData);
+            }
+            this.refreshDateTimePicker(this.duration);
+            if (this.cellClickAction && popupArgs.duration !== this.getSlotDuration() && isNullOrUndefined(this.parent.editorTemplate)) {
+                const startObj: DateTimePicker = this.getInstance(cls.EVENT_WINDOW_START_CLASS) as unknown as DateTimePicker;
+                const endObj: DateTimePicker = this.getInstance(cls.EVENT_WINDOW_END_CLASS) as unknown as DateTimePicker;
+                endObj.value = new Date(startObj.value.getTime() + (util.MS_PER_MINUTE * popupArgs.duration));
+                endObj.dataBind();
+            }
+            if (this.parent.editorTemplate && this.element.querySelector('.e-recurrenceeditor') && !this.recurrenceEditor) {
+                this.recurrenceEditor = this.getInstance('e-recurrenceeditor') as unknown as RecurrenceEditor;
+            }
+            callBackPromise.resolve(args);
+        });
+        return callBackPromise;
+    }
+
+    private onBeforeClose(args: BeforeCloseEventArgs): Deferred {
+        if (args.isInteracted) {
+            this.isCrudAction = false;
+        }
+        const eventProp: PopupCloseEventArgs = {
+            type: 'Editor',
+            event: args.event || this.dialogEvent,
+            data: this.eventCrudData,
+            cancel: false,
+            element: this.element,
+            target: (this.cellClickAction ? this.parent.activeCellsData.element : this.parent.activeEventData.element) as HTMLElement
+        };
+        const callBackPromise: Deferred = new Deferred();
+        this.parent.trigger(event.popupClose, eventProp, (popupArgs: PopupCloseEventArgs) => {
+            args.cancel = popupArgs.cancel;
+            if (!popupArgs.cancel) {
+                if (this.isCrudAction) {
+                    args.cancel = this.processCrudActions(popupArgs.data);
+                    this.isCrudAction = args.cancel;
+                }
+                if (!this.isCrudAction) {
+                    this.resetForm();
+                    this.parent.eventBase.focusElement(true);
+                    this.eventCrudData = null;
+                }
+            }
+            callBackPromise.resolve(args);
+        });
+        return callBackPromise;
+    }
+
+    private getEventWindowContent(): HTMLElement {
+        const container: HTMLElement = createElement('div', { className: cls.FORM_CONTAINER_CLASS });
+        const form: HTMLFormElement = createElement('form', {
+            id: this.parent.element.id + 'EditForm',
+            className: cls.FORM_CLASS
+        }) as HTMLFormElement;
+        form.onsubmit = () => { return false; };
+        this.renderFormElements(form);
+        container.appendChild(form);
+        return container;
+    }
+
+    private renderFormElements(form: HTMLFormElement, args?: Record<string, any>, type?: CurrentAction, repeatType?: number): void {
+        if (!isNullOrUndefined(this.parent.editorTemplate)) {
+            if (args) {
+                if (this.fieldValidator) {
+                    this.fieldValidator.destroy();
+                    this.fieldValidator = null;
+                }
+                if (this.recurrenceEditor) {
+                    this.recurrenceEditor.destroy();
+                    this.recurrenceEditor = null;
+                }
+                this.destroyComponents();
+                this.parent.resetTemplates(['editorTemplate']);
+                EventHandler.clearEvents(form);
+                if (!this.parent.isReact) {
+                    const formElements: HTMLElement[] = [].slice.call(form.children);
+                    for (const element of formElements) {
+                        remove(element);
+                    }
+                }
+            }
+            const templateId: string = this.parent.element.id + '_editorTemplate';
+            const tempEle: HTMLElement[] =
+                [].slice.call(this.parent.getEditorTemplate()(args || {}, this.parent, 'editorTemplate', templateId, false));
+            append(tempEle, form);
+            this.parent.renderTemplates(() => {
+                if (this.element) {
+                    this.applyFormValidation();
+                    if (args) {
+                        this.setEditorContent(args, type, repeatType);
+                    }
+                }
+            });
+        } else {
+            form.appendChild(this.getDefaultEventWindowContent());
+            if (args) {
+                this.setEditorContent(args, type, repeatType);
+            }
+        }
+    }
+
+    private getDefaultEventWindowContent(): HTMLElement {
+        const parentDiv: HTMLElement = this.createDivElement(cls.EVENT_WINDOW_DIALOG_PARENT_CLASS);
+        const titleLocationDiv: HTMLElement = this.createDivElement(cls.EVENT_WINDOW_TITLE_LOCATION_DIV_CLASS);
+        parentDiv.appendChild(titleLocationDiv);
+        titleLocationDiv.appendChild(this.renderTextBox(cls.SUBJECT_CLASS));
+        titleLocationDiv.appendChild(this.renderTextBox(cls.LOCATION_CLASS));
+        const startEndDateTimeDiv: HTMLElement = this.createDivElement(cls.EVENT_WINDOW_START_END_DIV_CLASS);
+        parentDiv.appendChild(startEndDateTimeDiv);
+        startEndDateTimeDiv.appendChild(this.renderDateTimePicker(cls.EVENT_WINDOW_START_CLASS, this.onTimeChange.bind(this)));
+        startEndDateTimeDiv.appendChild(this.renderDateTimePicker(cls.EVENT_WINDOW_END_CLASS));
+        const allDayTimezoneDiv: HTMLElement = this.createDivElement(cls.EVENT_WINDOW_ALLDAY_TZ_DIV_CLASS);
+        parentDiv.appendChild(allDayTimezoneDiv);
+        allDayTimezoneDiv.appendChild(this.renderCheckBox(cls.EVENT_WINDOW_ALL_DAY_CLASS));
+        allDayTimezoneDiv.appendChild(this.renderCheckBox(cls.TIME_ZONE_CLASS));
+        const timezoneParentDiv: HTMLElement = this.createDivElement(cls.EVENT_WINDOW_TIME_ZONE_DIV_CLASS);
+        parentDiv.appendChild(timezoneParentDiv);
+        timezoneParentDiv.appendChild(this.renderDropDown(cls.EVENT_WINDOW_START_TZ_CLASS));
+        timezoneParentDiv.appendChild(this.renderDropDown(cls.EVENT_WINDOW_END_TZ_CLASS));
+        const repeatParentDiv: HTMLElement = this.createDivElement(cls.EVENT_WINDOW_REPEAT_DIV_CLASS);
+        parentDiv.appendChild(repeatParentDiv);
+        const repeatDiv: HTMLElement = this.renderCheckBox(cls.EVENT_WINDOW_REPEAT_CLASS);
+        const repeatEditContainer: HTMLElement = createElement('span', { className: REPEAT_CONTAINER_CLASS });
+        const button: HTMLElement = createElement('button', {
+            className: REPEAT_BUTTON_CLASS,
+            attrs: { type: 'button', 'title': this.l10n.getConstant('editRecurrence') }
+        });
+        this.buttonObj = new Button({ iconCss: REPEAT_BUTTON_ICON_CLASS + ' e-icons', cssClass: 'e-medium ' + this.parent.cssClass });
+        repeatEditContainer.appendChild(button);
+        this.buttonObj.appendTo(button);
+        repeatDiv.appendChild(repeatEditContainer);
+        repeatParentDiv.appendChild(repeatDiv);
+        if (this.parent.isAdaptive) {
+            EventHandler.add(button, 'click', this.loadRecurrenceEditor, this);
+        } else {
+            this.createRecurrenceEditor(parentDiv);
+        }
+        if (this.parent.resourceCollection.length > 0) {
+            const resourceParentDiv: HTMLElement = this.createDivElement(cls.EVENT_WINDOW_RESOURCES_DIV_CLASS);
+            for (const resource of this.parent.resourceBase.resourceCollection) {
+                resourceParentDiv.appendChild(this.renderResourceDetails(resource));
+            }
+            parentDiv.appendChild(resourceParentDiv);
+        }
+        const description: HTMLElement = this.createDivElement(cls.DESCRIPTION_CLASS + '-row');
+        description.appendChild(this.renderTextBox(cls.DESCRIPTION_CLASS));
+        parentDiv.appendChild(description);
+        const submit: HTMLElement = createElement('button', { attrs: { type: 'hidden', title: 'submit' } });
+        submit.style.display = 'none';
+        parentDiv.appendChild(submit);
+        return parentDiv;
+    }
+
+    private createRecurrenceEditor(parentDiv: HTMLElement): void {
+        const recurrenceEditor: HTMLElement = createElement('div', { id: this.parent.element.id + '_recurrence_editor' });
+        parentDiv.appendChild(recurrenceEditor);
+        this.recurrenceEditor = this.renderRecurrenceEditor();
+        this.recurrenceEditor.appendTo(recurrenceEditor);
+        this.updateMinMaxDateToEditor();
+    }
+
+    private createDivElement(className?: string): HTMLElement {
+        return createElement('div', { className: className });
+    }
+
+    private createInputElement(className: string, fieldName: string, type?: string): HTMLElement {
+        return createElement(type || 'input', {
+            className: className, attrs: {
+                type: 'text', name: fieldName, value: '', id: fieldName
+            }
+        });
+    }
+
+    private getSlotDuration(): number {
+        return this.parent.activeViewOptions.timeScale.interval / this.parent.activeViewOptions.timeScale.slotCount;
+    }
+
+    private renderDateTimePicker(value: string, changeEvent?: EmitType<ChangedEventArgs>): HTMLElement {
+        const dateTimeDiv: HTMLElement = this.createDivElement(value + '-container');
+        const fieldName: string = this.getFieldName(value);
+        const dateTimeInput: HTMLElement = this.createInputElement(value + ' ' + EVENT_FIELD, fieldName);
+        dateTimeDiv.appendChild(dateTimeInput);
+        const dateTimePicker: DateTimePicker = new DateTimePicker({
+            change: changeEvent,
+            firstDayOfWeek: this.parent.activeViewOptions.firstDayOfWeek,
+            calendarMode: this.parent.calendarMode,
+            min: this.parent.minDate,
+            max: new Date(new Date(+this.parent.maxDate).setHours(23, 59, 59)),
+            cssClass: this.parent.cssClass,
+            enableRtl: this.parent.enableRtl,
+            locale: this.parent.locale,
+            floatLabelType: 'Always',
+            strictMode: true,
+            timeFormat: this.parent.activeViewOptions.timeFormat,
+            format: (isNullOrUndefined(this.parent.dateFormat) ?
+                this.getFormat('dateFormats') : this.parent.dateFormat) + ' ' + this.parent.activeViewOptions.timeFormat,
+            placeholder: this.getFieldLabel(value),
+            step: this.getSlotDuration(),
+            width: '100%'
+        });
+        dateTimePicker.appendTo(dateTimeInput);
+        return dateTimeDiv;
+    }
+
+    public refreshDateTimePicker(duration?: number): void {
+        const elementSelector: string = '.' + cls.EVENT_WINDOW_START_CLASS + ',.' + cls.EVENT_WINDOW_END_CLASS;
+        const startEndElement: HTMLElement[] = [].slice.call(this.element.querySelectorAll(elementSelector));
+        for (const element of startEndElement) {
+            const instance: DateTimePicker = ((<HTMLElement>element) as EJ2Instance).ej2_instances[0] as DateTimePicker;
+            instance.firstDayOfWeek = this.parent.activeViewOptions.firstDayOfWeek;
+            instance.timeFormat = this.parent.activeViewOptions.timeFormat;
+            instance.step = duration || this.getSlotDuration();
+            instance.dataBind();
+        }
+    }
+
+    private onTimeChange(): void {
+        const startObj: DateTimePicker = this.getInstance(cls.EVENT_WINDOW_START_CLASS) as unknown as DateTimePicker;
+        if (startObj.element.parentElement.classList.contains('e-input-focus')) {
+            const endObj: DateTimePicker = this.getInstance(cls.EVENT_WINDOW_END_CLASS) as unknown as DateTimePicker;
+            let duration: number = 0;
+            if (this.cellClickAction) {
+                duration = util.MS_PER_MINUTE * this.duration;
+                this.eventWindowTime.startTime = startObj.value;
+            } else {
+                duration = (<Date>this.eventData[this.fields.endTime]).getTime() - (<Date>this.eventData[this.fields.startTime]).getTime();
+            }
+            const endDate: Date = (isNullOrUndefined(startObj.value)) ? null : new Date(startObj.value.getTime() + duration);
+            if (this.cellClickAction) {
+                this.eventWindowTime.endTime = endDate;
+            }
+            endObj.value = endDate;
+            endObj.dataBind();
+        }
+        if (this.recurrenceEditor) {
+            this.recurrenceEditor.updateRuleUntilDate(this.eventWindowTime.startTime);
+        }
+    }
+
+    private renderResourceDetails(resourceData: ResourcesModel): HTMLElement {
+        const fieldName: string = resourceData.field;
+        const value: string = 'e-' + fieldName;
+        const labelValue: string = resourceData.title;
+        const resourceDiv: HTMLElement = this.createDivElement(value + '-container' + ' ' + 'e-resources');
+        const resourceInput: HTMLElement = this.createInputElement(value + ' ' + EVENT_FIELD, fieldName);
+        resourceDiv.appendChild(resourceInput);
+        const resourceTemplate: Function = function(data: any): string {
+            return SanitizeHtmlHelper.sanitize(`<div class="e-resource-template">
+                <div class="e-resource-color" data-resource-color="${data[resourceData.colorField]}"></div>
+                <div class="e-resource-text">${data[resourceData.textField]}</div></div>`);
+        };
+        initializeCSPTemplate(resourceTemplate, resourceData);
+        if (resourceData.allowMultiple) {
+            const listObj: MultiSelect = new MultiSelect({
+                enableRtl: this.parent.enableRtl,
+                enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
+                cssClass: this.parent.cssClass || '',
+                dataSource: resourceData.dataSource as Record<string, any>[],
+                change: this.onMultiselectResourceChange.bind(this),
+                itemTemplate: resourceTemplate as any,
+                fields: {
+                    text: resourceData.textField,
+                    value: resourceData.idField
+                },
+                htmlAttributes: {'name': fieldName },
+                floatLabelType: 'Always',
+                placeholder: labelValue,
+                popupHeight: '230px',
+                popupWidth: '447px',
+                mode: 'Box',
+                open: (args: PopupEventArgs) => {
+                    Promise.resolve().then(() => {
+                        this.applyStylesAfterRender(args);
+                    });
+                }
+            });
+            listObj.appendTo(resourceInput);
+        } else {
+            const dropDownList: DropDownList = new DropDownList({
+                cssClass: this.parent.cssClass || '',
+                change: this.onDropdownResourceChange.bind(this),
+                dataSource: resourceData.dataSource as Record<string, any>[],
+                enableRtl: this.parent.enableRtl,
+                fields: {
+                    text: resourceData.textField,
+                    value: resourceData.idField
+                },
+                htmlAttributes: { 'name': fieldName },
+                floatLabelType: 'Always',
+                placeholder: labelValue,
+                popupHeight: '230px',
+                popupWidth: '447px',
+                itemTemplate: resourceTemplate as any,
+                open: (args: PopupEventArgs) => {
+                    Promise.resolve().then(() => {
+                        this.applyStylesAfterRender(args);
+                    });
+                }
+            });
+            dropDownList.appendTo(resourceInput);
+        }
+        return resourceDiv;
+    }
+
+    private applyStylesAfterRender(args: PopupEventArgs): void {
+        if (!args.popup || !args.popup.element) { return; }
+        const resourceColors: NodeListOf<Element> = args.popup.element.querySelectorAll('.e-resource-color[data-resource-color]');
+        resourceColors.forEach((element: Element) => {
+            const color: string = element.getAttribute('data-resource-color');
+            if (color) {
+                (element as HTMLElement).style.backgroundColor = color;
+            }
+        });
+    }
+
+    private renderDropDown(value: string): HTMLElement {
+        const fieldName: string = this.getFieldName(value);
+        const timezoneDiv: HTMLElement = this.createDivElement(value + '-container');
+        const timezoneInput: HTMLElement = this.createInputElement(value + ' ' + EVENT_FIELD, fieldName);
+        timezoneDiv.appendChild(timezoneInput);
+        const dropDownList: DropDownList = new DropDownList({
+            allowFiltering: true,
+            change: this.onTimezoneChange.bind(this),
+            cssClass: this.parent.cssClass || '',
+            dataSource: this.parent.timezoneDataSource as any[],
+            enableRtl: this.parent.enableRtl,
+            fields: { text: 'Text', value: 'Value' },
+            filterBarPlaceholder: this.parent.localeObj.getConstant('searchTimezone'),
+            noRecordsTemplate: this.parent.localeObj.getConstant('noRecords'),
+            filtering: (e: FilteringEventArgs) => {
+                let query: Query = new Query();
+                query = (e.text !== '') ? query.where('Text', 'contains', e.text, true) : query;
+                e.updateData(this.parent.timezoneDataSource as any[], query);
+            },
+            htmlAttributes: { 'title': this.getFieldLabel(value), 'name': fieldName },
+            floatLabelType: 'Always',
+            placeholder: this.getFieldLabel(value),
+            popupHeight: '230px'
+        });
+        dropDownList.appendTo(timezoneInput);
+        return timezoneDiv;
+    }
+
+    private onMultiselectResourceChange(args: MultiSelectChangeEventArgs): void {
+        if (!args.value || !this.parent.activeViewOptions.group.byGroupID || this.parent.resourceCollection.length <= 1) {
+            return;
+        }
+        const resourceCollection: ResourcesModel[] = this.parent.resourceBase.resourceCollection;
+        const fieldName: string = args.element.getAttribute('name') || this.getColumnName(args.element as HTMLInputElement);
+        for (let i: number = 0; i < resourceCollection.length; i++) {
+            if (resourceCollection[parseInt(i.toString(), 10)].field === fieldName && i < resourceCollection.length - 1) {
+                const resObject: MultiSelect | DropDownList = this.createInstance(i);
+                let datasource: Record<string, any>[] = [];
+                for (let j: number = 0; j < args.value.length; j++) {
+                    const resourceModel: ResourcesModel = resourceCollection[i + 1];
+                    // eslint-disable-next-line max-len
+                    const filter: Record<string, any> = (resourceModel.dataSource as Record<string, any>[]).filter((data: Record<string, any>) =>
+                        data[resourceModel.groupIDField] === args.value[parseInt(j.toString(), 10)])[0];
+                    const groupId: number = (!isNullOrUndefined(filter)) ?
+                        filter[resourceCollection[i + 1].groupIDField] as number : null;
+                    const filterRes: Record<string, any>[] = this.filterDatasource(i, groupId);
+                    datasource = datasource.concat(filterRes);
+                }
+                resObject.dataSource = datasource;
+                resObject.dataBind();
+            }
+        }
+    }
+
+    private createInstance(index: number): MultiSelect | DropDownList {
+        const resourceData: Record<string, any> = this.parent.resourceBase.resourceCollection[index + 1] as Record<string, any>;
+        const resObject: MultiSelect | DropDownList = (this.element.querySelector('.e-' + resourceData.field) as EJ2Instance).
+            ej2_instances[0] as MultiSelect | DropDownList;
+        resObject.clear();
+        return resObject;
+    }
+
+    private onDropdownResourceChange(args: ddlChangeEventArgs): void {
+        if (!args.value || this.parent.resourceCollection.length <= 1 || !this.parent.activeViewOptions.group.byGroupID) {
+            return;
+        }
+        const fieldName: string = args.element.getAttribute('name') || this.getColumnName(args.element as HTMLInputElement);
+        const resourceCollection: ResourcesModel[] = this.parent.resourceBase.resourceCollection;
+        for (let i: number = 0; i < resourceCollection.length; i++) {
+            if ((i < resourceCollection.length - 1) && resourceCollection[parseInt(i.toString(), 10)].field === fieldName) {
+                const resObj: MultiSelect | DropDownList = this.createInstance(i);
+                const groupId: number =
+                    (args.itemData as Record<string, any>)[resourceCollection[parseInt(i.toString(), 10)].idField] as number;
+                resObj.dataSource = this.filterDatasource(i, groupId);
+                resObj.dataBind();
+                const resValue: string = (resObj.dataSource.length > 0) ?
+                    resObj.dataSource[0][resourceCollection[i + 1].idField] as string : null;
+                resObj.value = (resourceCollection[i + 1].allowMultiple) ? [resValue] : resValue;
+                resObj.dataBind();
+            }
+        }
+    }
+
+    private filterDatasource(index: number, groupId: number | string): Record<string, any>[] {
+        const resourceData: ResourcesModel = this.parent.resourceBase.resourceCollection[index + 1];
+        return (resourceData.dataSource as Record<string, any>[]).filter((data: Record<string, any>) =>
+            data[resourceData.groupIDField] === groupId);
+    }
+
+    private onTimezoneChange(args: ddlChangeEventArgs): void {
+        const fieldName: string = args.element.getAttribute('name') || this.getColumnName(args.element as HTMLInputElement);
+        if (fieldName === this.parent.eventFields.startTimezone) {
+            const startTimezoneObj: DropDownList = this.getInstance(cls.EVENT_WINDOW_START_TZ_CLASS) as unknown as DropDownList;
+            const endTimezoneObj: DropDownList = this.getInstance(cls.EVENT_WINDOW_END_TZ_CLASS) as unknown as DropDownList;
+            endTimezoneObj.value = startTimezoneObj.value;
+            endTimezoneObj.dataBind();
+        }
+    }
+
+    private renderCheckBox(value: string): HTMLElement {
+        const checkBoxDiv: HTMLElement = this.createDivElement(value + '-container');
+        const fieldName: string = this.getFieldName(value);
+        const checkBoxInput: HTMLElement = this.createInputElement(value + ' ' + EVENT_FIELD, fieldName);
+        checkBoxDiv.appendChild(checkBoxInput);
+        const checkBox: CheckBox = new CheckBox({
+            change: this.onChange.bind(this),
+            cssClass: value + ' ' + this.parent.cssClass,
+            enableRtl: this.parent.enableRtl,
+            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
+            label: this.getFieldLabel(value)
+        });
+        checkBox.appendTo(checkBoxInput);
+        checkBoxInput.setAttribute('name', fieldName);
+        if (fieldName === 'Repeat') {
+            this.repeatStatus = checkBox;
+        }
+        return checkBoxDiv;
+    }
+
+    private renderTextBox(value: string): HTMLElement {
+        const textBoxDiv: HTMLElement = this.createDivElement(value + '-container');
+        const fieldName: string = this.getFieldName(value);
+        const elementType: string = (value === cls.DESCRIPTION_CLASS) ? 'textarea' : 'input';
+        const textBoxInput: HTMLElement = this.createInputElement(value + ' ' + EVENT_FIELD, fieldName, elementType);
+        textBoxDiv.appendChild(textBoxInput);
+        Input.createInput({
+            element: textBoxInput as HTMLInputElement,
+            floatLabelType: 'Always',
+            properties: {
+                enableRtl: this.parent.enableRtl,
+                placeholder: this.getFieldLabel(value)
+            }
+        });
+        return textBoxDiv;
+    }
+
+    private getFieldName(name: string): string {
+        let fieldName: string = '';
+        switch (name) {
+        case cls.SUBJECT_CLASS:
+            fieldName = this.fields.subject;
+            break;
+        case cls.LOCATION_CLASS:
+            fieldName = this.fields.location;
+            break;
+        case cls.EVENT_WINDOW_START_CLASS:
+            fieldName = this.fields.startTime;
+            break;
+        case cls.EVENT_WINDOW_END_CLASS:
+            fieldName = this.fields.endTime;
+            break;
+        case cls.DESCRIPTION_CLASS:
+            fieldName = this.fields.description;
+            break;
+        case cls.EVENT_WINDOW_ALL_DAY_CLASS:
+            fieldName = this.fields.isAllDay;
+            break;
+        case cls.EVENT_WINDOW_START_TZ_CLASS:
+            fieldName = this.fields.startTimezone;
+            break;
+        case cls.EVENT_WINDOW_END_TZ_CLASS:
+            fieldName = this.fields.endTimezone;
+            break;
+        case cls.TIME_ZONE_CLASS:
+            fieldName = 'Timezone';
+            break;
+        case cls.EVENT_WINDOW_REPEAT_CLASS:
+            fieldName = 'Repeat';
+            break;
+        }
+        return fieldName;
+    }
+
+    private getFieldLabel(fieldName: string): string {
+        let labelText: string = '';
+        switch (fieldName) {
+        case cls.SUBJECT_CLASS:
+            labelText = this.parent.editorTitles.subject;
+            break;
+        case cls.LOCATION_CLASS:
+            labelText = this.parent.editorTitles.location;
+            break;
+        case cls.DESCRIPTION_CLASS:
+            labelText = this.parent.editorTitles.description;
+            break;
+        case cls.EVENT_WINDOW_START_CLASS:
+            labelText = this.parent.editorTitles.startTime;
+            break;
+        case cls.EVENT_WINDOW_END_CLASS:
+            labelText = this.parent.editorTitles.endTime;
+            break;
+        case cls.EVENT_WINDOW_START_TZ_CLASS:
+            labelText = this.parent.editorTitles.startTimezone;
+            break;
+        case cls.EVENT_WINDOW_END_TZ_CLASS:
+            labelText = this.parent.editorTitles.endTimezone;
+            break;
+        case cls.EVENT_WINDOW_REPEAT_CLASS:
+            labelText = this.parent.editorTitles.recurrenceRule;
+            break;
+        case cls.EVENT_WINDOW_ALL_DAY_CLASS:
+            labelText = this.parent.editorTitles.isAllDay;
+            break;
+        case cls.TIME_ZONE_CLASS:
+            labelText = this.l10n.getConstant('timezone');
+            break;
+        }
+        return labelText;
+    }
+
+    private onChange(args: ChangeEventArgs): void {
+        if (args.event && args.event.target) {
+            const targetSelector: string = `.${cls.EVENT_WINDOW_ALL_DAY_CLASS},.${cls.TIME_ZONE_CLASS},.${cls.EVENT_WINDOW_REPEAT_CLASS}`;
+            const target: Element = closest(args.event.target as Element, targetSelector);
+            if (target.classList.contains(cls.EVENT_WINDOW_ALL_DAY_CLASS)) {
+                this.onAllDayChange(args.checked);
+            } else if (target.classList.contains(cls.TIME_ZONE_CLASS)) {
+                this.timezoneChangeStyle(args.checked);
+            } else if (target.classList.contains(cls.EVENT_WINDOW_REPEAT_CLASS)) {
+                this.onRepeatChange(args.checked);
+            }
+        }
+    }
+
+    private renderRepeatDialog(): void {
+        const element: HTMLElement = createElement('div');
+        this.repeatDialogObject = new Dialog({
+            header: this.l10n.getConstant('recurrence'),
+            visible: false,
+            content: '<div class="e-rec-editor"></div>',
+            closeOnEscape: true,
+            width: '90%',
+            buttons: [{
+                click: this.repeatSaveDialog.bind(this),
+                buttonModel: { content: this.l10n.getConstant('save'), cssClass: 'e-save', isPrimary: true }
+            },
+            { click: this.repeatCancelDialog.bind(this), buttonModel: { cssClass: 'e-cancel', content: this.l10n.getConstant('cancel') } }],
+            target: this.element,
+            animationSettings: { effect: 'Zoom' },
+            enableRtl: this.parent.enableRtl,
+            enableHtmlSanitizer: this.parent.enableHtmlSanitizer,
+            isModal: true,
+            cssClass: REPEAT_DIALOG_CLASS,
+            open: this.repeatOpenDialog.bind(this)
+        });
+        this.element.appendChild(element);
+        this.repeatDialogObject.appendTo(element);
+        this.createRecurrenceEditor(<HTMLElement>this.repeatDialogObject.element.querySelector('.e-rec-editor'));
+    }
+
+    private loadRecurrenceEditor(): void {
+        this.repeatDialogObject.show();
+        if (this.recurrenceEditor && this.repeatRule) {
+            this.recurrenceEditor.setRecurrenceRule(this.repeatRule);
+        }
+    }
+
+    private onRepeatChange(state: boolean): void {
+        if (state) {
+            if (!this.repeatDialogObject) {
+                this.renderRepeatDialog();
+            }
+            this.recurrenceEditor.setProperties({ startDate: <Date>this.repeatStartDate, selectedType: 0 });
+            this.loadRecurrenceEditor();
+        } else {
+            if (this.repeatDialogObject) {
+                this.repeatDialogObject.hide();
+            }
+            this.repeatRule = '';
+            if (this.recurrenceEditor) {
+                this.recurrenceEditor.setRecurrenceRule(this.repeatRule);
+                this.updateRepeatLabel(this.repeatRule);
+            }
+            const element: HTMLElement = <HTMLElement>this.element.querySelector('.' + REPEAT_CONTAINER_CLASS);
+            addClass([element], HIDE_STYLE_CLASS);
+        }
+    }
+
+    private repeatSaveDialog(): void {
+        this.repeatRule = this.recurrenceEditor.getRecurrenceRule();
+        const element: HTMLElement = <HTMLElement>this.element.querySelector('.' + REPEAT_CONTAINER_CLASS);
+        if (this.recurrenceEditor.getRecurrenceRule()) {
+            removeClass([element], HIDE_STYLE_CLASS);
+        } else {
+            addClass([element], HIDE_STYLE_CLASS);
+            this.repeatStatus.setProperties({ checked: false });
+        }
+        this.updateRepeatLabel(this.repeatRule);
+        this.closeRepeatDialog();
+    }
+
+    private closeRepeatDialog(): void {
+        this.repeatDialogObject.hide();
+    }
+
+    private repeatCancelDialog(): void {
+        this.closeRepeatDialog();
+        if (this.recurrenceEditor) {
+            this.recurrenceEditor.setRecurrenceRule(this.repeatTempRule);
+        }
+        if (!this.repeatTempRule) {
+            this.repeatStatus.setProperties({ checked: false });
+        }
+    }
+
+    private repeatOpenDialog(): void {
+        this.repeatTempRule = this.recurrenceEditor.getRecurrenceRule();
+    }
+
+    private onCellDetailsUpdate(eventObj: Record<string, any>, repeatType: number): void {
+        if (!this.parent.eventSettings.allowAdding) {
+            return;
+        }
+        if (this.parent.isAdaptive && repeatType && !this.repeatDialogObject) {
+            this.renderRepeatDialog();
+        }
+        this.element.querySelector('.' + cls.FORM_CLASS).removeAttribute('data-id');
+        if (isNullOrUndefined(this.parent.editorHeaderTemplate)) {
+            this.element.querySelector('.' + cls.EVENT_WINDOW_TITLE_TEXT_CLASS).innerHTML = this.l10n.getConstant('newEvent');
+        }
+        eventObj.Timezone = false;
+        this.repeatStartDate = <Date>eventObj[this.fields.startTime];
+        this.repeatRule = '';
+        if (!isNullOrUndefined(this.parent.eventSettings.fields.subject.default)) {
+            eventObj[this.fields.subject] = this.parent.eventSettings.fields.subject.default;
+        }
+        if (!isNullOrUndefined(this.parent.eventSettings.fields.location.default)) {
+            eventObj[this.fields.location] = this.parent.eventSettings.fields.location.default;
+        }
+        if (!isNullOrUndefined(this.parent.eventSettings.fields.description.default)) {
+            eventObj[this.fields.description] = this.parent.eventSettings.fields.description.default;
+        }
+        this.showDetails(eventObj);
+        if (eventObj[this.fields.recurrenceRule] && this.recurrenceEditor) {
+            this.recurrenceEditor.setRecurrenceRule(<string>eventObj[this.fields.recurrenceRule], <Date>eventObj[this.fields.startTime]);
+            this.repeatRule = <string>eventObj[this.fields.recurrenceRule];
+        }
+        const deleteButton: Element = this.element.querySelector('.' + cls.DELETE_EVENT_CLASS);
+        if (deleteButton) {
+            addClass([deleteButton], cls.DISABLE_CLASS);
+        }
+        if (this.recurrenceEditor) {
+            this.recurrenceEditor.setProperties({
+                startDate: <Date>eventObj[this.fields.startTime],
+                selectedType: !isNullOrUndefined(repeatType) ? repeatType : !isNullOrUndefined(eventObj[this.fields.recurrenceRule]) ?
+                    this.recurrenceEditor.selectedType : 0
+            });
+            this.repeatRule = this.recurrenceEditor.value;
+        }
+        if (this.parent.isAdaptive && isNullOrUndefined(this.parent.editorTemplate)) {
+            const element: HTMLElement = <HTMLElement>this.element.querySelector('.' + REPEAT_CONTAINER_CLASS);
+            if (eventObj[this.fields.recurrenceRule] || repeatType) {
+                removeClass([element], HIDE_STYLE_CLASS);
+                this.repeatStatus.setProperties({ checked: true });
+            }
+            else {
+                addClass([element], HIDE_STYLE_CLASS);
+                this.repeatStatus.setProperties({ checked: false });
+            }
+            this.updateRepeatLabel(this.repeatRule);
+        } else {
+            const saveButton: Element = this.element.querySelector('.' + cls.EVENT_WINDOW_SAVE_BUTTON_CLASS);
+            this.disableButton(saveButton, false);
+        }
+        this.dialogObject.show();
+    }
+
+    public convertToEventData(cellsData: Record<string, any>, eventObj: Record<string, any>): void {
+        if (!cellsData) { return; }
+        if (cellsData.subject) {
+            eventObj[this.fields.subject] = cellsData.subject;
+        }
+        eventObj[this.fields.startTime] = cellsData.startTime;
+        eventObj[this.fields.endTime] = cellsData.endTime;
+        eventObj[this.fields.isAllDay] = cellsData.isAllDay;
+        if (cellsData.RecurrenceRule) {
+            eventObj[this.fields.recurrenceRule] = cellsData.RecurrenceRule;
+        }
+        if (this.parent.resourceCollection.length > 0 || this.parent.activeViewOptions.group.resources.length > 0) {
+            this.parent.resourceBase.setResourceValues(eventObj);
+        }
+    }
+
+    private applyFormValidation(): void {
+        const form: HTMLFormElement = this.element.querySelector('.' + cls.FORM_CLASS) as HTMLFormElement;
+        if (!form) {
+            return;
+        }
+        const getValidationRule: CallbackFunction = (rules: Record<string, any>) =>
+            (rules && Object.keys(rules).length > 0) ? rules : undefined;
+        const rules: Record<string, any> = {};
+        const subjectRule: Record<string, any> = getValidationRule(this.parent.eventSettings.fields.subject.validation);
+        if (!isNullOrUndefined(subjectRule)) {
+            rules[this.parent.eventSettings.fields.subject.name] = subjectRule;
+        }
+        const locationRule: Record<string, any> = getValidationRule(this.parent.eventSettings.fields.location.validation);
+        if (!isNullOrUndefined(locationRule)) {
+            rules[this.parent.eventSettings.fields.location.name] = locationRule;
+        }
+        const startTimeRule: Record<string, any> = getValidationRule(this.parent.eventSettings.fields.startTime.validation);
+        if (!isNullOrUndefined(startTimeRule)) {
+            rules[this.parent.eventSettings.fields.startTime.name] = startTimeRule;
+        }
+        const endTimeRule: Record<string, any> = getValidationRule(this.parent.eventSettings.fields.endTime.validation);
+        if (!isNullOrUndefined(endTimeRule)) {
+            rules[this.parent.eventSettings.fields.endTime.name] = endTimeRule;
+        }
+        const descriptionRule: Record<string, any> = getValidationRule(this.parent.eventSettings.fields.description.validation);
+        if (!isNullOrUndefined(descriptionRule)) {
+            rules[this.parent.eventSettings.fields.description.name] = descriptionRule;
+        }
+        if (this.fieldValidator) {
+            this.fieldValidator.destroy();
+            this.fieldValidator = null;
+        }
+        this.fieldValidator = new FieldValidator();
+        this.fieldValidator.renderFormValidator(form, rules, this.element, this.parent.locale);
+    }
+
+    private showDetails(eventData: Record<string, any>): void {
+        this.eventData = eventData;
+        const eventObj: Record<string, any> = <Record<string, any>>extend({}, eventData, null, true);
+        const formElements: HTMLInputElement[] = this.getFormElements(cls.EVENT_WINDOW_DIALOG_CLASS);
+        if ((!this.cellClickAction || this.cellClickAction && !isNullOrUndefined(this.parent.editorTemplate)) &&
+            (<Date>eventObj[this.fields.endTime]).getHours() === 0 && (<Date>eventObj[this.fields.endTime]).getMinutes() === 0) {
+            this.trimAllDay(eventObj);
+        }
+        const keyNames: string[] = Object.keys(eventObj);
+        for (const curElement of formElements) {
+            const columnName: string = curElement.name || this.getColumnName(curElement);
+            if (!isNullOrUndefined(columnName) && columnName !== '') {
+                if (keyNames.indexOf(columnName) !== -1) {
+                    this.setValueToElement(curElement as HTMLElement, eventObj[`${columnName}`] as string);
+                } else {
+                    this.setDefaultValueToElement(curElement as HTMLElement);
+                }
+            }
+        }
+        if (isNullOrUndefined(this.parent.editorTemplate)) {
+            this.onAllDayChange(eventObj[this.fields.isAllDay] as boolean);
+            const timezoneObj: CheckBox = this.getInstance(cls.TIME_ZONE_CLASS + '.' + EVENT_FIELD) as unknown as CheckBox;
+            if (!(isNullOrUndefined(eventObj[this.fields.startTimezone]) && isNullOrUndefined(eventObj[this.fields.endTimezone]))) {
+                timezoneObj.checked = true;
+                timezoneObj.dataBind();
+            }
+            this.timezoneChangeStyle(timezoneObj.checked);
+            delete eventObj.Timezone;
+        }
+    }
+
+    private getColumnName(element: HTMLInputElement): string {
+        let attrName: string = element.getAttribute('data-name') || '';
+        if (attrName === '') {
+            let isDropDowns: boolean = false;
+            let fieldSelector: string = '';
+            if (element.classList.contains('e-dropdownlist')) {
+                fieldSelector = 'e-ddl';
+                isDropDowns = true;
+            } else if (element.classList.contains('e-multiselect')) {
+                fieldSelector = 'e-multiselect';
+                isDropDowns = true;
+            } else if (element.classList.contains('e-datetimepicker')) {
+                fieldSelector = 'e-datetimepicker';
+            } else if (element.classList.contains('e-datepicker')) {
+                fieldSelector = 'e-datepicker';
+            } else if (element.classList.contains('e-checkbox')) {
+                fieldSelector = 'e-checkbox';
+            } else if (element.classList.contains('e-numerictextbox')) {
+                fieldSelector = 'e-numerictextbox';
+            }
+            const classSelector: string = isDropDowns ? `.${fieldSelector}:not(.e-control)` : `.${fieldSelector}`;
+            const control: Element = closest(element, classSelector) || element.querySelector(`.${fieldSelector}`);
+            if (control) {
+                const attrEle: Element = control.querySelector('[name]');
+                if (attrEle) {
+                    attrName = (<HTMLInputElement>attrEle).name;
+                }
+            }
+        }
+        return attrName;
+    }
+
+    private onAllDayChange(allDayStatus: boolean): void {
+        const startObj: DateTimePicker = this.getInstance(cls.EVENT_WINDOW_START_CLASS) as unknown as DateTimePicker;
+        const endObj: DateTimePicker = this.getInstance(cls.EVENT_WINDOW_END_CLASS) as unknown as DateTimePicker;
+        const timezoneDiv: HTMLElement = this.element.querySelector('.e-time-zone-container') as HTMLElement;
+        let format: string;
+        if (allDayStatus) {
+            format = (isNullOrUndefined(this.parent.dateFormat)) ? this.getFormat('dateFormats') : this.parent.dateFormat;
+            addClass(this.element.querySelectorAll('.e-time-icon'), cls.EVENT_WINDOW_ICON_DISABLE_CLASS);
+            addClass([timezoneDiv], cls.DISABLE_CLASS);
+            if (this.element.querySelector('.' + cls.EVENT_WINDOW_TIME_ZONE_DIV_CLASS)) {
+                removeClass([this.element.querySelector('.' + cls.EVENT_WINDOW_TIME_ZONE_DIV_CLASS)], cls.ENABLE_CLASS);
+            }
+            startObj.format = endObj.format = format;
+        } else {
+            format = (isNullOrUndefined(this.parent.dateFormat)) ? this.getFormat('dateFormats') + ' ' +
+                this.parent.activeViewOptions.timeFormat : this.parent.dateFormat + ' ' + this.parent.activeViewOptions.timeFormat;
+            removeClass(this.element.querySelectorAll('.e-time-icon'), cls.EVENT_WINDOW_ICON_DISABLE_CLASS);
+            removeClass([timezoneDiv], cls.DISABLE_CLASS);
+            if ((this.element.querySelector('.e-checkbox-wrapper .e-time-zone') as HTMLInputElement).checked) {
+                addClass([this.element.querySelector('.' + cls.EVENT_WINDOW_TIME_ZONE_DIV_CLASS)], cls.ENABLE_CLASS);
+            }
+            startObj.format = endObj.format = format;
+        }
+        if (this.cellClickAction) { this.updateDateTime(allDayStatus, startObj, endObj); }
+        startObj.dataBind();
+        endObj.dataBind();
+        if (!isNullOrUndefined(this.recurrenceEditor)) {
+            this.recurrenceEditor.updateRuleUntilDate(startObj.value);
+        }
+    }
+
+    private updateDateTime(allDayStatus: boolean, startObj: DateTimePicker, endObj: DateTimePicker): void {
+        let startDate: Date; let endDate: Date;
+        if (isNullOrUndefined(this.eventWindowTime.startTime) && isNullOrUndefined(this.eventWindowTime.endTime)) { return; }
+        if (allDayStatus) {
+            startDate = util.resetTime(new Date(this.eventWindowTime.startTime.getTime()));
+            if (this.parent.activeCellsData.isAllDay) {
+                const temp: number = util.addDays(new Date((<Date>this.eventWindowTime.endTime).getTime()), -1).getTime();
+                endDate = (+this.eventWindowTime.startTime > temp) ? this.eventWindowTime.endTime : new Date(temp);
+            } else {
+                endDate = util.resetTime(new Date(this.eventWindowTime.endTime.getTime()));
+            }
+        } else {
+            const start: Date = this.parent.activeCellsData.startTime;
+            startDate = new Date(this.eventWindowTime.startTime.getTime());
+            startDate.setHours(start.getHours(), start.getMinutes(), start.getSeconds());
+            if (this.parent.activeCellsData.isAllDay) {
+                const startHour: Date = this.parent.getStartEndTime(this.parent.workHours.start);
+                startDate.setHours(startHour.getHours(), startHour.getMinutes(), startHour.getSeconds());
+                endDate = new Date(startDate.getTime());
+                endDate.setMilliseconds(util.MS_PER_MINUTE * this.getSlotDuration());
+            } else {
+                endDate = new Date(startDate.getTime());
+                endDate.setMilliseconds(this.parent.activeCellsData.endTime.getTime() - this.parent.activeCellsData.startTime.getTime());
+            }
+        }
+        this.eventWindowTime = { startTime: new Date(startDate.getTime()), endTime: new Date(endDate.getTime()) };
+        startObj.value = startDate;
+        endObj.value = endDate;
+        startObj.dataBind();
+        endObj.dataBind();
+    }
+
+    private getFormat(formatType: string): string {
+        let format: string;
+        if (isNullOrUndefined(this.parent.locale) || this.parent.locale === 'en' || this.parent.locale === 'en-US') {
+            format = getValue(formatType + '.short', getDefaultDateObject(this.parent.getCalendarMode()));
+        } else {
+            format = getValue(`main.${this.parent.locale}.dates.calendars.${this.parent.getCalendarMode()}.${formatType}.short`, cldrData);
+        }
+        return format;
+    }
+
+    private onEventDetailsUpdate(eventObj: Record<string, any>): void {
+        if (!this.parent.eventSettings.allowEditing) {
+            return;
+        }
+        if (!this.parent.isAdaptive && isNullOrUndefined(this.parent.editorFooterTemplate)) {
+            removeClass([this.element.querySelector('.' + cls.DELETE_EVENT_CLASS)], cls.DISABLE_CLASS);
+        }
+        if (isNullOrUndefined(this.parent.editorHeaderTemplate)) {
+            this.element.querySelector('.' + cls.EVENT_WINDOW_TITLE_TEXT_CLASS).innerHTML = this.l10n.getConstant('editEvent');
+        }
+        this.element.querySelector('.' + cls.FORM_CLASS).setAttribute('data-id', eventObj[this.fields.id].toString());
+        if (isNullOrUndefined(this.parent.editorTemplate)) {
+            eventObj = <Record<string, any>>extend({}, eventObj, null, true);
+            const timezoneObj: CheckBox = this.getInstance(cls.TIME_ZONE_CLASS + '.' + EVENT_FIELD) as unknown as CheckBox;
+            let timezoneValue: boolean;
+            if (eventObj[this.fields.startTimezone] || eventObj[this.fields.endTimezone]) {
+                timezoneValue = true;
+                this.parent.eventBase.timezoneConvert(eventObj);
+            } else {
+                timezoneValue = false;
+            }
+            eventObj.Timezone = timezoneValue;
+            timezoneObj.checked = timezoneValue;
+            timezoneObj.dataBind();
+        }
+        this.showDetails(eventObj);
+        if (eventObj[this.fields.recurrenceRule] && this.recurrenceEditor) {
+            this.recurrenceEditor.setRecurrenceRule(<string>eventObj[this.fields.recurrenceRule], <Date>eventObj[this.fields.startTime]);
+        } else if (!this.parent.isAdaptive && this.recurrenceEditor) {
+            this.recurrenceEditor.setProperties({ startDate: eventObj[this.fields.startTime] });
+            this.recurrenceEditor.setRecurrenceRule('');
+        }
+        this.repeatStartDate = <Date>eventObj[this.fields.startTime];
+        this.repeatRule = '';
+        if (eventObj[this.fields.recurrenceRule]) {
+            if (this.recurrenceEditor) {
+                this.recurrenceEditor.setRecurrenceRule(
+                    <string>eventObj[this.fields.recurrenceRule], <Date>eventObj[this.fields.startTime]);
+            }
+            this.repeatRule = <string>eventObj[this.fields.recurrenceRule];
+        }
+        if (this.parent.isAdaptive && isNullOrUndefined(this.parent.editorTemplate)) {
+            const element: HTMLElement = <HTMLElement>this.element.querySelector('.' + REPEAT_CONTAINER_CLASS);
+            if (eventObj[this.fields.recurrenceRule]) {
+                removeClass([element], HIDE_STYLE_CLASS);
+                this.repeatStatus.setProperties({ checked: true });
+            } else {
+                addClass([element], HIDE_STYLE_CLASS);
+                this.repeatStatus.setProperties({ checked: false });
+            }
+            this.updateRepeatLabel(this.repeatRule);
+        }
+        const isDisable: boolean = (this.parent.readonly || eventObj[this.fields.isReadonly]) as boolean;
+        if (!this.parent.isAdaptive) {
+            const saveButton: Element = this.element.querySelector('.' + cls.EVENT_WINDOW_SAVE_BUTTON_CLASS);
+            const deleteButton: Element = this.element.querySelector('.' + cls.DELETE_EVENT_CLASS);
+            this.disableButton(saveButton, isDisable);
+            this.disableButton(deleteButton, isDisable);
+        } else {
+            const saveIcon: Element = this.element.querySelector('.' + cls.EVENT_WINDOW_SAVE_ICON_CLASS);
+            if (saveIcon) {
+                if (isDisable) {
+                    addClass([saveIcon], cls.ICON_DISABLE_CLASS);
+                } else {
+                    removeClass([saveIcon], cls.ICON_DISABLE_CLASS);
+                }
+            }
+        }
+        this.dialogObject.show();
+    }
+
+    private disableButton(element: Element, value: boolean): void {
+        if (element) {
+            ((element as EJ2Instance).ej2_instances[0] as Button).disabled = value;
+        }
+    }
+
+    private renderRecurrenceEditor(): RecurrenceEditor {
+        return new RecurrenceEditor({
+            calendarMode: this.parent.calendarMode,
+            cssClass: this.parent.cssClass,
+            dateFormat: this.parent.dateFormat,
+            enableRtl: this.parent.enableRtl,
+            firstDayOfWeek: this.parent.activeViewOptions.firstDayOfWeek,
+            locale: this.parent.locale
+        });
+    }
+
+    public updateMinMaxDateToEditor(): void {
+        const startDate: Element = this.element.querySelector('.e-start');
+        const endDate: Element = this.element.querySelector('.e-end');
+        if (startDate && endDate) {
+            const startObj: DatePicker = (startDate as EJ2Instance).ej2_instances[0] as DatePicker;
+            const endObj: DatePicker = (endDate as EJ2Instance).ej2_instances[0] as DatePicker;
+            startObj.min = this.parent.minDate;
+            startObj.max = new Date(new Date(+this.parent.maxDate).setHours(23, 59, 59));
+            endObj.min = this.parent.minDate;
+            endObj.max = new Date(new Date(+this.parent.maxDate).setHours(23, 59, 59));
+            startObj.dataBind();
+            endObj.dataBind();
+        }
+        if (this.recurrenceEditor) {
+            const untilDate: Element = this.recurrenceEditor.element.querySelector('.e-until-date');
+            if (untilDate) {
+                const untilObj: DatePicker = (untilDate as EJ2Instance).ej2_instances[0] as DatePicker;
+                untilObj.min = this.parent.minDate;
+                untilObj.max = this.parent.maxDate;
+                untilObj.dataBind();
+            }
+        }
+    }
+
+    private updateRepeatLabel(repeatRule: string): void {
+        if (this.parent.isAdaptive && !this.repeatDialogObject) {
+            this.renderRepeatDialog();
+        }
+        const data: string = repeatRule ?
+            (this.l10n.getConstant('repeats') + ' ' + this.recurrenceEditor.getRuleSummary(repeatRule)) : this.l10n.getConstant('repeat');
+        this.repeatStatus.setProperties({ label: data });
+    }
+
+    public dialogClose(event?: Event): void {
+        if (this.isEnterKey) {
+            this.isEnterKey = false;
+            return;
+        }
+        this.dialogEvent = event;
+        this.isCrudAction = false;
+        this.parent.activeEventData = { event: undefined, element: undefined };
+        this.parent.currentAction = null;
+        this.dialogObject.hide();
+    }
+
+    private resetForm(): void {
+        this.fieldValidator.destroyToolTip();
+        this.resetFormFields();
+        if (!this.parent.isAdaptive && this.recurrenceEditor && !this.recurrenceEditor.isDestroyed) {
+            this.recurrenceEditor.resetFields();
+        }
+    }
+
+    private timezoneChangeStyle(value: boolean): void {
+        const timezoneDiv: HTMLElement = this.element.querySelector('.' + cls.EVENT_WINDOW_TIME_ZONE_DIV_CLASS) as HTMLElement;
+        const localTimezoneName: string = this.parent.tzModule.getLocalTimezoneName();
+        if (value) {
+            addClass([timezoneDiv], cls.ENABLE_CLASS);
+            const startTimezoneObj: DropDownList = this.getInstance(cls.EVENT_WINDOW_START_TZ_CLASS) as unknown as DropDownList;
+            const endTimezoneObj: DropDownList = this.getInstance(cls.EVENT_WINDOW_END_TZ_CLASS) as unknown as DropDownList;
+            const timezone: Record<string, any>[] = startTimezoneObj.dataSource as Record<string, any>[];
+            if (!startTimezoneObj.value || !this.parent.timezone) {
+                const found: boolean = timezone.some((tz: Record<string, any>) => { return tz.Value === localTimezoneName; });
+                if (!found) {
+                    timezone.push({ Value: localTimezoneName, Text: localTimezoneName });
+                    startTimezoneObj.dataSource = timezone;
+                    endTimezoneObj.dataSource = timezone;
+                    startTimezoneObj.dataBind();
+                    endTimezoneObj.dataBind();
+                }
+            }
+            startTimezoneObj.value = startTimezoneObj.value || this.parent.timezone || localTimezoneName;
+            endTimezoneObj.value = endTimezoneObj.value || this.parent.timezone || localTimezoneName;
+            startTimezoneObj.dataBind();
+            endTimezoneObj.dataBind();
+        } else {
+            removeClass([timezoneDiv], cls.ENABLE_CLASS);
+        }
+    }
+
+    private resetFormFields(): void {
+        const formElement: HTMLInputElement[] = this.getFormElements(cls.EVENT_WINDOW_DIALOG_CLASS);
+        for (const currentElement of formElement) {
+            const columnName: string = currentElement.name || this.getColumnName(currentElement);
+            if (!isNullOrUndefined(columnName) && columnName !== '') {
+                this.setDefaultValueToElement(currentElement as HTMLElement);
+            }
+        }
+    }
+
+    public eventSave(event: Event, alert?: string): void {
+        if (this.isEnterKey) {
+            this.isEnterKey = false;
+            return;
+        }
+        const formElement: Element = this.element.querySelector('.' + cls.FORM_CLASS);
+        if (formElement && formElement.classList.contains('e-formvalidator') &&
+            !((formElement as EJ2Instance).ej2_instances[0] as FormValidator).validate()) {
+            return;
+        }
+        const dataCollection: Record<string, Record<string, any>> = this.getEventDataFromEditor();
+        if (this.processEventValidation(dataCollection.tempData, alert)) {
+            return;
+        }
+        this.eventCrudData = dataCollection.eventData;
+        this.dialogEvent = event;
+        this.isCrudAction = true;
+        this.dialogObject.hide();
+    }
+
+    public getEventDataFromEditor(): Record<string, Record<string, any>> {
+        const eventObj: Record<string, any> =
+            extend({}, this.getObjectFromFormData(cls.EVENT_WINDOW_DIALOG_CLASS)) as Record<string, any>;
+        if (!eventObj.Timezone) {
+            eventObj[this.fields.startTimezone] = null;
+            eventObj[this.fields.endTimezone] = null;
+        }
+        delete eventObj.Timezone;
+        delete eventObj.Repeat;
+        this.setDefaultValueToObject(eventObj);
+        eventObj[this.fields.recurrenceRule] = this.recurrenceEditor ? this.recurrenceEditor.getRecurrenceRule() || null : undefined;
+        const tempObj: Record<string, any> = extend({}, eventObj, null, true) as Record<string, any>;
+        if (eventObj[this.fields.isAllDay]) {
+            eventObj[this.fields.startTime] = (isNullOrUndefined(eventObj[this.fields.startTime])) ? null
+                : util.resetTime(new Date((<Date>eventObj[this.fields.startTime]).getTime()));
+            eventObj[this.fields.endTime] = (isNullOrUndefined(eventObj[this.fields.endTime])) ? null
+                : util.addDays(util.resetTime(new Date((<Date>eventObj[this.fields.endTime]).getTime())), 1);
+        }
+        return { eventData: eventObj, tempData: tempObj };
+    }
+
+    private processEventValidation(eventObj: Record<string, any>, alert?: string): boolean {
+        let alertType: string;
+        if (isNullOrUndefined(this.parent.editorTemplate)) {
+            if (!eventObj[this.fields.startTime] || !eventObj[this.fields.endTime]) {
+                this.parent.quickPopup.openValidationError('invalidDateError');
+                return true;
+            }
+            if (eventObj[this.fields.startTime] > eventObj[this.fields.endTime]) {
+                this.parent.quickPopup.openValidationError('startEndError');
+                return true;
+            }
+        }
+        if (this.recurrenceEditor && this.recurrenceEditor.value && this.recurrenceEditor.value !== '') {
+            if (this.parent.currentAction !== 'EditOccurrence') {
+                alertType = this.recurrenceValidation(<Date>eventObj[this.fields.startTime], <Date>eventObj[this.fields.endTime], alert);
+            }
+            let isShowAlert: boolean = true;
+            if (alertType === 'seriesChangeAlert' && this.parent.uiStateValues.isIgnoreOccurrence) {
+                isShowAlert = false;
+            }
+            if (!isNullOrUndefined(alertType) && isShowAlert
+                && ((!this.parent.enableRecurrenceValidation && alertType === 'wrongPattern') || this.parent.enableRecurrenceValidation)) {
+                this.parent.quickPopup.openRecurrenceValidationAlert(alertType);
+                return true;
+            }
+        }
+        return false;
+    }
+
+    private processCrudActions(eventObj: Record<string, any>): boolean {
+        this.parent.uiStateValues.isBlock = false;
+        const resourceData: string[] | number[] = this.getResourceData(eventObj);
+        const isResourceEventExpand: boolean = (this.parent.activeViewOptions.group.resources.length > 0 ||
+            this.parent.resourceCollection.length > 0) && !this.parent.activeViewOptions.group.allowGroupEdit
+            && !isNullOrUndefined(resourceData);
+        const eventId: string = this.getEventIdFromForm();
+        if (!isNullOrUndefined(eventId)) {
+            let eveId: number | string = this.parent.eventBase.getEventIDType() === 'string' ? eventId : parseInt(eventId, 10);
+            let editedData: Record<string, any> = this.parent.eventsData.filter((data: Record<string, any>) =>
+                data[this.fields.id] === eveId)[0];
+            if (isNullOrUndefined(editedData)) {
+                editedData = this.parent.blockData.filter((data: Record<string, any>) =>
+                    data[this.fields.id] === eveId)[0];
+            }
+            eventObj = extend({}, editedData, eventObj) as Record<string, any>;
+            if (eventObj[this.fields.isReadonly]) {
+                return false;
+            }
+            if (this.parent.eventBase.checkOverlap(eventObj)) {
+                return true;
+            }
+            let currentAction: CurrentAction;
+            if (!isNullOrUndefined(editedData[this.fields.recurrenceRule])) {
+                currentAction = this.parent.currentAction;
+                eventObj.Guid = (<Record<string, any>>this.parent.activeEventData.event).Guid;
+                if (this.parent.currentAction === 'EditOccurrence') {
+                    if (!eventObj[this.fields.recurrenceID]) {
+                        eventObj[this.fields.id] = this.parent.eventBase.getEventMaxID();
+                        eventObj.Guid = (<Record<string, any>>this.parent.activeEventData.event).Guid;
+                    } else {
+                        eveId = eventObj[this.fields.recurrenceID] as number;
+                        currentAction = null;
+                    }
+                    if (this.parent.enableRecurrenceValidation && this.editOccurrenceValidation(eveId, eventObj)) {
+                        return true;
+                    }
+                }
+                if (this.parent.currentAction === 'EditSeries' || eventObj[this.fields.id] !== editedData[this.fields.id]) {
+                    eventObj[this.fields.recurrenceID] = editedData[this.fields.id];
+                } else if (this.parent.currentAction === 'EditFollowingEvents') {
+                    eventObj[this.fields.id] = this.parent.eventBase.getEventMaxID();
+                    eventObj[this.fields.followingID] = editedData[this.fields.id];
+                }
+            }
+            if (isResourceEventExpand) {
+                this.resourceSaveEvent(eventObj, 'Save', currentAction);
+            } else {
+                this.parent.saveEvent(eventObj, currentAction);
+            }
+        } else {
+            this.parent.currentAction = 'Add';
+            if (this.parent.eventBase.checkOverlap(eventObj)) {
+                return true;
+            }
+            if (isResourceEventExpand) {
+                this.resourceSaveEvent(eventObj, this.parent.currentAction);
+            } else {
+                eventObj[this.fields.id] = this.parent.eventBase.getEventMaxID();
+                this.parent.addEvent(eventObj);
+            }
+        }
+        return this.parent.uiStateValues.isBlock;
+    }
+
+    private getResourceData(eventObj: Record<string, any>): string[] | number[] {
+        let resourceData: string[] | number[] = null;
+        if (!isNullOrUndefined(this.parent.resourceBase) && !isNullOrUndefined(this.parent.resourceBase.resourceCollection)
+            && this.parent.resourceBase.resourceCollection.length > 0) {
+            const lastResourceData: ResourcesModel = this.parent.resourceBase.resourceCollection.slice(-1)[0];
+            resourceData = eventObj[lastResourceData.field] as string[] | number[];
+        }
+        return resourceData;
+    }
+
+    public getObjectFromFormData(className: string): Record<string, any> {
+        const formElement: HTMLInputElement[] = this.getFormElements(className);
+        const eventObj: Record<string, any> = {};
+        for (const currentElement of formElement) {
+            const columnName: string = currentElement.name || this.getColumnName(currentElement);
+            if (!isNullOrUndefined(columnName) && columnName !== '') {
+                eventObj[`${columnName}`] = this.getValueFromElement(currentElement as HTMLElement);
+            }
+        }
+        return eventObj;
+    }
+
+    public setDefaultValueToObject(eventObj: Record<string, any>): void {
+        if (!isNullOrUndefined(eventObj[this.fields.subject])) {
+            eventObj[this.fields.subject] = eventObj[this.fields.subject] || this.parent.eventSettings.fields.subject.default
+                || this.l10n.getConstant('addTitle');
+        }
+        if (!isNullOrUndefined(eventObj[this.fields.location])) {
+            eventObj[this.fields.location] = eventObj[this.fields.location] || this.parent.eventSettings.fields.location.default;
+        }
+        if (!isNullOrUndefined(eventObj[this.fields.description])) {
+            eventObj[this.fields.description] = eventObj[this.fields.description] || this.parent.eventSettings.fields.description.default;
+        }
+    }
+
+    private recurrenceValidation(startDate: Date, endDate: Date, alert: string): string {
+        let alertMessage: string;
+        const recEditor: RecurrenceEditor = this.recurrenceEditor;
+        const interval: number = (this.getInstance('e-repeat-interval.e-numerictextbox') as unknown as NumericTextBox).value;
+        if (alert !== this.l10n.getConstant('ok')) {
+            const activeEvent: Record<string, any> = <Record<string, any>>this.parent.activeEventData.event;
+            let excludedEvents: Record<string, any>[] = [];
+            if ((this.parent.currentAction === 'EditSeries' || this.parent.currentAction === 'EditFollowingEvents')
+                && !isNullOrUndefined(activeEvent)) {
+                const eventStartTime: string = activeEvent[this.parent.eventFields.startTime] as string;
+                const seriesEvents: Record<string, any>[] = this.parent.eventBase.getSeriesEvents(this.eventData, eventStartTime);
+                if (seriesEvents.length > 0) {
+                    excludedEvents = this.parent.eventBase.getEditedOccurrences(seriesEvents, eventStartTime);
+                } else {
+                    const event: Record<string, any> = this.parent.eventBase.getEventById(
+                        activeEvent[this.parent.eventFields.id] as string);
+                    excludedEvents = this.parent.eventBase.getEditedOccurrences([event], eventStartTime);
+                }
+                if (this.parent.currentAction === 'EditSeries'
+                    && !isNullOrUndefined(this.eventData[this.parent.eventFields.recurrenceException])) {
+                    excludedEvents.push(this.eventData);
+                }
+            }
+            if (excludedEvents.length > 0) {
+                alertMessage = 'seriesChangeAlert';
+            }
+            if ((this.getInstance('e-end-on-left .e-ddl .e-dropdownlist') as unknown as DropDownList).value === 'until' &&
+                (this.getInstance('e-end-on-date .e-datepicker') as unknown as DatePicker).value < startDate) {
+                alertMessage = 'wrongPattern';
+            }
+            if (isNullOrUndefined(alertMessage)) {
+                let types: string[] = recEditor.value.split(';')[1].split('=')[1].split(',');
+                const obj: Record<string, any> = { 'SU': 0, 'MO': 1, 'TU': 2, 'WE': 3, 'TH': 4, 'FR': 5, 'SA': 6 };
+                const temp: number[] = [];
+                const tempDiff: number[] = [];
+                let tempValue: number[];
+                switch (recEditor.value.split(';')[0].split('=')[1]) {
+                case 'DAILY':
+                    if ((((endDate.getTime() - startDate.getTime()) / (1000 * 3600)) > (interval * 24))) {
+                        alertMessage = 'createError';
+                    }
+                    break;
+                case 'WEEKLY':
+                    types = recEditor.value.split(';')[1].split('=')[1].split(',');
+                    for (let index: number = 0; index < types.length * (interval + 1); index++) {
+                        temp[parseInt(index.toString(), 10)] =
+                            (types.length > index) ? <number>obj[types[parseInt(index.toString(), 10)]] :
+                                temp[index - types.length] + (7 * interval);
+                    }
+                    tempValue = temp.sort((a: number, b: number) => a - b);
+                    for (let index: number = 1; index < tempValue.length; index++) {
+                        tempDiff.push(tempValue[parseInt(index.toString(), 10)] - tempValue[index - 1]);
+                    }
+                    if ((((endDate.getTime() - startDate.getTime()) / (1000 * 3600)) >= Math.min(...tempDiff) * 24)
+                        || isNullOrUndefined(interval)) {
+                        alertMessage = 'createError';
+                    }
+                    break;
+                case 'MONTHLY':
+                    if (endDate.getTime() >= new Date(+startDate).setMonth(startDate.getMonth() + interval)) {
+                        alertMessage = 'createError';
+                    }
+                    break;
+                case 'YEARLY':
+                    if (endDate.getTime() >= new Date(+startDate).setFullYear(startDate.getFullYear() + interval)) {
+                        alertMessage = 'createError';
+                    }
+                    break;
+                }
+            }
+        } else {
+            if (endDate.getTime() >= new Date(+startDate).setMonth(startDate.getMonth() + interval)) {
+                alertMessage = 'createError';
+            }
+            if (isNullOrUndefined(alertMessage)) {
+                this.parent.quickPopup.quickDialog.hide();
+            }
+        }
+        if (isNullOrUndefined(interval)) {
+            alertMessage = 'createError';
+        }
+        return alertMessage;
+    }
+
+    private getRecurrenceIndex(recColl: Record<string, any>[], event: Record<string, any>): number {
+        let recIndex: number;
+        for (let index: number = 0; index < recColl.length; index++) {
+            if (event[this.fields.startTime].valueOf() === recColl[parseInt(index.toString(), 10)][this.fields.startTime].valueOf()) {
+                recIndex = index;
+                break;
+            }
+        }
+        return recIndex;
+    }
+
+    private trimAllDay(data: Record<string, any>): void {
+        if (data[this.fields.isAllDay]) {
+            const temp: number = util.addDays(new Date(+data[this.fields.endTime]), -1).getTime();
+            data[this.fields.endTime] = (+data[this.fields.startTime] > temp) ? data[this.fields.endTime] : new Date(temp);
+        }
+    }
+
+    public editOccurrenceValidation(eventId: string | number, currentData: Record<string, any>, editData?: Record<string, any>)
+        : boolean {
+        if (editData === void 0) { editData = this.eventData; }
+        const recurColl: Record<string, any>[] = <Record<string, any>[]>this.parent.getOccurrencesByID(eventId);
+        const excludedDatas: Record<string, any>[] = this.parent.eventsData.filter((data: Record<string, any>) =>
+            data[this.fields.recurrenceID] === eventId) as Record<string, any>[];
+        excludedDatas.map((data: Record<string, any>) => recurColl.push(extend({}, data) as Record<string, any>));
+        currentData = extend({}, currentData) as Record<string, any>;
+        this.trimAllDay(currentData);
+        for (const data of recurColl) {
+            this.trimAllDay(data);
+        }
+        this.parent.eventBase.sortByTime(recurColl);
+        const index: number = this.getRecurrenceIndex(recurColl, editData);
+        if (isNullOrUndefined(index)) {
+            return false;
+        }
+        const currentStartTime: Date = new Date(+currentData[this.fields.startTime]);
+        const currentEndTime: Date = new Date(+currentData[this.fields.endTime]);
+        let nextStartTime: Date;
+        let nextEndTime: Date;
+        if (index !== recurColl.length - 1) {
+            nextStartTime = new Date(+recurColl[index + 1][this.fields.startTime]);
+            nextEndTime = new Date(+recurColl[index + 1][this.fields.endTime]);
+        }
+        const lastEndTime: Date = new Date(+recurColl[recurColl.length - 1][this.fields.endTime]);
+        if (index === 0) {
+            if (!isNullOrUndefined(recurColl[index + 1])) {
+                if (!(nextStartTime.getTime() >= currentEndTime.getTime()) &&
+                    (util.resetTime(lastEndTime).getTime() >=
+                        util.resetTime(currentStartTime).getTime()) ||
+                    util.resetTime(lastEndTime).getTime() < util.resetTime(currentStartTime).getTime()) {
+                    this.parent.quickPopup.openRecurrenceValidationAlert('occurrenceAlert');
+                    return true;
+                } else if (!(util.resetTime(currentStartTime).getTime() <
+                    util.resetTime(nextStartTime).getTime())) {
+                    this.parent.quickPopup.openRecurrenceValidationAlert('sameDayAlert');
+                    return true;
+                }
+            }
+            return false;
+        }
+        else {
+            const previousStartTime: Date = new Date(+recurColl[index - 1][this.fields.startTime]);
+            const previousEndTime: Date = new Date(+recurColl[index - 1][this.fields.endTime]);
+            if (index === recurColl.length - 1) {
+                if (util.resetTime(new Date(+recurColl[(recurColl.length - 1) - index][this.fields.startTime])).getTime() >
+                    util.resetTime(currentStartTime).getTime()) {
+                    this.parent.quickPopup.openRecurrenceValidationAlert('occurrenceAlert');
+                    return true;
+                }
+                else if (!((previousEndTime.getTime() <= currentStartTime.getTime()) &&
+                    (util.resetTime(currentStartTime).getTime() > util.resetTime(previousStartTime).getTime()))) {
+                    this.parent.quickPopup.openRecurrenceValidationAlert('sameDayAlert');
+                    return true;
+                }
+            }
+            else if (!(((
+                util.resetTime(previousStartTime).getTime() < util.resetTime(currentStartTime).getTime()) ||
+                util.resetTime(new Date(+recurColl[0][this.fields.startTime])).getTime() >
+                util.resetTime(currentStartTime).getTime()) &&
+                ((util.resetTime(nextStartTime).getTime() > util.resetTime(currentStartTime).getTime()) ||
+                    (lastEndTime.getTime() < currentStartTime.getTime())))) {
+                this.parent.quickPopup.openRecurrenceValidationAlert('sameDayAlert');
+                return true;
+            }
+            else if (!(previousEndTime.getTime() <= currentStartTime.getTime() && nextStartTime.getTime() >=
+                currentEndTime.getTime()) || (util.resetTime(nextEndTime).getTime() <
+                    util.resetTime(currentStartTime).getTime()) ||
+                (util.resetTime(previousStartTime).getTime() > util.resetTime(currentEndTime).getTime()) ||
+                !(util.resetTime(currentStartTime).getTime() < util.resetTime(nextStartTime).getTime())) {
+                this.parent.quickPopup.openRecurrenceValidationAlert('occurrenceAlert');
+                return true;
+            }
+        }
+        return false;
+    }
+
+    private resourceSaveEvent(eventObj: Record<string, any>, action?: CurrentAction, currentAction?: CurrentAction): void {
+        const lastResourceData: ResourcesModel = this.parent.resourceBase.resourceCollection.slice(-1)[0];
+        let resourceData: string[] | number[] = eventObj[lastResourceData.field] as string[] | number[];
+        resourceData = (resourceData instanceof Array) ? resourceData.reverse() : [resourceData].reverse();
+        const lastLevel: TdData[] = this.parent.resourceBase.lastResourceLevel;
+        const eventList: Record<string, any>[] = [];
+        for (let i: number = 0; i < resourceData.length; i++) {
+            const events: Record<string, any> = <Record<string, any>>extend({}, eventObj, null, true);
+            events[this.fields.id] = this.parent.eventBase.getEventMaxID();
+            const temp: Record<string, any>[] = [];
+            const addValues: CallbackFunction = () => {
+                if (action === 'Save' && i === resourceData.length - 1) {
+                    if (temp.length > 0) {
+                        temp[0][this.fields.id] = eventObj[this.fields.id];
+                        for (let k: number = 1; k < temp.length; k++) {
+                            temp[parseInt(k.toString(), 10)][this.fields.id] = this.parent.eventBase.getEventMaxID(i);
+                            eventList.push(temp[parseInt(k.toString(), 10)]);
+                            this.parent.saveEvent(temp[0], currentAction);
+                        }
+                    } else {
+                        events[this.fields.id] = eventObj[this.fields.id];
+                        this.parent.saveEvent(events, currentAction);
+                    }
+                } else {
+                    if (temp.length > 0) {
+                        for (let j: number = 0; j < temp.length; j++) {
+                            temp[parseInt(j.toString(), 10)][this.fields.id] = this.parent.eventBase.getEventMaxID(j);
+                            eventList.push(temp[parseInt(j.toString(), 10)]);
+                        }
+                    } else {
+                        events[this.fields.id] = this.parent.eventBase.getEventMaxID(i);
+                        eventList.push(events);
+                    }
+                }
+            };
+            if (this.parent.activeViewOptions.group.byGroupID && (!isNullOrUndefined(lastLevel))) {
+                const lastResource: Record<string, any>[] = lastResourceData.dataSource as Record<string, any>[];
+                const resCol: Record<string, any>[] = this.parent.resourceCollection as Record<string, any>[];
+                let index: number;
+                if (resCol.length > 1) {
+                    index =
+                    util.findIndexInData(lastResource, lastResourceData.idField, resourceData[parseInt(i.toString(), 10)] as string,
+                                         events, resCol);
+                } else {
+                    index =
+                        util.findIndexInData(lastResource, lastResourceData.idField, resourceData[parseInt(i.toString(), 10)] as string);
+                }
+                if (index < 0) {
+                    return;
+                }
+                const groupId: Record<string, any> =
+                    lastResource[parseInt(index.toString(), 10)][lastResourceData.groupIDField] as Record<string, any>;
+                const filter: TdData = lastLevel.filter((obj: TdData) => obj.resourceData[lastResourceData.idField] ===
+                    resourceData[parseInt(i.toString(), 10)]).
+                    filter((obj: TdData) => obj.resourceData[lastResourceData.groupIDField] === groupId)[0];
+                const groupOrder: number[] | string[] = filter.groupOrder;
+                for (let index: number = 0; index < this.parent.resourceBase.resourceCollection.length; index++) {
+                    const field: string = this.parent.resourceBase.resourceCollection[parseInt(index.toString(), 10)].field;
+                    events[`${field}`] = ((groupOrder[parseInt(index.toString(), 10)] as any) instanceof Array) ? groupOrder[parseInt(index.toString(), 10)][0] :
+                        groupOrder[parseInt(index.toString(), 10)];
+                }
+                addValues();
+            } else {
+                for (let index: number = 0; index < this.parent.resourceBase.resourceCollection.length - 1; index++) {
+                    const field: string = this.parent.resourceBase.resourceCollection[parseInt(index.toString(), 10)].field;
+                    if (events[`${field}`] instanceof Array && (events[`${field}`] as Record<string, any>[]).length > 1) {
+                        for (let k: number = 0; k < (events[`${field}`] as Record<string, any>[]).length; k++) {
+                            const event: Record<string, any> = <Record<string, any>>extend({}, events, null, true);
+                            event[`${field}`] = (eventObj[`${field}`] as Record<string, any>)[parseInt(k.toString(), 10)];
+                            event[lastResourceData.field] = resourceData[parseInt(i.toString(), 10)];
+                            temp.push(event);
+                        }
+                    } else {
+                        if (temp.length === 0) {
+                            events[`${field}`] = (eventObj[`${field}`] instanceof Array) ?
+                                (eventObj[`${field}`] as Record<string, any>)[0] : eventObj[`${field}`];
+                            events[lastResourceData.field] = resourceData[parseInt(i.toString(), 10)];
+                        } else {
+                            for (let l: number = 0; l < temp.length; l++) {
+                                temp[parseInt(l.toString(), 10)][`${field}`] = (eventObj[`${field}`] instanceof Array) ?
+                                    (eventObj[`${field}`] as Record<string, any>)[0] : eventObj[`${field}`];
+                            }
+                        }
+                    }
+                }
+                events[lastResourceData.field] = resourceData[parseInt(i.toString(), 10)];
+                addValues();
+            }
+        }
+        if (eventList.length > 0) {
+            for (const event of eventList) {
+                event[this.fields.recurrenceException] = null;
+                event[this.fields.recurrenceID] = null;
+            }
+            this.parent.addEvent(eventList);
+        }
+    }
+
+    private getEventIdFromForm(): string {
+        return this.element.querySelector('.' + cls.FORM_CLASS).getAttribute('data-id');
+    }
+
+    private getFormElements(className: string): HTMLInputElement[] {
+        let elements: HTMLInputElement[] = [];
+        if (className === cls.EVENT_WINDOW_DIALOG_CLASS) {
+            elements = [].slice.call(this.element.querySelectorAll('.' + EVENT_FIELD));
+        } else {
+            elements = [].slice.call(this.parent.element.querySelectorAll('.' + className + ' .' + EVENT_FIELD));
+        }
+        return elements;
+    }
+
+    private getValueFromElement(element: HTMLElement): number | string | Date | boolean | string[] | number[] {
+        let value: number | string | Date | boolean | string[] | number[];
+        if (element.classList.contains('e-datepicker')) {
+            value = ((element as EJ2Instance).ej2_instances[0] as DatePicker).value as Date;
+        } else if (element.classList.contains('e-datetimepicker')) {
+            value = ((element as EJ2Instance).ej2_instances[0] as DateTimePicker).value as Date;
+        } else if (element.classList.contains('e-dropdownlist')) {
+            value = ((element as EJ2Instance).ej2_instances[0] as DropDownList).value as string | number;
+        } else if (element.classList.contains('e-multiselect')) {
+            value = ((element as EJ2Instance).ej2_instances[0] as MultiSelect).value as string[] | number[];
+        } else if (element.classList.contains('e-checkbox')) {
+            value = ((element as EJ2Instance).ej2_instances[0] as CheckBox).checked as boolean;
+        } else if (element.classList.contains('e-numerictextbox')) {
+            value = ((element as EJ2Instance).ej2_instances[0] as NumericTextBox).value as number;
+        } else {
+            if ((element as HTMLInputElement).type === 'checkbox') {
+                value = (element as HTMLInputElement).checked as boolean;
+            } else {
+                value = this.parent.enableHtmlSanitizer ?
+                    SanitizeHtmlHelper.sanitize((element as HTMLInputElement).value as string) : (element as HTMLInputElement).value;
+            }
+        }
+        return value;
+    }
+
+    private setValueToElement(element: HTMLElement, value: number | string | Date | boolean | number[] | string[]): void {
+        if (element.classList.contains('e-datepicker')) {
+            const instance: DatePicker = (element as EJ2Instance).ej2_instances[0] as DatePicker;
+            instance.value = <Date>value;
+            instance.dataBind();
+        } else if (element.classList.contains('e-datetimepicker')) {
+            const instance: DateTimePicker = (element as EJ2Instance).ej2_instances[0] as DateTimePicker;
+            if (instance.element.classList.contains(cls.EVENT_WINDOW_START_CLASS)) {
+                this.eventWindowTime.startTime = new Date('' + value);
+            } else {
+                this.eventWindowTime.endTime = new Date('' + value);
+            }
+            instance.value = <Date>value;
+            instance.dataBind();
+        } else if (element.classList.contains('e-dropdownlist')) {
+            const instance: DropDownList = (element as EJ2Instance).ej2_instances[0] as DropDownList;
+            instance.value = <string>value;
+            instance.dataBind();
+        } else if (element.classList.contains('e-multiselect')) {
+            const instance: MultiSelect = (element as EJ2Instance).ej2_instances[0] as MultiSelect;
+            instance.value = [];
+            instance.value = <string[]>((value instanceof Array) ? value : [value]);
+            instance.dataBind();
+        } else if (element.classList.contains('e-checkbox')) {
+            const instance: CheckBox = (element as EJ2Instance).ej2_instances[0] as CheckBox;
+            instance.checked = <boolean>value;
+            instance.dataBind();
+        } else if (element.classList.contains('e-numerictextbox')) {
+            const instance: NumericTextBox = (element as EJ2Instance).ej2_instances[0] as NumericTextBox;
+            instance.value = <number>value;
+            instance.dataBind();
+        } else {
+            if ((element as HTMLInputElement).type !== 'checkbox') {
+                (element as HTMLInputElement).value = <string>value || '';
+            } else {
+                (element as HTMLInputElement).checked = <boolean>value;
+            }
+        }
+    }
+
+    private setDefaultValueToElement(element: HTMLElement): void {
+        if (element.classList.contains('e-datepicker')) {
+            const instance: DatePicker = (element as EJ2Instance).ej2_instances[0] as DatePicker;
+            instance.value = this.parent.getCurrentTime();
+            instance.dataBind();
+        } else if (element.classList.contains('e-datetimepicker')) {
+            const instance: DateTimePicker = (element as EJ2Instance).ej2_instances[0] as DateTimePicker;
+            const dateValue: Date = this.parent.getCurrentTime();
+            this.eventWindowTime = { startTime: dateValue, endTime: dateValue };
+            instance.value = dateValue;
+            instance.dataBind();
+        } else if (element.classList.contains('e-dropdownlist')) {
+            const instance: DropDownList = (element as EJ2Instance).ej2_instances[0] as DropDownList;
+            instance.value = null;
+            instance.dataBind();
+        } else if (element.classList.contains('e-multiselect')) {
+            const instance: MultiSelect = (element as EJ2Instance).ej2_instances[0] as MultiSelect;
+            instance.value = [];
+            instance.dataBind();
+        } else if (element.classList.contains('e-checkbox')) {
+            const instance: CheckBox = (element as EJ2Instance).ej2_instances[0] as CheckBox;
+            instance.checked = false;
+            instance.dataBind();
+        } else if (element.classList.contains('e-numerictextbox')) {
+            const instance: NumericTextBox = (element as EJ2Instance).ej2_instances[0] as NumericTextBox;
+            instance.value = null;
+            instance.dataBind();
+        } else {
+            if ((element as HTMLInputElement).type === 'checkbox') {
+                (element as HTMLInputElement).checked = false;
+            } else {
+                (element as HTMLInputElement).value = '';
+            }
+        }
+    }
+
+    private getInstance(className: string): Record<string, any> {
+        const element: HTMLElement = this.element.querySelector('.' + className) as HTMLElement;
+        return element ? (element as EJ2Instance).ej2_instances[0] : null;
+    }
+
+    private eventDelete(event: Event): void {
+        if (this.isEnterKey) {
+            this.isEnterKey = false;
+            return;
+        }
+        switch (this.parent.currentAction) {
+        case 'EditOccurrence':
+            if (!isNullOrUndefined((<Record<string, any>>this.parent.activeEventData.event)[this.parent.eventFields.recurrenceRule])) {
+                this.parent.currentAction = 'DeleteOccurrence';
+            } else {
+                this.parent.currentAction = 'Delete';
+            }
+            break;
+        case 'EditSeries':
+            this.parent.currentAction = 'DeleteSeries';
+            break;
+        case 'Save':
+            this.parent.currentAction = 'Delete';
+            break;
+        case 'EditFollowingEvents':
+            if (!isNullOrUndefined((<Record<string, any>>this.parent.activeEventData.event)[this.parent.eventFields.recurrenceRule])) {
+                this.parent.currentAction = 'DeleteFollowingEvents';
+            }
+            break;
+        }
+        this.dialogEvent = event;
+        this.isCrudAction = false;
+        this.dialogObject.hide();
+        this.parent.quickPopup.openDeleteAlert();
+    }
+
+    public getRecurrenceEditorInstance(): RecurrenceEditor {
+        if (this.parent.isAdaptive && !this.repeatDialogObject) {
+            this.renderRepeatDialog();
+        }
+        return this.recurrenceEditor;
+    }
+
+    private destroyComponents(): void {
+        const formElements: HTMLInputElement[] = this.getFormElements(cls.EVENT_WINDOW_DIALOG_CLASS);
+        for (const element of formElements) {
+            let instance: Record<string, any>[];
+            if (element.classList.contains('e-datetimepicker')) {
+                instance = ((<HTMLElement>element) as EJ2Instance).ej2_instances;
+            } else if (element.classList.contains('e-datepicker')) {
+                instance = ((<HTMLElement>element) as EJ2Instance).ej2_instances;
+            } else if (element.classList.contains('e-checkbox')) {
+                instance = ((<HTMLElement>element) as EJ2Instance).ej2_instances;
+            } else if (element.classList.contains('e-dropdownlist')) {
+                instance = ((<HTMLElement>element) as EJ2Instance).ej2_instances;
+            } else if (element.classList.contains('e-multiselect')) {
+                instance = ((<HTMLElement>element) as EJ2Instance).ej2_instances;
+            } else if (element.classList.contains('e-numerictextbox')) {
+                instance = ((<HTMLElement>element) as EJ2Instance).ej2_instances;
+            }
+            if (instance && instance[0]) {
+                (instance[0] as unknown as Schedule).destroy();
+            }
+        }
+        if (this.buttonObj) {
+            this.buttonObj.destroy();
+        }
+    }
+
+    private detachComponents(): void {
+        const formElements: HTMLInputElement[] = this.getFormElements(cls.EVENT_WINDOW_DIALOG_CLASS);
+        for (const element of formElements) {
+            detach(element);
+        }
+    }
+
+    public destroy(isIgnore?: boolean): void {
+        if (this.parent && !this.parent.isDestroyed) {
+            this.parent.resetTemplates(['editorTemplate', 'editorHeaderTemplate', 'editorFooterTemplate']);
+        }
+        this.destroyComponents();
+        if (this.recurrenceEditor) {
+            this.recurrenceEditor.destroy();
+            detach(this.recurrenceEditor.element);
+            this.recurrenceEditor = null;
+        }
+        if (this.fieldValidator) {
+            this.fieldValidator.destroy();
+            this.fieldValidator = null;
+        }
+        if (this.repeatDialogObject) {
+            this.repeatDialogObject.destroy();
+            this.repeatDialogObject = null;
+        }
+        this.detachComponents();
+        if (this.dialogObject) {
+            if (this.dialogObject.element) {
+                const form: HTMLFormElement = this.dialogObject.element.querySelector('form');
+                util.removeChildren(form);
+                detach(form);
+                EventHandler.remove(this.dialogObject.element, 'keydown', this.preventEventSave);
+            }
+            this.dialogObject.destroy();
+            this.dialogObject = null;
+        }
+        if (this.element) {
+            remove(this.element);
+            this.element = null;
+        }
+        if (!isIgnore) {
+            this.l10n = null;
+            this.parent = null;
+            this.fields = null;
+            this.buttonObj = null;
+            this.repeatStatus = null;
+            this.eventWindowTime = null;
+            this.dialogEvent = null;
+        }
+    }
+
+}