A month grid for picking a single date or a range.
The month shown at first, when it isn't controlled. Defaults to the selected date's month, or today's. |
disabled | Matcher | Matcher[] | – | Days that can't be selected: |
disableOutsideDays | boolean | false | Whether days from the previous and next months can't be selected. |
fixedWeeks | boolean | true | Whether every month shows six weeks, so the calendar's height doesn't change between months. |
labels | Partial<CalendarLabels> | – | Replaces the built-in text for this instance. See |
locale | string | – | A BCP 47 locale, such as |
localeMonths | string[] | – | Full month names, starting from January. Defaults to English. |
localeMonthsShort | string[] | – | Short month names, starting from January, for the month picker and the selection summary. Defaults to English. |
localeWeekdays | string[] | – | Short weekday names for the column headings, starting from Sunday. Defaults to English. |
localeWeekdaysLong | string[] | – | Full weekday names for screen readers, starting from Sunday. Defaults to English. |
maxDate | Date | – | The latest date that can be selected. The calendar can't navigate past its month. |
minDate | Date | – | The earliest date that can be selected. The calendar can't navigate before its month. |
mode | "single"|"range" | single | Whether the user picks one date ( |
modifiers | Record<string, Matcher | Matcher[]> | – | Named groups of days, each matched the same ways as |
modifiersClassNames | Record<string, string> | – | Classes for the days in each group named in |
month | Date | – | The month shown (the first, with |
nextIcon | ReactNode | – | Replaces this icon. Accepts any node; |
numberOfMonths | number | 1 | How many months to show side by side. |
onMonthChange | ((month: Date) => void) | – | Called with the first day of the new month when the calendar pages to another month. |
onSelect | ((date: Date | DateRange) => void) | – | Called with the new date, or the new |
prevIcon | ReactNode | – | Replaces this icon. Accepts any node; |
selected | Date|DateRange|null | – | The selected date, or |
showFooter | boolean | true | Whether to show the footer with the Today button and the selection summary. |
showOutsideDays | boolean | true | Whether to show the days of the previous and next months that fill the first and last weeks. |
weekStartsOn | 0|1|2|3|4|5|6 | 0 | The first day of the week, from 0 for Sunday to 6 for Saturday. |
