Date Calendar
The Date Calendar component lets the user select a date without any input or popper / modal.
Basic usage
The value of the component can be uncontrolled or controlled.
Uncontrolled calendar
Controlled calendar
disabled
readOnly
Views
The component can contain three views: day, month, and year.
By default, only the day and year views are enabled.
You can customize the enabled views using the views prop.
Views will appear in the order they're included in the views array.
"year", "month" and "day"
"day"
"month" and "year"
Month and Year Calendar
If you only need the year view or the month view, you can use the YearCalendar / MonthCalendar components:
YearCalendar
MonthCalendar
Day view customization
Show additional days
To show all days of displayed weeks, including those outside of the current month, use showDaysOutsideCurrentMonth.
By default, only weeks of the current month are displayed, but you can provide a total number of week to display with fixedWeekNumber prop.
This value is usually set to 6 for Gregorian calendars, because months display can vary between 4 and 6 weeks.
Display week number
To display week number, use the displayWeekNumber.
You can customize the calendar week header by using the localization key localeText.calendarWeekNumberHeaderText.
You can also customize what's rendered as a calendar week number, using a callback for the localization key localeText.calendarWeekNumberText.
Custom day rendering
The displayed days are customizable with the Day component slot.
You can take advantage of the PickersDay component.
Dynamic data
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:
Validation
You can find the documentation in the Validation page.
Localization
You can find the documentation about localization in the Date localization and Component localization.