104Get started
HextaUI

Calendar: Month and year dropdowns

captionLayout="dropdown" replaces the caption with native selects, so phones get their own picker. Set startMonth and endMonth to bound the years.

June 1995
import { Calendar } from "@/components/ui/calendar"

export function CalendarDropdowns() {
  return (
    <div className="w-fit max-w-full overflow-x-auto rounded-xl border">
      <Calendar
        mode="single"
        captionLayout="dropdown"
        startMonth={new Date(1940, 0)}
        endMonth={new Date(2035, 11)}
        defaultMonth={new Date(1995, 5)}
      />
    </div>
  )
}

Add this example

This adds the example as components/examples/calendar/dropdowns.tsx, together with the Calendar component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/calendar-dropdowns.json

To add only the component, follow the Calendar installation.

Props in this example

The Calendar props this example sets, from the API reference.

Calendar

PropTypeDefault
modeWithout a mode, days are not selectable.
"single" | "multiple" | "range"–
defaultMonth
Date–
startMonth
Date–
endMonth
Date–
captionLayout
"label" | "dropdown" | "dropdown-months" | "dropdown-years""label"

Every prop is in the Calendar API reference.

More Calendar examples

See them all, with keyboard support and accessibility notes, on the Calendar page.

Related components