104Get started
HextaUI

Calendar: Multiple

mode="multiple" toggles individual days. max caps how many can be selected.

October 2026
Pick up to five days.
import { Calendar } from "@/components/ui/calendar"

export function CalendarMultiple() {
  return (
    <div className="w-fit max-w-full overflow-x-auto rounded-xl border">
      <Calendar mode="multiple" max={5} footer="Pick up to five days." />
    </div>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/calendar-multiple.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"–
maxMaximum days in a range, or selected in multiple mode.
number–
footer
ReactNode–

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