alpha

RangeCalendar

A range calendar displays one or more date grids and allows users to select a contiguous range of dates.

install	`yarn add react-aria-components`
version	1.0.0-alpha.6
usage	`import {RangeCalendar} from 'react-aria-components'`

View repository

GitHub

View package

NPM

Example#

import {Button, CalendarCell, CalendarGrid, Heading, RangeCalendar} from 'react-aria-components';

<RangeCalendar aria-label="Trip dates">
  <header>
    <Button slot="previous">◀</Button>
    <Heading />
    <Button slot="next">▶</Button>
  </header>
  <CalendarGrid>
    {(date) => <CalendarCell date={date} />}
  </CalendarGrid>
</RangeCalendar>

import {
  Button,
  CalendarCell,
  CalendarGrid,
  Heading,
  RangeCalendar
} from 'react-aria-components';

<RangeCalendar aria-label="Trip dates">
  <header>
    <Button slot="previous">◀</Button>
    <Heading />
    <Button slot="next">▶</Button>
  </header>
  <CalendarGrid>
    {(date) => <CalendarCell date={date} />}
  </CalendarGrid>
</RangeCalendar>

import {
  Button,
  CalendarCell,
  CalendarGrid,
  Heading,
  RangeCalendar
} from 'react-aria-components';

<RangeCalendar aria-label="Trip dates">
  <header>
    <Button slot="previous">
      ◀
    </Button>
    <Heading />
    <Button slot="next">
      ▶
    </Button>
  </header>
  <CalendarGrid>
    {(date) => (
      <CalendarCell
        date={date}
      />
    )}
  </CalendarGrid>
</RangeCalendar>

Show CSS

.react-aria-RangeCalendar {
  --highlight-background: slateblue;
  --highlight-foreground: white;
  --button-background: var(--spectrum-global-color-gray-50);
  --button-backgound-pressed: var(--spectrum-global-color-gray-100);
  --button-border: var(--spectrum-global-color-gray-400);
  --button-border-disabled: var(--spectrum-alias-border-color-disabled);
  --text-color: var(--spectrum-alias-text-color);
  --text-color-disabled: var(--spectrum-alias-text-color-disabled);
  --text-color-invalid: var(--spectrum-global-color-red-600);
  --pressed-color: var(--spectrum-global-color-gray-200);
  --unavailable-color: var(--spectrum-global-color-red-600);
  --invalid-color: var(--spectrum-global-color-static-red-600);

  width: fit-content;
  max-width: 100%;
  color: var(--text-color);

  & header {
    display: flex;
    align-items: center;
    margin: 0 4px .5rem 4px;

    .react-aria-Heading {
      flex: 1;
      margin: 0;
      text-align: center;
      font-size: 1.375rem;
    }

    .react-aria-Button {
      background: var(--button-background);
      border: 1px solid var(--button-border);
      color: var(--text-color);
      box-shadow: 0 1px 2px rgba(0 0 0 / 0.1);
      border-radius: 4px;
      appearance: none;
      vertical-align: middle;
      font-size: 1rem;
      width: 2rem;
      height: 2rem;
      padding: 0;
      text-align: center;
      margin: 0;
      outline: none;

      &[data-focus-visible] {
        border-color: var(--highlight-background);
        box-shadow: 0 0 0 1px var(--highlight-background);
      }

      &[data-pressed] {
        background: var(--button-backgound-pressed);
      }

      &:disabled {
        border-color: var(--button-border-disabled);
        color: var(--text-color-disabled);
      }
    }
  }

  & table {
    border-collapse: collapse;

    & td {
      padding: 2px 0;
    }
  }

  .react-aria-CalendarCell {
    width: 2.286rem;
    line-height: 2.286rem;
    text-align: center;
    border-radius: 6px;
    cursor: default;
    outline: none;

    &[data-outside-month] {
      display: none;
    }

    &[data-pressed] {
      background: var(--pressed-color);
    }

    &[data-focus-visible] {
      box-shadow: inset 0 0 0 2px var(--highlight-background);
    }

    &[data-selected] {
      background: var(--highlight-background);
      color: var(--highlight-foreground);
      border-radius: 0;

      &[data-focus-visible] {
        box-shadow: inset 0 0 0 1px var(--highlight-background), inset 0 0 0 3px var(--highlight-foreground);
      }
    }

    &[data-selection-start] {
      border-start-start-radius: 6px;
      border-end-start-radius: 6px;
    }

    &[data-selection-end] {
      border-start-end-radius: 6px;
      border-end-end-radius: 6px;
    }

    &[data-disabled] {
      color: var(--text-color-disabled);
    }

    &[data-unavailable] {
      text-decoration: line-through;
      color: var(--unavailable-color);
    }

    &[aria-invalid] {
      background: var(--invalid-color);
      color: var(--highlight-foreground);
    }
  }

  [slot=errorMessage] {
    font-size: 12px;
    color: var(--text-color-invalid);
  }
}

@media (forced-colors: active) {
  .react-aria-RangeCalendar {
    forced-color-adjust: none;

    --highlight-background: Highlight;
    --highlight-foreground: HighlightText;
    --button-border: ButtonBorder;
    --button-border-disabled: GrayText;
    --button-background: ButtonFace;
    --text-color: ButtonText;
    --text-color-disabled: GrayText;
    --text-color-invalid: LinkText;
    --unavailable-color: GrayText;
    --invalid-color: LinkText;
    --pressed-color: Canvas;
    --spectrum-alias-background-color-default: Canvas;
  }
}

.react-aria-RangeCalendar {
  --highlight-background: slateblue;
  --highlight-foreground: white;
  --button-background: var(--spectrum-global-color-gray-50);
  --button-backgound-pressed: var(--spectrum-global-color-gray-100);
  --button-border: var(--spectrum-global-color-gray-400);
  --button-border-disabled: var(--spectrum-alias-border-color-disabled);
  --text-color: var(--spectrum-alias-text-color);
  --text-color-disabled: var(--spectrum-alias-text-color-disabled);
  --text-color-invalid: var(--spectrum-global-color-red-600);
  --pressed-color: var(--spectrum-global-color-gray-200);
  --unavailable-color: var(--spectrum-global-color-red-600);
  --invalid-color: var(--spectrum-global-color-static-red-600);

  width: fit-content;
  max-width: 100%;
  color: var(--text-color);

  & header {
    display: flex;
    align-items: center;
    margin: 0 4px .5rem 4px;

    .react-aria-Heading {
      flex: 1;
      margin: 0;
      text-align: center;
      font-size: 1.375rem;
    }

    .react-aria-Button {
      background: var(--button-background);
      border: 1px solid var(--button-border);
      color: var(--text-color);
      box-shadow: 0 1px 2px rgba(0 0 0 / 0.1);
      border-radius: 4px;
      appearance: none;
      vertical-align: middle;
      font-size: 1rem;
      width: 2rem;
      height: 2rem;
      padding: 0;
      text-align: center;
      margin: 0;
      outline: none;

      &[data-focus-visible] {
        border-color: var(--highlight-background);
        box-shadow: 0 0 0 1px var(--highlight-background);
      }

      &[data-pressed] {
        background: var(--button-backgound-pressed);
      }

      &:disabled {
        border-color: var(--button-border-disabled);
        color: var(--text-color-disabled);
      }
    }
  }

  & table {
    border-collapse: collapse;

    & td {
      padding: 2px 0;
    }
  }

  .react-aria-CalendarCell {
    width: 2.286rem;
    line-height: 2.286rem;
    text-align: center;
    border-radius: 6px;
    cursor: default;
    outline: none;

    &[data-outside-month] {
      display: none;
    }

    &[data-pressed] {
      background: var(--pressed-color);
    }

    &[data-focus-visible] {
      box-shadow: inset 0 0 0 2px var(--highlight-background);
    }

    &[data-selected] {
      background: var(--highlight-background);
      color: var(--highlight-foreground);
      border-radius: 0;

      &[data-focus-visible] {
        box-shadow: inset 0 0 0 1px var(--highlight-background), inset 0 0 0 3px var(--highlight-foreground);
      }
    }

    &[data-selection-start] {
      border-start-start-radius: 6px;
      border-end-start-radius: 6px;
    }

    &[data-selection-end] {
      border-start-end-radius: 6px;
      border-end-end-radius: 6px;
    }

    &[data-disabled] {
      color: var(--text-color-disabled);
    }

    &[data-unavailable] {
      text-decoration: line-through;
      color: var(--unavailable-color);
    }

    &[aria-invalid] {
      background: var(--invalid-color);
      color: var(--highlight-foreground);
    }
  }

  [slot=errorMessage] {
    font-size: 12px;
    color: var(--text-color-invalid);
  }
}

@media (forced-colors: active) {
  .react-aria-RangeCalendar {
    forced-color-adjust: none;

    --highlight-background: Highlight;
    --highlight-foreground: HighlightText;
    --button-border: ButtonBorder;
    --button-border-disabled: GrayText;
    --button-background: ButtonFace;
    --text-color: ButtonText;
    --text-color-disabled: GrayText;
    --text-color-invalid: LinkText;
    --unavailable-color: GrayText;
    --invalid-color: LinkText;
    --pressed-color: Canvas;
    --spectrum-alias-background-color-default: Canvas;
  }
}

.react-aria-RangeCalendar {
  --highlight-background: slateblue;
  --highlight-foreground: white;
  --button-background: var(--spectrum-global-color-gray-50);
  --button-backgound-pressed: var(--spectrum-global-color-gray-100);
  --button-border: var(--spectrum-global-color-gray-400);
  --button-border-disabled: var(--spectrum-alias-border-color-disabled);
  --text-color: var(--spectrum-alias-text-color);
  --text-color-disabled: var(--spectrum-alias-text-color-disabled);
  --text-color-invalid: var(--spectrum-global-color-red-600);
  --pressed-color: var(--spectrum-global-color-gray-200);
  --unavailable-color: var(--spectrum-global-color-red-600);
  --invalid-color: var(--spectrum-global-color-static-red-600);

  width: fit-content;
  max-width: 100%;
  color: var(--text-color);

  & header {
    display: flex;
    align-items: center;
    margin: 0 4px .5rem 4px;

    .react-aria-Heading {
      flex: 1;
      margin: 0;
      text-align: center;
      font-size: 1.375rem;
    }

    .react-aria-Button {
      background: var(--button-background);
      border: 1px solid var(--button-border);
      color: var(--text-color);
      box-shadow: 0 1px 2px rgba(0 0 0 / 0.1);
      border-radius: 4px;
      appearance: none;
      vertical-align: middle;
      font-size: 1rem;
      width: 2rem;
      height: 2rem;
      padding: 0;
      text-align: center;
      margin: 0;
      outline: none;

      &[data-focus-visible] {
        border-color: var(--highlight-background);
        box-shadow: 0 0 0 1px var(--highlight-background);
      }

      &[data-pressed] {
        background: var(--button-backgound-pressed);
      }

      &:disabled {
        border-color: var(--button-border-disabled);
        color: var(--text-color-disabled);
      }
    }
  }

  & table {
    border-collapse: collapse;

    & td {
      padding: 2px 0;
    }
  }

  .react-aria-CalendarCell {
    width: 2.286rem;
    line-height: 2.286rem;
    text-align: center;
    border-radius: 6px;
    cursor: default;
    outline: none;

    &[data-outside-month] {
      display: none;
    }

    &[data-pressed] {
      background: var(--pressed-color);
    }

    &[data-focus-visible] {
      box-shadow: inset 0 0 0 2px var(--highlight-background);
    }

    &[data-selected] {
      background: var(--highlight-background);
      color: var(--highlight-foreground);
      border-radius: 0;

      &[data-focus-visible] {
        box-shadow: inset 0 0 0 1px var(--highlight-background), inset 0 0 0 3px var(--highlight-foreground);
      }
    }

    &[data-selection-start] {
      border-start-start-radius: 6px;
      border-end-start-radius: 6px;
    }

    &[data-selection-end] {
      border-start-end-radius: 6px;
      border-end-end-radius: 6px;
    }

    &[data-disabled] {
      color: var(--text-color-disabled);
    }

    &[data-unavailable] {
      text-decoration: line-through;
      color: var(--unavailable-color);
    }

    &[aria-invalid] {
      background: var(--invalid-color);
      color: var(--highlight-foreground);
    }
  }

  [slot=errorMessage] {
    font-size: 12px;
    color: var(--text-color-invalid);
  }
}

@media (forced-colors: active) {
  .react-aria-RangeCalendar {
    forced-color-adjust: none;

    --highlight-background: Highlight;
    --highlight-foreground: HighlightText;
    --button-border: ButtonBorder;
    --button-border-disabled: GrayText;
    --button-background: ButtonFace;
    --text-color: ButtonText;
    --text-color-disabled: GrayText;
    --text-color-invalid: LinkText;
    --unavailable-color: GrayText;
    --invalid-color: LinkText;
    --pressed-color: Canvas;
    --spectrum-alias-background-color-default: Canvas;
  }
}

Features#

There is no standalone range calendar element in HTML. Two separate <input type="date"> elements could be used, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. RangeCalendar helps achieve accessible and international range calendar components that can be styled as needed.

Flexible – Display one or more months at once, or a custom time range for use cases like a week view. Minimum and maximum values, unavailable dates, and non-contiguous selections are supported as well.
International – Support for 13 calendar systems used around the world, including Gregorian, Buddhist, Islamic, Persian, and more. Locale-specific formatting, number systems, and right-to-left support are available as well.
Accessible – Calendar cells can be navigated and selected using the keyboard, and localized screen reader messages are included to announce when the selection and visible date range change.
Touch friendly – Date ranges can be selected by dragging over dates in the calendar using a touch screen, and all interactions are accessible using touch-based screen readers.
Customizable – As with all of React Aria, the DOM structure and styling of all elements can be fully customized.

Read our blog post for more details about the internationalization, accessibility, and user experience features implemented by RangeCalendar.

Anatomy#

A range calendar consists of a grouping element containing one or more date grids (e.g. months), and a previous and next button for navigating through time. Each calendar grid consists of cells containing button elements that can be pressed and navigated to using the arrow keys to select a date range. Once a start date is selected, the user can navigate to another date using the keyboard or by hovering over it, and clicking it or pressing the Enter key commits the selected date range.

RangeCalendar also supports an optional error message element, which can be used to provide more context about any validation errors. This is linked with the calendar via the aria-describedby attribute.

Note that much of this anatomy is shared with non-range calendars. If you have both, the styling and internal components such as CalendarCell can be shared.

Concepts#

RangeCalendar makes use of the following concepts:

@internationalized/date

Composed components#

A Calendar uses the following components, which may also be used standalone or reused in other components.

Button

A button allows a user to perform an action.

Props#

RangeCalendar#

Name	Type	Default	Description
`visibleDuration`	`DateDuration`	`{months: 1}`	The amount of days that will be displayed at once. This affects how pagination works.
`allowsNonContiguousRanges`	`boolean`	—	When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.
`minValue`	`DateValue`	—	The minimum allowed date that a user may select.
`maxValue`	`DateValue`	—	The maximum allowed date that a user may select.
`isDateUnavailable`	`( (date: DateValue )) => boolean`	—	Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.
`isDisabled`	`boolean`	`false`	Whether the calendar is disabled.
`isReadOnly`	`boolean`	`false`	Whether the calendar value is immutable.
`autoFocus`	`boolean`	`false`	Whether to automatically focus the calendar when it mounts.
`focusedValue`	`DateValue`	—	Controls the currently focused date within the calendar.
`defaultFocusedValue`	`DateValue`	—	The date that is focused when the calendar first mounts (uncountrolled).
`validationState`	`ValidationState`	—	Whether the current selection is valid or invalid according to application logic.
`pageBehavior`	`PageBehavior`	`visible`	Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.
`value`	`RangeValue<DateValue> \| null`	—	The current value (controlled).
`defaultValue`	`RangeValue<DateValue> \| null`	—	The default value (uncontrolled).
`children`	`ReactNode \| ( (values: RangeCalendarRenderProps )) => ReactNode`	—	The children of the component. A function may be provided to alter the children based on component state.
`className`	`string \| ( (values: RangeCalendarRenderProps )) => string`	—	The CSS className for the element. A function may be provided to compute the class based on component state.
`style`	`CSSProperties \| ( (values: RangeCalendarRenderProps )) => CSSProperties`	—	The inline style for the element. A function may be provided to compute the style based on component state.

Events

Name	Type	Default	Description
`onFocusChange`	`( (date: CalendarDate )) => void`	—	Handler that is called when the focused date changes.
`onChange`	`( (value: RangeValue<MappedDateValue<DateValue>> )) => void`	—	Handler that is called when the value changes.

Layout

Name	Type	Default	Description
`slot`	`string`	—	A slot name for the component. Slots allow the component to receive props from a parent component.

Heading#

A <Heading> accepts all HTML attributes.

Button#

A <Button> accepts its contents as children. Other props such as onPress and isDisabled will be set by the RangeCalendar.

Show props

Name	Type	Default	Description
`form`	`string`	—	The element to associate the button with. The value of this attribute must be the id of a in the same document.
`formAction`	`string`	—	The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner.
`formEncType`	`string`	—	Indicates how to encode the form data that is submitted.
`formMethod`	`string`	—	Indicates the HTTP method used to submit the form.
`formNoValidate`	`boolean`	—	Indicates that the form is not to be validated when it is submitted.
`formTarget`	`string`	—	Overrides the target attribute of the button's form owner.
`name`	`string`	—	Submitted as a pair with the button's value as part of the form data.
`value`	`string`	—	The value associated with the button's name when it's submitted with the form data.
`isDisabled`	`boolean`	—	Whether the button is disabled.
`autoFocus`	`boolean`	—	Whether the element should receive focus on render.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	The behavior of the button when used in an HTML form.
`children`	`ReactNode \| ( (values: ButtonRenderProps )) => ReactNode`	—	The children of the component. A function may be provided to alter the children based on component state.
`className`	`string \| ( (values: ButtonRenderProps )) => string`	—	The CSS className for the element. A function may be provided to compute the class based on component state.
`style`	`CSSProperties \| ( (values: ButtonRenderProps )) => CSSProperties`	—	The inline style for the element. A function may be provided to compute the style based on component state.

Events

Name	Type	Default	Description
`onPress`	`( (e: PressEvent )) => void`	—	Handler that is called when the press is released over the target.
`onPressStart`	`( (e: PressEvent )) => void`	—	Handler that is called when a press interaction starts.
`onPressEnd`	`( (e: PressEvent )) => void`	—	Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.
`onPressChange`	`( (isPressed: boolean )) => void`	—	Handler that is called when the press state changes.
`onPressUp`	`( (e: PressEvent )) => void`	—	Handler that is called when a press is released over the target, regardless of whether it started on the target or not.
`onFocus`	`( (e: FocusEvent<Target> )) => void`	—	Handler that is called when the element receives focus.
`onBlur`	`( (e: FocusEvent<Target> )) => void`	—	Handler that is called when the element loses focus.
`onFocusChange`	`( (isFocused: boolean )) => void`	—	Handler that is called when the element's focus status changes.
`onKeyDown`	`( (e: KeyboardEvent )) => void`	—	Handler that is called when a key is pressed.
`onKeyUp`	`( (e: KeyboardEvent )) => void`	—	Handler that is called when a key is released.

Layout

Name	Type	Default	Description
`slot`	`string`	—	A slot name for the component. Slots allow the component to receive props from a parent component.

Accessibility

Name	Type	Default	Description
`id`	`string`	—	The element's unique identifier. See MDN.
`excludeFromTabOrder`	`boolean`	—	Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
`aria-expanded`	`boolean \| 'true' \| 'false'`	—	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
`aria-haspopup`	`boolean \| 'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog' \| 'true' \| 'false'`	—	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
`aria-controls`	`string`	—	Identifies the element (or elements) whose contents or presence are controlled by the current element.
`aria-pressed`	`boolean \| 'true' \| 'false' \| 'mixed'`	—	Indicates the current "pressed" state of toggle buttons.
`aria-label`	`string`	—	Defines a string value that labels the current element.
`aria-labelledby`	`string`	—	Identifies the element (or elements) that labels the current element.
`aria-describedby`	`string`	—	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	—	Identifies the element (or elements) that provide a detailed, extended description for the object.

CalendarGrid#

A <CalendarGrid> renders an individual month within a <RangeCalendar>. It accepts a function as its children, which is called to render a <CalendarCell> for each date. This renders a default <CalendarGridHeader>, which displays the weekday names in the column headers. This can be customized by providing a <CalendarGridHeader> and <CalendarGridBody> as children instead of a function.

Show props

Name	Type	Default	Description
`children`	`ReactElement \| ReactElement[] \| ( (date: CalendarDate )) => ReactElement`	—	Either a function to render calendar cells for each date in the month, or children containing a <CalendarGridHeader>`` and` when additional customization is needed.
`offset`	`DateDuration`	—	An offset from the beginning of the visible date range that this CalendarGrid should display. Useful when displaying more than one month at a time.
`weekdayStyle`	`'narrow' \| 'short' \| 'long'`	`"narrow"`	The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name.
`className`	`string`	—	The CSS className for the element.
`style`	`CSSProperties`	—	The inline style for the element.

CalendarGridHeader#

A <CalendarGridHeader> renders the header within a <CalendarGrid>, displaying a list of weekday names. It accepts a function as its children, which is called with a day name abbreviation to render a <CalendarHeaderCell> for each column header.

Show props

Name	Type	Default	Description
`children`	`( (day: string )) => ReactElement`	—	A function to render a `<CalendarHeaderCell>` for a weekday name.
`className`	`string`	—	The CSS className for the element.
`style`	`CSSProperties`	—	The inline style for the element.

CalendarHeaderCell#

A <CalendarHeaderCell> renders a column header within a <CalendarGridHeader>. It typically displays a weekday name.

Show props

Name	Type	Default	Description
`children`	`ReactNode`	—	The children of the component.
`className`	`string`	—	The CSS className for the element.
`style`	`CSSProperties`	—	The inline style for the element.

CalendarGridBody#

A <CalendarGridBody> renders the body within a <CalendarGrid>. It accepts a function as its children, which is called to render a <CalendarCell> for each date.

Show props

Name	Type	Default	Description
`children`	`( (date: CalendarDate )) => ReactElement`	—	A function to render a `<CalendarCell>` for a given date.
`className`	`string`	—	The CSS className for the element.
`style`	`CSSProperties`	—	The inline style for the element.

CalendarCell#

A <CalendarCell> renders an individual date within a <CalendarGrid>.

Show props

Name	Type	Default	Description
`date`	`CalendarDate`	—	The date to render in the cell.
`children`	`ReactNode \| ( (values: CalendarCellRenderProps )) => ReactNode`	—	The children of the component. A function may be provided to alter the children based on component state.
`className`	`string \| ( (values: CalendarCellRenderProps )) => string`	—	The CSS className for the element. A function may be provided to compute the class based on component state.
`style`	`CSSProperties \| ( (values: CalendarCellRenderProps )) => CSSProperties`	—	The inline style for the element. A function may be provided to compute the style based on component state.

Styling#

React Aria components can be styled in many ways, including using CSS classes, inline styles, utility classes (e.g. Tailwind), CSS-in-JS (e.g. Styled Components), etc. By default, all components include a builtin className attribute which can be targeted using CSS selectors. These follow the react-aria-ComponentName naming convention.

.react-aria-RangeCalendar {
  /* ... */
}

.react-aria-RangeCalendar {
  /* ... */
}

.react-aria-RangeCalendar {
  /* ... */
}

A custom className can also be specified on any component. This overrides the default className provided by React Aria with your own.

<CalendarGrid className="my-calendar-grid">
  {/* ... */}
</CalendarGrid>

<CalendarGrid className="my-calendar-grid">
  {/* ... */}
</CalendarGrid>

<CalendarGrid className="my-calendar-grid">
  {/* ... */}
</CalendarGrid>

In addition, some components support multiple UI states (e.g. focused, placeholder, readonly, etc.). React Aria components expose states using DOM attributes, which you can target in CSS selectors. These are ARIA attributes wherever possible, or data attributes when a relevant ARIA attribute does not exist. For example:

.react-aria-CalendarCell[data-selected] {
  /* ... */
}

.react-aria-CalendarCell[aria-invalid] {
  /* ... */
}

.react-aria-CalendarCell[data-selected] {
  /* ... */
}

.react-aria-CalendarCell[aria-invalid] {
  /* ... */
}

.react-aria-CalendarCell[data-selected] {
  /* ... */
}

.react-aria-CalendarCell[aria-invalid] {
  /* ... */
}

The className and style props also accept functions which receive states for styling. This lets you dynamically determine the classes or styles to apply, which is useful when using utility CSS libraries like Tailwind.

<CalendarCell
  className={({ isSelected }) => isSelected ? 'bg-blue-600' : 'bg-gray-600'}
/>

<CalendarCell
  className={({ isSelected }) =>
    isSelected ? 'bg-blue-600' : 'bg-gray-600'}
/>

<CalendarCell
  className={(
    { isSelected }
  ) =>
    isSelected
      ? 'bg-blue-600'
      : 'bg-gray-600'}
/>

Render props may also be used as children to alter what elements are rendered based on the current state. For example, you could add an additional element when a date is unavailable.

<CalendarCell>
  {({formattedDate, isUnavailable}) => (
    <>
      {isUnavailable && <UnavailableIcon />}
      <span>{formattedDate}</span>
    </>
  )}
</CalendarCell>

<CalendarCell>
  {({formattedDate, isUnavailable}) => (
    <>
      {isUnavailable && <UnavailableIcon />}
      <span>{formattedDate}</span>
    </>
  )}
</CalendarCell>

<CalendarCell>
  {(
    {
      formattedDate,
      isUnavailable
    }
  ) => (
    <>
      {isUnavailable &&
        (
          <UnavailableIcon />
        )}
      <span>
        {formattedDate}
      </span>
    </>
  )}
</CalendarCell>

The states, selectors, and render props for each component used in a RangeCalendar are documented below.

RangeCalendar#

A RangeCalendar can be targeted with the .react-aria-RangeCalendar CSS selector, or by overriding with a custom className. It supports the following states and render props:

Name	CSS Selector	Description
`state`	`—`	State of the range calendar.
`isDisabled`	`[data-disabled]`	Whether the calendar is disabled.
`validationState`	`[data-validation-state="valid \| invalid"]`	Validation state of the date field.

Button#

A Button can be targeted with the .react-aria-Button CSS selector, or by overriding with a custom className. The next and previous buttons can be targeted specifically with the [slot=previous] and [slot=next] selectors. Buttons support the following states:

Name	CSS Selector	Description
`isHovered`	`[data-hovered]`	Whether the button is currently hovered with a mouse.
`isPressed`	`[data-pressed]`	Whether the button is currently in a pressed state.
`isFocused`	`:focus`	Whether the button is focused, either via a mouse or keyboard.
`isFocusVisible`	`[data-focus-visible]`	Whether the button is keyboard focused.
`isDisabled`	`:disabled`	Whether the button is disabled.

CalendarGrid#

A CalendarGrid can be targeted with the .react-aria-CalendarGrid CSS selector, or by overriding with a custom className. When a function is provided as children, a default <CalendarGridHeader> and <CalendarGridBody> are rendered. If you need to customize the styling of the header cells, you can render them yourself.

import {CalendarGridBody, CalendarGridHeader, CalendarHeaderCell} from 'react-aria-components';

<RangeCalendar aria-label="Trip dates">
  <header>
    <Button slot="previous">◀</Button>
    <Heading />
    <Button slot="next">▶</Button>
  </header>
  <CalendarGrid>
    <CalendarGridHeader>
      {(day) => (
        <CalendarHeaderCell style={{ color: 'var(--blue)' }}>
          {day}
        </CalendarHeaderCell>
      )}
    </CalendarGridHeader>
    <CalendarGridBody>
      {(date) => <CalendarCell date={date} />}
    </CalendarGridBody>
  </CalendarGrid>
</RangeCalendar>

import {
  CalendarGridBody,
  CalendarGridHeader,
  CalendarHeaderCell
} from 'react-aria-components';

<RangeCalendar aria-label="Trip dates">
  <header>
    <Button slot="previous">◀</Button>
    <Heading />
    <Button slot="next">▶</Button>
  </header>
  <CalendarGrid>
    <CalendarGridHeader>
      {(day) => (
        <CalendarHeaderCell
          style={{ color: 'var(--blue)' }}
        >
          {day}
        </CalendarHeaderCell>
      )}
    </CalendarGridHeader>
    <CalendarGridBody>
      {(date) => <CalendarCell date={date} />}
    </CalendarGridBody>
  </CalendarGrid>
</RangeCalendar>

import {
  CalendarGridBody,
  CalendarGridHeader,
  CalendarHeaderCell
} from 'react-aria-components';

<RangeCalendar aria-label="Trip dates">
  <header>
    <Button slot="previous">
      ◀
    </Button>
    <Heading />
    <Button slot="next">
      ▶
    </Button>
  </header>
  <CalendarGrid>
    <CalendarGridHeader>
      {(day) => (
        <CalendarHeaderCell
          style={{
            color:
              'var(--blue)'
          }}
        >
          {day}
        </CalendarHeaderCell>
      )}
    </CalendarGridHeader>
    <CalendarGridBody>
      {(date) => (
        <CalendarCell
          date={date}
        />
      )}
    </CalendarGridBody>
  </CalendarGrid>
</RangeCalendar>

CalendarGridHeader#

A CalendarGridHeader can be targeted with the .react-aria-CalendarGridHeader CSS selector, or by overriding with a custom className.

CalendarHeaderCell#

A CalendarHeaderCell can be targeted with the .react-aria-CalendarHeaderCell CSS selector, or by overriding with a custom className.

CalendarGridBody#

A CalendarGridBody can be targeted with the .react-aria-CalendarGridBody CSS selector, or by overriding with a custom className.

CalendarCell#

A CalendarCell can be targeted with the .react-aria-CalendarCell CSS selector, or by overriding with a custom className. It supports the following states:

Name	CSS Selector	Description
`date`	`—`	The date that the cell represents.
`formattedDate`	`—`	The day number formatted according to the current locale.
`isHovered`	`[data-hovered]`	Whether the cell is currently hovered with a mouse.
`isPressed`	`[data-pressed]`	Whether the cell is currently being pressed.
`isSelected`	`[data-selected]`	Whether the cell is selected.
`isSelectionStart`	`[data-selection-start]`	Whether the cell is the first date in a range selection.
`isSelectionEnd`	`[data-selection-end]`	Whether the cell is the last date in a range selection.
`isFocused`	`:focus`	Whether the cell is focused.
`isFocusVisible`	`[data-focus-visible]`	Whether the cell is keyboard focused.
`isDisabled`	`[data-disabled]`	Whether the cell is disabled, according to the calendar's `minValue`, `maxValue`, and `isDisabled` props. Disabled dates are not focusable, and cannot be selected by the user. They are typically displayed with a dimmed appearance.
`isOutsideVisibleRange`	`[data-outside-visible-range]`	Whether the cell is outside the visible range of the calendar. For example, dates before the first day of a month in the same week.
`isOutsideMonth`	`[data-outside-month]`	Whether the cell is outside the current month.
`isUnavailable`	`[data-unavailable]`	Whether the cell is unavailable, according to the calendar's `isDateUnavailable` prop. Unavailable dates remain focusable, but cannot be selected by the user. They should be displayed with a visual affordance to indicate they are unavailable, such as a different color or a strikethrough. Note that because they are focusable, unavailable dates must meet a 4.5:1 color contrast ratio, as defined by WCAG.
`isInvalid`	`[aria-invalid]`	Whether the cell is part of an invalid selection.

Text#

The error message element within a RangeCalendar can be targeted with the [slot=errorMessage] CSS selector, or by adding a custom className.

Multi-month#

Multiple CalendarGrid elements can be rendered to show multiple months at once. The visibleDuration prop should be provided to the RangeCalendar component to specify how many months are visible, and each CalendarGrid accepts an offset prop to specify its starting date relative to the first visible date.

<RangeCalendar aria-label="Trip dates" visibleDuration={{months: 3}}>
  <header>
    <Button slot="previous">◀</Button>
    <Heading />
    <Button slot="next">▶</Button>
  </header>
  <div style={{display: 'flex', gap: 30, overflow: 'auto'}}>
    <CalendarGrid>
      {date => <CalendarCell date={date} />}
    </CalendarGrid>
    <CalendarGrid offset={{months: 1}}>
      {date => <CalendarCell date={date} />}
    </CalendarGrid>
    <CalendarGrid offset={{months: 2}}>
      {date => <CalendarCell date={date} />}
    </CalendarGrid>
  </div>
</RangeCalendar>

<RangeCalendar
  aria-label="Trip dates"
  visibleDuration={{ months: 3 }}
>
  <header>
    <Button slot="previous">◀</Button>
    <Heading />
    <Button slot="next">▶</Button>
  </header>
  <div
    style={{ display: 'flex', gap: 30, overflow: 'auto' }}
  >
    <CalendarGrid>
      {(date) => <CalendarCell date={date} />}
    </CalendarGrid>
    <CalendarGrid offset={{ months: 1 }}>
      {(date) => <CalendarCell date={date} />}
    </CalendarGrid>
    <CalendarGrid offset={{ months: 2 }}>
      {(date) => <CalendarCell date={date} />}
    </CalendarGrid>
  </div>
</RangeCalendar>

<RangeCalendar
  aria-label="Trip dates"
  visibleDuration={{
    months: 3
  }}
>
  <header>
    <Button slot="previous">
      ◀
    </Button>
    <Heading />
    <Button slot="next">
      ▶
    </Button>
  </header>
  <div
    style={{
      display: 'flex',
      gap: 30,
      overflow: 'auto'
    }}
  >
    <CalendarGrid>
      {(date) => (
        <CalendarCell
          date={date}
        />
      )}
    </CalendarGrid>
    <CalendarGrid
      offset={{
        months: 1
      }}
    >
      {(date) => (
        <CalendarCell
          date={date}
        />
      )}
    </CalendarGrid>
    <CalendarGrid
      offset={{
        months: 2
      }}
    >
      {(date) => (
        <CalendarCell
          date={date}
        />
      )}
    </CalendarGrid>
  </div>
</RangeCalendar>

Page behavior#

The pageBehavior prop allows you to control how the calendar navigates between months. By default, the calendar will navigate by visibleDuration, but by setting pageBehavior to single, pagination will be by one month.

<RangeCalendar
  aria-label="Trip dates"
  visibleDuration={{ months: 3 }}
  pageBehavior="single"
>
  <header>
    <Button slot="previous">◀</Button>
    <Heading />
    <Button slot="next">▶</Button>
  </header>
  <div style={{ display: 'flex', gap: 30, overflow: 'auto' }}>
    <CalendarGrid>
      {(date) => <CalendarCell date={date} />}
    </CalendarGrid>
    <CalendarGrid offset={{ months: 1 }}>
      {(date) => <CalendarCell date={date} />}
    </CalendarGrid>
    <CalendarGrid offset={{ months: 2 }}>
      {(date) => <CalendarCell date={date} />}
    </CalendarGrid>
  </div>
</RangeCalendar>

<RangeCalendar
  aria-label="Trip dates"
  visibleDuration={{ months: 3 }}
  pageBehavior="single"
>
  <header>
    <Button slot="previous">◀</Button>
    <Heading />
    <Button slot="next">▶</Button>
  </header>
  <div
    style={{ display: 'flex', gap: 30, overflow: 'auto' }}
  >
    <CalendarGrid>
      {(date) => <CalendarCell date={date} />}
    </CalendarGrid>
    <CalendarGrid offset={{ months: 1 }}>
      {(date) => <CalendarCell date={date} />}
    </CalendarGrid>
    <CalendarGrid offset={{ months: 2 }}>
      {(date) => <CalendarCell date={date} />}
    </CalendarGrid>
  </div>
</RangeCalendar>

<RangeCalendar
  aria-label="Trip dates"
  visibleDuration={{
    months: 3
  }}
  pageBehavior="single"
>
  <header>
    <Button slot="previous">
      ◀
    </Button>
    <Heading />
    <Button slot="next">
      ▶
    </Button>
  </header>
  <div
    style={{
      display: 'flex',
      gap: 30,
      overflow: 'auto'
    }}
  >
    <CalendarGrid>
      {(date) => (
        <CalendarCell
          date={date}
        />
      )}
    </CalendarGrid>
    <CalendarGrid
      offset={{
        months: 1
      }}
    >
      {(date) => (
        <CalendarCell
          date={date}
        />
      )}
    </CalendarGrid>
    <CalendarGrid
      offset={{
        months: 2
      }}
    >
      {(date) => (
        <CalendarCell
          date={date}
        />
      )}
    </CalendarGrid>
  </div>
</RangeCalendar>

Reusable wrappers#

If you will use a RangeCalendar in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.

import type {DateValue, RangeCalendarProps} from 'react-aria-components';
import {Text} from 'react-aria-components';

interface MyRangeCalendarProps<T extends DateValue>
  extends RangeCalendarProps<T> {
  errorMessage?: string;
}

function MyRangeCalendar<T extends DateValue>(
  { errorMessage, ...props }: MyRangeCalendarProps<T>
) {
  return (
    <RangeCalendar {...props}>
      <header>
        <Button slot="previous">◀</Button>
        <Heading />
        <Button slot="next">▶</Button>
      </header>
      <CalendarGrid>
        {(date) => <CalendarCell date={date} />}
      </CalendarGrid>
      {errorMessage && <Text slot="errorMessage">{errorMessage}</Text>}
    </RangeCalendar>
  );
}

<MyRangeCalendar aria-label="Trip dates" />

import type {
  DateValue,
  RangeCalendarProps
} from 'react-aria-components';
import {Text} from 'react-aria-components';

interface MyRangeCalendarProps<T extends DateValue>
  extends RangeCalendarProps<T> {
  errorMessage?: string;
}

function MyRangeCalendar<T extends DateValue>(
  { errorMessage, ...props }: MyRangeCalendarProps<T>
) {
  return (
    <RangeCalendar {...props}>
      <header>
        <Button slot="previous">◀</Button>
        <Heading />
        <Button slot="next">▶</Button>
      </header>
      <CalendarGrid>
        {(date) => <CalendarCell date={date} />}
      </CalendarGrid>
      {errorMessage && (
        <Text slot="errorMessage">{errorMessage}</Text>
      )}
    </RangeCalendar>
  );
}

<MyRangeCalendar aria-label="Trip dates" />

import type {
  DateValue,
  RangeCalendarProps
} from 'react-aria-components';
import {Text} from 'react-aria-components';

interface MyRangeCalendarProps<
  T extends DateValue
> extends
  RangeCalendarProps<T> {
  errorMessage?: string;
}

function MyRangeCalendar<
  T extends DateValue
>(
  {
    errorMessage,
    ...props
  }: MyRangeCalendarProps<
    T
  >
) {
  return (
    <RangeCalendar
      {...props}
    >
      <header>
        <Button slot="previous">
          ◀
        </Button>
        <Heading />
        <Button slot="next">
          ▶
        </Button>
      </header>
      <CalendarGrid>
        {(date) => (
          <CalendarCell
            date={date}
          />
        )}
      </CalendarGrid>
      {errorMessage && (
        <Text slot="errorMessage">
          {errorMessage}
        </Text>
      )}
    </RangeCalendar>
  );
}

<MyRangeCalendar aria-label="Trip dates" />

Usage#

The following examples show how to use the MyRangeCalendar component created in the above example.

Value#

A RangeCalendar has no selection by default. An initial, uncontrolled value can be provided to the RangeCalendar using the defaultValue prop. Alternatively, a controlled value can be provided using the value prop.

Date ranges are objects with start and end properties containing date values, which are provided using objects in the @internationalized/date package. This library handles correct international date manipulation across calendars, time zones, and other localization concerns.

RangeCalendar supports values with both date and time components, but only allows users to modify the dates. By default, RangeCalendar will emit CalendarDate objects in the onChange event, but if a CalendarDateTime or ZonedDateTime object is passed as the value or defaultValue, values of that type will be emitted, changing only the date and preserving the time components.

import {parseDate} from '@internationalized/date';

function Example() {
  let [value, setValue] = React.useState({
    start: parseDate('2020-02-03'),
    end: parseDate('2020-02-12')
  });

  return (
    <div style={{display: 'flex', gap: 20, flexWrap: 'wrap'}}>
      <MyRangeCalendar
        aria-label="Date range (uncontrolled)"
        defaultValue={{
          start: parseDate('2020-02-03'),
          end: parseDate('2020-02-12')
        }} />
      <MyRangeCalendar
        aria-label="Date range (controlled)"
        value={value}
        onChange={setValue} />
    </div>
  );
}

import {parseDate} from '@internationalized/date';

function Example() {
  let [value, setValue] = React.useState({
    start: parseDate('2020-02-03'),
    end: parseDate('2020-02-12')
  });

  return (
    <div
      style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}
    >
      <MyRangeCalendar
        aria-label="Date range (uncontrolled)"
        defaultValue={{
          start: parseDate('2020-02-03'),
          end: parseDate('2020-02-12')
        }}
      />
      <MyRangeCalendar
        aria-label="Date range (controlled)"
        value={value}
        onChange={setValue}
      />
    </div>
  );
}

import {parseDate} from '@internationalized/date';

function Example() {
  let [value, setValue] =
    React.useState({
      start: parseDate(
        '2020-02-03'
      ),
      end: parseDate(
        '2020-02-12'
      )
    });

  return (
    <div
      style={{
        display: 'flex',
        gap: 20,
        flexWrap: 'wrap'
      }}
    >
      <MyRangeCalendar
        aria-label="Date range (uncontrolled)"
        defaultValue={{
          start:
            parseDate(
              '2020-02-03'
            ),
          end: parseDate(
            '2020-02-12'
          )
        }}
      />
      <MyRangeCalendar
        aria-label="Date range (controlled)"
        value={value}
        onChange={setValue}
      />
    </div>
  );
}

Events#

RangeCalendar accepts an onChange prop which is triggered whenever a date is selected by the user. The example below uses onChange to update a separate element with a formatted version of the date in the user's locale. This is done by converting the date to a native JavaScript Date object to pass to the formatter.

import {getLocalTimeZone} from '@internationalized/date';
import {useDateFormatter} from '@react-aria/i18n';

function Example() {
  let [range, setRange] = React.useState({
    start: parseDate('2020-07-03'),
    end: parseDate('2020-07-10')
  });
  let formatter = useDateFormatter({ dateStyle: 'long' });

  return (
    <>
      <MyRangeCalendar
        aria-label="Date range"
        value={range}
        onChange={setRange}
      />
      <p>
        Selected date: {formatter.formatRange(
          range.start.toDate(getLocalTimeZone()),
          range.end.toDate(getLocalTimeZone())
        )}
      </p>
    </>
  );
}

import {getLocalTimeZone} from '@internationalized/date';
import {useDateFormatter} from '@react-aria/i18n';

function Example() {
  let [range, setRange] = React.useState({
    start: parseDate('2020-07-03'),
    end: parseDate('2020-07-10')
  });
  let formatter = useDateFormatter({ dateStyle: 'long' });

  return (
    <>
      <MyRangeCalendar
        aria-label="Date range"
        value={range}
        onChange={setRange}
      />
      <p>
        Selected date: {formatter.formatRange(
          range.start.toDate(getLocalTimeZone()),
          range.end.toDate(getLocalTimeZone())
        )}
      </p>
    </>
  );
}

import {getLocalTimeZone} from '@internationalized/date';
import {useDateFormatter} from '@react-aria/i18n';

function Example() {
  let [range, setRange] =
    React.useState({
      start: parseDate(
        '2020-07-03'
      ),
      end: parseDate(
        '2020-07-10'
      )
    });
  let formatter =
    useDateFormatter({
      dateStyle: 'long'
    });

  return (
    <>
      <MyRangeCalendar
        aria-label="Date range"
        value={range}
        onChange={setRange}
      />
      <p>
        Selected date:
        {' '}
        {formatter
          .formatRange(
            range.start
              .toDate(
                getLocalTimeZone()
              ),
            range.end
              .toDate(
                getLocalTimeZone()
              )
          )}
      </p>
    </>
  );
}

International calendars#

RangeCalendar supports selecting dates in many calendar systems used around the world, including Gregorian, Hebrew, Indian, Islamic, Buddhist, and more. Dates are automatically displayed in the appropriate calendar system for the user's locale. The calendar system can be overridden using the Unicode calendar locale extension, passed to the I18nProvider component.

Selected dates passed to onChange always use the same calendar system as the value or defaultValue prop. If no value or defaultValue is provided, then dates passed to onChange are always in the Gregorian calendar since this is the most commonly used. This means that even though the user selects dates in their local calendar system, applications are able to deal with dates from all users consistently.

The below example displays a RangeCalendar in the Hindi language, using the Indian calendar. Dates emitted from onChange are in the Gregorian calendar.

import type {DateRange} from 'react-aria-components';
import {I18nProvider} from '@react-aria/i18n';

function Example() {
  let [range, setRange] = React.useState<DateRange | null>(null);
  return (
    <I18nProvider locale="hi-IN-u-ca-indian">
      <MyRangeCalendar
        aria-label="Date range"
        value={range}
        onChange={setRange}
      />
      <p>Start date: {range?.start.toString()}</p>
      <p>End date: {range?.end.toString()}</p>
    </I18nProvider>
  );
}

import type {DateRange} from 'react-aria-components';
import {I18nProvider} from '@react-aria/i18n';

function Example() {
  let [range, setRange] = React.useState<DateRange | null>(
    null
  );
  return (
    <I18nProvider locale="hi-IN-u-ca-indian">
      <MyRangeCalendar
        aria-label="Date range"
        value={range}
        onChange={setRange}
      />
      <p>Start date: {range?.start.toString()}</p>
      <p>End date: {range?.end.toString()}</p>
    </I18nProvider>
  );
}

import type {DateRange} from 'react-aria-components';
import {I18nProvider} from '@react-aria/i18n';

function Example() {
  let [range, setRange] =
    React.useState<
      DateRange | null
    >(null);
  return (
    <I18nProvider locale="hi-IN-u-ca-indian">
      <MyRangeCalendar
        aria-label="Date range"
        value={range}
        onChange={setRange}
      />
      <p>
        Start date:{' '}
        {range?.start
          .toString()}
      </p>
      <p>
        End date:{' '}
        {range?.end
          .toString()}
      </p>
    </I18nProvider>
  );
}

Validation#

By default, RangeCalendar allows selecting any date range. The minValue and maxValue props can also be used to prevent the user from selecting dates outside a certain range.

This example only accepts dates after today.

import {today} from '@internationalized/date';

<MyRangeCalendar
  aria-label="Trip dates"
  minValue={today(getLocalTimeZone())}
/>

import {today} from '@internationalized/date';

<MyRangeCalendar
  aria-label="Trip dates"
  minValue={today(getLocalTimeZone())}
/>

import {today} from '@internationalized/date';

<MyRangeCalendar
  aria-label="Trip dates"
  minValue={today(
    getLocalTimeZone()
  )}
/>

Unavailable dates#

RangeCalendar supports marking certain dates as unavailable. These dates remain focusable with the keyboard so that navigation is consistent, but cannot be selected by the user. In this example, they are displayed in red. The isDateUnavailable prop accepts a callback that is called to evaluate whether each visible date is unavailable.

Note that by default, users may not select non-contiguous ranges, i.e. ranges that contain unavailable dates within them. Once a start date is selected, enabled dates will be restricted to subsequent dates until an unavailable date is hit. See below for an example of how to allow non-contiguous ranges.

This example includes multiple unavailable date ranges, e.g. dates when a rental house is not available. The minValue prop is also used to prevent selecting dates before today.

import {today} from '@internationalized/date';

function Example() {
  let now = today(getLocalTimeZone());
  let disabledRanges = [
    [now, now.add({ days: 5 })],
    [now.add({ days: 14 }), now.add({ days: 16 })],
    [now.add({ days: 23 }), now.add({ days: 24 })]
  ];

  let isDateUnavailable = (date: DateValue) =>
    disabledRanges.some((interval) =>
      date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0
    );

  return (
    <MyRangeCalendar
      aria-label="Trip dates"
      minValue={today(getLocalTimeZone())}
      isDateUnavailable={isDateUnavailable}
    />
  );
}

import {today} from '@internationalized/date';

function Example() {
  let now = today(getLocalTimeZone());
  let disabledRanges = [
    [now, now.add({ days: 5 })],
    [now.add({ days: 14 }), now.add({ days: 16 })],
    [now.add({ days: 23 }), now.add({ days: 24 })]
  ];

  let isDateUnavailable = (date: DateValue) =>
    disabledRanges.some((interval) =>
      date.compare(interval[0]) >= 0 &&
      date.compare(interval[1]) <= 0
    );

  return (
    <MyRangeCalendar
      aria-label="Trip dates"
      minValue={today(getLocalTimeZone())}
      isDateUnavailable={isDateUnavailable}
    />
  );
}

import {today} from '@internationalized/date';

function Example() {
  let now = today(
    getLocalTimeZone()
  );
  let disabledRanges = [
    [
      now,
      now.add({
        days: 5
      })
    ],
    [
      now.add({
        days: 14
      }),
      now.add({
        days: 16
      })
    ],
    [
      now.add({
        days: 23
      }),
      now.add({
        days: 24
      })
    ]
  ];

  let isDateUnavailable =
    (date: DateValue) =>
      disabledRanges
        .some((
          interval
        ) =>
          date.compare(
              interval[0]
            ) >= 0 &&
          date.compare(
              interval[1]
            ) <= 0
        );

  return (
    <MyRangeCalendar
      aria-label="Trip dates"
      minValue={today(
        getLocalTimeZone()
      )}
      isDateUnavailable={isDateUnavailable}
    />
  );
}

Non-contiguous ranges#

The allowsNonContiguousRanges prop enables a range to be selected even if there are unavailable dates in the middle. The value emitted in the onChange event will still be a single range with a start and end property, but unavailable dates will not be displayed as selected. It is up to applications to split the full selected range into multiple as needed for business logic.

This example prevents selecting weekends, but allows selecting ranges that span multiple weeks.

import {isWeekend} from '@internationalized/date';
import {useLocale} from '@react-aria/i18n';

function Example() {
  let { locale } = useLocale();

  return (
    <MyRangeCalendar
      aria-label="Time off request"
      isDateUnavailable={(date) => isWeekend(date, locale)}
      allowsNonContiguousRanges
    />
  );
}

import {isWeekend} from '@internationalized/date';
import {useLocale} from '@react-aria/i18n';

function Example() {
  let { locale } = useLocale();

  return (
    <MyRangeCalendar
      aria-label="Time off request"
      isDateUnavailable={(date) => isWeekend(date, locale)}
      allowsNonContiguousRanges
    />
  );
}

import {isWeekend} from '@internationalized/date';
import {useLocale} from '@react-aria/i18n';

function Example() {
  let { locale } =
    useLocale();

  return (
    <MyRangeCalendar
      aria-label="Time off request"
      isDateUnavailable={(date) =>
        isWeekend(
          date,
          locale
        )}
      allowsNonContiguousRanges
    />
  );
}

Controlling the focused date#

By default, the first selected date is focused when a RangeCalendar first mounts. If no value or defaultValue prop is provided, then the current date is focused. However, RangeCalendar supports controlling which date is focused using the focusedValue and onFocusChange props. This also determines which month is visible. The defaultFocusedValue prop allows setting the initial focused date when the RangeCalendar first mounts, without controlling it.

This example focuses July 1, 2021 by default. The user may change the focused date, and the onFocusChange event updates the state. Clicking the button resets the focused date back to the initial value.

import {CalendarDate} from '@internationalized/date';

function Example() {
  let defaultDate = new CalendarDate(2021, 7, 1);
  let [focusedDate, setFocusedDate] = React.useState(defaultDate);

  return (
    <div style={{ flexDirection: 'column', alignItems: 'start', gap: 20 }}>
      <button onClick={() => setFocusedDate(defaultDate)}>
        Reset focused date
      </button>
      <MyRangeCalendar
        focusedValue={focusedDate}
        onFocusChange={setFocusedDate}
      />
    </div>
  );
}

import {CalendarDate} from '@internationalized/date';

function Example() {
  let defaultDate = new CalendarDate(2021, 7, 1);
  let [focusedDate, setFocusedDate] = React.useState(
    defaultDate
  );

  return (
    <div
      style={{
        flexDirection: 'column',
        alignItems: 'start',
        gap: 20
      }}
    >
      <button onClick={() => setFocusedDate(defaultDate)}>
        Reset focused date
      </button>
      <MyRangeCalendar
        focusedValue={focusedDate}
        onFocusChange={setFocusedDate}
      />
    </div>
  );
}

import {CalendarDate} from '@internationalized/date';

function Example() {
  let defaultDate =
    new CalendarDate(
      2021,
      7,
      1
    );
  let [
    focusedDate,
    setFocusedDate
  ] = React.useState(
    defaultDate
  );

  return (
    <div
      style={{
        flexDirection:
          'column',
        alignItems:
          'start',
        gap: 20
      }}
    >
      <button
        onClick={() =>
          setFocusedDate(
            defaultDate
          )}
      >
        Reset focused
        date
      </button>
      <MyRangeCalendar
        focusedValue={focusedDate}
        onFocusChange={setFocusedDate}
      />
    </div>
  );
}

Disabled#

The isDisabled boolean prop makes the RangeCalendar disabled. Cells cannot be focused or selected.

<MyRangeCalendar aria-label="Trip dates" isDisabled />

<MyRangeCalendar aria-label="Trip dates" isDisabled />

<MyRangeCalendar
  aria-label="Trip dates"
  isDisabled
/>

Read only#

The isReadOnly boolean prop makes the RangeCalendar's value immutable. Unlike isDisabled, the RangeCalendar remains focusable.

<MyRangeCalendar
  aria-label="Trip dates"
  value={{
    start: today(getLocalTimeZone()),
    end: today(getLocalTimeZone()).add({ weeks: 1 })
  }}
  isReadOnly
/>

<MyRangeCalendar
  aria-label="Trip dates"
  value={{
    start: today(getLocalTimeZone()),
    end: today(getLocalTimeZone()).add({ weeks: 1 })
  }}
  isReadOnly
/>

<MyRangeCalendar
  aria-label="Trip dates"
  value={{
    start: today(
      getLocalTimeZone()
    ),
    end: today(
      getLocalTimeZone()
    ).add({
      weeks: 1
    })
  }}
  isReadOnly
/>

Error message#

RangeCalendar tries to avoid allowing the user to select invalid dates in the first place (see Validation and Unavailable dates above). However, if according to application logic a selected date range is invalid, the validationState prop can be set to "invalid". This alerts assistive technology users that the selection is invalid, and can be used for styling purposes as well. In addition, the errorMessage slot may be used to help the user fix the issue.

This example validates that the selected date range is a maximum of 1 week in duration.

import {today} from '@internationalized/date';

function Example() {
  let [range, setRange] = React.useState({
    start: today(getLocalTimeZone()),
    end: today(getLocalTimeZone()).add({ weeks: 1, days: 3 })
  });
  let isInvalid = range.end.compare(range.start) > 7;

  return (
    <MyRangeCalendar
      aria-label="Trip dates"
      value={range}
      onChange={setRange}
      validationState={isInvalid ? 'invalid' : 'valid'}
      errorMessage={isInvalid ? 'Maximum stay duration is 1 week' : undefined}
    />
  );
}

import {today} from '@internationalized/date';

function Example() {
  let [range, setRange] = React.useState({
    start: today(getLocalTimeZone()),
    end: today(getLocalTimeZone()).add({
      weeks: 1,
      days: 3
    })
  });
  let isInvalid = range.end.compare(range.start) > 7;

  return (
    <MyRangeCalendar
      aria-label="Trip dates"
      value={range}
      onChange={setRange}
      validationState={isInvalid ? 'invalid' : 'valid'}
      errorMessage={isInvalid
        ? 'Maximum stay duration is 1 week'
        : undefined}
    />
  );
}

import {today} from '@internationalized/date';

function Example() {
  let [range, setRange] =
    React.useState({
      start: today(
        getLocalTimeZone()
      ),
      end: today(
        getLocalTimeZone()
      ).add({
        weeks: 1,
        days: 3
      })
    });
  let isInvalid =
    range.end.compare(
      range.start
    ) > 7;

  return (
    <MyRangeCalendar
      aria-label="Trip dates"
      value={range}
      onChange={setRange}
      validationState={isInvalid
        ? 'invalid'
        : 'valid'}
      errorMessage={isInvalid
        ? 'Maximum stay duration is 1 week'
        : undefined}
    />
  );
}

Labeling#

An aria-label must be provided to the RangeCalendar for accessibility. If it is labeled by a separate element, an aria-labelledby prop must be provided using the id of the labeling element instead.

Internationalization#

In order to internationalize a RangeCalendar, a localized string should be passed to the aria-label prop. For languages that are read right-to-left (e.g. Hebrew and Arabic), keyboard navigation is automatically flipped. Ensure that your CSS accounts for this as well. Dates are automatically formatted using the current locale.

Advanced customization#

Composition#

If you need to customize one of the components within a RangeCalendar, such as CalendarGrid or CalendarCell, in many cases you can create a wrapper component. This lets you customize the props passed to the component.

function MyCalendarCell(props) {
  return <CalendarCell {...props} className="my-item" />
}

function MyCalendarCell(props) {
  return <CalendarCell {...props} className="my-item" />
}

function MyCalendarCell(
  props
) {
  return (
    <CalendarCell
      {...props}
      className="my-item"
    />
  );
}

Hooks#

If you need to customize things even further, such as accessing internal state or customizing DOM structure, you can drop down to the lower level Hook-based API. See useRangeCalendar for more details.

Represents an amount of time in calendar-specific units, for use when performing arithmetic.

Name	Type	Description
`years`	`number`	The number of years to add or subtract.
`months`	`number`	The number of months to add or subtract.
`weeks`	`number`	The number of weeks to add or subtract.
`days`	`number`	The number of days to add or subtract.

CalendarDate
  | CalendarDateTime
  | ZonedDateTime

A CalendarDate represents a date without any time components in a specific calendar system.

Properties

Name	Type	Description
`calendar`	`Calendar`	The calendar system associated with this date, e.g. Gregorian.
`era`	`string`	The calendar era for this date, e.g. "BC" or "AD".
`year`	`number`	The year of this date within the era.
`month`	`number`	The month number within the year. Note that some calendar systems such as Hebrew may have a variable number of months per year. Therefore, month numbers may not always correspond to the same month names in different years.
`day`	`number`	The day number within the month.

Methods

Method	Description
`constructor( (...args: any[] )): void`
`copy(): CalendarDate`	Returns a copy of this date.
`add( (duration: DateDuration )): CalendarDate`	Returns a new `CalendarDate` with the given duration added to it.
`subtract( (duration: DateDuration )): CalendarDate`	Returns a new `CalendarDate` with the given duration subtracted from it.
`set( (fields: DateFields )): CalendarDate`	Returns a new `CalendarDate` with the given fields set to the provided values. Other fields will be constrained accordingly.
`cycle( field: DateField, amount: number, options?: CycleOptions ): CalendarDate`	Returns a new `CalendarDate` with the given field adjusted by a specified amount. When the resulting value reaches the limits of the field, it wraps around.
`toDate( (timeZone: string )): Date`	Converts the date to a native JavaScript Date object, with the time set to midnight in the given time zone.
`toString(): string`	Converts the date to an ISO 8601 formatted string.
`compare( (b: AnyCalendarDate )): number`	Compares this date with another. A negative result indicates that this date is before the given one, and a positive date indicates that it is after.

A CalendarDateTime represents a date and time without a time zone, in a specific calendar system.

Properties

Name	Type	Description
`calendar`	`Calendar`	The calendar system associated with this date, e.g. Gregorian.
`era`	`string`	The calendar era for this date, e.g. "BC" or "AD".
`year`	`number`	The year of this date within the era.
`month`	`number`	The month number within the year. Note that some calendar systems such as Hebrew may have a variable number of months per year. Therefore, month numbers may not always correspond to the same month names in different years.
`day`	`number`	The day number within the month.
`hour`	`number`	The hour in the day, numbered from 0 to 23.
`minute`	`number`	The minute in the hour.
`second`	`number`	The second in the minute.
`millisecond`	`number`	The millisecond in the second.

Methods

Method	Description
`constructor( (...args: any[] )): void`
`copy(): CalendarDateTime`	Returns a copy of this date.
`add( (duration: DateTimeDuration )): CalendarDateTime`	Returns a new `CalendarDateTime` with the given duration added to it.
`subtract( (duration: DateTimeDuration )): CalendarDateTime`	Returns a new `CalendarDateTime` with the given duration subtracted from it.
`set( (fields: DateFields & & TimeFields )): CalendarDateTime`	Returns a new `CalendarDateTime` with the given fields set to the provided values. Other fields will be constrained accordingly.
`cycle( field: DateField \| \| TimeField, amount: number, options?: CycleTimeOptions ): CalendarDateTime`	Returns a new `CalendarDateTime` with the given field adjusted by a specified amount. When the resulting value reaches the limits of the field, it wraps around.
`toDate( (timeZone: string, , disambiguation?: Disambiguation )): Date`	Converts the date to a native JavaScript Date object in the given time zone.
`toString(): string`	Converts the date to an ISO 8601 formatted string.
`compare( (b: CalendarDate \| CalendarDateTime \| ZonedDateTime )): number`	Compares this date with another. A negative result indicates that this date is before the given one, and a positive date indicates that it is after.

A ZonedDateTime represents a date and time in a specific time zone and calendar system.

Properties

Name	Type	Description
`calendar`	`Calendar`	The calendar system associated with this date, e.g. Gregorian.
`era`	`string`	The calendar era for this date, e.g. "BC" or "AD".
`year`	`number`	The year of this date within the era.
`month`	`number`	The month number within the year. Note that some calendar systems such as Hebrew may have a variable number of months per year. Therefore, month numbers may not always correspond to the same month names in different years.
`day`	`number`	The day number within the month.
`hour`	`number`	The hour in the day, numbered from 0 to 23.
`minute`	`number`	The minute in the hour.
`second`	`number`	The second in the minute.
`millisecond`	`number`	The millisecond in the second.
`timeZone`	`string`	The IANA time zone identifier that this date and time is represented in.
`offset`	`number`	The UTC offset for this time, in milliseconds.

Methods

Method	Description
`constructor( (...args: any[] )): void`
`copy(): ZonedDateTime`	Returns a copy of this date.
`add( (duration: DateTimeDuration )): void`	Returns a new `ZonedDateTime` with the given duration added to it.
`subtract( (duration: DateTimeDuration )): void`	Returns a new `ZonedDateTime` with the given duration subtracted from it.
`set( (fields: DateFields & & TimeFields, , disambiguation?: Disambiguation )): void`	Returns a new `ZonedDateTime` with the given fields set to the provided values. Other fields will be constrained accordingly.
`cycle( field: DateField \| \| TimeField, amount: number, options?: CycleTimeOptions ): void`	Returns a new `ZonedDateTime` with the given field adjusted by a specified amount. When the resulting value reaches the limits of the field, it wraps around.
`toDate(): void`	Converts the date to a native JavaScript Date object.
`toString(): void`	Converts the date to an ISO 8601 formatted string, including the UTC offset and time zone identifier.
`toAbsoluteString(): void`	Converts the date to an ISO 8601 formatted string in UTC.
`compare( (b: CalendarDate \| CalendarDateTime \| ZonedDateTime )): void`	Compares this date with another. A negative result indicates that this date is before the given one, and a positive date indicates that it is after.

'valid' | 'invalid'

'single' | 'visible'

Name	Type	Description
`start`	`T`	The start value of the range.
`end`	`T`	The end value of the range.

Name	Type	Description
`state`	`RangeCalendarState`	State of the range calendar.
`isDisabled`	`boolean`	Whether the calendar is disabled.
`validationState`	`ValidationState`	Validation state of the date field.

Properties

Name	Type	Description
`value`	`RangeValue<DateValue>`	The currently selected date range.
`anchorDate`	`CalendarDate \| null`	The current anchor date that the user clicked on to begin range selection.
`highlightedRange`	`RangeValue<CalendarDate>`	The currently highlighted date range.
`isDragging`	`boolean`	Whether the user is currently dragging over the calendar.
`isDisabled`	`boolean`	Whether the calendar is disabled.
`isReadOnly`	`boolean`	Whether the calendar is in a read only state.
`visibleRange`	`RangeValue<CalendarDate>`	The date range that is currently visible in the calendar.
`timeZone`	`string`	The time zone of the dates currently being displayed.
`validationState`	`ValidationState`	The current validation state of the selected value.
`focusedDate`	`CalendarDate`	The currently focused date.
`isFocused`	`boolean`	Whether focus is currently within the calendar.
`minValue`	`DateValue`	The minimum allowed date that a user may select.
`maxValue`	`DateValue`	The maximum allowed date that a user may select.

Methods

Method	Description
`setValue( (value: RangeValue<DateValue> )): void`	Sets the currently selected date range.
`highlightDate( (date: CalendarDate )): void`	Highlights the given date during selection, e.g. by hovering or dragging.
`setAnchorDate( (date: CalendarDate \| \| null )): void`	Sets the anchor date that the user clicked on to begin range selection.
`setDragging( (isDragging: boolean )): void`	Sets whether the user is dragging over the calendar.
`setFocusedDate( (value: CalendarDate )): void`	Sets the focused date.
`focusNextDay(): void`	Moves focus to the next calendar date.
`focusPreviousDay(): void`	Moves focus to the previous calendar date.
`focusNextRow(): void`	Moves focus to the next row of dates, e.g. the next week.
`focusPreviousRow(): void`	Moves focus to the previous row of dates, e.g. the previous work.
`focusNextPage(): void`	Moves focus to the next page of dates, e.g. the next month if one month is visible.
`focusPreviousPage(): void`	Moves focus to the previous page of dates, e.g. the previous month if one month is visible.
`focusSectionStart(): void`	Moves focus to the start of the current section of dates, e.g. the start of the current month.
`focusSectionEnd(): void`	Moves focus to the end of the current section of dates, e.g. the end of the current month month.
`focusNextSection( (larger?: boolean )): void`	Moves focus to the next section of dates based on what is currently displayed. By default, focus is moved by one of the currently displayed unit. For example, if one or more months are displayed, then focus is moved forward by one month. If the `larger` option is `true`, the focus is moved by the next larger unit than the one displayed. For example, if months are displayed, then focus moves to the next year.
`focusPreviousSection( (larger?: boolean )): void`	Moves focus to the previous section of dates based on what is currently displayed. By default, focus is moved by one of the currently displayed unit. For example, if one or more months are displayed, then focus is moved backward by one month. If the `larger` option is `true`, the focus is moved by the next larger unit than the one displayed. For example, if months are displayed, then focus moves to the previous year.
`selectFocusedDate(): void`	Selects the currently focused date.
`selectDate( (date: CalendarDate )): void`	Selects the given date.
`setFocused( (value: boolean )): void`	Sets whether focus is currently within the calendar.
`isInvalid( (date: CalendarDate )): boolean`	Returns whether the given date is invalid according to the `minValue` and `maxValue` props.
`isSelected( (date: CalendarDate )): boolean`	Returns whether the given date is currently selected.
`isCellFocused( (date: CalendarDate )): boolean`	Returns whether the given date is currently focused.
`isCellDisabled( (date: CalendarDate )): boolean`	Returns whether the given date is disabled according to the `minValue,`maxValue`, and`isDisabled` props.
`isCellUnavailable( (date: CalendarDate )): boolean`	Returns whether the given date is unavailable according to the `isDateUnavailable` prop.
`isPreviousVisibleRangeInvalid(): boolean`	Returns whether the previous visible date range is allowed to be selected according to the `minValue` prop.
`isNextVisibleRangeInvalid(): boolean`	Returns whether the next visible date range is allowed to be selected according to the `maxValue` prop.
`getDatesInWeek( (weekIndex: number, , startDate?: CalendarDate )): Array<CalendarDate \| null>`	Returns an array of dates in the week index counted from the provided start date, or the first visible date if not given. The returned array always has 7 elements, but may include null if the date does not exist according to the calendar system.

DateValue extends ZonedDateTime ? ZonedDateTime :
DateValue extends CalendarDateTime ? CalendarDateTime :
DateValue extends CalendarDate ? CalendarDate : never

Name	Type	Description
`isHovered`	`boolean`	Whether the button is currently hovered with a mouse.
`isPressed`	`boolean`	Whether the button is currently in a pressed state.
`isFocused`	`boolean`	Whether the button is focused, either via a mouse or keyboard.
`isFocusVisible`	`boolean`	Whether the button is keyboard focused.
`isDisabled`	`boolean`	Whether the button is disabled.

Properties

Name	Type	Description
`type`	`'pressstart' \| 'pressend' \| 'pressup' \| 'press'`	The type of press event being fired.
`pointerType`	`PointerType`	The pointer type that triggered the press event.
`target`	`Element`	The target element of the press event.
`shiftKey`	`boolean`	Whether the shift keyboard modifier was held during the press event.
`ctrlKey`	`boolean`	Whether the ctrl keyboard modifier was held during the press event.
`metaKey`	`boolean`	Whether the meta keyboard modifier was held during the press event.
`altKey`	`boolean`	Whether the alt keyboard modifier was held during the press event.

Methods

Method	Description
`continuePropagation(): void`	By default, press events stop propagation to parent elements. In cases where a handler decides not to handle a specific event, it can call `continuePropagation()` to allow a parent to handle it.

'mouse'
  | 'pen'
  | 'touch'
  | 'keyboard'
  | 'virtual'

BaseEvent<ReactKeyboardEvent<any>>

SyntheticEvent & {stopPropagation: () => void,
continuePropagation: () => void
}

Name	Type	Description
`date`	`CalendarDate`	The date that the cell represents.
`formattedDate`	`string`	The day number formatted according to the current locale.
`isHovered`	`boolean`	Whether the cell is currently hovered with a mouse.
`isPressed`	`boolean`	Whether the cell is currently being pressed.
`isSelected`	`boolean`	Whether the cell is selected.
`isSelectionStart`	`boolean`	Whether the cell is the first date in a range selection.
`isSelectionEnd`	`boolean`	Whether the cell is the last date in a range selection.
`isFocused`	`boolean`	Whether the cell is focused.
`isFocusVisible`	`boolean`	Whether the cell is keyboard focused.
`isDisabled`	`boolean`	Whether the cell is disabled, according to the calendar's `minValue`, `maxValue`, and `isDisabled` props. Disabled dates are not focusable, and cannot be selected by the user. They are typically displayed with a dimmed appearance.
`isOutsideVisibleRange`	`boolean`	Whether the cell is outside the visible range of the calendar. For example, dates before the first day of a month in the same week.
`isOutsideMonth`	`boolean`	Whether the cell is outside the current month.
`isUnavailable`	`boolean`	Whether the cell is unavailable, according to the calendar's `isDateUnavailable` prop. Unavailable dates remain focusable, but cannot be selected by the user. They should be displayed with a visual affordance to indicate they are unavailable, such as a different color or a strikethrough. Note that because they are focusable, unavailable dates must meet a 4.5:1 color contrast ratio, as defined by WCAG.
`isInvalid`	`boolean`	Whether the cell is part of an invalid selection.