Calendar

Overview

Calendar is a date grid with keyboard-navigable cells, usable on its own wherever an inline calendar is needed — no popover, no text field. DatePicker renders this same component inside its popover, so the two always look and behave identically.

import { Calendar } from '@chassis-ui/react'

export const Example = () => {
  return <Calendar aria-label="Event date" />
}

Min & max dates

Restrict the selectable range with minValue/maxValue. Dates outside the range are shown but disabled.

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

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

  return <Calendar aria-label="Appointment date" maxValue={now.add({ days: 30 })} minValue={now} />
}

Unavailable dates

Pass isDateUnavailable to mark specific dates as unselectable without excluding them from the grid — useful for booked dates, holidays, or (as below, using @internationalized/date's locale-aware isWeekend) weekends. Unavailable dates remain focusable so screen reader users can discover why they can't be picked.

import { Calendar } from '@chassis-ui/react'
import { isWeekend } from '@internationalized/date'

export const Example = () => {
  return (
    <Calendar
      aria-label="Appointment date"
      isDateUnavailable={(date) => isWeekend(date, 'en-US')}
    />
  )
}

From a list of dates

For data-driven cases — booked dates fetched from an API, say — pass unavailableDates instead: a plain array of ISO 8601 (YYYY-MM-DD) strings. It composes with isDateUnavailable when both are given; a date unavailable by either is unavailable.

import { Calendar } 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 }), now.add({ days: 9 })].map(
    (date) => date.toString()
  )

  return <Calendar aria-label="Appointment date" unavailableDates={unavailableDates} />
}

Weekend styling

Saturday/Sunday (or whichever days the active locale considers the weekend — determined via @internationalized/date's isWeekend) are shown muted automatically, no prop required. This is purely visual — weekends stay selectable unless also marked unavailable. Every example on this page shows it. See Internationalization for how the active locale is set.

Navigation

Calendar shows month and year <select>s next to the prev/next buttons, for jumping further than one page at a time.

First day of week

The week starts on Monday by default, regardless of the active locale. Pass firstDayOfWeek to override it — 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', or 'sat'.

import { Calendar } from '@chassis-ui/react'

export const Example = () => {
  return <Calendar aria-label="Event date" firstDayOfWeek="sun" />
}

Multiple dates

Pass selectionMode="multiple" to select any number of independent dates instead of one — clicking a date toggles it on or off, and value/defaultValue/onChange switch from a single date to an array of dates. Unlike RangeCalendar, the selected dates don't need to be contiguous.

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

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

  return (
    <Calendar
      aria-label="Event dates"
      defaultValue={[now, now.add({ days: 5 }), now.add({ days: 12 })]}
      selectionMode="multiple"
    />
  )
}

Multiple months

Pass visibleMonths to show more than one month side by side, sharing one selection — independent of selectionMode, so it works the same with a single selected date or several. Each month gets its own header with its own month/year dropdowns, kept in sync. 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.

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

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

  return <Calendar aria-label="Event date" defaultValue={now} visibleMonths={2} />
}

Styling

Like DatePicker, Calendar isn't styled by @chassis-ui/css — chassis-css's own datepicker styling is built entirely around Vanilla Calendar Pro's specific DOM output, which React Aria's calendar hooks don't produce. Calendar instead ships its own scoped CSS (built on @chassis-ui/tokens' public design tokens, so it still matches the current theme and light/dark mode) in @chassis-ui/react/style.css, which an app imports once (see Theming).

Accessibility

Calendar has no visible label of its own — pass aria-label or aria-labelledby any time it's used standalone (as in every example above). When composed inside DatePicker's popover, the accessible name instead comes from the picker's own label.

Scope

• Contiguous ranges — Calendar selects independent dates or none at all; for a start/end range, see RangeCalendar.

API

Calendar