# Calendar: Range

> With `mode="range"`, after the first click hovering or focusing a day previews the range the next click will select. `numberOfMonths` shows months side by side, stacked on narrow screens.

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

## Add this example

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

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

## Source

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

import * as React from "react"
import { format } from "date-fns"
import type { DateRange } from "react-day-picker"

import { Calendar } from "@/components/ui/calendar"

export function CalendarRange() {
  const [range, setRange] = React.useState<DateRange>()

  return (
    <div className="max-w-full overflow-x-auto rounded-xl border">
      <Calendar
        mode="range"
        numberOfMonths={2}
        selected={range}
        onSelect={setRange}
        footer={
          range?.from && range.to
            ? `${format(range.from, "PP")} – ${format(range.to, "PP")}`
            : range?.from
              ? "Pick an end date."
              : "Pick a start date."
        }
      />
    </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` | – |  |
| `numberOfMonths` | `number` | `1` |  |
| `footer` | `ReactNode` | – |  |

## More Calendar examples

- [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)
- [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)