| Name | Type | Default | Description |
|---|
| AnimationSettings | object | N/A | Enhances the animation behavior by applying new settings when enabled.
Properties:
startSpeed – Specifies the initial speed at which the animation begins, allowing you to control how quickly the animation starts.
easeThreshold – Defines the point during the animation where the "ease effect" starts, meaning the animation begins to slow down for a smoother transition.
step – Sets the interval for each frame or update of the animation, effectively controlling how smoothly or incrementally the animation moves.
stepEaseSize – A coefficient used to calculate the updated step size once the animation passes the easeThreshold, increasing the ease-in/ease-out effect as the animation decelerates.
resetThreshold – Determines the point at which the animation will automatically reset and start from the beginning, allowing for looping or repeated motion.
|
| CalendarMode | CalendarMode | CalendarMode.Default | Specifies the configuration and behavior of the date selection controls displayed within the header section of the Calendar component, such as navigation buttons, month and year dropdowns, or other tools that allow users to change the visible date range. |
| DayNameFormat | DayFormat | DayFormat.FirstTwoLetters | Specifies the display format for the names of the days of the week that appear as headers above the calendar grid. This setting controls whether the day names are shown in full (e.g., "Monday"), as abbreviations (e.g., "Mon"), or as single letters (e.g., "M"). |
| DateFormatFunction | object | N/A | A callback function that allows you to customize the display format of month names when the calendarMode property is set to 'default'. Use this callback to define how month names should appear (e.g., full name, abbreviation, localization) in the calendar interface. |
| Disabled | bool | false | Controls whether the Calendar feature is active or inactive. When enabled, the Calendar is accessible to users; when disabled, the Calendar is inactive. |
| DisableAutoNavigation | bool | false | Prevents the calendar from automatically navigating to a different month when the user clicks on a date cell that belongs to a month other than the one currently displayed. This ensures that selecting dates outside the visible month will not change the current view. |
| DisableMouseWheel | bool | false | Configures whether the mouse wheel can be used to navigate or change dates in the Calendar component. When enabled, scrolling the mouse wheel will move between calendar views or dates; when disabled, the mouse wheel will have no effect on the calendar. |
| DisplayMode | CalendarDisplayMode | CalendarDisplayMode.Month | Specifies which date is initially displayed in the calendar when calendarMode is set to 'default'. This property controls the starting visible month or day in the calendar interface, allowing you to set the user's initial view to a specific date. |
| DisplayModeView | CalendarDisplayModeView | CalendarDisplayModeView.Table | Specifies the layout style displayed for the month or year view when calendarMode is set to "Default." This setting controls how dates are visually organized and presented to the user, such as showing days within a month grid or listing months within a year, depending on the selected calendar mode. |
| DropDownHeight | object | 200 | Specifies the vertical height, in pixels, of the month selection dropdown within the Calendar component. This setting controls how much space the dropdown occupies when users select a month. Adjusting this value can improve usability and visual consistency with other UI elements. |
| DropDownWidth | object | | Specifies the width of the month selection dropdown within the Calendar component. This property controls how wide the dropdown appears, allowing you to adjust its size for better alignment or readability within the Calendar interface. |
| FirstDayOfWeek | int | 0 | Specifies which day is considered the start of the week, using a numeric value where 0 represents Sunday, 1 represents Monday, up to 6 for Saturday. For example, setting the value to 1 makes Monday the first day of the week. |
| FooterTemplate | object | N/A | Defines a custom footer template for the component. You can provide either the ID of an existing '' element in the DOM, or pass a direct reference to an 'HTMLTemplateElement'. The specified template will be used to render the footer section of the component. |
| HeaderTemplate | object | N/A | Defines a custom header template for the component. You can provide either the string ID of an existing HTMLTemplateElement in the DOM or a direct reference to an HTMLTemplateElement. The specified template will be used to render the header section. |
| HideDayNames | bool | false | Conceals the display of weekday names in the user interface, ensuring that the days of the week (e.g., Monday, Tuesday, etc.) are not visible to users. |
| HideOtherMonthDays | bool | false | Prevents dates that belong to adjacent months from being displayed, ensuring that only the days within the current month are visible in the calendar view. |
| HideTooltipArrow | bool | false | Determines whether the tooltip’s arrow indicator is visible. When enabled, the arrow will be hidden and only the tooltip’s content will be displayed. |
| ImportantDates | IEnumerable<object> | N/A | Defines the specific dates that will be visually highlighted or marked as important within the interface. These dates can be used to indicate events, deadlines, holidays, or other noteworthy occasions that should stand out to users when viewing the calendar or date selector component. |
| ImportantDatesTemplate | object | N/A | Defines a template for displaying important dates. This property accepts either the ID of an HTML '' element present in the DOM, or a direct reference to that template element. The specified template will be used to render each important date in the component. |
| UnlockKey | string | "" | Sets or retrieves the unlockKey, a unique identifier or code used to grant access to the product's locked features or content. |
| Locale | string | "en" | Specifies the language used for displaying all calendar elements, such as month names, day labels, and interface text, ensuring the calendar is localized for the selected language. |
| Max | object | new Date(2100, 1, 1) | Specifies the latest selectable date for the Calendar component. Accepts JavaScript Date objects or valid date string formats (e.g., 'YYYY-MM-DD', ISO 8601). Dates beyond this value will be disabled and cannot be selected by the user. |
| Messages | object | N/A | Sets or retrieves an object containing the text strings displayed by the widget, allowing these strings to be customized for different languages and regions. This property is intended for localization and works together with the locale property to support multiple languages in the widget’s user interface. |
| Min | object | new Date(1900, 1, 1) | Specifies the earliest selectable date for the Calendar component. Accepts either JavaScript Date objects or strings in valid date formats (e.g., 'YYYY-MM-DD'). Dates earlier than this value will be disabled and cannot be selected. |
| Months | int | 1 | Specifies how many months are displayed simultaneously within the calendar interface. You can select any value between 1 and 12, with 12 being the maximum number of months shown at once. If this property is not set, the calendar will display only a single month by default. |
| MonthNameFormat | MonthFormat | MonthFormat.Long | Specifies how month names are displayed in the header when DisplayMode is set to "Default" or when the Months property has a value greater than 1. This setting controls whether month names appear in their full, abbreviated, or custom format within the header section, improving readability and user interface customization. |
| Name | string | "" | Sets or retrieves the value of the element’s name attribute. This attribute identifies the element when submitting HTML forms, allowing its data to be included with the specified name as part of the form data sent to the server. |
| Readonly | bool | false | When the element is set to "readonly," users can see its content but cannot modify or edit its value. While the element remains focusable, all user input and changes are disabled, preventing any interaction that would alter its contents. |
| RestrictedDates | IEnumerable<object> | N/A | Defines a list of restricted dates that the user cannot select, hover over, or focus on within the date picker. These dates will be visually indicated as unavailable or disabled in the interface. Each restricted date can be provided as either a JavaScript Date object or a string in a recognized date format (such as 'YYYY-MM-DD'). Any date included in this list will be unselectable and visually styled to indicate its restricted status. |
| RightToLeft | bool | false | Specifies or retrieves a value that determines whether the element's content alignment supports right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. Enabling this property ensures that text and layout are properly adjusted for locales that require RTL formatting. |
| ScrollButtonsNavigationMode | ViewLayout | ViewLayout.Landscape | Specifies the orientation (horizontal or vertical) of the navigation buttons displayed in the header, and sets the direction in which the accompanying animation plays. |
| ScrollButtonsPosition | LayoutPosition | LayoutPosition.Both | Specifies the alignment and placement of navigation buttons within the header section, controlling whether they appear on the left, center, or right side of the header. |
| SelectedDates | IEnumerable<object> | N/A | Specifies the dates that should appear as selected within the component. These selected dates are visually distinguished from unselected dates using a different style or highlight. You can provide the selected dates either as JavaScript Date objects or as strings formatted in any valid date representation (e.g., 'YYYY-MM-DD'). |
| SelectionMode | CalendarSelectionMode | CalendarSelectionMode.Default | Specifies how users can select dates in the component, such as choosing a single date, a range of dates, or multiple individual dates. |
| SpinButtonsDelay | int | 80 | Specifies the amount of time (in milliseconds) that must pass between consecutive clicks of the calendar's date navigation buttons in the header. This delay helps prevent users from triggering rapid, repeated navigation actions and can be used to control the responsiveness of date changes in the calendar interface. |
| SpinButtonsInitialDelay | int | 0 | Specifies the initial delay, in milliseconds, before the date navigation buttons in the Calendar header begin to respond when pressed. This delay applies to the first action after a button is engaged, allowing users control over how quickly navigation starts. |
| Theme | string | "" | Specifies the visual theme applied to the element. The selected theme controls the element's overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel throughout the user interface. |
| TitleTemplate | object | N/A | Specifies the template to be used for the calendar's title section. This property accepts either the ID of an HTMLTemplate element present in the DOM or a direct reference to an HTMLTemplate element. The provided template will be rendered in place of the default title section, allowing for custom formatting and content. |
| Tooltip | bool | false | Controls whether tooltips are shown for important dates. When enabled, hovering over an important date will display a tooltip with additional information. When disabled, no tooltip will appear on hover. |
| TooltipArrow | bool | true | Controls the visibility of the tooltip arrow for important dates. When enabled (default), an arrow is displayed on the tooltip to indicate its reference point. Disabling this option will hide the arrow, resulting in a plain tooltip without a directional indicator. |
| TooltipDelay | int | 100 | Specifies the amount of time (in milliseconds) to wait before displaying the tooltip after a user hovers over or focuses on the target element. This controls how quickly the tooltip appears, allowing you to adjust the responsiveness of the tooltip based on user interaction. |
| TooltipOffset | int[][] | new Collection<int[][]>() | Specifies a custom offset for the tooltip's position. Accepts an array containing two numbers: the first value represents the horizontal (left) offset, and the second value represents the vertical (top) offset. These values determine how many pixels the tooltip is shifted from its default position along the X (left) and Y (top) axes, respectively. |
| TooltipPosition | TooltipPosition | TooltipPosition.Top | Specifies the placement of the tooltip relative to its target element (e.g., top, right, bottom, or left). |
| TooltipTemplate | object | N/A | Defines the template used for the tooltip's content. You can provide either the ID of an existing '' element in the DOM or a direct reference to an HTMLTemplateElement. The tooltip will render its content based on the markup and structure defined within the specified template. |
| Unfocusable | bool | false | When set to true, this property prevents the element from receiving focus, meaning it cannot be selected or activated using keyboard navigation or programmatic focus methods. |
| View | ViewLayout | ViewLayout.Portrait | Specifies the display orientation of the Calendar component (horizontal or vertical), affecting how dates and months are arranged within the calendar view. |
| ViewSections | string[] | new string[]{} | Specifies which sections of the Calendar component are displayed to the user. Available sections include: 'title', 'header', and 'footer'. You may enable any combination of these sections simultaneously by listing them together. If this setting is not specified, only the 'header' section will be shown by default. |
| WeekNumbers | bool | false | Controls the display of week numbers within the calendar. When enabled, a week number is shown at the start of each week row, allowing users to easily reference and distinguish weeks. If disabled, week numbers are hidden, and only the standard calendar dates are displayed. |
| Weeks | int | 6 | Specifies how many weeks are displayed in the calendar view. This property accepts integer values from 1 to 6, where 1 displays a single week and 6 displays six weeks, representing a full month view. |
| YearFormat | YearFormat | YearFormat.Numeric | Specifies the format in which the year is displayed in the header when the DisplayMode property is set to "Default" or when the Months property has a value greater than 1. This setting controls how the year appears (e.g., "2024", "24") in the header section of the component. |
| Name | Type | Description | Event Detail |
|---|
| OnChange | EventCallback<Event> | This event is triggered whenever a user selects or deselects a date. It fires each time the selection state of a date changes, allowing you to respond to both new date selections and the removal of existing selections. | IEnumerable<string> value- An array of all currently selected dates. |
| Changed | event CalendarChangedEventHandler | This event is triggered whenever a user selects or deselects a date. It fires each time the selection state of a date changes, allowing you to respond to both new date selections and the removal of existing selections. | CalendarChangedEventArgs |
| OnDisplayModeChanging | EventCallback<Event> | This event is fired immediately before the displayMode changes, providing an opportunity to intercept the transition. Within the event handler, you can call event.preventDefault() to cancel the displayMode change and prevent the update from occurring. This allows developers to implement custom logic or validation before the displayMode actually switches. | dynamic oldDisplayMode- The previous display mode., dynamic newDisplayMode- The new display mode. |
| DisplayModeChanging | event CalendarDisplayModeChangingEventHandler | This event is fired immediately before the displayMode changes, providing an opportunity to intercept the transition. Within the event handler, you can call event.preventDefault() to cancel the displayMode change and prevent the update from occurring. This allows developers to implement custom logic or validation before the displayMode actually switches. | CalendarDisplayModeChangingEventArgs |
| OnDisplayModeChange | EventCallback<Event> | This event is triggered whenever the display mode of the application is changed (for example, switching between fullscreen, windowed, or split-screen modes). It allows developers to detect and respond to changes in how content is presented to the user. | N/A |
| DisplayModeChanged | event CalendarDisplayModeChangedEventHandler | This event is triggered whenever the display mode of the application is changed (for example, switching between fullscreen, windowed, or split-screen modes). It allows developers to detect and respond to changes in how content is presented to the user. | CalendarDisplayModeChangedEventArgs |
| OnNavigationChanging | EventCallback<Event> | This event is triggered whenever the view is about to change, such as during navigation to a different page or section. Developers can intercept this event to perform custom logic before the navigation completes. If necessary, the navigation can be cancelled by calling the preventDefault method within the event handler, stopping the view from changing. | DateTime value- The view's date., string type- The view type - 'month', 'decade' or 'year'. |
| NavigationChanging | event CalendarNavigationChangingEventHandler | This event is triggered whenever the view is about to change, such as during navigation to a different page or section. Developers can intercept this event to perform custom logic before the navigation completes. If necessary, the navigation can be cancelled by calling the preventDefault method within the event handler, stopping the view from changing. | CalendarNavigationChangingEventArgs |
| OnNavigationChange | EventCallback<Event> | This event is triggered whenever the user navigates to a different view or the current view is updated within the application. It provides an opportunity to execute custom logic in response to view transitions, such as loading new data, updating UI components, or tracking navigation events. | DateTime value- The view's date., string type- The view type - 'month', 'decade' or 'year'. |
| NavigationChanged | event CalendarNavigationChangedEventHandler | This event is triggered whenever the user navigates to a different view or the current view is updated within the application. It provides an opportunity to execute custom logic in response to view transitions, such as loading new data, updating UI components, or tracking navigation events. | CalendarNavigationChangedEventArgs |
| OnOpen | EventCallback<Event> | This event is triggered each time the tooltip associated with an important date becomes visible to the user, such as when they hover over or click on the date. Use this event to execute custom logic or display additional content whenever the important date's tooltip is opened. | dynamic target- The event target - tooltip., dynamic value- The important date of the hovered cell. |
| Opened | event CalendarOpenedEventHandler | This event is triggered each time the tooltip associated with an important date becomes visible to the user, such as when they hover over or click on the date. Use this event to execute custom logic or display additional content whenever the important date's tooltip is opened. | CalendarOpenedEventArgs |
| OnClose | EventCallback<Event> | This event is triggered when a user closes the tooltip associated with an important date. It indicates that the tooltip has been dismissed, either by user interaction (such as clicking outside the tooltip or pressing a close button) or through programmatic means. Use this event to perform actions or update the UI in response to the tooltip being closed. | dynamic target- The event target - tooltip., dynamic value- The important date of the hovered cell. |
| Closed | event CalendarClosedEventHandler | This event is triggered when a user closes the tooltip associated with an important date. It indicates that the tooltip has been dismissed, either by user interaction (such as clicking outside the tooltip or pressing a close button) or through programmatic means. Use this event to perform actions or update the UI in response to the tooltip being closed. | CalendarClosedEventArgs |