Calendar

Calendar enables users to quickly navigate to and select a single date or range of dates. Currently all date based controls, need to be wrapped in a LocalizationProvider

View source code

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Best practices

The Calendar component is typically not used on its own but is composed with other components to build more user-friendly components such as DatePicker.

Focus

If the Calendar is composed within another component, move focus to the first interactive element within that component.
After a date is selected, provide feedback and move focus appropriately to enhance the user experience.

Ensure sufficient contrast and visibility

When composing a Calendar with your own content, ensure that text and interactive elements within the DatePicker have sufficient color contrast.

Provide instructions and feedback

Include clear instructions for each date selection mode. For example, explain how to select multiple dates or how to use offset dates.
Display validation messages and status updates in a way that is accessible to screen readers.

Announce changes dynamically

Use aria-live regions to announce changes, such as when a date is selected or when the calendar view changes.
Ensure that screen readers announce the selected dates and any instructions for interacting with the DatePicker.

Keyboard interactions

Key	Function
`Tab`	If focus is within the navigation bar, Tab moves focus to the next focusable element in the calendar. - If focus is on a day, Tab moves focus to the next focusable component.
`Shift` + `Tab`	This action moves focus to the previous focusable component within the calendar. - If focus is on the previous month arrow button, Shift + Tab moves focus to the previous focusable component.
`Arrow keys`	If a calendar day has focus, arrow keys move focus left, right, up, or down to a parallel day. - If focus is inside the Month or Year dropdown menu list, arrow keys move focus to the previous or next list item. When focus is on the first or last list item, it wraps, respectively, to the bottom or top of the list.
`Enter` / `Space`	If the left or right arrow button has focus, this action navigates the calendar to the previous or next month respectively. Focus remains on the button. - If a calendar date has focus, this action selects the date. - If a calendar date has focus and there is a start date selected in a date range, this action activates the end date field and keeps focus on the calendar dates. - If focus is on the Month or Year button, this action activates the menu, displays a dropdown menu list, and moves focus inside the list. - If focus is inside a dropdown menu list, this action selects the item with focus, closes the list, and returns focus to the Month or Year button.
`Escape`	If the Month or Year dropdown menu list has focus, Escape closes the list and returns focus to the Month or Year button.

Best practices

The Calendar component is typically not used on its own but is composed with other components to build more user-friendly components such as DatePicker.

Focus

If the Calendar is composed within another component, move focus to the first interactive element within that component.
After a date is selected, provide feedback and move focus appropriately to enhance the user experience.

Ensure sufficient contrast and visibility

When composing a Calendar with your own content, ensure that text and interactive elements within the DatePicker have sufficient color contrast.

Provide instructions and feedback

Include clear instructions for each date selection mode. For example, explain how to select multiple dates or how to use offset dates.
Display validation messages and status updates in a way that is accessible to screen readers.

Announce changes dynamically

Use aria-live regions to announce changes, such as when a date is selected or when the calendar view changes.
Ensure that screen readers announce the selected dates and any instructions for interacting with the DatePicker.

Keyboard interactions

Key	Function
`Tab`	If focus is within the navigation bar, Tab moves focus to the next focusable element in the calendar. - If focus is on a day, Tab moves focus to the next focusable component.
`Shift` + `Tab`	This action moves focus to the previous focusable component within the calendar. - If focus is on the previous month arrow button, Shift + Tab moves focus to the previous focusable component.
`Arrow keys`	If a calendar day has focus, arrow keys move focus left, right, up, or down to a parallel day. - If focus is inside the Month or Year dropdown menu list, arrow keys move focus to the previous or next list item. When focus is on the first or last list item, it wraps, respectively, to the bottom or top of the list.
`Enter` / `Space`	If the left or right arrow button has focus, this action navigates the calendar to the previous or next month respectively. Focus remains on the button. - If a calendar date has focus, this action selects the date. - If a calendar date has focus and there is a start date selected in a date range, this action activates the end date field and keeps focus on the calendar dates. - If focus is on the Month or Year button, this action activates the menu, displays a dropdown menu list, and moves focus inside the list. - If focus is inside a dropdown menu list, this action selects the item with focus, closes the list, and returns focus to the Month or Year button.
`Escape`	If the Month or Year dropdown menu list has focus, Escape closes the list and returns focus to the Month or Year button.

Best practices

The Calendar component is typically not used on its own but is composed with other components to build more user-friendly components such as DatePicker.

Focus

If the Calendar is composed within another component, move focus to the first interactive element within that component.
After a date is selected, provide feedback and move focus appropriately to enhance the user experience.

Ensure sufficient contrast and visibility

When composing a Calendar with your own content, ensure that text and interactive elements within the DatePicker have sufficient color contrast.

Provide instructions and feedback

Include clear instructions for each date selection mode. For example, explain how to select multiple dates or how to use offset dates.
Display validation messages and status updates in a way that is accessible to screen readers.

Announce changes dynamically

Use aria-live regions to announce changes, such as when a date is selected or when the calendar view changes.
Ensure that screen readers announce the selected dates and any instructions for interacting with the DatePicker.

Keyboard interactions

Key	Function
`Tab`	If focus is within the navigation bar, Tab moves focus to the next focusable element in the calendar. - If focus is on a day, Tab moves focus to the next focusable component.
`Shift` + `Tab`	This action moves focus to the previous focusable component within the calendar. - If focus is on the previous month arrow button, Shift + Tab moves focus to the previous focusable component.
`Arrow keys`	If a calendar day has focus, arrow keys move focus left, right, up, or down to a parallel day. - If focus is inside the Month or Year dropdown menu list, arrow keys move focus to the previous or next list item. When focus is on the first or last list item, it wraps, respectively, to the bottom or top of the list.
`Enter` / `Space`	If the left or right arrow button has focus, this action navigates the calendar to the previous or next month respectively. Focus remains on the button. - If a calendar date has focus, this action selects the date. - If a calendar date has focus and there is a start date selected in a date range, this action activates the end date field and keeps focus on the calendar dates. - If focus is on the Month or Year button, this action activates the menu, displays a dropdown menu list, and moves focus inside the list. - If focus is inside a dropdown menu list, this action selects the item with focus, closes the list, and returns focus to the Month or Year button.
`Escape`	If the Month or Year dropdown menu list has focus, Escape closes the list and returns focus to the Month or Year button.