Range Calendar [react-aria-components]

Component 38

About

A RangeCalendar displays a calendar interface that allows users to select a range of dates. 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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Range Calendar [react-aria-components] to your project and fits it to your theme.

Code

How Range Calendar [react-aria-components] is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  CalendarCell,
  CalendarGrid,
  CalendarGridBody,
  CalendarGridHeader,
  CalendarHeaderCell,
  CalendarHeading,
  RangeCalendar,
} from "@/components/ui/range-calendar"

export function RangeCalendarDemo() {
  return (
    <RangeCalendar aria-label="Trip dates" className="bg-background rounded-lg px-2 py-3 border">
      <CalendarHeading />
      <CalendarGrid>
        <CalendarGridHeader>
          {(day) => <CalendarHeaderCell>{day}</CalendarHeaderCell>}
        </CalendarGridHeader>
        <CalendarGridBody>
          {(date) => <CalendarCell date={date} />}
        </CalendarGridBody>
      </CalendarGrid>
    </RangeCalendar>
  )
}