HeroUI Calendar

HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, multiple months, booking example and custom styles.

HUby Hero Ui

Install

npx @21st-dev/cli@beta add hero_ui/heroui-calendar

Loading preview...

"use client"

import { I18nProvider } from "react-aria-components"

import Calendar from "@/components/ui/heroui-calendar"

export default function MultipleMonths() {
  return (
    <I18nProvider locale="en-US">
      <Calendar
        aria-label="Trip dates"
        className="@container-normal w-full max-w-none overflow-x-auto"
        visibleDuration={{ months: 2 }}
      >
        <div className="mx-auto flex w-max gap-8">
          <div className="w-64">
            <Calendar.Header>
              <Calendar.NavButton slot="previous" />
              <Calendar.Heading className="flex-none" />
              <div className="size-6" />
            </Calendar.Header>
            <Calendar.Grid>
              <Calendar.GridHeader>
                {(day) => <Calendar.HeaderCell>{day}</Calendar.HeaderCell>}
              </Calendar.GridHeader>
              <Calendar.GridBody>{(date) => <Calendar.Cell date={date} />}</Calendar.GridBody>
            </Calendar.Grid>
          </div>
          <div className="w-64">
            <Calendar.Header>
              <div className="size-6" />
              <Calendar.Heading className="flex-none" offset={{ months: 1 }} />
              <Calendar.NavButton slot="next" />
            </Calendar.Header>
            <Calendar.Grid offset={{ months: 1 }}>
              <Calendar.GridHeader>
                {(day) => <Calendar.HeaderCell>{day}</Calendar.HeaderCell>}
              </Calendar.GridHeader>
              <Calendar.GridBody>{(date) => <Calendar.Cell date={date} />}</Calendar.GridBody>
            </Calendar.Grid>
          </div>
        </div>
      </Calendar>
    </I18nProvider>
  )
}