Range Calendar

Overview

RangeCalendar is the range-selection counterpart to Calendar — click a start date, then an end date, to select a contiguous range. Hovering (or dragging) between the two previews the range before it's committed. DateRangePicker renders this same component inside its popover, the same way DatePicker renders Calendar.

import { RangeCalendar } from '@chassis-ui/react'
import { CalendarDate } from '@internationalized/date'

export const Example = () => {
  return (
    <RangeCalendar
      aria-label="Trip dates"
      defaultValue={{ start: new CalendarDate(2026, 7, 10), end: new CalendarDate(2026, 7, 15) }}
    />
  )
}

Min and max dates

Restrict the selectable range with minValue/maxValue, same as Calendar. Dates outside the range are shown but disabled, and can't start or extend a selection.

import { RangeCalendar } from '@chassis-ui/react'
import { today, getLocalTimeZone } from '@internationalized/date'

export const Example = () => {
  const now = today(getLocalTimeZone())

  return (
    <RangeCalendar
      aria-label="Trip dates"
      defaultValue={{ start: now, end: now.add({ days: 3 }) }}
      maxValue={now.add({ days: 30 })}
      minValue={now}
    />
  )
}

Unavailable dates

isDateUnavailable and the JSON-friendly unavailableDates (an array of ISO 8601 YYYY-MM-DD strings) work exactly as they do on Calendar, composing when both are given. An unavailable date can't be picked as either endpoint.

import { RangeCalendar } from '@chassis-ui/react'
import { today, getLocalTimeZone } from '@internationalized/date'

export const Example = () => {
  const now = today(getLocalTimeZone())
  const unavailableDates = [now.add({ days: 2 }), now.add({ days: 5 })].map((date) =>
    date.toString()
  )

  return (
    <RangeCalendar
      aria-label="Trip dates"
      defaultValue={{ start: now.add({ days: 3 }), end: now.add({ days: 4 }) }}
      unavailableDates={unavailableDates}
    />
  )
}

Weekend styling

Weekends are shown muted automatically, same as Calendar — locale-aware, no prop required. See Internationalization for how the active locale is set.

Navigation

Navigation is always month/year dropdowns — there's no plain arrows-only variant to choose between, since a range picker is usually paired with visibleMonths > 1, where jumping several months or years at once is the common case.

First day of week

Same firstDayOfWeek prop as Calendar — the week starts on Monday by default, regardless of the active locale. When visibleMonths > 1, it applies consistently across every visible month.

import { RangeCalendar } from '@chassis-ui/react'
import { CalendarDate } from '@internationalized/date'

export const Example = () => {
  return (
    <RangeCalendar
      aria-label="Trip dates"
      defaultValue={{ start: new CalendarDate(2026, 7, 10), end: new CalendarDate(2026, 7, 15) }}
      firstDayOfWeek="sun"
    />
  )
}

Multiple months

Pass visibleMonths to show more than one month side by side, sharing a single selection — the standard layout for picking a date range. Each month gets its own header with its own month/year dropdowns, kept in sync — picking a month or year from any one of them moves every visible month together. The prev/next buttons move to a single global overlay instead of repeating in every month's header, paging the whole visible span at once. The months wrap onto a new row if their container is too narrow to fit them side by side (driven by the calendar's own width, not the viewport).

import { RangeCalendar } from '@chassis-ui/react'
import { today, getLocalTimeZone } from '@internationalized/date'

export const Example = () => {
  const now = today(getLocalTimeZone())

  return (
    <RangeCalendar
      aria-label="Trip dates"
      defaultValue={{ start: now, end: now.add({ days: 10 }) }}
      visibleMonths={2}
    />
  )
}

Presets

Pass presets — an array of { label, range } entries (see DateRangePreset below) — to show a quick-select list next to the calendar. Selecting a preset commits its range immediately, the same as picking a start and end date from the grid. A preset the calendar couldn't select is disabled: one with no day inside minValue/maxValue, and one with an unavailable day in its range, which a range can't span. The preset matching the current selection (if any) is shown as the active one.

import { RangeCalendar } from '@chassis-ui/react'
import { getLocalTimeZone, startOfMonth, startOfWeek, today } from '@internationalized/date'

export const Example = () => {
  const now = today(getLocalTimeZone())

  const thisWeekStart = startOfWeek(now, 'en-US')
  const lastWeekEnd = thisWeekStart.subtract({ days: 1 })
  const lastWeekStart = startOfWeek(lastWeekEnd, 'en-US')

  const thisMonthStart = startOfMonth(now)
  const lastMonthEnd = thisMonthStart.subtract({ days: 1 })
  const lastMonthStart = startOfMonth(lastMonthEnd)

  const presets = [
    { label: 'Today', range: { start: now, end: now } },
    { label: 'Last 7 Days', range: { start: now.subtract({ days: 6 }), end: now } },
    { label: 'Last 30 Days', range: { start: now.subtract({ days: 29 }), end: now } },
    { label: 'Last 90 Days', range: { start: now.subtract({ days: 89 }), end: now } },
    { label: 'Last Week', range: { start: lastWeekStart, end: lastWeekEnd } },
    { label: 'Last Month', range: { start: lastMonthStart, end: lastMonthEnd } }
  ]

  return (
    <RangeCalendar
      aria-label="Trip dates"
      defaultValue={presets[1].range}
      presets={presets}
      visibleMonths={2}
    />
  )
}

Accessible name

RangeCalendar has no visible label of its own — pass aria-label or aria-labelledby any time it's used standalone. When composed inside DateRangePicker's popover, the accessible name instead comes from the picker's own label.

Styling

Like Calendar, RangeCalendar isn't styled by @chassis-ui/css. It reuses Calendar.scss's header/nav/grid/cell classes directly (so the two always look identical outside of an active selection), adding only the sm amount of CSS needed for the connected "pill" band across a selected or previewed range, and for the multi-month layout (.datepicker-grid/.datepicker-column/.datepicker-controls, the same classes @chassis-ui/css's own datepicker component uses for side-by-side month grids with a shared prev/next pair) — in @chassis-ui/react/style.css, which an app imports once (see Theming).

Scope

• Contiguous ranges only — allowsNonContiguousRanges (a react-aria option for ranges that may skip over unavailable dates) isn't exposed.

API

RangeCalendar

DateRangePreset

Shape of each entry in the presets array.