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 CustomIcons() {
  return (
    <I18nProvider locale="en-US">
      <Calendar aria-label="Event date">
        <Calendar.Header>
          <Calendar.Heading />
          <Calendar.NavButton slot="previous">
            <svg height={24} viewBox="0 0 24 24" width={24} xmlns="http://www.w3.org/2000/svg">
              <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6l6 6z" fill="currentColor" />
            </svg>
          </Calendar.NavButton>
          <Calendar.NavButton slot="next">
            <svg height={24} viewBox="0 0 24 24" width={24} xmlns="http://www.w3.org/2000/svg">
              <path d="M8.59 16.59L13.17 12L8.59 7.41L10 6l6 6l-6 6z" fill="currentColor" />
            </svg>
          </Calendar.NavButton>
        </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>
      </Calendar>
    </I18nProvider>
  )
}