# Calendar: Controlled month

> Pass `month` and `onMonthChange` to drive the visible month. Jumps slide in the direction of travel and the height eases between 5 and 6 week rows.

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

## Add this example

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

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

## Source

```tsx title="components/examples/calendar/controlled.tsx"
"use client"

import * as React from "react"

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

export function CalendarControlled() {
  const today = useToday()
  const [month, setMonth] = React.useState<Date>()
  const [date, setDate] = React.useState<Date>()
  const shown = month ?? today

  return (
    <div className="flex max-w-full min-w-0 flex-col items-center gap-3">
      <div className="w-fit max-w-full overflow-x-auto rounded-xl border">
        <Calendar
          mode="single"
          month={shown}
          onMonthChange={setMonth}
          selected={date}
          onSelect={setDate}
        />
      </div>
      <div className="flex gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => {
            const now = new Date()
            setMonth(now)
            setDate(now)
          }}
        >
          Today
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={() => {
            const base = shown ?? new Date()
            setMonth(new Date(base.getFullYear() + 1, base.getMonth()))
          }}
        >
          Next year
        </Button>
      </div>
    </div>
  )
}
```

## Props in this example

### Calendar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `mode` | `"single" \| "multiple" \| "range"` | – | Without a mode, days are not selectable. |
| `selected` | `Date \| Date[] \| DateRange` | – | Matches the mode. |
| `onSelect` | `(selected, triggerDate, modifiers, event) => void` | – |  |
| `month` | `Date` | – | Controlled month. |
| `onMonthChange` | `(month: Date) => void` | – |  |

## 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)
- [Bounded](https://hextaui.com/docs/calendar/examples/bounded.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)