Calendar [react-aria-components]

Component 11

About

A calendar displays one or more date grids and allows users to select a single date. There is no standalone calendar element in HTML. <input type="date">is close, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. Calendar helps achieve accessible and international 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 Calendar [react-aria-components] to your project and fits it to your theme.

Code

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

Usage.tsx

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

export function CalendarDemo() {
  return (
    <Calendar aria-label="Appointment date" 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>
    </Calendar>
  )
}