The Date Calendar component lets users select a date without any input or popper / modal.
The component can contain three views:
By default, only the
year views are enabled.
You can customize the enabled views using the
Views will appear in the order they're included in the
"year", "month" and "day"
"month" and "year"
defaultValue contains a valid date, this date will be used to choose which month to render in the
day view and which year to render in the
defaultValue contain no valid date, the component will try to find a month and year that satisfies the validation rules.
You can override this date using the
referenceDate, in the example below the calendar renders April 2022 even though no date is visually selected:
If you only need the
year view or the
month view, you can use the
To show all days of displayed weeks, including those outside of the current month, use
By default, only weeks of the current month are displayed, but you can provide a total number of weeks to display with
This value is usually set to
6 for Gregorian calendars, because month display can vary between 4 and 6 weeks.
To display week number, use the
You can customize the calendar week header by using the localization key
You can also customize what's rendered as a calendar week number, using a callback for the localization key
Sometimes it may be necessary to display additional info right in the calendar. The following demo shows how to add a badge on some day based on server side data:
You can find the documentation in the Validation page.