import { Meta } from '@storybook/addon-docs';

<Meta title="Experimental/RangeCalendar/RangeCalendar" />

# RangeCalendar

The RangeCalendar component displays months in two grid-like views and gives users the ability to quickly to select a contiguous range of dates.

This component is built on [useRangeCalendar](https://react-spectrum.adobe.com/react-aria/useRangeCalendar.html), [useCalendarGrid](https://react-spectrum.adobe.com/react-aria/useCalendar.html#usecalendargrid), and 
[useCalendarCell](https://react-spectrum.adobe.com/react-aria/useCalendar.html#usecalendarcell) from React Aria, and [useRangeCalendarState](https://react-spectrum.adobe.com/react-stately/useRangeCalendarState.html) from React Stately.

### Required components 

This component can be used independently and does not require additional components. 

### Accessibility

#### Keyboard Navigation

These keys provide additional functionality to the component.

| Keys | Functions |
| ---- | --------- |
| Space or Enter | Selects the start and end dates when a date is focused, and navigates to the calendar pages when the navigational buttons are focused. |
| Tab | Components in the calendar are focusable and follow the page tab sequence. |
| Shift + Tab | Moves focus to the previous focusable component. |
| Pressing Home:(Fn + Right Arrow Key) Or Control or Command + Home | Shifts the focus to the first calendar date of the currently focused month. |
| Pressing End:(Fn + left Arrow Key) Or Control or Command + End | Shifts the focus to the last calendar date of the currently focused month. |
| Arrow key | Navigates up, down, right, and left across the calendar. If at the end of the current calendar, the right arrow key navigates to the next calendar. If at the beginning of the current calendar, the left arrow key navigates to the previous calendar. |
| Page up | Changes focus to the same date in the previous month. |
| Page down | Changes focus to the same date in the next month. |
| Shift + page up | Changes the grid of dates to the same months in the previous year. |
| Shift+ page down | Changes the grid of dates to the same months in the next year. |

#### Screen Readers

This component uses the following attributes to assist screen readers:
- The **`aria-label`** attribute is used to provide an accessible name.
- In each data cell, the **`aria-selected`** attribute is set to “true” for all dates within the selected range, and **`aria-disabled`** is set to “false” by default.