104Get started
HextaUI

Calendar: Range limits

min and max limit the range length in days. With excludeDisabled, a range that would include a disabled day starts over instead.

October 2026
Weekdays only, 2–7 days.
import { Calendar } from "@/components/ui/calendar"

export function CalendarRangeLimits() {
  return (
    <div className="w-fit max-w-full overflow-x-auto rounded-xl border">
      <Calendar
        mode="range"
        min={2}
        max={7}
        disabled={{ dayOfWeek: [0, 6] }}
        excludeDisabled
        footer="Weekdays only, 2–7 days."
      />
    </div>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/calendar-range-limits.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"–
minMinimum days in a range, or selected in multiple mode.
number–
maxMaximum days in a range, or selected in multiple mode.
number–
excludeDisabledRange mode.
boolean–
disabled
Matcher | Matcher[]–
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