The Date Calendar component lets the user 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"
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 week to display with
This value is usually set to
6 for Gregorian calendars, because months 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
The displayed days are customizable with the
Day component slot.
You can take advantage of the PickersDay component.
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.