Usage
A calendar allows users to pick a single date or a range of dates from a visual calendar. This component must be used to consistently allow date selection in other contexts. It does not provide the text input functionality of an input type date or a custom text date-picker.
Best practices
If the calendar is triggered by another component, close the calendar upon selection, unless a range is allowed.
Do not use a calendar for entering a birth date or if the date goes ±10 years to the future or past. Use an input component instead.
Single-month
Use preferably for single-date selections or when the range is not likely to go across several months.
Multi-month
Use when the expected date ranges might go across multiple months. If you only need a single date selection, save space and drive purpose by using the single-month calendar instead.
Days
Days in the calendar can be styled to reflect their state and purpose. Use days’ states as intended.
Use selected to mark the selected date in the calendar.
Use today to mark the current date on the calendar.
Use highlight to mark all the selected dates in a range or to highlight the week in the agenda.
Use blocked to mark dates that are not available. Days are therefore not selectable.
Use muted to mark days that do not belong to the current month but are still selectable.
Examples
Live Preview
Props
Fetching props...
Events
Fetching events...