| Name | Type | Default | Description |
|---|
| AnimationSettings | object | N/A | Applies new animation settings when it is enabled.
Properties:
startSpeed - Determines the initial speed of the animation.
easeThreshold - Determines the point at which the animation starts to slow down - the "ease effect".
step - Determines the step ( scrolling interval ) at which the animation will run.
stepEaseSize - Coefficient that is used to calculated the new step once the threshold has been passed.
resetThreshold - Determines the threshold for animation reset. When it's reached the animation will start over.
|
| CalendarMode | CalendarMode | CalendarMode.Default | Determines the date controls inside the header of the Calendar. |
| DayNameFormat | DayFormat | DayFormat.FirstTwoLetters | Determines the format of the day names located above the days inside the calendar. |
| DateFormatFunction | object | N/A | A callback that can be used to customize the format of the month name when calendarMode is set to 'default'.
|
| Disabled | bool | false | Enables or disables the Calendar. |
| DisableAutoNavigation | bool | false | Disables auto navigation when the user clicks on a date that's not from the current month in view. |
| DisplayMode | CalendarDisplayMode | CalendarDisplayMode.Month | Determines the date view of the calendar when calendarMode is set to 'default' |
| DisplayModeView | CalendarDisplayModeView | CalendarDisplayModeView.Table | Determines the type of the month/year view when calendarMode is set to Default. |
| DropDownHeight | object | 200 | Determines the height of the month's drop down inside the Calendar. |
| DropDownWidth | object | | Determines the width of the month's drop down inside the Calendar. |
| FirstDayOfWeek | int | 0 | Determines the first day of the week. From 0(Sunday) to 6(Saturday) |
| FooterTemplate | object | N/A | Sets a custom footer template. Accepts the id of an HTMLTemplateElement or a reference ot it. |
| HeaderTemplate | object | N/A | Sets custom header template. Accepts the id of an HTMLTemplateElement or a reference ot it. |
| HideDayNames | bool | false | Hides the names of the weekdays. |
| HideOtherMonthDays | bool | false | Hides the dates from other months. |
| HideTooltipArrow | bool | false | Hides the arrow of the tooltip. |
| ImportantDates | IEnumerable<object> | N/A | Sets the dates that will be displayed as important. |
| ImportantDatesTemplate | object | N/A | Sets a template for the important dates. Accepts the id of an HTMLTemplate element inside the DOM of or a reference to it. |
| Locale | string | "en" | Determines the language of the Calendar. |
| Max | object | new Date(2100, 1, 1) | Determines the max date for the Calendar. Accepts date objects and valid date string formats. |
| Messages | object | N/A | Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. |
| Min | object | new Date(1900, 1, 1) | Determines the min date for the Calendar. Accepts date objects and valid date string formats. |
| Months | int | 1 | Determines the number of months to be displayed inside the calendar. The maximum amount of months that can be shown is 12. By default only 1 month is shown. |
| MonthNameFormat | MonthFormat | MonthFormat.Long | Determines the format of the month names in the header when DisplayMode is set to Default or when Months property is greater than 1.
|
| Name | string | "" | Sets or gets the name attribute for the element. Name is used when submiting HTML forms. |
| Readonly | bool | false | If the element is readonly, users cannot interact with it. |
| RestrictedDates | IEnumerable<object> | N/A | Sets restricted dates. Restricted dates are dates that cannot be selected/hovered/focused. They are visualy styled as restricted. The dates can be javascript date objects or strings representing a valid date. |
| RightToLeft | bool | false | Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. |
| ScrollButtonsNavigationMode | ViewLayout | ViewLayout.Landscape | Determines the direction of the navigation buttons located in the header and the animation. |
| ScrollButtonsPosition | LayoutPosition | LayoutPosition.Both | Determines the position of the navigation buttons located inside the header. |
| SelectedDates | IEnumerable<object> | N/A | Sets the dates that will be selected. Selected dates are styled differently than the rest. The dates can be Date objects or strings in a valid date format. |
| SelectionMode | CalendarSelectionMode | CalendarSelectionMode.Default | Determines the date selection mode. |
| SpinButtonsDelay | int | 80 | Sets the delay between clicks of the date navigation buttons located in the header of the Calendar. |
| SpinButtonsInitialDelay | int | 0 | Determines the initial delay before the action of the date navigation buttons located in the header of the Calendar. |
| Theme | string | "" | Determines the theme. Theme defines the look of the element |
| TitleTemplate | object | N/A | Sets a template for the title section of the Calendar. Accepts the id of an HTMLTemplate element inside the DOM of or a reference it. |
| Tooltip | bool | false | Enables/Disabled the tooltip for the important dates. If enabled when an important date is hovered a tooltip is displayed. |
| TooltipArrow | bool | true | Show/Hide the arrow of the the tooltip for the important dates. By default the arrow is visible. |
| TooltipDelay | int | 100 | Sets the delay of the tooltip before it appears. |
| TooltipOffset | int[][] | new Collection<int[][]>() | Set's a custom offset to the tooltip's position. Accepts an array of two numbers: the left coordinate and the top coordinate. |
| TooltipPosition | TooltipPosition | TooltipPosition.Top | Sets the position of the tooltip. |
| TooltipTemplate | object | N/A | Sets a template for the tooltip's content. Accepts the id of an HTMLTEmplate element inside the DOM or it's reference. |
| Unfocusable | bool | false | If is set to true, the element cannot be focused. |
| View | ViewLayout | ViewLayout.Portrait | Determines the orientation of the Calendar. |
| ViewSections | string[] | new string[]{} | Determines the visible sections of the Calendar. The view sections are : title, header, footer. Multiple sections can be applied at the same time. By default only the 'header' section is visible. |
| WeekNumbers | bool | false | Enables/Disabled week numbering. If enabled week numbers are displayed infront of each week inside the Calendar. |
| Weeks | int | 6 | Determines the number of visible weeks. The value of the property ranges from 1 to 6. Where 1 is one week and 6 is a full month ( 6 weeks ). |
| YearFormat | YearFormat | YearFormat.Numeric | Determines the year format in the header when DisplayMode is set to Default or when Months property is greater than 1.
|
| Name | Type | Arguments | Description |
|---|
| ClearSelection | void | N/A | Clears the selection. Removes all seleceted dates. |
| GetSelectedDatesAsync() | Task<IEnumerable<object>> | 'N/A' | Gets the "SelectedDates" property as Task<IEnumerable<object>>. |
| Navigate | bool | object step | Navigates forwards/backwards depending on the argument.Args: object step - The argument can be the following: <ul><li> number - representing the number of months to scroll. Can be negavtive. If negative it will scroll backwards.</li><li> Date - a date object representing the Date to navigate to.</li><li> string - a string representing a valid Date, e.g. "2020-10-1" </li></ul> |
| Navigate | bool | int step | Navigates forwards/backwards depending on the argument.Args: int step - The argument can be the following: <ul><li> number - representing the number of months to scroll. Can be negavtive. If negative it will scroll backwards.</li><li> Date - a date object representing the Date to navigate to.</li><li> string - a string representing a valid Date, e.g. "2020-10-1" </li></ul> |
| Refresh | void | 'N/A' | Refreshes the Blazor Component. Performs a layout of the HTML Elements and recalculates the measurements. |
| Render | void | 'N/A' | Re-renders the Blazor Component. This method will make a full re-render. |
| Select | void | object date | Selects or Unselects a date.Args: object date - The date to be selected or unselected. The date can be a Date object or a string in valid date format. |
| Select | void | string date | Selects or Unselects a date.Args: string date - The date to be selected or unselected. The date can be a Date object or a string in valid date format. |
| StateHasChanged | void | 'N/A' | Refreshes the state and Re-renders the Blazor Component, if necessary. |
| Today | DateTime | N/A | Selects today's date. |
| Name | Type | Description | Event Detail |
|---|
| OnChange | EventCallback<Event> | This event is triggered when a new date has been selected/unselected. | IEnumerable<string> value- An array of all currently selected dates. |
| Changed | event CalendarChangedEventHandler | This event is triggered when a new date has been selected/unselected. | CalendarChangedEventArgs |
| OnDisplayModeChanging | EventCallback<Event> | This event is triggered when the displayMode is about to change. This event allows to cancel the operation by calling event.preventDefault() in the event handler function. | dynamic oldDisplayMode- The previous display mode., dynamic newDisplayMode- The new display mode. |
| DisplayModeChanging | event CalendarDisplayModeChangingEventHandler | This event is triggered when the displayMode is about to change. This event allows to cancel the operation by calling event.preventDefault() in the event handler function. | CalendarDisplayModeChangingEventArgs |
| OnDisplayModeChange | EventCallback<Event> | This event is triggered when the display mode has changed. | N/A |
| DisplayModeChanged | event CalendarDisplayModeChangedEventHandler | This event is triggered when the display mode has changed. | CalendarDisplayModeChangedEventArgs |
| OnNavigationChanging | EventCallback<Event> | This event is triggered when the view is changing. This navigation can be cancelled by using the preventDefault method. | DateTime value- The view's date., string type- The view type - 'month', 'decade' or 'year'. |
| NavigationChanging | event CalendarNavigationChangingEventHandler | This event is triggered when the view is changing. This navigation can be cancelled by using the preventDefault method. | CalendarNavigationChangingEventArgs |
| OnNavigationChange | EventCallback<Event> | This event is triggered when the view is changed. | DateTime value- The view's date., string type- The view type - 'month', 'decade' or 'year'. |
| NavigationChanged | event CalendarNavigationChangedEventHandler | This event is triggered when the view is changed. | CalendarNavigationChangedEventArgs |
| OnOpen | EventCallback<Event> | This event is triggered when the tooltip for the important date is opened. | dynamic target- The event target - tooltip., dynamic value- The important date of the hovered cell. |
| Opened | event CalendarOpenedEventHandler | This event is triggered when the tooltip for the important date is opened. | CalendarOpenedEventArgs |
| OnClose | EventCallback<Event> | This event is triggered when the tooltip for the important date is closed. | dynamic target- The event target - tooltip., dynamic value- The important date of the hovered cell. |
| Closed | event CalendarClosedEventHandler | This event is triggered when the tooltip for the important date is closed. | CalendarClosedEventArgs |