Ant Design Blazor
Calendar
Container for displaying data in calendar form.
When To Use
When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.
Examples
A basic calendar component with Year/Month switch.
This component can be rendered by using dateCellRender and monthCellRender with the data you need.
Nested inside a container element for rendering in limited space.
A basic calendar component with Year/Month switch.
Customize Calendar header content.
Calendar API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Value | ParameterSelected value for calendar | DateTime | DateTime.Now |
| DefaultValue | ParameterDefault value for selected date. When set, will set AntDesign.Calendar.Value |
DateTime | -- |
| ValidRange | ParameterValidate range of dates or selection | DateTime[] | -- |
| Mode | ParameterDisplay mode. See CalendarMode for valid options |
CalendarMode | CalendarMode.Month |
| FullScreen | ParameterWhether the calendar should take up all available space or not | Boolean | true |
| OnSelect | ParameterCallback executed when a date is selectedUse OnChange instead Obsolete Will be removed in a future version. |
EventCallback<DateTime> | -- |
| OnChange | ParameterCallback executed when a date is selected | EventCallback<DateTime> | -- |
| HeaderRender | ParameterFunction to render a custom header | Func<CalendarHeaderRenderArgs, RenderFragment> | -- |
| DateCellRender | ParameterCustomize the display of the date cell, the returned content will be appended to the cell | Func<DateTime, RenderFragment> | -- |
| DateFullCellRender | ParameterCustomize the display of the date cell, the returned content will override the cell | Func<DateTime, RenderFragment> | -- |
| MonthCellRender | ParameterCustomize the display of the month cell, the returned content will be appended to the cell | Func<DateTime, RenderFragment> | -- |
| MonthFullCellRender | ParameterCustomize the display of the month cell, the returned content will override the cell | Func<DateTime, RenderFragment> | -- |
| OnPanelChange | ParameterCallback executed when the type of calendar being viewed changes | Action<DateTime, String> | -- |
| DisabledDate | ParameterFunction to determine if a specific date is disabled | Func<DateTime, Boolean> | -- |
| Locale | ParameterLocale information for UI and date formatting | DatePickerLocale | -- |
| CultureInfo | ParameterCulture information used for formatting | CultureInfo | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| ChangePickerType(DatePickerType type, Int32 index) | void | |
| ChangePickerType(DatePickerType type) | void |