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 { Islamic, IslamicDateArgs } from './index'; import {CalendarType,CalendarView,WeekRule,DayHeaderFormats,NavigatedEventArgs,RenderDayCellEventArgs,ChangedEventArgs} from "./calendar"; import {ComponentModel} from '@syncfusion/ej2-base'; /** * Interface for a class CalendarBase * @private */ export interface CalendarBaseModel extends ComponentModel{ /** * Gets or sets the minimum date that can be selected in the Calendar. * * @default new Date(1900, 00, 01) */ min?: Date; /** * Specifies the component to be disabled or not. * * @default true */ enabled?: boolean; /** * Specifies the root CSS class of the Calendar that allows to * customize the appearance by overriding the styles. * * @default null */ cssClass?: string; /** * Gets or sets the maximum date that can be selected in the Calendar. * * @default new Date(2099, 11, 31) */ 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 * > 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. */ firstDayOfWeek?: number; /** * Gets or sets the Calendar's Type like gregorian or islamic. * * @default Gregorian */ 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 * * * * * * * * * * *

* View	* Description
* Month	* Calendar view shows the days of the month.
* Year	* Calendar view shows the months of the year.
* Decade	* Calendar view shows the years of the decade.

* * > For more details about start refer to * [`calendarView`](../../calendar/calendar-views#view-restriction)documentation. */ 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 * * * * * * * * * * *

* view	* Description
* Month	* Calendar view shows up to the days of the month.
* Year	* Calendar view shows up to the months of the year.
* Decade	* Calendar view shows up to the years of the decade.

* * > For more details about depth refer to * [`calendarView`](../../calendar/calendar-views#view-restriction)documentation. */ depth?: CalendarView; /** * Determines whether the week number of the year is to be displayed in the calendar or not. * * @default false * > For more details about weekNumber refer to * [`Calendar with week number`](../../calendar/how-to/render-the-calendar-with-week-numbers)documentation. */ weekNumber?: boolean; /** * Specifies the rule for defining the first week of the year. * * @default FirstDay */ weekRule?: WeekRule; /**      * Specifies whether the today button is to be displayed or not. *      * @default true      */ 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 */ 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      */ enablePersistence?: boolean; /** * Customizes the key actions in Calendar. * For example, when using German keyboard, the key actions can be customized using these shortcuts. * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

* Key action	* Key
* controlUp	* ctrl+38
* controlDown	* ctrl+40
* 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
* moveDown	* downarrow
* moveUp	* uparrow
* moveLeft	* leftarrow
* moveRight	* rightarrow

* * {% codeBlock src='calendar/keyConfigs/index.md' %}{% endcodeBlock %} * * @default null */ 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 */ serverTimezoneOffset?: number; /** * Triggers when Calendar is created. * * @event created */ created?: EmitType