| ariaNavNextMonthLabel5.4.0+ | 'Next month' | string |
A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button. |
| ariaNavNextYearLabel5.4.0+ | 'Next year' | string |
A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button's functionality. |
| ariaNavNextYearsLabel6.0.0+ | 'Next 12 years' | string |
Sets the accessible label (aria-label) of the button that turns the years view to the next page of years. |
| ariaNavPrevMonthLabel5.4.0+ | 'Previous month' | string |
A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button. |
| ariaNavPrevYearLabel5.4.0+ | 'Previous year' | string |
A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button's function. |
| ariaNavPrevYearsLabel6.0.0+ | 'Previous 12 years' | string |
Sets the accessible label (aria-label) of the button that turns the years view to the previous page of years. |
| ariaNothingToPickLabel6.0.0+ | 'Nothing on this page can be picked' | string |
Sets the description (aria-describedby) of a grid in which nothing can be picked, such as a page wholly outside minDate / maxDate or one that disabledDates covers, also announced when the calendar turns to such a page. An empty string leaves the grid without a description. |
| ariaSelectedDateAnnouncement6.0.0+ | 'Selected date: {date}' | string |
Sets the message announced when a click or Enter / Space picks a date, and with range when both ends fall on the same day. {date} is replaced by the full name of what was picked, such as Wednesday, August 12, 2026 or August 10 – 16, 2026. An empty string announces nothing. |
| ariaSelectedRangeAnnouncement6.0.0+ | 'Selected range: {start} to {end}' | string |
Sets the message announced with range when a pick leaves both ends set. {start} and {end} are replaced by the full names of its ends. An empty string announces nothing. |
| ariaWeekNumberLabel6.0.0+ | - | (weekNumber: number) => string, undefined |
Names each week number for screen readers: a function that takes the week number and returns its name. Without it the name is the locale's word for week and the number, such as Week 36. Keep the number in the name, so a voice-control user can say what they see. |
| calendarDate | - | |
Default date of the component |
| calendars | 1 | number |
The number of calendars that render on desktop devices. |
| dayFormat4.6.0+ | 'numeric' | func, string |
Set the format of days. |
| disabledDates | - | DisabledDate, DisabledDate[] |
Specify the list of dates that cannot be selected. In week, month, quarter and year selection a period is disabled when every day of it is. |
| endDate | - | |
Initial selected to date (range). |
| firstDayOfWeek | 1 | number |
Sets the day of start week. - 0 - Sunday, - 1 - Monday, - 2 - Tuesday, - 3 - Wednesday, - 4 - Thursday, - 5 - Friday, - 6 - Saturday, |
| locale | 'default' | string |
Sets the default locale for components. If not set, it is inherited from the navigator.language. |
| maxDate | - | |
Max selectable date. The days after its day are disabled, and a time of day it carries leaves its own day selectable. In week selection its whole week stays selectable. |
| minDate | - | |
Min selectable date. The days before its day are disabled, and a time of day it carries leaves its own day selectable. In week selection its whole week stays selectable. |
| monthFormat5.18.0+ | 'short' | string |
Sets the format for month names. |
| range | - | boolean |
Allow range selection. |
| selectAdjacentDays4.9.0+ | - | boolean |
Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the showAdjacentDays option is set to true. A picked day of an adjacent month keeps the month on screen and shows as selected with an outline on a subtle background instead of the solid fill. |
| selectEndDate | - | boolean |
Toggle select mode between start and end date. |
| selectionType5.0.0+ | 'day' | SelectionTypes |
Specify the type of date selection as day, week, month, quarter, or year. |
| showAdjacentDays4.9.0+ | true | boolean |
Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month. |
| showWeekNumber5.0.0+ | - | boolean |
Set whether to display week numbers in the calendar. |
| startDate | - | |
Initial selected date. |
| weekdayFormat | 2 | func, number, string |
Set length or format of day name. |
| weekNumbersLabel5.0.0+ | - | string |
Label displayed over week numbers in the calendar. Without it the column is named for screen readers with the locale's word for week. |
| yearFormat5.18.0+ | 'numeric' | string |
Sets how the year cells of the years view write the year: 'numeric' (2026) or '2-digit' (26). The navigation always writes the full year. |