104Get started
HextaUI

Calendar: Bounded

Navigation stops at startMonth and endMonth, and disabled blocks days outside the window. useToday() gives a today that is safe to use during server rendering.

October 2026
Bookable for the next 45 days.
"use client"

import { addDays, startOfMonth } from "date-fns"

import { Calendar } from "@/components/ui/calendar"
import { useToday } from "@/hooks/use-today"

export function CalendarBounded() {
  const today = useToday()
  const last = today && addDays(today, 45)

  return (
    <div className="w-fit max-w-full overflow-x-auto rounded-xl border">
      <Calendar
        mode="single"
        startMonth={today && startOfMonth(today)}
        endMonth={last && startOfMonth(last)}
        disabled={
          today && last ? [{ before: today }, { after: last }] : undefined
        }
        footer="Bookable for the next 45 days."
      />
    </div>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/calendar-bounded.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"–
disabled
Matcher | Matcher[]–
startMonth
Date–
endMonth
Date–
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