# 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.

Example: https://hextaui.com/docs/calendar/examples/bounded
Component docs: https://hextaui.com/docs/calendar.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/calendar-bounded.json
```

This adds `components/examples/calendar/bounded.tsx` with the Calendar component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/calendar/bounded.tsx"
"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>
  )
}
```

## Props in this example

### Calendar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `mode` | `"single" \| "multiple" \| "range"` | – | Without a mode, days are not selectable. |
| `disabled` | `Matcher \| Matcher[]` | – |  |
| `startMonth` | `Date` | – |  |
| `endMonth` | `Date` | – |  |
| `footer` | `ReactNode` | – |  |

## More Calendar examples

- [Range](https://hextaui.com/docs/calendar/examples/range.md)
- [Range limits](https://hextaui.com/docs/calendar/examples/range-limits.md)
- [Multiple](https://hextaui.com/docs/calendar/examples/multiple.md)
- [Month and year dropdowns](https://hextaui.com/docs/calendar/examples/dropdowns.md)
- [Controlled month](https://hextaui.com/docs/calendar/examples/controlled.md)
- [Week numbers](https://hextaui.com/docs/calendar/examples/week-numbers.md)
- [Fixed today](https://hextaui.com/docs/calendar/examples/fixed-today.md)
- [Inside a sheet](https://hextaui.com/docs/calendar/examples/sheet.md)
- [Right to left](https://hextaui.com/docs/calendar/examples/rtl.md)