@syncfusion/ej2-calendars 31.1.17 → 31.1.18

package/dist/ts/calendar/calendar.ts

@@ -1,3009 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import { Component, EventHandler, Internationalization, ModuleDeclaration } from '@syncfusion/ej2-base';
-import { INotifyPropertyChanged, KeyboardEvents, L10n, SwipeEventArgs } from '@syncfusion/ej2-base';
-import { NotifyPropertyChanges, KeyboardEventArgs, BaseEventArgs } from '@syncfusion/ej2-base';
-import { cldrData, getDefaultDateObject, rippleEffect } from '@syncfusion/ej2-base';
-import { removeClass, detach, closest, addClass, attributes } from '@syncfusion/ej2-base';
-import { getValue, getUniqueID, extend, Browser } from '@syncfusion/ej2-base';
-import { Property, Event, EmitType, isNullOrUndefined, throwError } from '@syncfusion/ej2-base';
-import { CalendarModel, CalendarBaseModel } from './calendar-model';
-import { Islamic, IslamicDateArgs } from './index';
-
-
-/**
- * Specifies the view of the calendar.
- */
-export type CalendarView = 'Month' | 'Year' | 'Decade';
-
-export type CalendarType = 'Islamic' | 'Gregorian';
-
-export type DayHeaderFormats = 'Short' | 'Narrow' | 'Abbreviated' | 'Wide';
-
-
-/**
- * Specifies the rule for defining the first week of the year.
- */
-export type WeekRule = 'FirstDay' | 'FirstFullWeek' | 'FirstFourDayWeek';
-
-//class constant defination.
-const OTHERMONTH: string = 'e-other-month';
-const OTHERDECADE: string = 'e-other-year';
-const ROOT: string = 'e-calendar';
-const DEVICE: string = 'e-device';
-const HEADER: string = 'e-header';
-const RTL: string = 'e-rtl';
-const CONTENT: string = 'e-content';
-const CONTENTTABLE: string = 'e-calendar-content-table';
-const YEAR: string = 'e-year';
-const MONTH: string = 'e-month';
-const DECADE: string = 'e-decade';
-const ICON: string = 'e-icons';
-const PREVICON: string = 'e-prev';
-const NEXTICON: string = 'e-next';
-const PREVSPAN: string = 'e-date-icon-prev';
-const NEXTSPAN: string = 'e-date-icon-next ';
-const ICONCONTAINER: string = 'e-icon-container';
-const DISABLED: string = 'e-disabled';
-const OVERLAY: string = 'e-overlay';
-const WEEKEND: string = 'e-weekend';
-const WEEKNUMBER: string = 'e-week-number';
-const SELECTED: string = 'e-selected';
-const FOCUSEDDATE: string = 'e-focused-date';
-const FOCUSEDCELL: string = 'e-focused-cell';
-const OTHERMONTHROW: string = 'e-month-hide';
-const TODAY: string = 'e-today';
-const TITLE: string = 'e-title';
-const LINK: string = 'e-day';
-const CELL: string = 'e-cell';
-const WEEKHEADER: string = 'e-week-header';
-const ZOOMIN: string = 'e-zoomin';
-const FOOTER: string = 'e-footer-container';
-const BTN: string = 'e-btn';
-const FLAT: string = 'e-flat';
-const CSS: string = 'e-css';
-const PRIMARY: string = 'e-primary';
-const DAYHEADERLONG: string = 'e-calendar-day-header-lg';
-const dayMilliSeconds: number = 86400000;
-const minutesMilliSeconds: number = 60000;
-
-/**
- *
- * @private
- */
-@NotifyPropertyChanges
-export class CalendarBase extends Component<HTMLElement> implements INotifyPropertyChanged {
-    protected headerElement: HTMLElement;
-    protected contentElement: HTMLElement;
-    private calendarEleCopy: HTMLElement;
-    protected table: HTMLElement;
-    protected tableHeadElement: HTMLElement;
-    protected tableBodyElement: Element;
-    protected nextIcon: HTMLElement;
-    protected previousIcon: HTMLElement;
-    protected headerTitleElement: HTMLElement;
-    protected todayElement: HTMLElement;
-    protected footer: HTMLElement;
-    protected keyboardModule: KeyboardEvents;
-    protected globalize: Internationalization;
-    public islamicModule: Islamic;
-    protected currentDate: Date;
-    protected navigatedArgs: NavigatedEventArgs;
-    protected renderDayCellArgs: RenderDayCellEventArgs;
-    protected effect: string = '';
-    protected previousDate: Date;
-    protected previousValues: number;
-    protected navigateHandler: Function;
-    protected navigatePreviousHandler: Function;
-    protected navigateNextHandler: Function;
-    protected l10: L10n;
-    protected todayDisabled: boolean;
-    protected nextIconClicked: boolean;
-    protected previousIconClicked: boolean;
-    protected tabIndex: string;
-    protected todayDate: Date;
-    protected islamicPreviousHeader: string;
-    protected calendarElement: HTMLElement;
-    protected isPopupClicked: boolean = false;
-    protected isDateSelected: boolean = true;
-    private serverModuleName: string;
-    protected timezone: string;
-    protected defaultKeyConfigs: { [key: string]: string };
-    protected previousDateTime: Date;
-    protected isTodayClicked: boolean = false;
-    protected todayButtonEvent: MouseEvent | KeyboardEvent;
-    protected preventChange: boolean = false;
-    protected previousDates: boolean = false;
-    /**
-     * Gets or sets the minimum date that can be selected in the Calendar.
-     *
-     * @default new Date(1900, 00, 01)
-     * @deprecated
-     */
-    @Property(new Date(1900, 0, 1))
-    public min: Date;
-    /**
-     * Specifies the component to be disabled or not.
-     *
-     * @default true
-     */
-    @Property(true)
-    public enabled: boolean;
-    /**
-     * Specifies the root CSS class of the Calendar that allows to
-     * customize the appearance by overriding the styles.
-     *
-     * @default null
-     */
-    @Property(null)
-    public cssClass: string;
-    /**
-     * Gets or sets the maximum date that can be selected in the Calendar.
-     *
-     * @default new Date(2099, 11, 31)
-     * @deprecated
-     */
-    @Property(new Date(2099, 11, 31))
-    public max: Date;
-    /**
-     * Gets or sets the Calendar's first day of the week. By default, the first day of the week will be based on the current culture.
-     *
-     * @default 0
-     * @aspType int
-     * @deprecated
-     * > For more details about firstDayOfWeek refer to
-     * [`First day of week`](../../calendar/how-to/first-day-of-week#change-the-first-day-of-the-week) documentation.
-     */
-    @Property(null)
-    public firstDayOfWeek: number;
-    /**
-     * Gets or sets the Calendar's Type like gregorian or islamic.
-     *
-     * @default Gregorian
-     * @deprecated
-     */
-    @Property('Gregorian')
-    public calendarMode: CalendarType;
-    /**
-     * Specifies the initial view of the Calendar when it is opened.
-     * With the help of this property, initial view can be changed to year or decade view.
-     *
-     * @default Month
-     * @deprecated
-     *
-     * <table>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * View<br/></td><td colSpan=1 rowSpan=1>
-     * Description<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * Month<br/></td><td colSpan=1 rowSpan=1>
-     * Calendar view shows the days of the month.<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * Year<br/></td><td colSpan=1 rowSpan=1>
-     * Calendar view shows the months of the year.<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * Decade<br/></td><td colSpan=1 rowSpan=1>
-     * Calendar view shows the years of the decade.<br/></td></tr>
-     * </table>
-     *
-     * > For more details about start refer to
-     * [`calendarView`](../../calendar/calendar-views#view-restriction)documentation.
-     */
-    @Property('Month')
-    public start: CalendarView;
-    /**
-     * Sets the maximum level of view such as month, year, and decade in the Calendar.
-     * Depth view should be smaller than the start view to restrict its view navigation.
-     *
-     * @default Month
-     * @deprecated
-     *
-     * <table>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * view<br/></td><td colSpan=1 rowSpan=1>
-     * Description<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * Month<br/></td><td colSpan=1 rowSpan=1>
-     * Calendar view shows up to the days of the month.<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * Year<br/></td><td colSpan=1 rowSpan=1>
-     * Calendar view shows up to the months of the year.<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * Decade<br/></td><td colSpan=1 rowSpan=1>
-     * Calendar view shows up to the years of the decade.<br/></td></tr>
-     * </table>
-     *
-     * > For more details about depth refer to
-     *  [`calendarView`](../../calendar/calendar-views#view-restriction)documentation.
-     */
-    @Property('Month')
-    public depth: CalendarView;
-    /**
-     * Determines whether the week number of the year is to be displayed in the calendar or not.
-     *
-     * @default false
-     * @deprecated
-     * > For more details about weekNumber refer to
-     * [`Calendar with week number`](../../calendar/how-to/render-the-calendar-with-week-numbers)documentation.
-     */
-    @Property(false)
-    public weekNumber: boolean;
-    /**
-     * Specifies the rule for defining the first week of the year.
-     *
-     * @default FirstDay
-     */
-    @Property('FirstDay')
-    public weekRule: WeekRule;
-    /**
-     * Specifies whether the today button is to be displayed or not.
-     *
-     * @default true
-     * @deprecated
-     */
-    @Property(true)
-    public showTodayButton: boolean;
-    /**
-     * Specifies the format of the day that to be displayed in header. By default, the format is ‘short’.
-     * Possible formats are:
-     * * `Short` - Sets the short format of day name (like Su ) in day header.
-     * * `Narrow` - Sets the single character of day name (like S ) in day header.
-     * * `Abbreviated` - Sets the min format of day name (like Sun ) in day header.
-     * * `Wide` - Sets the long format of day name (like Sunday ) in day header.
-     *
-     * @default Short
-     * @deprecated
-     */
-    @Property('Short')
-    public dayHeaderFormat: DayHeaderFormats;
-    /**
-     * Enable or disable persisting component's state between page reloads. If enabled, following list of states will be persisted.
-     * 1. value
-     *
-     * @default false
-     * @deprecated
-     */
-    @Property(false)
-    public enablePersistence: boolean;
-    /**    
-     * Customizes the key actions in Calendar.
-     * For example, when using German keyboard, the key actions can be customized using these shortcuts.
-     *
-     * <table>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * Key action<br/></td><td colSpan=1 rowSpan=1>
-     * Key<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * controlUp<br/></td><td colSpan=1 rowSpan=1>
-     * ctrl+38<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * controlDown<br/></td><td colSpan=1 rowSpan=1>
-     * ctrl+40<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * select<br/></td><td colSpan=1 rowSpan=1>
-     * enter<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * home<br/></td><td colSpan=1 rowSpan=1>
-     * home<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * end<br/></td><td colSpan=1 rowSpan=1>
-     * end<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * pageUp<br/></td><td colSpan=1 rowSpan=1>
-     * pageup<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * pageDown<br/></td><td colSpan=1 rowSpan=1>
-     * pagedown<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * shiftPageUp<br/></td><td colSpan=1 rowSpan=1>
-     * shift+pageup<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * shiftPageDown<br/></td><td colSpan=1 rowSpan=1>
-     * shift+pagedown<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * controlHome<br/></td><td colSpan=1 rowSpan=1>
-     * ctrl+home<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * controlEnd<br/></td><td colSpan=1 rowSpan=1>
-     * ctrl+end<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * altUpArrow<br/></td><td colSpan=1 rowSpan=1>
-     * alt+uparrow<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * spacebar<br/></td><td colSpan=1 rowSpan=1>
-     * space<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * altRightArrow<br/></td><td colSpan=1 rowSpan=1>
-     * alt+rightarrow<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * altLeftArrow<br/></td><td colSpan=1 rowSpan=1>
-     * alt+leftarrow<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * moveDown<br/></td><td colSpan=1 rowSpan=1>
-     * downarrow<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * moveUp<br/></td><td colSpan=1 rowSpan=1>
-     * uparrow<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * moveLeft<br/></td><td colSpan=1 rowSpan=1>
-     * leftarrow<br/></td></tr>
-     * <tr>
-     * <td colSpan=1 rowSpan=1>
-     * moveRight<br/></td><td colSpan=1 rowSpan=1>
-     * rightarrow<br/></td></tr>
-     * </table>
-     *
-     * {% codeBlock src='calendar/keyConfigs/index.md' %}{% endcodeBlock %}
-     *
-     * @default null
-     * @deprecated
-     */
-    @Property(null)
-    public keyConfigs: { [key: string]: string };
-    /**
-     * By default, the date value will be processed based on system time zone.
-     * If you want to process the initial date value using server time zone
-     * then specify the time zone value to `serverTimezoneOffset` property.
-     *
-     * @default null
-     * @deprecated
-     */
-    @Property(null)
-    public serverTimezoneOffset: number;
-    /**
-     * Triggers when Calendar is created.
-     *
-     * @event created
-     */
-    @Event()
-    public created: EmitType<Object>;
-    /**
-     * Triggers when Calendar is destroyed.
-     *
-     * @event destroyed
-     */
-    @Event()
-    public destroyed: EmitType<Object>;
-
-    /**
-     * Triggers when the Calendar is navigated to another level or within the same level of view.
-     *
-     * @event navigated
-     */
-    @Event()
-    public navigated: EmitType<NavigatedEventArgs>;
-    /**
-     * Triggers when each day cell of the Calendar is rendered.
-     *
-     * @event renderDayCell
-     */
-    @Event()
-    public renderDayCell: EmitType<RenderDayCellEventArgs>;
-    /**
-     * Initialized new instance of Calendar Class.
-     * Constructor for creating the widget
-     *
-     * @param {CalendarBaseModel} options - Specifies the CalendarBase model.
-     * @param {string | HTMLElement} element - Specifies the element to render as component.
-     * @private
-     */
-    public constructor(options?: CalendarBaseModel, element?: string | HTMLElement) {
-        super(options, element);
-    }
-    /**
-     * To Initialize the control rendering.
-     *
-     * @returns {void}
-     * @private
-     */
-    protected render(): void {
-        this.rangeValidation(this.min, this.max);
-        this.calendarEleCopy = <HTMLElement>this.element.cloneNode(true);
-        if (this.calendarMode === 'Islamic') {
-            if (+(this.min.setSeconds(0)) === +new Date(1900, 0, 1, 0, 0, 0)) {
-                this.min = new Date(1941, 12, 18);
-            }
-            if (+this.max === +new Date(2099, 11, 31)) {
-                this.max = new Date(2068, 2, 4);
-            }
-        }
-        this.globalize = new Internationalization(this.locale);
-        if (isNullOrUndefined(this.firstDayOfWeek) || this.firstDayOfWeek > 6 || this.firstDayOfWeek < 0) {
-            this.setProperties({ firstDayOfWeek: this.globalize.getFirstDayOfWeek() }, true);
-        }
-        this.todayDisabled = false;
-        this.todayDate = new Date(new Date().setHours(0, 0, 0, 0));
-        if (this.getModuleName() === 'calendar') {
-            this.element.classList.add(ROOT);
-            if (this.enableRtl) {
-                this.element.classList.add(RTL);
-            }
-            if (Browser.isDevice) {
-                this.element.classList.add(DEVICE);
-            }
-            attributes(this.element, <{ [key: string]: string }>{
-                'data-role': 'calendar'
-            });
-            this.tabIndex = this.element.hasAttribute('tabindex') ? this.element.getAttribute('tabindex') : '0';
-            this.element.setAttribute('tabindex', this.tabIndex);
-        } else {
-            this.calendarElement = this.createElement('div');
-            this.calendarElement.classList.add(ROOT);
-            if (this.enableRtl) {
-                this.calendarElement.classList.add(RTL);
-            }
-            if (Browser.isDevice) {
-                this.calendarElement.classList.add(DEVICE);
-            }
-            attributes(this.calendarElement, <{ [key: string]: string }>{
-                'data-role': 'calendar'
-            });
-        }
-        if (!isNullOrUndefined(closest(this.element, 'fieldset') as HTMLFieldSetElement) && (closest(this.element, 'fieldset') as HTMLFieldSetElement).disabled) {
-            this.enabled = false;
-        }
-        this.createHeader();
-        this.createContent();
-        this.wireEvents();
-    }
-
-    protected rangeValidation(min: Date, max: Date): void {
-        if (isNullOrUndefined(min)) {
-            this.setProperties({ min: new Date(1900, 0, 1) }, true);
-        }
-        if (isNullOrUndefined(max)) {
-            this.setProperties({ max: new Date(2099, 11, 31) }, true);
-        }
-    }
-
-    protected getDefaultKeyConfig(): { [key: string]: string } {
-        this.defaultKeyConfigs = {
-            controlUp: 'ctrl+38',
-            controlDown: 'ctrl+40',
-            moveDown: 'downarrow',
-            moveUp: 'uparrow',
-            moveLeft: 'leftarrow',
-            moveRight: 'rightarrow',
-            select: 'enter',
-            home: 'home',
-            end: 'end',
-            pageUp: 'pageup',
-            pageDown: 'pagedown',
-            shiftPageUp: 'shift+pageup',
-            shiftPageDown: 'shift+pagedown',
-            controlHome: 'ctrl+home',
-            controlEnd: 'ctrl+end',
-            altUpArrow: 'alt+uparrow',
-            spacebar: 'space',
-            altRightArrow: 'alt+rightarrow',
-            altLeftArrow: 'alt+leftarrow'
-        };
-        return this.defaultKeyConfigs;
-    }
-
-    protected validateDate(value?: Date): void {
-        this.setProperties({ min: this.checkDateValue(new Date(this.checkValue(this.min))) }, true);
-        this.setProperties({ max: this.checkDateValue(new Date(this.checkValue(this.max))) }, true);
-        this.currentDate = this.currentDate ? this.currentDate : new Date(new Date().setHours(0, 0, 0, 0));
-        if (!isNullOrUndefined(value) && this.min <= this.max && value >= this.min && value <= this.max) {
-            this.currentDate = new Date(this.checkValue(value));
-        }
-    }
-
-    protected setOverlayIndex(popupWrapper: HTMLElement, popupElement: HTMLElement, modal: HTMLElement, isDevice: boolean): void {
-        if (isDevice && !isNullOrUndefined(popupElement) && !isNullOrUndefined(modal) && !isNullOrUndefined(popupWrapper)) {
-            const index: number = parseInt(popupElement.style.zIndex, 10) ? parseInt(popupElement.style.zIndex, 10) : 1000;
-            modal.style.zIndex = (index - 1).toString();
-            popupWrapper.style.zIndex = index.toString();
-        }
-    }
-
-    protected minMaxUpdate(value?: Date): void {
-        if (!(+this.min <= +this.max)) {
-            this.setProperties({ min: this.min }, true);
-            addClass([this.element], OVERLAY);
-        } else {
-            removeClass([this.element], OVERLAY);
-        }
-        this.min = isNullOrUndefined(this.min) || !(+this.min) ? this.min = new Date(1900, 0, 1) : this.min;
-        this.max = isNullOrUndefined(this.max) || !(+this.max) ? this.max = new Date(2099, 11, 31) : this.max;
-        if (+this.min <= +this.max && value && +value <= +this.max && +value >= +this.min) {
-            this.currentDate = new Date(this.checkValue(value));
-        } else {
-            if (+this.min <= +this.max && !value && +this.currentDate > +this.max) {
-                this.currentDate = new Date(this.checkValue(this.max));
-            } else {
-                if (+this.currentDate < +this.min) {
-                    this.currentDate = new Date(this.checkValue(this.min));
-                }
-            }
-        }
-    }
-
-
-
-    protected createHeader(): void {
-        const ariaPrevAttrs: Object = {
-            'aria-disabled': 'false',
-            'aria-label': 'previous month'
-        };
-        const ariaNextAttrs: Object = {
-            'aria-disabled': 'false',
-            'aria-label': 'next month'
-
-        };
-        const ariaTitleAttrs: Object = {
-            'aria-atomic': 'true', 'aria-live': 'assertive'
-        };
-        const tabIndexAttr: Object = {'tabindex': '0'};
-        this.headerElement = this.createElement('div', { className: HEADER });
-        const iconContainer: HTMLElement = this.createElement('div', { className: ICONCONTAINER });
-        this.previousIcon = this.createElement('button', { className: '' + PREVICON, attrs: { type: 'button' } });
-        rippleEffect(this.previousIcon, {
-            duration: 400,
-            selector: '.e-prev',
-            isCenterRipple: true
-        });
-        attributes(this.previousIcon, <{ [key: string]: string }>ariaPrevAttrs);
-        attributes(this.previousIcon, <{ [key: string]: string }>tabIndexAttr);
-        this.nextIcon = this.createElement('button', { className: '' + NEXTICON, attrs: { type: 'button' } });
-        rippleEffect(this.nextIcon, {
-            selector: '.e-next',
-            duration: 400,
-            isCenterRipple: true
-        });
-        if (this.getModuleName() === 'daterangepicker') {
-            attributes(this.previousIcon, {tabIndex: '-1'});
-            attributes(this.nextIcon, {tabIndex: '-1'});
-        }
-        attributes(this.nextIcon, <{ [key: string]: string }>ariaNextAttrs);
-        attributes(this.nextIcon, <{ [key: string]: string }>tabIndexAttr);
-        this.headerTitleElement = this.createElement('div', { className: '' + LINK + ' ' + TITLE });
-        attributes(this.headerTitleElement, <{ [key: string]: string }>ariaTitleAttrs);
-        attributes(this.headerTitleElement, <{ [key: string]: string }>tabIndexAttr);
-        this.headerElement.appendChild(this.headerTitleElement);
-        this.previousIcon.appendChild(this.createElement('span', { className: '' + PREVSPAN + ' ' + ICON }));
-        this.nextIcon.appendChild(this.createElement('span', { className: '' + NEXTSPAN + ' ' + ICON }));
-        iconContainer.appendChild(this.previousIcon);
-        iconContainer.appendChild(this.nextIcon);
-        this.headerElement.appendChild(iconContainer);
-        if (this.getModuleName() === 'calendar') {
-            this.element.appendChild(this.headerElement);
-        } else {
-            this.calendarElement.appendChild(this.headerElement);
-        }
-        this.adjustLongHeaderSize();
-    }
-    protected createContent(): void {
-        this.contentElement = this.createElement('div', { className: CONTENT });
-        this.table = this.createElement('table', { attrs: { 'class': CONTENTTABLE, 'tabIndex': '0', 'role': 'grid', 'aria-activedescendant': '', 'aria-labelledby': this.element.id } });
-        if (this.getModuleName() === 'calendar') {
-            this.element.appendChild(this.contentElement);
-        } else {
-            this.calendarElement.appendChild(this.contentElement);
-        }
-
-        this.contentElement.appendChild(this.table);
-        this.createContentHeader();
-        this.createContentBody();
-        if (this.showTodayButton) {
-            this.createContentFooter();
-        }
-        if (this.getModuleName() !== 'daterangepicker') {
-            EventHandler.add(this.table, 'focus', this.addContentFocus, this);
-            EventHandler.add(this.table, 'blur', this.removeContentFocus, this);
-        }
-    }
-    private addContentFocus(args: any): void {
-        const focusedDate: Element = this.tableBodyElement.querySelector('tr td.e-focused-date');
-        const selectedDate: Element = this.tableBodyElement.querySelector('tr td.e-selected');
-        if (!isNullOrUndefined(selectedDate)) {
-            selectedDate.classList.add(FOCUSEDCELL);
-        }
-        else if (!isNullOrUndefined(focusedDate)) {
-            focusedDate.classList.add(FOCUSEDCELL);
-        }
-    }
-    private removeContentFocus(args: any): void {
-        const focusedDate: Element = !isNullOrUndefined(this.tableBodyElement) ? this.tableBodyElement.querySelector('tr td.e-focused-date') : null;
-        const selectedDate: Element = !isNullOrUndefined(this.tableBodyElement) ? this.tableBodyElement.querySelector('tr td.e-selected') : null;
-        if (!isNullOrUndefined(selectedDate)) {
-            selectedDate.classList.remove(FOCUSEDCELL);
-        }
-        else if (!isNullOrUndefined(focusedDate)) {
-            focusedDate.classList.remove(FOCUSEDCELL);
-        }
-    }
-    protected getCultureValues(): string[] {
-        const culShortNames: string[] = [];
-        let cldrObj: string[];
-        const dayFormat: string = !isNullOrUndefined(this.dayHeaderFormat) ? 'days.stand-alone.' + this.dayHeaderFormat.toLowerCase() : null;
-        if ((this.locale === 'en' || this.locale === 'en-US') && !isNullOrUndefined(dayFormat)) {
-            cldrObj = <string[]>(getValue(dayFormat, getDefaultDateObject()));
-        } else {
-            cldrObj = <string[]>(this.getCultureObjects(cldrData, '' + this.locale));
-        }
-        if (!isNullOrUndefined(cldrObj)) {
-            for (const obj of Object.keys(cldrObj)) {
-                culShortNames.push(getValue(obj, cldrObj));
-            }
-        }
-        return culShortNames;
-    }
-    protected toCapitalize(text: string): string {
-        return !isNullOrUndefined(text) && text.length ? text[0].toUpperCase() + text.slice(1) : text;
-    }
-    protected createContentHeader(): void {
-        if (this.getModuleName() === 'calendar') {
-            if (!isNullOrUndefined(this.element.querySelectorAll('.e-content .e-week-header')[0])) {
-                detach(this.element.querySelectorAll('.e-content .e-week-header')[0]);
-            }
-        } else {
-            if (!isNullOrUndefined(this.calendarElement.querySelectorAll('.e-content .e-week-header')[0])) {
-                detach(this.calendarElement.querySelectorAll('.e-content .e-week-header')[0]);
-            }
-        }
-        const daysCount: number = 6;
-        let html: string = '';
-        if (this.firstDayOfWeek > 6 || this.firstDayOfWeek < 0) {
-            this.setProperties({ firstDayOfWeek: 0 }, true);
-        }
-        this.tableHeadElement = this.createElement('thead', { className: WEEKHEADER });
-        if (this.weekNumber) {
-            html += '<th class="e-week-number" aria-hidden="true"></th>';
-            if (this.getModuleName() === 'calendar') {
-                addClass([this.element], '' + WEEKNUMBER);
-            } else {
-                addClass([this.calendarElement], '' + WEEKNUMBER);
-            }
-        }
-        const shortNames: string[] = this.getCultureValues().length > 0 &&
-            this.getCultureValues() ? this.shiftArray(((this.getCultureValues().length > 0 &&
-                this.getCultureValues())), this.firstDayOfWeek) : null;
-        if (!isNullOrUndefined(shortNames)) {
-            for (let days: number = 0; days <= daysCount; days++) {
-                html += '<th  class="">' + this.toCapitalize(shortNames[days as number]) + '</th>';
-            }
-        }
-        html = '<tr>' + html + '</tr>';
-        this.tableHeadElement.innerHTML = html;
-        this.table.appendChild(this.tableHeadElement);
-    }
-    protected createContentBody(): void {
-        if (this.getModuleName() === 'calendar') {
-            if (!isNullOrUndefined(this.element.querySelectorAll('.e-content tbody')[0])) {
-                detach(this.element.querySelectorAll('.e-content tbody')[0]);
-            }
-        } else {
-            if (!isNullOrUndefined(this.calendarElement.querySelectorAll('.e-content tbody')[0])) {
-                detach(this.calendarElement.querySelectorAll('.e-content tbody')[0]);
-            }
-        }
-        switch (this.start) {
-        case 'Year':
-            this.renderYears();
-            break;
-        case 'Decade':
-            this.renderDecades();
-            break;
-        default:
-            this.renderMonths();
-        }
-    }
-    protected updateFooter(): void {
-        this.todayElement.textContent = this.l10.getConstant('today');
-        this.todayElement.setAttribute('aria-label', this.l10.getConstant('today'));
-        this.todayElement.setAttribute('tabindex', '0');
-    }
-    protected createContentFooter(): void {
-        if (this.showTodayButton) {
-            const minimum: Date = new Date(+this.min);
-            const maximum: Date = new Date(+this.max);
-            const l10nLocale: object = { today: 'Today' };
-            this.globalize = new Internationalization(this.locale);
-            this.l10 = new L10n(this.getModuleName(), l10nLocale, this.locale);
-            this.todayElement = this.createElement('button', { attrs: { role: 'button' } });
-            rippleEffect(this.todayElement);
-            this.updateFooter();
-            addClass([this.todayElement], [BTN, TODAY, FLAT, PRIMARY, CSS]);
-            if ((!(+new Date(minimum.setHours(0, 0, 0, 0)) <= +this.todayDate &&
-                +this.todayDate <= +new Date(maximum.setHours(0, 0, 0, 0)))) || (this.todayDisabled)) {
-                addClass([this.todayElement], DISABLED);
-            }
-            this.footer = this.createElement('div', { className: FOOTER });
-            this.footer.appendChild(this.todayElement);
-            if (this.getModuleName() === 'calendar') {
-                this.element.appendChild(this.footer);
-            }
-            if (this.getModuleName() === 'datepicker') {
-                this.calendarElement.appendChild(this.footer);
-            }
-            if (this.getModuleName() === 'datetimepicker') {
-                this.calendarElement.appendChild(this.footer);
-            }
-            if (!this.todayElement.classList.contains(DISABLED)) {
-                EventHandler.add(this.todayElement, 'click', this.todayButtonClick, this);
-            }
-        }
-    }
-    protected wireEvents(id?: string, ref?: object, keyConfig?: { [key: string]: string }, moduleName?: string): void {
-        EventHandler.add(this.headerTitleElement, 'click', this.navigateTitle, this);
-        this.defaultKeyConfigs = (extend(this.defaultKeyConfigs, this.keyConfigs) as { [key: string]: string });
-        if (this.getModuleName() === 'calendar') {
-            this.keyboardModule = new KeyboardEvents(
-                <HTMLElement>this.element,
-                {
-                    eventName: 'keydown',
-                    keyAction: this.keyActionHandle.bind(this),
-                    keyConfigs: this.defaultKeyConfigs
-                });
-        } else {
-            this.keyboardModule = new KeyboardEvents(
-                <HTMLElement>this.calendarElement,
-                {
-                    eventName: 'keydown',
-                    keyAction: this.keyActionHandle.bind(this),
-                    keyConfigs: this.defaultKeyConfigs
-                });
-        }
-    }
-    protected dateWireEvents(id?: string, ref?: object, keyConfig?: { [key: string]: string }, moduleName?: string): void {
-        this.defaultKeyConfigs = this.getDefaultKeyConfig();
-        this.defaultKeyConfigs = (extend(this.defaultKeyConfigs, keyConfig) as { [key: string]: string });
-        this.serverModuleName = moduleName;
-    }
-    protected todayButtonClick(e?: MouseEvent | KeyboardEvent, value?: Date, isCustomDate?: boolean): void {
-        if (this.showTodayButton) {
-            if (this.currentView() === this.depth) {
-                this.effect = '';
-            } else {
-                this.effect = 'e-zoomin';
-            }
-            if (this.getViewNumber(this.start) >= this.getViewNumber(this.depth)) {
-                this.navigateTo(this.depth, new Date(this.checkValue(value)), isCustomDate);
-            } else {
-                this.navigateTo('Month', new Date(this.checkValue(value)), isCustomDate);
-            }
-        }
-    }
-    protected resetCalendar(): void {
-        this.calendarElement && detach(this.calendarElement);
-        this.tableBodyElement && detach(this.tableBodyElement);
-        this.table && detach(this.table);
-        this.tableHeadElement && detach(this.tableHeadElement);
-        this.nextIcon && detach(this.nextIcon);
-        this.previousIcon && detach(this.previousIcon);
-        this.footer && detach(this.footer);
-        this.todayElement = null;
-        this.renderDayCellArgs = null;
-        this.calendarElement = this.tableBodyElement = this.footer = this.tableHeadElement =
-         this.nextIcon = this.previousIcon = this.table = null;
-    }
-    protected keyActionHandle(e: KeyboardEventArgs, value?: Date, multiSelection?: boolean): void {
-        if (this.calendarElement === null && e.action === 'escape') {
-            return;
-        }
-        const focusedDate: Element = this.tableBodyElement.querySelector('tr td.e-focused-date');
-        let selectedDate: Element;
-        if (multiSelection) {
-            if (!isNullOrUndefined(focusedDate) && +value === parseInt(focusedDate.getAttribute('id').split('_')[0], 10)) {
-                selectedDate = focusedDate;
-            } else {
-                selectedDate = this.tableBodyElement.querySelector('tr td.e-selected');
-            }
-        } else {
-            selectedDate = this.tableBodyElement.querySelector('tr td.e-selected');
-        }
-        let view: number = this.getViewNumber(this.currentView());
-        const depthValue: number = this.getViewNumber(this.depth);
-        const levelRestrict: boolean = (view === depthValue && this.getViewNumber(this.start) >= depthValue);
-        this.effect = '';
-        switch (e.action) {
-        case 'moveLeft':
-            if (this.getModuleName() !== 'daterangepicker' && !isNullOrUndefined((e.target as any))) {
-                this.keyboardNavigate(-1, view, e, this.max, this.min);
-                e.preventDefault();
-            }
-            break;
-        case 'moveRight':
-            if (this.getModuleName() !== 'daterangepicker' && !isNullOrUndefined((e.target as any))) {
-                this.keyboardNavigate(1, view, e, this.max, this.min);
-                e.preventDefault();
-            }
-            break;
-        case 'moveUp':
-            if (this.getModuleName() !== 'daterangepicker' && !isNullOrUndefined((e.target as any))) {
-                if (view === 0) {
-                    this.keyboardNavigate(-7, view, e, this.max, this.min); // move the current date to the previous seven days.
-                } else {
-                    this.keyboardNavigate(-4, view, e, this.max, this.min); // move the current year to the previous four days.
-                }
-                e.preventDefault();
-            }
-            break;
-        case 'moveDown':
-            if (this.getModuleName() !== 'daterangepicker' && !isNullOrUndefined((e.target as any))) {
-                if (view === 0) {
-                    this.keyboardNavigate(7, view, e, this.max, this.min);
-                } else {
-                    this.keyboardNavigate(4, view, e, this.max, this.min);
-                }
-                e.preventDefault();
-            }
-            break;
-        case 'select':
-            if (e.target === this.headerTitleElement){
-                this.navigateTitle(e);
-            }
-            else if (e.target === this.previousIcon && !(e.target as HTMLElement).className.includes(DISABLED)) {
-                this.navigatePrevious(e);
-            }
-            else if (e.target === this.nextIcon && !(e.target as HTMLElement).className.includes(DISABLED)) {
-                this.navigateNext(e);
-            }
-            else if (e.target === this.todayElement && !(e.target as HTMLElement).className.includes(DISABLED)) {
-                this.todayButtonClick(e, value);
-                if (this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') {
-                    if ((this as any).isAngular) {
-                        (this as any).inputElement.focus();
-                    } else {
-                        (this as any).element.focus();
-                    }
-                }
-            } else {
-                const element: Element = !isNullOrUndefined(focusedDate) ? focusedDate : selectedDate;
-                if (!isNullOrUndefined(element) && !element.classList.contains(DISABLED)) {
-                    if (levelRestrict) {
-                        // eslint-disable-next-line radix
-                        const d: Date = new Date(parseInt('' + (element).id, 0));
-                        this.selectDate(e, d, (element));
-                        if (this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') {
-                            if ((this as any).isAngular) {
-                                (this as any).inputElement.focus();
-                            } else {
-                                (this as any).element.focus();
-                            }
-                        }
-                    } else {
-                        if ( !(e.target as HTMLElement).className.includes(DISABLED)){
-                            this.contentClick(null, --view, (element), value);
-                        }
-                    }
-                }
-            }
-            break;
-        case 'controlUp':
-            this.title();
-            e.preventDefault();
-            break;
-        case 'controlDown':
-            if (!isNullOrUndefined(focusedDate) && !levelRestrict || !isNullOrUndefined(selectedDate) && !levelRestrict) {
-                this.contentClick(null, --view, (focusedDate || selectedDate), value);
-            }
-            e.preventDefault();
-            break;
-        case 'home':
-            this.currentDate = this.firstDay(this.currentDate);
-            detach(this.tableBodyElement);
-            if (view === 0) {
-                this.renderMonths(e);
-            } else if (view === 1) {
-                this.renderYears(e);
-            } else {
-                this.renderDecades(e);
-            }
-            e.preventDefault();
-            break;
-        case 'end':
-            this.currentDate = this.lastDay(this.currentDate, view);
-            detach(this.tableBodyElement);
-            if (view === 0) {
-                this.renderMonths(e);
-            } else if (view === 1) {
-                this.renderYears(e);
-            } else {
-                this.renderDecades(e);
-            }
-            e.preventDefault();
-            break;
-        case 'pageUp':
-            this.addMonths(this.currentDate, -1);
-            this.navigateTo('Month', this.currentDate);
-            e.preventDefault();
-            break;
-        case 'pageDown':
-            this.addMonths(this.currentDate, 1);
-            this.navigateTo('Month', this.currentDate);
-            e.preventDefault();
-            break;
-        case 'shiftPageUp':
-            this.addYears(this.currentDate, -1);
-            this.navigateTo('Month', this.currentDate);
-            e.preventDefault();
-            break;
-        case 'shiftPageDown':
-            this.addYears(this.currentDate, 1);
-            this.navigateTo('Month', this.currentDate);
-            e.preventDefault();
-            break;
-        case 'controlHome':
-            this.navigateTo('Month', new Date(this.currentDate.getFullYear(), 0, 1));
-            e.preventDefault();
-            break;
-        case 'controlEnd':
-            this.navigateTo('Month', new Date(this.currentDate.getFullYear(), 11, 31));
-            e.preventDefault();
-            break;
-        case 'tab':
-            if ((this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') && e.target === this.todayElement) {
-                e.preventDefault();
-                if ((this as any).isAngular) {
-                    (this as any).inputElement.focus();
-                } else {
-                    (this as any).element.focus();
-                }
-                (this as any).hide();
-            }
-            break;
-        case 'shiftTab':
-            if ((this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') && e.target === this.headerTitleElement) {
-                e.preventDefault();
-                if ((this as any).isAngular) {
-                    (this as any).inputElement.focus();
-                } else {
-                    (this as any).element.focus();
-                }
-                (this as any).hide();
-            }
-            break;
-        case 'escape':
-            if ((this.getModuleName() === 'datepicker' || this.getModuleName() === 'datetimepicker') && (e.target === this.headerTitleElement || e.target === this.previousIcon || e.target === this.nextIcon || e.target === this.todayElement)) {
-                (this as any).hide();
-            }
-            break;
-        }
-    }
-
-    protected keyboardNavigate(number: number, currentView: number, e: KeyboardEvent, max: Date, min: Date): void {
-        const date: Date = new Date(this.checkValue(this.currentDate));
-        switch (currentView) {
-        case 2:
-            this.addYears(this.currentDate, number);
-            if (this.isMonthYearRange(this.currentDate)) {
-                detach(this.tableBodyElement);
-                this.renderDecades(e);
-            } else {
-                this.currentDate = date;
-            }
-            break;
-        case 1:
-            this.addMonths(this.currentDate, number);
-            if (this.calendarMode === 'Gregorian') {
-                if (this.isMonthYearRange(this.currentDate)) {
-                    detach(this.tableBodyElement);
-                    this.renderYears(e);
-                } else {
-                    this.currentDate = date;
-                }
-            } else {
-                if (this.isMonthYearRange(this.currentDate)) {
-                    detach(this.tableBodyElement);
-                    this.renderYears(e);
-                } else {
-                    this.currentDate = date;
-                }
-            }
-            break;
-        case 0:
-            this.addDay(this.currentDate, number, e, max, min);
-            if (this.isMinMaxRange(this.currentDate)) {
-                detach(this.tableBodyElement);
-                this.renderMonths(e);
-            } else {
-                this.currentDate = date;
-            }
-            break;
-        }
-    }
-
-    /**
-     * Initialize the event handler
-     *
-     * @param {Date} value - Specifies value of date.
-     * @returns {void}
-     * @private
-     */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    protected preRender(value?: Date): void {
-        this.navigatePreviousHandler = this.navigatePrevious.bind(this);
-        this.navigateNextHandler = this.navigateNext.bind(this);
-        this.defaultKeyConfigs = this.getDefaultKeyConfig();
-        this.navigateHandler = (e: MouseEvent): void => {
-            this.triggerNavigate(e);
-        };
-    }
-    protected minMaxDate(localDate: Date): Date {
-        const currentDate: Date = new Date(new Date(+localDate).setHours(0, 0, 0, 0));
-        const minDate: Date = new Date(new Date(+this.min).setHours(0, 0, 0, 0));
-        const maxDate: Date = new Date(new Date(+this.max).setHours(0, 0, 0, 0));
-        if (+currentDate === +minDate || +currentDate === +maxDate) {
-            if (+localDate < +this.min) {
-                localDate = new Date(+this.min);
-            }
-            if (+localDate > +this.max) {
-                localDate = new Date(+this.max);
-            }
-        }
-        return localDate;
-    }
-    protected renderMonths(e?: Event, value?: Date, isCustomDate?: boolean): void {
-        const numCells: number = this.weekNumber ? 8 : 7;
-        let tdEles: HTMLElement[];
-        if (this.calendarMode === 'Gregorian') {
-            tdEles = this.renderDays(this.currentDate, value, null, null, isCustomDate, e);
-        } else {
-            tdEles = !isNullOrUndefined(this.islamicModule) ? this.islamicModule.islamicRenderDays(this.currentDate, value) : null;
-        }
-        this.createContentHeader();
-        if (this.calendarMode === 'Gregorian') {
-            this.renderTemplate(tdEles, numCells, MONTH, e, value);
-        } else if (!isNullOrUndefined(this.islamicModule)) {
-            this.islamicModule.islamicRenderTemplate(tdEles, numCells, MONTH, e, value);
-        }
-    }
-    protected renderDays(currentDate: Date, value?: Date, multiSelection?: boolean, values?:
-    Date[], isTodayDate?: boolean, e?: Event): HTMLElement[] {
-        const tdEles: HTMLElement[] = [];
-        const cellsCount: number = 42;
-        const todayDate: Date = isTodayDate ? new Date(+currentDate) : this.getDate(new Date(), this.timezone);
-        let localDate: Date = new Date(this.checkValue(currentDate));
-        let minMaxDate: Date;
-        const currentMonth: number = localDate.getMonth();
-        this.titleUpdate(currentDate, 'days');
-        const d: Date = localDate;
-        localDate = new Date(d.getFullYear(), d.getMonth(), 0, d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds());
-        while (localDate.getDay() !== this.firstDayOfWeek) {
-            this.setStartDate(localDate, -1 * dayMilliSeconds);
-        }
-        for (let day: number = 0; day < cellsCount; ++day) {
-            const weekEle: HTMLElement = this.createElement('td', { className: CELL });
-            const weekAnchor: HTMLElement = this.createElement('span');
-            if (day % 7 === 0 && this.weekNumber) {
-                // 6 days are added to get Last day of the week and 3 days are added to get middle day of the week.
-                const numberOfDays : number = this.weekRule === 'FirstDay' ? 6 : (this.weekRule === 'FirstFourDayWeek' ? 3 : 0);
-                const finalDate : Date = new Date(localDate.getFullYear(), localDate.getMonth(), (localDate.getDate() + numberOfDays));
-                weekAnchor.textContent = '' + this.getWeek(finalDate);
-                weekEle.appendChild(weekAnchor);
-                addClass([weekEle], '' + WEEKNUMBER);
-                tdEles.push(weekEle);
-            }
-            minMaxDate = new Date(+localDate);
-            localDate = this.minMaxDate(localDate);
-            const dateFormatOptions: object = { type: 'dateTime', skeleton: 'full' };
-            const date: Date = this.globalize.parseDate(this.globalize.formatDate(localDate, dateFormatOptions), dateFormatOptions);
-            const tdEle: HTMLElement = this.dayCell(localDate);
-            const title: string = this.globalize.formatDate(localDate, { type: 'date', skeleton: 'full' });
-            const dayLink: HTMLElement = this.createElement('span');
-            dayLink.textContent = this.globalize.formatDate(localDate, { format: 'd', type: 'date', skeleton: 'yMd'});
-            const disabled: boolean = (this.min > localDate) || (this.max < localDate);
-            if (disabled) {
-                addClass([tdEle], DISABLED);
-                addClass([tdEle], OVERLAY);
-            } else {
-                dayLink.setAttribute('title', '' + title);
-            }
-            if (currentMonth !== localDate.getMonth()) {
-                addClass([tdEle], OTHERMONTH);
-                dayLink.setAttribute('aria-disabled', 'true');
-            }
-            if (localDate.getDay() === 0 || localDate.getDay() === 6) {
-                addClass([tdEle], WEEKEND);
-            }
-            tdEle.appendChild(dayLink);
-            this.renderDayCellArgs = {
-                date: localDate,
-                isDisabled: false,
-                element: tdEle,
-                isOutOfRange: disabled
-            };
-            const argument: RenderDayCellEventArgs = this.renderDayCellArgs;
-            this.renderDayCellEvent(argument);
-            if (argument.isDisabled) {
-                const selectDate: Date = new Date(this.checkValue(value));
-                const argsDate: Date = new Date(this.checkValue(argument.date));
-                if (multiSelection) {
-                    if (!isNullOrUndefined(values) && values.length > 0) {
-                        for (let index: number = 0; index < values.length; index++) {
-                            const localDateString: number =
-                                +new Date(this.globalize.formatDate(argument.date, { type: 'date', skeleton: 'yMd' }));
-                            const tempDateString: number =
-                                +new Date(this.globalize.formatDate(values[index as number], { type: 'date', skeleton: 'yMd' }));
-                            if (localDateString === tempDateString) {
-                                values.splice(index, 1);
-                                index = -1;
-                            }
-                        }
-                    }
-                } else if (selectDate && +selectDate === +argsDate) {
-                    this.setProperties({ value: null }, true);
-                }
-            }
-            if (this.renderDayCellArgs.isDisabled && !tdEle.classList.contains(SELECTED)) {
-                addClass([tdEle], DISABLED);
-                addClass([tdEle], OVERLAY);
-                dayLink.setAttribute('aria-disabled', 'true');
-                if (+this.renderDayCellArgs.date === +this.todayDate) {
-                    this.todayDisabled = true;
-                }
-            }
-            const otherMnthBool: boolean = tdEle.classList.contains(OTHERMONTH);
-            const disabledCls: boolean = tdEle.classList.contains(DISABLED);
-            if (!disabledCls) {
-                EventHandler.add(tdEle, 'click', this.clickHandler, this);
-            }
-            // to set the value as null while setting the disabled date onProperty change.
-            // if (args.isDisabled && +this.value === +args.date) {
-            //     this.setProperties({ value: null }, true);
-            // }
-            let currentTarget: any;
-            if ( !isNullOrUndefined(e) && e.type === 'click') {
-                currentTarget = e.currentTarget; }
-            if (multiSelection && !isNullOrUndefined(values) && !disabledCls) {
-                for (let tempValue: number = 0; tempValue < values.length; tempValue++) {
-                    const type: string = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
-                    const formatOptions: object = { format: null, type: 'date', skeleton: 'short', calendar: type };
-                    const localDateString: string = this.globalize.formatDate(localDate, formatOptions);
-                    const tempDateString: string = this.globalize.formatDate(values[tempValue as number], formatOptions);
-                    if ((localDateString === tempDateString && this.getDateVal(localDate, values[tempValue as number]))
-                        || (this.getDateVal(localDate, value))) {
-                        addClass([tdEle], SELECTED);
-                    } if (!isNullOrUndefined(currentTarget) && currentTarget.innerText === tdEle.innerText &&
-                     this.previousDates && tdEle.classList.contains(SELECTED) && currentTarget.classList.contains(SELECTED)) {
-                        removeClass([tdEle], SELECTED);
-                        this.previousDates = false;
-                        const copyValues: Date[] = this.copyValues(values);
-                        for (let i: number = 0; i < copyValues.length; i++) {
-                            const type: string = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
-                            const formatOptions: object = { format: null, type: 'date', skeleton: 'short', calendar: type };
-                            const localDateString: string = this.globalize.formatDate(date, formatOptions);
-                            const tempDateString: string = this.globalize.formatDate(copyValues[i as number], formatOptions);
-                            if (localDateString === tempDateString) {
-                                const index: number = copyValues.indexOf(copyValues[i as number]);
-                                copyValues.splice(index, 1);
-                                values.splice(index, 1);
-                            }
-                        }
-                        this.setProperties({ values: copyValues }, true);
-                    } else {
-                        this.updateFocus(otherMnthBool, disabledCls, localDate, tdEle, currentDate);
-                    }
-                }
-                if (values.length <= 0) {
-                    this.updateFocus(otherMnthBool, disabledCls, localDate, tdEle, currentDate);
-                }
-            } else if (!disabledCls && this.getDateVal(localDate, value)) {
-                addClass([tdEle], SELECTED);
-            }
-            this.updateFocus(otherMnthBool, disabledCls, localDate, tdEle, currentDate);
-            if (!isNullOrUndefined(date) && date.getFullYear() === todayDate.getFullYear() && date.getMonth() === todayDate.getMonth()
-                && date.getDate() === todayDate.getDate()) {
-                addClass([tdEle], TODAY);
-            }
-            tdEles.push(this.renderDayCellArgs.element);
-            localDate = new Date(+minMaxDate);
-            this.addDay(localDate, 1, null, this.max, this.min);
-        }
-        return tdEles;
-    }
-    protected updateFocus(otherMonth: boolean, disabled: boolean, localDate: Date, tableElement: HTMLElement, currentDate: Date): void {
-        if (currentDate.getDate() === localDate.getDate() && !otherMonth && !disabled) {
-            addClass([tableElement], FOCUSEDDATE);
-        } else {
-            // eslint-disable-next-line radix
-            if (currentDate >= this.max && parseInt(tableElement.id, 0) === +this.max && !otherMonth && !disabled) {
-                addClass([tableElement], FOCUSEDDATE);
-            }
-            // eslint-disable-next-line radix
-            if (currentDate <= this.min && parseInt(tableElement.id, 0) === +this.min && !otherMonth && !disabled) {
-                addClass([tableElement], FOCUSEDDATE);
-            }
-        }
-    }
-    protected renderYears(e?: Event, value?: Date): void {
-        this.removeTableHeadElement();
-        const numCells: number = 4;
-        const tdEles: HTMLElement[] = [];
-        const valueUtil: boolean = isNullOrUndefined(value);
-        const curDate: Date = new Date(this.checkValue(this.currentDate));
-        const mon: number = curDate.getMonth();
-        const yr: number = curDate.getFullYear();
-        const localDate: Date = curDate;
-        const curYrs: number = localDate.getFullYear();
-        const minYr: number = new Date(this.checkValue(this.min)).getFullYear();
-        const minMonth: number = new Date(this.checkValue(this.min)).getMonth();
-        const maxYr: number = new Date(this.checkValue(this.max)).getFullYear();
-        const maxMonth: number = new Date(this.checkValue(this.max)).getMonth();
-        localDate.setMonth(0);
-        this.titleUpdate(this.currentDate, 'months');
-        localDate.setDate(1);
-        for (let month: number = 0; month < 12; ++month) {
-            const tdEle: HTMLElement = this.dayCell(localDate);
-            const dayLink: HTMLElement = this.createElement('span');
-            const localMonth: boolean = (value && (value).getMonth() === localDate.getMonth());
-            const select: boolean = (value && (value).getFullYear() === yr && localMonth);
-            const title: string = this.globalize.formatDate(localDate, { type: 'date', format: 'MMM y' });
-            dayLink.textContent = this.toCapitalize(this.globalize.formatDate(localDate, {
-                format: null, type: 'dateTime', skeleton: 'MMM'
-            }));
-            if ((this.min && (curYrs < minYr || (month < minMonth && curYrs === minYr))) || (
-                this.max && (curYrs > maxYr || (month > maxMonth && curYrs >= maxYr)))) {
-                addClass([tdEle], DISABLED);
-            } else if (!valueUtil && select) {
-                addClass([tdEle], SELECTED);
-            } else {
-                if (localDate.getMonth() === mon && this.currentDate.getMonth() === mon) {
-                    addClass([tdEle], FOCUSEDDATE);
-                }
-            }
-            localDate.setDate(1);
-            localDate.setMonth(localDate.getMonth() + 1);
-            if (!tdEle.classList.contains(DISABLED)) {
-                EventHandler.add(tdEle, 'click', this.clickHandler, this);
-                dayLink.setAttribute('title', '' + title);
-            }
-            tdEle.appendChild(dayLink);
-            tdEles.push(tdEle);
-        }
-        this.renderTemplate(tdEles, numCells, YEAR, e, value);
-    }
-    protected renderDecades(e?: Event, value?: Date): void {
-        this.removeTableHeadElement();
-        const numCells: number = 4;
-        const yearCell: number = 12;
-        const tdEles: HTMLElement[] = [];
-        const localDate: Date = new Date(this.checkValue(this.currentDate));
-        localDate.setMonth(0);
-        localDate.setDate(1);
-        const localYr: number = localDate.getFullYear();
-        const startYr: Date = new Date(localDate.setFullYear((localYr - localYr % 10)));
-        const endYr: Date = new Date(localDate.setFullYear((localYr - localYr % 10 + (10 - 1))));
-        const startFullYr: number = startYr.getFullYear();
-        const endFullYr: number = endYr.getFullYear();
-        const startHdrYr: string = this.globalize.formatDate(startYr, {
-            format: null, type: 'dateTime', skeleton: 'y'
-        });
-        const endHdrYr: string = this.globalize.formatDate(endYr, { format: null, type: 'dateTime', skeleton: 'y' });
-        this.headerTitleElement.textContent = startHdrYr + ' - ' + (endHdrYr);
-        const start: Date = new Date(localYr - (localYr % 10) - 1, 0, 1);
-        const startYear: number = start.getFullYear();
-        for (let rowIterator: number = 0; rowIterator < yearCell; ++rowIterator) {
-            const year: number = startYear + rowIterator;
-            localDate.setFullYear(year);
-            const tdEle: HTMLElement = this.dayCell(localDate);
-            const dayLink: HTMLElement = this.createElement('span');
-            dayLink.textContent = this.globalize.formatDate(localDate, {
-                format: null, type: 'dateTime', skeleton: 'y'
-            });
-            if ((year < startFullYr) || (year > endFullYr)) {
-                addClass([tdEle], OTHERDECADE);
-                dayLink.setAttribute('aria-disabled', 'true');
-                if (!isNullOrUndefined(value) && localDate.getFullYear() === (value).getFullYear()) {
-                    addClass([tdEle], SELECTED);
-                }
-                if (year < new Date(this.checkValue(this.min)).getFullYear() ||
-                    year > new Date(this.checkValue(this.max)).getFullYear()) {
-                    addClass([tdEle], DISABLED);
-                }
-            } else if (year < new Date(this.checkValue(this.min)).getFullYear() ||
-                year > new Date(this.checkValue(this.max)).getFullYear()) {
-                addClass([tdEle], DISABLED);
-            } else if (!isNullOrUndefined(value) && localDate.getFullYear() === (value).getFullYear()) {
-                addClass([tdEle], SELECTED);
-            } else {
-                if (localDate.getFullYear() === this.currentDate.getFullYear() && !tdEle.classList.contains(DISABLED)) {
-                    addClass([tdEle], FOCUSEDDATE);
-                }
-            }
-            if (!tdEle.classList.contains(DISABLED)) {
-                EventHandler.add(tdEle, 'click', this.clickHandler, this);
-                dayLink.setAttribute('title', '' + dayLink.textContent);
-            }
-            tdEle.appendChild(dayLink);
-            tdEles.push(tdEle);
-        }
-        this.renderTemplate(tdEles, numCells, 'e-decade', e, value);
-    }
-    protected dayCell(localDate: Date): HTMLElement {
-        const type: string = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
-        const dateFormatOptions: object = { skeleton: 'full', type: 'dateTime', calendar: type };
-        const date: Date = this.globalize.parseDate(this.globalize.formatDate(localDate, dateFormatOptions), dateFormatOptions);
-        let value: number ;
-        if (!isNullOrUndefined(date)){
-            value = date.valueOf();
-        }
-        const attrs: Object = {
-            className: CELL, attrs: { 'id': '' + getUniqueID('' + value)}
-        };
-        return this.createElement('td', attrs);
-    }
-    protected firstDay(date: Date): Date {
-        const collection: Element[] = this.currentView() !== 'Decade' ? <NodeListOf<HTMLTableDataCellElement> & Element[]>
-            this.tableBodyElement.querySelectorAll('td:not(.' + OTHERMONTH + '):not(.' + WEEKNUMBER + ')') :
-            <NodeListOf<HTMLTableDataCellElement> & Element[]>
-            this.tableBodyElement.querySelectorAll('td' + ':not(.' + OTHERDECADE + '');
-        if (collection.length) {
-            for (let i: number = 0; i < collection.length; i++) {
-                if (!collection[i as number].classList.contains(DISABLED)) {
-                    // eslint-disable-next-line radix
-                    date = new Date(parseInt(collection[i as number].id, 0));
-                    break;
-                }
-            }
-        }
-        return date;
-    }
-    protected lastDay(date: Date, view: number): Date {
-        const lastDate: Date = new Date(date.getFullYear(), date.getMonth() + 1, 0);
-        if (view !== 2) {
-            const timeOffset: number = Math.abs(lastDate.getTimezoneOffset() - this.firstDay(date).getTimezoneOffset());
-            if (timeOffset) {
-                lastDate.setHours(this.firstDay(date).getHours() + (timeOffset / 60));
-            }
-            return this.findLastDay(lastDate);
-        } else {
-            return this.findLastDay(this.firstDay(lastDate));
-        }
-    }
-    protected checkDateValue(value: Date): Date {
-        return (!isNullOrUndefined(value) && value instanceof Date && !isNaN(+value)) ? value : null;
-    }
-    protected findLastDay(date: Date): Date {
-        const collection: Element[] = this.currentView() === 'Decade' ? <NodeListOf<HTMLTableDataCellElement> & Element[]>
-            this.tableBodyElement.querySelectorAll('td' + ':not(.' + OTHERDECADE + '') :
-            <NodeListOf<HTMLTableDataCellElement> & Element[]>
-            this.tableBodyElement.querySelectorAll('td:not(.' + OTHERMONTH + '):not(.' + WEEKNUMBER + ')');
-        if (collection.length) {
-            for (let i: number = collection.length - 1; i >= 0; i--) {
-                if (!collection[i as number].classList.contains(DISABLED)) {
-                    // eslint-disable-next-line radix
-                    date = new Date(parseInt(collection[i as number].id, 0));
-                    break;
-                }
-            }
-        }
-        return date;
-    }
-    protected removeTableHeadElement(): void {
-        if (this.getModuleName() === 'calendar') {
-            if (!isNullOrUndefined(this.element.querySelectorAll('.e-content table thead')[0])) {
-                detach(this.tableHeadElement);
-            }
-        } else {
-            if (!isNullOrUndefined(this.calendarElement.querySelectorAll('.e-content table thead')[0])) {
-                detach(this.tableHeadElement);
-            }
-        }
-
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    protected renderTemplate(elements: HTMLElement[], count: number, classNm: string, e?: Event, value?: Date): void {
-        const view: number = this.getViewNumber(this.currentView());
-        let trEle: HTMLElement;
-        this.tableBodyElement = this.createElement('tbody');
-        this.table.appendChild(this.tableBodyElement);
-        removeClass([this.contentElement, this.headerElement], [MONTH, DECADE, YEAR]);
-        addClass([this.contentElement, this.headerElement], [classNm]);
-        const weekNumCell: number = 41;
-        const numberCell: number = 35;
-        const otherMonthCell: number = 6;
-        let row: number = count;
-        let rowIterator: number = 0;
-        for (let dayCell: number = 0; dayCell < elements.length / count; ++dayCell) {
-            trEle = this.createElement('tr');
-            for (rowIterator = 0 + rowIterator; rowIterator < row; rowIterator++) {
-                if (!elements[rowIterator as number].classList.contains('e-week-number') && !isNullOrUndefined(elements[rowIterator as number].children[0])) {
-                    addClass([elements[rowIterator as number].children[0]], [LINK]);
-                    rippleEffect(<HTMLElement>elements[rowIterator as number].children[0], {
-                        duration: 600,
-                        isCenterRipple: true
-                    });
-                }
-                trEle.appendChild(elements[rowIterator as number]);
-                if (this.weekNumber && rowIterator === otherMonthCell + 1 && elements[otherMonthCell + 1].classList.contains(OTHERMONTH)) {
-                    addClass([trEle], OTHERMONTHROW);
-                }
-                if (!this.weekNumber && rowIterator === otherMonthCell && elements[otherMonthCell as number].
-                    classList.contains(OTHERMONTH)) {
-                    addClass([trEle], OTHERMONTHROW);
-                }
-                if (this.weekNumber) {
-                    if (rowIterator === weekNumCell && elements[weekNumCell as number].classList.contains(OTHERMONTH)) {
-                        addClass([trEle], OTHERMONTHROW);
-                    }
-                } else {
-                    if (rowIterator === numberCell && elements[numberCell as number].classList.contains(OTHERMONTH)) {
-                        addClass([trEle], OTHERMONTHROW);
-                    }
-                }
-            }
-            row = row + count;
-            rowIterator = rowIterator + 0;
-            this.tableBodyElement.appendChild(trEle);
-        }
-        this.table.querySelector('tbody').className = this.effect;
-        if (this.calendarMode === 'Gregorian') {
-            this.iconHandler();
-        } else {
-            this.islamicModule.islamicIconHandler();
-        }
-
-        if (view !== this.getViewNumber(this.currentView()) || (view === 0 && view !== this.getViewNumber(this.currentView()))) {
-            this.navigateHandler(e);
-        }
-        this.setAriaActiveDescendant();
-    }
-    protected clickHandler(e: MouseEvent, value: Date): void {
-        this.clickEventEmitter(e);
-        const eve: Element = <HTMLElement>e.currentTarget;
-        const view: number = this.getViewNumber(this.currentView());
-        if (eve.classList.contains(OTHERMONTH)) {
-            this.contentClick(e, 0, null, value);
-        } else if (view === this.getViewNumber(this.depth) && this.getViewNumber(this.start) >= this.getViewNumber(this.depth)) {
-            this.contentClick(e, 1, null, value);
-        } else if (2 === view) {
-            this.contentClick(e, 1, null, value);
-        } else if (!eve.classList.contains(OTHERMONTH) && view === 0) {
-            this.selectDate(e, this.getIdValue(e, null), null);
-        } else {
-            this.contentClick(e, 0, eve, value);
-        }
-        if (this.getModuleName() === 'calendar') {
-            this.table.focus();
-        }
-    }
-    // Content click event handler required for extended components
-    protected clickEventEmitter(e: MouseEvent): void {
-        e.preventDefault();
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    protected contentClick(e?: MouseEvent, view?: number, element?: Element, value?: Date): void {
-        const currentView: number = this.getViewNumber(this.currentView());
-        const d: Date = this.getIdValue(e, element);
-        switch (view) {
-        case 0:
-            if (currentView === this.getViewNumber(this.depth) && this.getViewNumber(this.start) >= this.getViewNumber(this.depth)) {
-                detach(this.tableBodyElement);
-                this.currentDate = d;
-                this.effect = ZOOMIN;
-                this.renderMonths(e);
-            } else {
-
-                if (this.calendarMode === 'Gregorian') {
-                    this.currentDate.setMonth(d.getMonth());
-                    if (d.getMonth() > 0 && this.currentDate.getMonth() !== d.getMonth()) {
-                        this.currentDate.setDate(0);
-                    }
-                    this.currentDate.setFullYear(d.getFullYear());
-                } else {
-                    this.currentDate = d;
-                }
-
-                this.effect = ZOOMIN;
-                detach(this.tableBodyElement);
-                this.renderMonths(e);
-            }
-            break;
-        case 1:
-            if (currentView === this.getViewNumber(this.depth) && this.getViewNumber(this.start) >= this.getViewNumber(this.depth)) {
-                this.selectDate(e, d, null);
-            } else {
-                if (this.calendarMode === 'Gregorian') {
-                    this.currentDate.setFullYear(d.getFullYear());
-                } else {
-                    this.islamicPreviousHeader = this.headerElement.textContent;
-                    const islamicDate: IslamicDateArgs = this.islamicModule.getIslamicDate(d);
-                    this.currentDate = this.islamicModule.toGregorian(islamicDate.year, islamicDate.month, 1);
-                }
-                this.effect = ZOOMIN;
-                detach(this.tableBodyElement);
-                this.renderYears(e);
-            }
-        }
-    }
-    protected switchView(view: number, e?: Event, multiSelection?: boolean, isCustomDate?: boolean): void {
-        switch (view) {
-        case 0:
-            detach(this.tableBodyElement);
-            this.renderMonths(e, null, isCustomDate);
-            break;
-        case 1:
-            detach(this.tableBodyElement);
-            this.renderYears(e);
-            break;
-        case 2:
-            detach(this.tableBodyElement);
-            this.renderDecades(e);
-        }
-    }
-    /**
-     * To get component name
-     *
-     * @returns {string} Returns the component name.
-     * @private
-     */
-    protected getModuleName(): string {
-        return 'calendar';
-    }
-    /**
-     *
-     * @returns {void}
-     * @deprecated
-     */
-    public requiredModules(): ModuleDeclaration[] {
-        const modules: ModuleDeclaration[] = [];
-        if (this.calendarMode === 'Islamic') {
-            modules.push({ args: [this], member: 'islamic', name: 'Islamic' });
-        }
-
-        return modules;
-    }
-    /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
-    /**
-     * Gets the properties to be maintained upon browser refresh.
-     *
-     * @returns {string}
-     */
-    public getPersistData(): string {
-        const keyEntity: string[] = ['value'];
-        return this.addOnPersist(keyEntity);
-    }
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
-    /**
-     * Called internally if any of the property value changed.
-     *
-     * @param {CalendarBaseModel} newProp - Returns the dynamic property value of the component.
-     * @param {CalendarBaseModel} oldProp - Returns the previous property value of the component.
-     * @param {boolean} multiSelection - - Specifies whether multiple date selection is enabled or not.
-     * @param {Date[]} values - Specifies the dates.
-     * @returns {void}
-     * @private
-     */
-    public onPropertyChanged(newProp: CalendarBaseModel, oldProp: CalendarBaseModel, multiSelection?: boolean, values?: Date[]): void {
-        this.effect = '';
-        for (const prop of Object.keys(newProp)) {
-            switch (prop) {
-            case 'enableRtl':
-                if (newProp.enableRtl) {
-                    if (this.getModuleName() === 'calendar') {
-                        this.element.classList.add('e-rtl');
-                    } else {
-                        this.calendarElement.classList.add('e-rtl');
-                    }
-                } else {
-                    if (this.getModuleName() === 'calendar') {
-                        this.element.classList.remove('e-rtl');
-                    } else {
-                        this.calendarElement.classList.remove('e-rtl');
-                    }
-                }
-                break;
-            case 'dayHeaderFormat':
-                this.getCultureValues();
-                if (this.getModuleName() !== 'datepicker') {
-                    this.createContentHeader();
-                } else if (this.calendarElement) {
-                    this.createContentHeader();
-                }
-                this.adjustLongHeaderSize();
-                break;
-            case 'min':
-            case 'max':
-                this.rangeValidation(this.min, this.max);
-                if (prop === 'min') {
-                    this.setProperties({ min: this.checkDateValue(new Date(this.checkValue(newProp.min))) }, true);
-                } else {
-                    this.setProperties({ max: this.checkDateValue(new Date(this.checkValue(newProp.max))) }, true);
-                }
-                this.setProperties({ start: this.currentView() }, true);
-                if (this.tableBodyElement) {
-                    detach(this.tableBodyElement);
-                }
-                this.minMaxUpdate();
-                if (multiSelection) {
-                    this.validateValues(multiSelection, values);
-                }
-                if (this.getModuleName() !== 'datepicker') {
-                    this.createContentBody();
-                } else if (this.calendarElement) {
-                    this.createContentBody();
-                }
-                if ((this.todayDate < this.min || this.max < this.todayDate) && (this.footer) && (this.todayElement)) {
-                    detach(this.todayElement);
-                    detach(this.footer);
-                    this.todayElement = this.footer = null;
-                    this.createContentFooter();
-                } else {
-                    if ((this.footer) && (this.todayElement) && this.todayElement.classList.contains('e-disabled')) {
-                        removeClass([this.todayElement], DISABLED);
-                        detach(this.todayElement);
-                        detach(this.footer);
-                        this.todayElement = this.footer = null;
-                        this.createContentFooter();
-                    }
-                }
-                break;
-            case 'start':
-            case 'depth':
-            case 'weekNumber':
-            case 'firstDayOfWeek':
-            case 'weekRule':
-                this.checkView();
-                if (this.getModuleName() !== 'datepicker') {
-                    this.createContentHeader();
-                    this.createContentBody();
-                } else if (this.calendarElement) {
-                    this.createContentHeader();
-                    this.createContentBody();
-                }
-                break;
-
-            case 'locale':
-                this.globalize = new Internationalization(this.locale);
-                if (this.getModuleName() !== 'datepicker') {
-                    this.createContentHeader();
-                    this.createContentBody();
-                } else if (this.calendarElement) {
-                    this.createContentHeader();
-                    this.createContentBody();
-                }
-                if (this.getModuleName() === 'calendar') {
-                    const l10nLocale: object = { today: 'Today' };
-                    this.l10 = new L10n(this.getModuleName(), l10nLocale, this.locale);
-                }
-                this.l10.setLocale(this.locale);
-                if (this.showTodayButton) {
-                    this.updateFooter();
-                }
-                break;
-            case 'showTodayButton':
-                if (newProp.showTodayButton) {
-                    this.createContentFooter();
-                } else {
-                    if (!isNullOrUndefined(this.todayElement) && !isNullOrUndefined(this.footer)) {
-                        detach(this.todayElement);
-                        detach(this.footer);
-                        this.todayElement = this.footer = undefined;
-                    }
-                }
-                this.setProperties({ showTodayButton: newProp.showTodayButton }, true);
-                break;
-            }
-        }
-    }
-    /**
-     * values property updated with considered disabled dates of the calendar.
-     *
-     * @param {boolean} multiSelection - Specifies whether multiple date selection is enabled.
-     * @param {Date[]} values - Specifies the dates to validate.
-     * @returns {void}
-     */
-    protected validateValues(multiSelection?: boolean, values?: Date[]): void {
-        if (multiSelection && !isNullOrUndefined(values) && values.length > 0) {
-            const copyValues: Date[] = this.copyValues(values);
-            for (let skipIndex: number = 0; skipIndex < copyValues.length; skipIndex++) {
-                const tempValue: Date = copyValues[skipIndex as number];
-                const type: string = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
-                let tempValueFormat: object;
-                let tempValueString: string;
-                let tempValueDate: object;
-                if (this.calendarMode === 'Gregorian') {
-                    tempValueFormat = { type: 'date', skeleton: 'yMd' };
-                    tempValueString = this.globalize.formatDate(tempValue, tempValueFormat);
-                    tempValueDate = this.globalize.parseDate(tempValueString, tempValueFormat);
-                } else {
-                    tempValueFormat = { type: 'date', skeleton: 'yMd', calendar: 'islamic' };
-                    tempValueString = this.globalize.formatDate(tempValue, tempValueFormat);
-                    tempValueDate = this.globalize.parseDate(tempValueString, tempValueFormat);
-                }
-                const minFormatOption: object = { type: 'date', skeleton: 'yMd', calendar: type };
-                const minStringValue: string = this.globalize.formatDate(this.min, minFormatOption);
-                const minString: string = minStringValue;
-                const maxFormatOption: object = { type: 'date', skeleton: 'yMd', calendar: type };
-                const maxStringValue: string = this.globalize.formatDate(this.max, maxFormatOption);
-                const maxString: string = maxStringValue;
-                const minDate: object = this.globalize.parseDate(minString, minFormatOption);
-                const maxDate: object = this.globalize.parseDate(maxString, maxFormatOption);
-
-                if (+tempValueDate < +minDate || +tempValueDate > +maxDate) {
-                    copyValues.splice(skipIndex, 1);
-                    skipIndex = -1;
-                }
-            }
-            this.setProperties({ values: copyValues }, true);
-        }
-    }
-    protected setValueUpdate(): void {
-        if (!isNullOrUndefined(this.tableBodyElement)) {
-            detach(this.tableBodyElement);
-            this.setProperties({ start: this.currentView() }, true);
-            this.createContentBody();
-        }
-    }
-    protected copyValues(values: Date[]): Date[] {
-        const copyValues: Date[] = [];
-        if (!isNullOrUndefined(values) && values.length > 0) {
-            for (let index: number = 0; index < values.length; index++) {
-                copyValues.push(new Date(+values[index as number]));
-            }
-        }
-        return copyValues;
-    }
-    protected titleUpdate(date: Date, view: string): void {
-        const globalize: Internationalization = new Internationalization(this.locale);
-        let dayFormatOptions: string;
-        let monthFormatOptions: string;
-        const type: string = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
-        if (this.calendarMode === 'Gregorian') {
-            dayFormatOptions = globalize.formatDate(date, { type: 'dateTime', skeleton: 'yMMMM', calendar: type });
-            monthFormatOptions = globalize.formatDate(date, {
-                format: null,  type: 'dateTime', skeleton: 'y', calendar: type
-            });
-        } else {
-
-            dayFormatOptions = globalize.formatDate(date, { type: 'dateTime', format: 'MMMM y', calendar: type });
-            monthFormatOptions = globalize.formatDate(date, { type: 'dateTime', format: 'y', calendar: type });
-        }
-        switch (view) {
-        case 'days':
-            this.headerTitleElement.textContent = this.toCapitalize(dayFormatOptions);
-            break;
-        case 'months':
-            this.headerTitleElement.textContent = monthFormatOptions;
-        }
-    }
-    protected setActiveDescendant(): string {
-        let id: string;
-        const focusedEle: Element = this.tableBodyElement.querySelector('tr td.e-focused-date');
-        const selectedEle: Element = this.tableBodyElement.querySelector('tr td.e-selected');
-        const type: string = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
-        let title: string;
-        const view: string = this.currentView();
-        if (view === 'Month') {
-            title = this.globalize.formatDate(this.currentDate, { type: 'date', skeleton: 'full', calendar: type });
-        } else if (view === 'Year') {
-            if (type !== 'islamic') {
-                title = this.globalize.formatDate(this.currentDate, { type: 'date', skeleton: 'yMMMM', calendar: type });
-            } else {
-                title = this.globalize.formatDate(this.currentDate, { type: 'date', skeleton: 'GyMMM', calendar: type });
-            }
-        } else {
-            title = this.globalize.formatDate(this.currentDate, {
-                format: null, type: 'date', skeleton: 'y', calendar: type
-            });
-        }
-        if (selectedEle || focusedEle) {
-            if (!isNullOrUndefined(selectedEle)) {
-                selectedEle.setAttribute('aria-selected', 'true');
-            }
-            (focusedEle || selectedEle).setAttribute('aria-label', title);
-            id = (focusedEle || selectedEle).getAttribute('id');
-
-        }
-        return id;
-    }
-    protected iconHandler(): void {
-        new Date(this.checkValue(this.currentDate)).setDate(1);
-        switch (this.currentView()) {
-        case 'Month':
-            this.previousIconHandler(this.compareMonth(new Date(this.checkValue(this.currentDate)), this.min) < 1);
-            this.nextIconHandler(this.compareMonth(new Date(this.checkValue(this.currentDate)), this.max) > -1);
-            break;
-        case 'Year':
-            this.previousIconHandler(this.compareYear(new Date(this.checkValue(this.currentDate)), this.min) < 1);
-            this.nextIconHandler(this.compareYear(new Date(this.checkValue(this.currentDate)), this.max) > -1);
-            break;
-        case 'Decade':
-            this.previousIconHandler(this.compareDecade(new Date(this.checkValue(this.currentDate)), this.min) < 1);
-            this.nextIconHandler(this.compareDecade(new Date(this.checkValue(this.currentDate)), this.max) > -1);
-        }
-    }
-    /**
-     * Destroys the widget.
-     *
-     * @returns {void}
-     */
-    public destroy(): void {
-        if (this.getModuleName() === 'calendar' && this.element) {
-            removeClass([this.element], [ROOT]);
-        } else {
-            if (this.calendarElement && this.element) {
-                removeClass([this.element], [ROOT]);
-            }
-        }
-        if (this.getModuleName() === 'calendar' && this.element) {
-            if (!isNullOrUndefined(this.headerTitleElement)) {
-                EventHandler.remove(this.headerTitleElement, 'click', this.navigateTitle);
-            }
-            if (this.todayElement) {
-                EventHandler.remove(this.todayElement, 'click', this.todayButtonClick);
-            }
-            this.previousIconHandler(true);
-            this.nextIconHandler(true);
-            this.keyboardModule.destroy();
-            this.element.removeAttribute('data-role');
-            if (!isNullOrUndefined(this.calendarEleCopy.getAttribute('tabindex'))) {
-                this.element.setAttribute('tabindex', this.tabIndex);
-            } else {
-                this.element.removeAttribute('tabindex');
-            }
-        }
-        if (this.element) {
-            this.element.innerHTML = '';
-        }
-        this.todayElement = null;
-        this.tableBodyElement = null;
-        this.todayButtonEvent = null;
-        this.renderDayCellArgs = null;
-        this.headerElement = null;
-        this.nextIcon = null;
-        this.table = null;
-        this.tableHeadElement = null;
-        this.previousIcon = null;
-        this.headerTitleElement = null;
-        this.footer = null;
-        this.contentElement = null;
-        super.destroy();
-    }
-    protected title(e?: Event): void {
-        let currentView: number = this.getViewNumber(this.currentView());
-        this.effect = ZOOMIN;
-        this.switchView(++currentView, e);
-    }
-    protected getViewNumber(stringVal: string): number {
-        if (stringVal === 'Month') {
-            return 0;
-        } else if (stringVal === 'Year') {
-            return 1;
-        } else {
-            return 2;
-        }
-    }
-    protected navigateTitle(e?: Event): void {
-        e.preventDefault();
-        this.title(e);
-    }
-    protected previous(): void {
-        this.effect = '';
-        const currentView: number = this.getViewNumber(this.currentView());
-        switch (this.currentView()) {
-        case 'Month':
-            this.addMonths(this.currentDate, -1);
-            this.switchView(currentView);
-            break;
-        case 'Year':
-            this.addYears(this.currentDate, -1);
-            this.switchView(currentView);
-            break;
-        case 'Decade':
-            this.addYears(this.currentDate, -10);
-            this.switchView(currentView);
-            break;
-        }
-    }
-    protected navigatePrevious(e: MouseEvent | KeyboardEvent | SwipeEventArgs): void {
-        !Browser.isDevice && (e as MouseEvent | KeyboardEvent).preventDefault();
-        if (this.calendarMode === 'Gregorian') {
-            this.previous();
-        } else {
-            this.islamicModule.islamicPrevious();
-        }
-
-        this.triggerNavigate(e);
-    }
-    protected next(): void {
-        this.effect = '';
-        const currentView: number = this.getViewNumber(this.currentView());
-        switch (this.currentView()) {
-        case 'Month':
-            this.addMonths(this.currentDate, 1);
-            this.switchView(currentView);
-            break;
-        case 'Year':
-            this.addYears(this.currentDate, 1);
-            this.switchView(currentView);
-            break;
-        case 'Decade':
-            this.addYears(this.currentDate, 10);
-            this.switchView(currentView);
-            break;
-        }
-    }
-    protected navigateNext(eve: MouseEvent | KeyboardEvent | SwipeEventArgs): void {
-        !Browser.isDevice && (eve as MouseEvent | KeyboardEvent).preventDefault();
-        if (this.calendarMode === 'Gregorian') {
-            this.next();
-        } else {
-            this.islamicModule.islamicNext();
-        }
-        this.triggerNavigate(eve);
-    }
-    /**
-     * This method is used to navigate to the month/year/decade view of the Calendar.
-     *
-     * @param {string} view - Specifies the view of the Calendar.
-     * @param {Date} date - Specifies the focused date in a view.
-     * @param {boolean} isCustomDate - Specifies whether the calendar is rendered with custom today date or not.
-     * @returns {void}
-     */
-    public navigateTo(view: CalendarView, date: Date, isCustomDate?: boolean): void {
-        if (+date >= +this.min && +date <= +this.max) {
-            this.currentDate = date;
-        }
-        if (+date <= +this.min) {
-            this.currentDate = new Date(this.checkValue(this.min));
-        }
-        if (+date >= +this.max) {
-            this.currentDate = new Date(this.checkValue(this.max));
-        }
-        if ((this.getViewNumber(this.depth) >= this.getViewNumber(view))) {
-            if ((this.getViewNumber(this.depth) <= this.getViewNumber(this.start))
-                || this.getViewNumber(this.depth) === this.getViewNumber(view)) {
-                view = this.depth;
-            }
-        }
-        this.switchView(this.getViewNumber(view), null, null, isCustomDate);
-    }
-    /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
-    /**
-     * Gets the current view of the Calendar.
-     *
-     * @returns {string}
-     */
-    public currentView(): string {
-        if (!isNullOrUndefined(this.contentElement) && this.contentElement.classList.contains(YEAR)) {
-            return 'Year';
-        } else if (!isNullOrUndefined(this.contentElement) && this.contentElement.classList.contains(DECADE)) {
-            return 'Decade';
-        } else {
-            return 'Month';
-        }
-    }
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
-    protected getDateVal(date: Date, value: Date): boolean {
-        return (!isNullOrUndefined(value) && date.getDate() === (value).getDate()
-            && date.getMonth() === (value).getMonth() && date.getFullYear() === (value).getFullYear());
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    protected getCultureObjects(ld: Object, c: string): Object {
-        const gregorianFormat: string = !isNullOrUndefined(this.dayHeaderFormat) ? '.dates.calendars.gregorian.days.format.' + this.dayHeaderFormat.toLowerCase() : null;
-        const islamicFormat: string = !isNullOrUndefined(this.dayHeaderFormat) ? '.dates.calendars.islamic.days.format.' + this.dayHeaderFormat.toLowerCase() : null;
-        const mainVal: string = 'main.';
-        if (this.calendarMode === 'Gregorian') {
-            return getValue(mainVal + '' + this.locale + gregorianFormat, ld);
-        } else {
-            return getValue('main.' + '' + this.locale + islamicFormat, ld);
-        }
-    }
-    protected getWeek(d: Date): number {
-        const currentDate: number = new Date(this.checkValue(d)).valueOf();
-        const date: number = new Date(d.getFullYear(), 0, 1).valueOf();
-        return Math.ceil((((currentDate - date) + dayMilliSeconds) / dayMilliSeconds) / 7);
-    }
-    protected setStartDate(date: Date, time: number): void {
-        const tzOffset: number = date.getTimezoneOffset();
-        const d: Date = new Date(date.getTime() + time);
-        const tzOffsetDiff: number = d.getTimezoneOffset() - tzOffset;
-        date.setTime(d.getTime() + tzOffsetDiff * minutesMilliSeconds);
-    }
-    protected addMonths(date: Date, i: number): void {
-        if (this.calendarMode === 'Gregorian') {
-            const day: number = date.getDate();
-            date.setDate(1);
-            date.setMonth(date.getMonth() + i);
-            date.setDate(Math.min(day, this.getMaxDays(date)));
-        } else {
-            const islamicDate: IslamicDateArgs = this.islamicModule.getIslamicDate(date);
-            this.currentDate = this.islamicModule.toGregorian(islamicDate.year, (islamicDate.month) + i, 1);
-        }
-    }
-    protected addYears(date: Date, i: number): void {
-        if (this.calendarMode === 'Gregorian') {
-            const day: number = date.getDate();
-            date.setDate(1);
-            date.setFullYear(date.getFullYear() + i);
-            date.setDate(Math.min(day, this.getMaxDays(date)));
-        } else {
-            const islamicDate: IslamicDateArgs = this.islamicModule.getIslamicDate(date);
-            this.currentDate = this.islamicModule.toGregorian(islamicDate.year + i, (islamicDate.month), 1);
-        }
-    }
-    protected getIdValue(e: MouseEvent | TouchEvent | KeyboardEvent, element: Element): Date {
-        let eve: Element;
-        if (e) {
-            eve = <Element>e.currentTarget;
-        } else {
-            eve = element;
-        }
-        const type: string = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
-        const dateFormatOptions: object = { type: 'dateTime', skeleton: 'full', calendar: type };
-        // eslint-disable-next-line radix
-        const dateString: string = this.globalize.formatDate(new Date(parseInt('' + eve.getAttribute('id'), 0)), dateFormatOptions);
-        const date: Date = this.globalize.parseDate(dateString, dateFormatOptions);
-        const value: number = date.valueOf() - date.valueOf() % 1000;
-        return new Date(value);
-        //return this.globalize.parseDate(dateString, dateFormatOptions);
-    }
-    protected adjustLongHeaderSize(): void {
-        removeClass([this.element], DAYHEADERLONG);
-        if (this.dayHeaderFormat === 'Wide') {
-            addClass([this.getModuleName() === 'calendar' ? this.element : this.calendarElement], DAYHEADERLONG);
-        }
-    }
-    protected selectDate(e: MouseEvent | KeyboardEventArgs, date: Date, node: Element, multiSelection?: boolean, values?: Date[]): void {
-        const element: Element = node || <Element>e.currentTarget;
-        this.isDateSelected = false;
-        if (this.currentView() === 'Decade') {
-            this.setDateDecade(this.currentDate, date.getFullYear());
-        } else if (this.currentView() === 'Year') {
-            this.setDateYear(this.currentDate, date);
-        } else {
-            if (multiSelection && !this.checkPresentDate(date, values)) {
-                const copyValues: Date[] = this.copyValues(values);
-                if (!isNullOrUndefined(values) && copyValues.length > 0) {
-                    copyValues.push(new Date(this.checkValue(date)));
-                    this.setProperties({ values: copyValues }, true);
-                    this.setProperties({ value: values[values.length - 1] }, true);
-                } else {
-                    this.setProperties({ values: [new Date(this.checkValue(date))] }, true);
-                }
-            } else {
-                this.setProperties({ value: new Date(this.checkValue(date)) }, true);
-            }
-            this.currentDate = new Date(this.checkValue(date));
-        }
-        let tableBodyElement: Element = closest(element, '.' + ROOT);
-        if (isNullOrUndefined(tableBodyElement)) {
-            tableBodyElement = this.tableBodyElement;
-        }
-        if (!multiSelection && !isNullOrUndefined(tableBodyElement.querySelector('.' + SELECTED))) {
-            removeClass([tableBodyElement.querySelector('.' + SELECTED)], SELECTED);
-        }
-        if (!multiSelection && !isNullOrUndefined(tableBodyElement.querySelector('.' + FOCUSEDDATE))) {
-            removeClass([tableBodyElement.querySelector('.' + FOCUSEDDATE)], FOCUSEDDATE);
-        }
-        if (!multiSelection && !isNullOrUndefined(tableBodyElement.querySelector('.' + FOCUSEDCELL))) {
-            removeClass([tableBodyElement.querySelector('.' + FOCUSEDCELL)], FOCUSEDCELL);
-        }
-        if (multiSelection) {
-            const copyValues: Date[] = this.copyValues(values);
-            const collection: Element[] = Array.prototype.slice.call(this.tableBodyElement.querySelectorAll('td'));
-            for (let index: number = 0; index < collection.length; index++) {
-                const tempElement: Element = tableBodyElement.querySelectorAll('td' + '.' + FOCUSEDDATE)[0];
-                const selectedElement: Element = tableBodyElement.querySelectorAll('td' + '.' + SELECTED)[0];
-                if (collection[index as number] === tempElement) {
-                    removeClass([collection[index as number]], FOCUSEDDATE);
-                }
-                if (collection[index as number] === selectedElement &&
-                    !this.checkPresentDate(new Date(parseInt(selectedElement.getAttribute('id').split('_')[0], 10)), values)) {
-                    removeClass([collection[index as number]], SELECTED);
-                }
-            }
-            if (element.classList.contains(SELECTED)) {
-                removeClass([element], SELECTED);
-                for (let i: number = 0; i < copyValues.length; i++) {
-                    const type: string = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
-                    const formatOptions: object = { format: null, type: 'date', skeleton: 'short', calendar: type };
-                    const localDateString: string = this.globalize.formatDate(date, formatOptions);
-                    const tempDateString: string = this.globalize.formatDate(copyValues[i as number], formatOptions);
-                    if (localDateString === tempDateString) {
-                        const index: number = copyValues.indexOf(copyValues[i as number]);
-                        copyValues.splice(index, 1);
-                        addClass([element], FOCUSEDDATE);
-                    }
-                }
-                this.setProperties({ values: copyValues }, true);
-            } else {
-                addClass([element], SELECTED);
-            }
-        } else {
-            addClass([element], SELECTED);
-        }
-        this.isDateSelected = true;
-    }
-    protected checkPresentDate(dates: Date, values: Date[]): boolean {
-        let previousValue: boolean = false;
-        if (!isNullOrUndefined(values)) {
-            for (let checkPrevious: number = 0; checkPrevious < values.length; checkPrevious++) {
-                const type: string = (this.calendarMode === 'Gregorian') ? 'gregorian' : 'islamic';
-                const localDateString: string = this.globalize.formatDate(dates, {
-                    format: null, type: 'date', skeleton: 'short', calendar: type
-                });
-                const tempDateString: string = this.globalize.formatDate(values[checkPrevious as number], {
-                    format: null, type: 'date', skeleton: 'short', calendar: type
-                });
-                if (localDateString === tempDateString) {
-                    previousValue = true;
-                }
-            }
-        }
-        return previousValue;
-    }
-
-    protected setAriaActiveDescendant(): void {
-        attributes(this.table, {
-            'aria-activedescendant': '' + this.setActiveDescendant()
-        });
-    }
-    protected previousIconHandler(disabled: boolean): void {
-        if (disabled) {
-            if (!isNullOrUndefined(this.previousIcon)) {
-                EventHandler.remove(this.previousIcon, 'click', this.navigatePreviousHandler);
-
-                addClass([this.previousIcon], '' + DISABLED);
-                addClass([this.previousIcon], '' + OVERLAY);
-                this.previousIcon.setAttribute('aria-disabled', 'true');
-            }
-        } else {
-            EventHandler.add(this.previousIcon, 'click', this.navigatePreviousHandler);
-            removeClass([this.previousIcon], '' + DISABLED);
-            removeClass([this.previousIcon], '' + OVERLAY);
-            this.previousIcon.setAttribute('aria-disabled', 'false');
-        }
-    }
-    protected renderDayCellEvent(args: RenderDayCellEventArgs): void {
-        extend(this.renderDayCellArgs, { name: 'renderDayCell' });
-        this.trigger('renderDayCell', args);
-    }
-    protected navigatedEvent(eve: MouseEvent | KeyboardEvent| SwipeEventArgs): void {
-        extend(this.navigatedArgs, { name: 'navigated', event: eve });
-        this.trigger('navigated', this.navigatedArgs);
-    }
-    protected triggerNavigate(event: MouseEvent | KeyboardEvent | SwipeEventArgs): void {
-        this.navigatedArgs = { view: this.currentView(), date: this.currentDate };
-        this.navigatedEvent(event);
-    }
-
-    protected nextIconHandler(disabled: boolean): void {
-        if (disabled) {
-            if (!isNullOrUndefined(this.previousIcon)) {
-                EventHandler.remove(this.nextIcon, 'click', this.navigateNextHandler);
-                addClass([this.nextIcon], DISABLED);
-                addClass([this.nextIcon], OVERLAY);
-                this.nextIcon.setAttribute('aria-disabled', 'true');
-            }
-        } else {
-            EventHandler.add(this.nextIcon, 'click', this.navigateNextHandler);
-            removeClass([this.nextIcon], DISABLED);
-            removeClass([this.nextIcon], OVERLAY);
-            this.nextIcon.setAttribute('aria-disabled', 'false');
-        }
-    }
-    protected compare(startDate: Date, endDate: Date, modifier: number): number {
-        let start: number = endDate.getFullYear();
-        let end: number;
-        let result: number;
-        end = start;
-        result = 0;
-        if (modifier) {
-            start = start - start % modifier;
-            end = start - start % modifier + modifier - 1;
-        }
-        if (startDate.getFullYear() > end) {
-            result = 1;
-        } else if (startDate.getFullYear() < start) {
-            result = -1;
-        }
-        return result;
-    }
-    protected isMinMaxRange(date: Date): boolean {
-        return +date >= +this.min && +date <= +this.max;
-    }
-
-    protected isMonthYearRange(date: Date): boolean {
-        if (this.calendarMode === 'Gregorian') {
-            return date.getMonth() >= this.min.getMonth()
-                && date.getFullYear() >= this.min.getFullYear()
-                && date.getMonth() <= this.max.getMonth()
-                && date.getFullYear() <= this.max.getFullYear();
-
-        } else {
-            const islamicDate: IslamicObject = this.islamicModule.getIslamicDate(date);
-            return (islamicDate.month >= (this.islamicModule.getIslamicDate(new Date(1941, 12, 18))).month)
-                && islamicDate.year >= (<IslamicObject>(this.islamicModule.getIslamicDate(new Date(1941, 12, 18)))).year
-                && islamicDate.month <= (<IslamicObject>(this.islamicModule.getIslamicDate(new Date(2068, 2, 4)))).month
-                && islamicDate.year <= (<IslamicObject>(this.islamicModule.getIslamicDate(new Date(2068, 2, 4)))).year;
-        }
-    }
-
-    protected compareYear(start: Date, end: Date): number {
-        return this.compare(start, end, 0);
-    }
-    protected compareDecade(start: Date, end: Date): number {
-        return this.compare(start, end, 10);
-    }
-    protected shiftArray(array: string[], i: number): string[] {
-        return array.slice(i).concat(array.slice(0, i));
-    }
-    protected addDay(date: Date, i: number, e: KeyboardEvent, max: Date, min: Date): void {
-        let column: number = i;
-        const value: Date = new Date(+date);
-        if (!isNullOrUndefined(this.tableBodyElement) && !isNullOrUndefined(e)) {
-            while (this.findNextTD(new Date(+date), column, max, min)) {
-                column += i;
-            }
-            const rangeValue: Date = new Date(value.setDate(value.getDate() + column));
-            column = (+rangeValue > +max || +rangeValue < +min) ? column === i ? i - i : i : column;
-        }
-        date.setDate(date.getDate() + column);
-    }
-    protected findNextTD(date: Date, column: number, max: Date, min: Date): boolean {
-        const value: Date = new Date(date.setDate(date.getDate() + column));
-        let collection: Element[] = [];
-        let isDisabled: boolean = false;
-        if ((!isNullOrUndefined(value) && value.getMonth()) === (!isNullOrUndefined(this.currentDate) && this.currentDate.getMonth())) {
-            let tdEles: Element[];
-            if (this.calendarMode === 'Gregorian') {
-                tdEles = this.renderDays(value);
-            } else {
-                tdEles = this.islamicModule.islamicRenderDays(this.currentDate, value);
-            }
-
-            collection = tdEles.filter((element: Element) => {
-                return element.classList.contains(DISABLED);
-            });
-        } else {
-            collection = <NodeListOf<HTMLTableDataCellElement> & Element[]>this.tableBodyElement.querySelectorAll('td.' + DISABLED);
-        }
-        if (+value <= (+(max)) && +value >= (+(min))) {
-            if (collection.length) {
-                for (let i: number = 0; i < collection.length; i++) {
-                    // eslint-disable-next-line radix
-                    isDisabled = (+value === +new Date(parseInt(collection[i as number].id, 0))) ? true : false;
-                    if (isDisabled) {
-                        break;
-                    }
-                }
-            }
-        }
-        return isDisabled;
-    }
-    protected getMaxDays(d: Date): number {
-        let date: number;
-        const tmpDate: Date = new Date(this.checkValue(d));
-        date = 28;
-        const month: number = tmpDate.getMonth();
-        while (tmpDate.getMonth() === month) {
-            ++date;
-            tmpDate.setDate(date);
-        }
-        return date - 1;
-    }
-    protected setDateDecade(date: Date, year: number): void {
-        date.setFullYear(year);
-        this.setProperties({ value: new Date(this.checkValue(date)) }, true);
-    }
-    protected setDateYear(date: Date, value: Date): void {
-        date.setFullYear(value.getFullYear(), value.getMonth(), date.getDate());
-        if (value.getMonth() !== date.getMonth()) {
-            date.setDate(0);
-            this.currentDate = new Date(this.checkValue(value));
-        }
-        this.setProperties({ value: new Date(this.checkValue(date)) }, true);
-    }
-    protected compareMonth(start: Date, end: Date): number {
-        let result: number;
-        if (start.getFullYear() > end.getFullYear()) {
-            result = 1;
-        } else if (start.getFullYear() < end.getFullYear()) {
-            result = -1;
-        } else {
-            result = start.getMonth() === end.getMonth() ? 0 : start.getMonth() > end.getMonth() ? 1 : -1;
-        }
-        return result;
-    }
-    protected checkValue(inValue: string | Date | number): string {
-        if (inValue instanceof Date) {
-            return (inValue.toUTCString());
-        } else {
-            return ('' + inValue);
-        }
-    }
-    protected checkView(): void {
-        if (this.start !== 'Decade' && this.start !== 'Year') {
-            this.setProperties({ start: 'Month' }, true);
-        }
-        if (this.depth !== 'Decade' && this.depth !== 'Year') {
-            this.setProperties({ depth: 'Month' }, true);
-        }
-        if (this.getViewNumber(this.depth) > this.getViewNumber(this.start)) {
-            this.setProperties({ depth: 'Month' }, true);
-        }
-    }
-    protected getDate(date: Date, timezone: string): Date {
-        if (timezone) {
-            date = new Date(date.toLocaleString('en-US', { timeZone: timezone }));
-        }
-        return date;
-    }
-}
-
-/**
- * Represents the Calendar component that allows the user to select a date.
- * ```html
- * <div id="calendar"/>
- * ```
- * ```typescript
- * <script>
- *   var calendarObj = new Calendar({ value: new Date() });
- *   calendarObj.appendTo("#calendar");
- * </script>
- * ```
- */
-
-@NotifyPropertyChanges
-export class Calendar extends CalendarBase {
-    protected changedArgs: ChangedEventArgs;
-    protected changeHandler: Function;
-
-    /**
-     * Gets or sets the selected date of the Calendar.
-     *
-     * @default null
-     * @isGenericType true
-     * @deprecated
-     */
-    @Property(null)
-    public value: Date;
-
-    /**
-     * Gets or sets multiple selected dates of the calendar.
-     * {% codeBlock src='calendar/values/index.md' %}{% endcodeBlock %}
-     *
-     * @default null
-     */
-    @Property(null)
-    public values: Date[];
-
-    /**
-     * Specifies the option to enable the multiple dates selection of the calendar.
-     *
-     * @default false
-     */
-    @Property(false)
-    public isMultiSelection: boolean;
-
-    /**
-     * Triggers when the Calendar value is changed.
-     *
-     * @event change
-     */
-    @Event()
-    public change: EmitType<ChangedEventArgs>;
-    /**
-     * Initialized new instance of Calendar Class.
-     * Constructor for creating the widget
-     *
-     * @param {CalendarModel} options - Specifies the Calendar model.
-     * @param {string | HTMLElement} element - Specifies the element to render as component.
-     * @private
-     */
-    public constructor(options?: CalendarModel, element?: string | HTMLElement) {
-        super(options, element);
-    }
-    /**
-     * To Initialize the control rendering.
-     *
-     * @returns {void}
-     * @private
-     */
-    protected render(): void {
-        if (this.calendarMode === 'Islamic' && this.islamicModule === undefined) {
-            throwError('Requires the injectable Islamic modules to render Calendar in Islamic mode');
-        }
-        if (this.isMultiSelection && typeof this.values === 'object' && !isNullOrUndefined(this.values) && this.values.length > 0) {
-            const tempValues: number[] = [];
-            const copyValues: Date[] = [];
-            for (let limit: number = 0; limit < this.values.length; limit++) {
-                if (tempValues.indexOf(+this.values[limit as number]) === -1) {
-                    tempValues.push(+this.values[limit as number]);
-                    copyValues.push(this.values[limit as number]);
-                }
-            }
-            this.setProperties({ values: copyValues }, true);
-            for (let index: number = 0; index < this.values.length; index++) {
-                if (!this.checkDateValue(this.values[index as number])) {
-                    if (typeof (this.values[index as number]) === 'string' && this.checkDateValue(new Date(this.checkValue(this.values[index as number])))) {
-                        const copyDate: Date = new Date(this.checkValue(this.values[index as number]));
-                        this.values.splice(index, 1);
-                        this.values.splice(index, 0, copyDate);
-                    } else {
-                        this.values.splice(index, 1);
-                    }
-                }
-            }
-            this.setProperties({ value: this.values[this.values.length - 1] }, true);
-            this.previousValues = this.values.length;
-        }
-        this.validateDate();
-        this.minMaxUpdate();
-        if (this.getModuleName() === 'calendar') {
-            this.setEnable(this.enabled);
-            this.setClass(this.cssClass);
-        }
-        super.render();
-        if (this.getModuleName() === 'calendar') {
-            const form: Element = closest(this.element, 'form');
-            if (form) {
-                EventHandler.add(form, 'reset', this.formResetHandler.bind(this));
-            }
-            this.setTimeZone(this.serverTimezoneOffset);
-        }
-        this.renderComplete();
-    }
-    protected setEnable(enable: boolean): void {
-        if (!enable) {
-            addClass([this.element], DISABLED);
-        } else {
-            removeClass([this.element], DISABLED);
-        }
-    }
-    protected setClass(newCssClass: string, oldCssClass?: string): void {
-        if (!isNullOrUndefined(oldCssClass)) {
-            oldCssClass = (oldCssClass.replace(/\s+/g, ' ')).trim();
-        }
-        if (!isNullOrUndefined(newCssClass)) {
-            newCssClass = (newCssClass.replace(/\s+/g, ' ')).trim();
-        }
-        if (!isNullOrUndefined(oldCssClass) && oldCssClass !== '') {
-            removeClass([this.element], oldCssClass.split(' '));
-        }
-        if (!isNullOrUndefined(newCssClass)) {
-            addClass([this.element], newCssClass.split(' '));
-        }
-    }
-    protected isDayLightSaving(): boolean {
-        const secondOffset: number = new Date(this.value.getFullYear(), 6 , 1).getTimezoneOffset();
-        const firstOffset: number = new Date(this.value.getFullYear(), 0 , 1).getTimezoneOffset();
-        return (this.value.getTimezoneOffset() < Math.max(firstOffset, secondOffset));
-    }
-    protected setTimeZone(offsetValue: number ): void {
-        if (!isNullOrUndefined(this.serverTimezoneOffset) && this.value) {
-            const serverTimezoneDiff: number = offsetValue;
-            const clientTimeZoneDiff: number = new Date().getTimezoneOffset() / 60;
-            let timeZoneDiff: number = serverTimezoneDiff + clientTimeZoneDiff;
-            timeZoneDiff = this.isDayLightSaving() ? timeZoneDiff-- : timeZoneDiff;
-            this.value = new Date(this.value.getTime() + (timeZoneDiff * 60 * 60 * 1000));
-        }
-    }
-    protected formResetHandler(): void {
-        this.setProperties({ value: null }, true);
-    }
-    protected validateDate(): void {
-        if (typeof this.value === 'string') {
-            this.setProperties({ value: this.checkDateValue(new Date(this.checkValue(this.value))) }, true); // persist the value property.
-        }
-        super.validateDate(this.value);
-        if (!isNullOrUndefined(this.value) && this.min <= this.max && this.value >= this.min && this.value <= this.max) {
-            this.currentDate = new Date(this.checkValue(this.value));
-        }
-        if (isNaN(+this.value)) {
-            this.setProperties({ value: null }, true);
-        }
-    }
-    protected minMaxUpdate(): void {
-        if (this.getModuleName() === 'calendar') {
-            if (!isNullOrUndefined(this.value) && this.value <= this.min && this.min <= this.max) {
-                this.setProperties({ value: this.min }, true);
-                this.changedArgs = { value: this.value };
-            } else {
-                if (!isNullOrUndefined(this.value) && this.value >= this.max && this.min <= this.max) {
-                    this.setProperties({ value: this.max }, true);
-                    this.changedArgs = { value: this.value };
-                }
-            }
-        }
-        if (this.getModuleName() !== 'calendar' && !isNullOrUndefined(this.value)) {
-            if (!isNullOrUndefined(this.value) && this.value < this.min && this.min <= this.max) {
-                super.minMaxUpdate(this.min);
-            } else {
-                if (!isNullOrUndefined(this.value) && this.value > this.max && this.min <= this.max) {
-                    super.minMaxUpdate(this.max);
-                }
-            }
-        } else {
-            super.minMaxUpdate(this.value);
-        }
-    }
-
-    protected generateTodayVal(value: Date) : Date {
-        let tempValue: Date = new Date();
-        if (!isNullOrUndefined(this.timezone)) {
-            tempValue = super.getDate(tempValue, this.timezone);
-        }
-        if (value && isNullOrUndefined(this.timezone)) {
-            tempValue.setHours(value.getHours());
-            tempValue.setMinutes(value.getMinutes());
-            tempValue.setSeconds(value.getSeconds());
-            tempValue.setMilliseconds(value.getMilliseconds());
-        } else {
-            tempValue = new Date(tempValue.getFullYear(), tempValue.getMonth(), tempValue.getDate(), 0, 0, 0, 0);
-        }
-        return tempValue;
-    }
-
-    protected todayButtonClick(e?: MouseEvent | KeyboardEvent): void {
-        if (this.showTodayButton) {
-            const tempValue: Date = this.generateTodayVal(this.value);
-            this.setProperties({ value: tempValue }, true);
-            this.isTodayClicked = true;
-            this.todayButtonEvent = e;
-            if (this.isMultiSelection) {
-                const copyValues: Date[] = this.copyValues(this.values);
-                if (!super.checkPresentDate(tempValue, this.values)) {
-                    copyValues.push(tempValue);
-                    this.setProperties({ values: copyValues });
-                }
-            }
-            super.todayButtonClick(e, new Date(+this.value));
-        }
-    }
-    protected keyActionHandle(e: KeyboardEventArgs): void {
-        super.keyActionHandle(e, this.value, this.isMultiSelection);
-    }
-    /**
-     * Initialize the event handler
-     *
-     * @returns {void}
-     * @private
-     */
-    protected preRender(): void {
-        this.changeHandler = (e: MouseEvent): void => {
-            this.triggerChange(e);
-        };
-        this.checkView();
-        super.preRender(this.value);
-    }
-    /**
-     * @returns {void}
-     * @deprecated
-     */
-    public createContent(): void {
-        this.previousDate = this.value;
-        this.previousDateTime = this.value;
-        super.createContent();
-    }
-    protected minMaxDate(localDate: Date): Date {
-        return super.minMaxDate(localDate);
-    }
-    protected renderMonths(e?: Event, value?: Date, isCustomDate?: boolean): void {
-        super.renderMonths(e, this.value, isCustomDate);
-    }
-    protected renderDays(currentDate: Date, value?: Date, isMultiSelect?: boolean, values?:
-    Date[], isCustomDate?: boolean, e?: Event): HTMLElement[] {
-        const tempDays: HTMLElement[] = super.renderDays(currentDate, this.value, this.isMultiSelection, this.values, isCustomDate, e);
-        if (this.isMultiSelection) {
-            super.validateValues(this.isMultiSelection, this.values);
-        }
-        return tempDays;
-    }
-    protected renderYears(e?: Event): void {
-        if (this.calendarMode === 'Gregorian') {
-            super.renderYears(e, this.value);
-        } else {
-            this.islamicModule.islamicRenderYears(e, this.value);
-        }
-
-    }
-    protected renderDecades(e?: Event): void {
-        if (this.calendarMode === 'Gregorian') {
-            super.renderDecades(e, this.value);
-        } else {
-            this.islamicModule.islamicRenderDecade(e, this.value);
-        }
-    }
-    protected renderTemplate(elements: HTMLElement[], count: number, classNm: string, e?: Event): void {
-        if (this.calendarMode === 'Gregorian') {
-            super.renderTemplate(elements, count, classNm, e, this.value);
-        } else {
-            this.islamicModule.islamicRenderTemplate(elements, count, classNm, e, this.value);
-        }
-        this.changedArgs = { value: this.value, values: this.values };
-        e && e.type === 'click' && (e.currentTarget as HTMLElement).classList.contains(OTHERMONTH) ? this.changeHandler(e) : this.changeHandler();
-    }
-    protected clickHandler(e: MouseEvent): void {
-        const eve: Element = <HTMLElement>e.currentTarget;
-        this.isPopupClicked = true;
-        if (eve.classList.contains(OTHERMONTH)) {
-            if (this.isMultiSelection) {
-                const copyValues: Date[] = this.copyValues(this.values);
-                if (copyValues.toString().indexOf(this.getIdValue(e, null).toString()) === -1) {
-                    copyValues.push(this.getIdValue(e, null));
-                    this.setProperties({ values: copyValues }, true);
-                    this.setProperties({ value: this.values[this.values.length - 1] }, true);
-                }
-                else {
-                    this.previousDates = true;
-                }
-            } else {
-                this.setProperties({ value: this.getIdValue(e, null) }, true);
-            }
-        }
-        const storeView: string = this.currentView();
-        super.clickHandler(e, this.value);
-        if (this.isMultiSelection && this.currentDate !== this.value &&
-            !isNullOrUndefined(this.tableBodyElement.querySelectorAll('.' + FOCUSEDDATE)[0]) && storeView === 'Year') {
-            this.tableBodyElement.querySelectorAll('.' + FOCUSEDDATE)[0].classList.remove(FOCUSEDDATE);
-        }
-    }
-
-    protected switchView(view: number, e?: Event, isMultiSelection?: boolean, isCustomDate?: boolean): void {
-        super.switchView(view, e, this.isMultiSelection, isCustomDate);
-    }
-    /**
-     * To get component name
-     *
-     * @returns {string} Return the component name.
-     * @private
-     */
-    protected getModuleName(): string {
-        super.getModuleName();
-        return 'calendar';
-    }
-    /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
-    /**
-     * Gets the properties to be maintained upon browser refresh.
-     *
-     * @returns {string}
-     */
-    public getPersistData(): string {
-        super.getPersistData();
-        const keyEntity: string[] = ['value', 'values'];
-        return this.addOnPersist(keyEntity);
-    }
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
-    /**
-     * Called internally if any of the property value changed.
-     *
-     * @param {CalendarModel} newProp - Returns the dynamic property value of the component.
-     * @param {CalendarModel} oldProp - Returns the previous property value of the component.
-     * @returns {void}
-     * @private
-     */
-    public onPropertyChanged(newProp: CalendarModel, oldProp: CalendarModel): void {
-        this.effect = '';
-        this.rangeValidation(this.min, this.max);
-        for (const prop of Object.keys(newProp)) {
-            switch (prop) {
-            case 'value':
-                if (this.isDateSelected) {
-                    if (typeof newProp.value === 'string') {
-                        this.setProperties({ value: new Date(this.checkValue(newProp.value)) }, true);
-                    } else {
-                        newProp.value = new Date(this.checkValue(newProp.value));
-                    }
-                    if (isNaN(+this.value)) {
-                        this.setProperties({ value: oldProp.value }, true);
-                    }
-                    this.update();
-                }
-                break;
-            case 'values':
-                if (this.isDateSelected) {
-                    if (typeof newProp.values === 'string' || typeof newProp.values === 'number') {
-                        this.setProperties({ values: null }, true);
-                    } else {
-                        const copyValues: Date[] = this.copyValues(this.values);
-                        for (let index: number = 0; index < copyValues.length; index++) {
-                            const tempDate: Date = copyValues[index as number];
-                            if (this.checkDateValue(tempDate) && !super.checkPresentDate(tempDate, copyValues)) {
-                                copyValues.push(tempDate);
-                            }
-                        }
-                        this.setProperties({ values: copyValues }, true);
-                        if (this.values.length > 0) {
-                            this.setProperties({ value: newProp.values[newProp.values.length - 1] }, true);
-                        }
-                    }
-                    this.validateValues(this.isMultiSelection, this.values);
-                    this.update();
-                }
-                break;
-            case 'isMultiSelection':
-                if (this.isDateSelected) {
-                    this.setProperties({ isMultiSelection: newProp.isMultiSelection }, true);
-                    this.update();
-                }
-                break;
-            case 'enabled':
-                this.setEnable(this.enabled);
-                break;
-            case 'cssClass':
-                if (this.getModuleName() === 'calendar') {
-                    this.setClass(newProp.cssClass, oldProp.cssClass);
-                }
-                break;
-            default:
-                super.onPropertyChanged(newProp, oldProp, this.isMultiSelection, this.values);
-            }
-        }
-        this.preventChange = this.isAngular && this.preventChange ? !this.preventChange : this.preventChange;
-    }
-
-    /**
-     * Destroys the widget.
-     *
-     * @returns {void}
-     */
-    public destroy(): void {
-        super.destroy();
-        if (this.getModuleName() === 'calendar') {
-            this.changedArgs = null;
-            const form: Element = closest(this.element, 'form');
-            if (form) {
-                EventHandler.remove(form, 'reset', this.formResetHandler.bind(this));
-            }
-        }
-    }
-    /**
-     * This method is used to navigate to the month/year/decade view of the Calendar.
-     *
-     * @param {string} view - Specifies the view of the Calendar.
-     * @param {Date} date - Specifies the focused date in a view.
-     * @param {boolean} isCustomDate - Specifies whether the calendar is rendered with custom today date or not.
-     * @returns {void}
-     * @deprecated
-     */
-    public navigateTo(view: CalendarView, date: Date, isCustomDate?: boolean): void {
-        this.minMaxUpdate();
-        super.navigateTo(view, date, isCustomDate);
-    }
-    /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
-    /**
-     * Gets the current view of the Calendar.
-     *
-     * @returns {string}
-     * @deprecated
-     */
-    public currentView(): string {
-        return super.currentView();
-    }
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
-    /**
-     * This method is used to add the single or multiple dates to the values property of the Calendar.
-     *
-     * @param {Date | Date[]} dates - Specifies the date or dates to be added to the values property of the Calendar.
-     * @returns {void}
-     * @deprecated
-     */
-    public addDate(dates: Date | Date[]): void {
-        if (typeof dates !== 'string' && typeof dates !== 'number') {
-            let copyValues: Date[] = this.copyValues(this.values);
-            if (typeof dates === 'object' && (<Date[]>(dates)).length > 0) {
-                const tempDates: Date[] = <Date[]>dates;
-                for (let i: number = 0; i < tempDates.length; i++) {
-                    if (this.checkDateValue(tempDates[i as number]) && !super.checkPresentDate(tempDates[i as number], copyValues)) {
-                        if (!isNullOrUndefined(copyValues) && copyValues.length > 0) {
-                            copyValues.push(tempDates[i as number]);
-                        } else {
-                            copyValues = [new Date(+tempDates[i as number])];
-                        }
-                    }
-                }
-            } else {
-                if (this.checkDateValue(<Date>dates) && !super.checkPresentDate(<Date>dates, copyValues)) {
-                    if (!isNullOrUndefined(copyValues) && copyValues.length > 0) {
-                        copyValues.push(<Date>(dates));
-                    } else {
-                        copyValues = [new Date(+dates)];
-                    }
-                }
-            }
-            this.setProperties({ values: copyValues }, true);
-            if (this.isMultiSelection) {
-                this.setProperties({ value: this.values[this.values.length - 1] }, true);
-            }
-            this.validateValues(this.isMultiSelection, copyValues);
-            this.update();
-            this.changedArgs = { value: this.value, values: this.values };
-            this.changeHandler();
-        }
-    }
-    /**
-     * This method is used to remove the single or multiple dates from the values property of the Calendar.
-     *
-     * @param {Date | Date[]} dates - Specifies the date or dates which need to be removed from the values property of the Calendar.
-     * @returns {void}
-     * @deprecated
-     */
-    public removeDate(dates: Date | Date[]): void {
-        if (typeof dates !== 'string' && typeof dates !== 'number' && !isNullOrUndefined(this.values) && this.values.length > 0) {
-            const copyValues: Date[] = this.copyValues(this.values);
-            if (typeof dates === 'object' && ((<Date[]>(dates)).length > 0)) {
-                const tempDates: Date[] = <Date[]>dates;
-                for (let index: number = 0; index < tempDates.length; index++) {
-                    for (let i: number = 0; i < copyValues.length; i++) {
-                        if (+copyValues[i as number] === +tempDates[index as number]) {
-                            copyValues.splice(i, 1);
-                        }
-                    }
-                }
-            } else {
-                for (let i: number = 0; i < copyValues.length; i++) {
-                    if (+copyValues[i as number] === +dates) {
-                        copyValues.splice(i, 1);
-                    }
-                }
-            }
-            this.setProperties({ values: copyValues }, false);
-            this.update();
-            if (this.isMultiSelection) {
-                this.setProperties({ value: this.values[this.values.length - 1] }, true);
-            }
-            this.changedArgs = { value: this.value, values: this.values };
-            this.changeHandler();
-        }
-    }
-
-    /**
-     * To set custom today date in calendar
-     *
-     * @param {Date} date - Specifies date value to be set.
-     * @private
-     * @returns {void}
-     */
-    public setTodayDate(date: Date): void {
-        const todayDate: Date = new Date(+date);
-        this.setProperties({ value: todayDate }, true);
-        super.todayButtonClick(null, todayDate, true);
-    }
-
-    protected update(): void {
-        this.validateDate();
-        this.minMaxUpdate();
-        super.setValueUpdate();
-    }
-    protected selectDate(e: MouseEvent | KeyboardEventArgs, date: Date, element: Element): void {
-        super.selectDate(e, date, element, this.isMultiSelection, this.values);
-        if (this.isMultiSelection && !isNullOrUndefined(this.values) && this.values.length > 0) {
-            this.setProperties({ value: this.values[this.values.length - 1] }, true);
-        }
-        this.changedArgs = { value: this.value, values: this.values };
-        this.changeHandler(e);
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    protected changeEvent(e: Event): void {
-        if ((this.value && this.value.valueOf()) !== (this.previousDate && +this.previousDate.valueOf())
-        || this.isMultiSelection) {
-            if (this.isAngular && this.preventChange) {
-                this.preventChange = false;
-            } else {
-                this.trigger('change', this.changedArgs);
-            }
-            this.previousDate = new Date(+this.value);
-        }
-    }
-
-    protected triggerChange(e: MouseEvent | KeyboardEvent): void {
-        if (!isNullOrUndefined(this.todayButtonEvent) && this.isTodayClicked) {
-            e = this.todayButtonEvent;
-            this.isTodayClicked = false;
-        }
-        this.changedArgs.event = e || null;
-        this.changedArgs.isInteracted = !isNullOrUndefined(e);
-        if (!isNullOrUndefined(this.value)) {
-            this.setProperties({ value: this.value }, true);
-        }
-        // eslint-disable-next-line
-        if (!this.isMultiSelection && +this.value !== Number.NaN && (!isNullOrUndefined(this.value) &&
-         !isNullOrUndefined(this.previousDate) || this.previousDate === null
-            && !isNaN(+this.value))) {
-            this.changeEvent(e);
-        } else if (!isNullOrUndefined(this.values) && this.previousValues !== this.values.length) {
-            this.changeEvent(e);
-            this.previousValues = this.values.length;
-        }
-
-    }
-
-}
-
-export interface NavigatedEventArgs extends BaseEventArgs {
-    /** Defines the current view of the Calendar. */
-    view?: string
-    /** Defines the focused date in a view. */
-    date?: Date
-    /**
-     * Specifies the original event arguments.
-     */
-    event?: KeyboardEvent | MouseEvent | Event
-
-}
-
-export interface RenderDayCellEventArgs extends BaseEventArgs {
-    /** Specifies whether to disable the current date or not. */
-    isDisabled?: boolean
-    /** Specifies the day cell element. */
-    element?: HTMLElement
-    /** Defines the current date of the Calendar. */
-    date?: Date
-    /** Defines whether the current date is out of range (less than min or greater than max) or not. */
-    isOutOfRange?: boolean
-}
-export interface ChangedEventArgs extends BaseEventArgs {
-    /** Defines the selected date of the Calendar.
-     *
-     * @isGenericType true
-     */
-    value?: Date
-
-    /** Defines the multiple selected date of the Calendar. */
-    values?: Date[]
-
-    /**
-     * Specifies the original event arguments.
-     */
-    event?: KeyboardEvent | MouseEvent | Event
-
-    /** Defines the element. */
-    element?: HTMLElement | HTMLInputElement
-
-    /**
-     * If the event is triggered by interaction, it returns true. Otherwise, it returns false.
-     */
-    isInteracted?: boolean
-}
-
-export interface IslamicObject {
-    year: number
-    date: number
-    month: number
-}
-
-/**
- * Defines the argument for the focus event.
- */
-export interface FocusEventArgs {
-    model?: Object
-}
-
-/**
- * Defines the argument for the blur event.
- */
-export interface BlurEventArgs {
-    model?: Object
-}
-
-export interface ClearedEventArgs {
-    /**
-     * Specifies the original event arguments.
-     */
-    event?: MouseEvent | Event
-
-}