# Calendar

A strict, minimalist date picker with dropdown navigation.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



A date picker interface built on [react-day-picker](https://daypicker.dev). Stripped of border-radius to align with the Monolith architectural grid. Month and year are selectable via dropdown by default.



<ComponentPreview name="calendar-demo">
  <div className="flex justify-center py-8 max-w-sm mx-auto w-full">
    <div className="border border-input">
      <Calendar mode="single" />
    </div>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/calendar.json"
```

## Usage [#usage]

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

```tsx
const [date, setDate] = React.useState<Date | undefined>(new Date())

<Calendar mode="single" selected={date} onSelect={setDate} />
```

## Examples [#examples]

### Single Date [#single-date]

Select a single date. This is the default preview above.

<ComponentPreview name="calendar-demo">
  <div className="flex justify-center py-8 max-w-sm mx-auto w-full">
    <div className="border border-input">
      <Calendar mode="single" />
    </div>
  </div>
</ComponentPreview>

### Range Selection [#range-selection]

Select a start and end date. Useful for booking flows or date filtering.

<ComponentPreview name="calendar-range">
  <div className="flex justify-center py-8 max-w-sm mx-auto w-full">
    <div className="border border-input">
      <Calendar mode="range" />
    </div>
  </div>
</ComponentPreview>

### Multiple Dates [#multiple-dates]

Select multiple individual dates.

<ComponentPreview name="calendar-multiple">
  <div className="flex justify-center py-8 max-w-sm mx-auto w-full">
    <div className="border border-input">
      <Calendar mode="multiple" />
    </div>
  </div>
</ComponentPreview>

### Disabled Dates [#disabled-dates]

Disable specific dates, date ranges, or days of the week.

<ComponentPreview name="calendar-disabled">
  <div className="flex justify-center py-8 max-w-sm mx-auto w-full">
    <div className="border border-input">
      <Calendar
        mode="single"
        disabled="[
        { dayOfWeek: [0, 6] },
        { before: new Date() },
      ]"
      />
    </div>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `Calendar` component wraps `react-day-picker` with Monolith styling and sensible defaults.

| Prop              | Type             | Default              | Description                                       |                                                                             |                                     |
| ----------------- | ---------------- | -------------------- | ------------------------------------------------- | --------------------------------------------------------------------------- | ----------------------------------- |
| `mode`            | \`"single"       | "multiple"           | "range"\`                                         | —                                                                           | The selection mode of the calendar. |
| `selected`        | \`Date           | Date\[]              | DateRange\`                                       | —                                                                           | The currently selected date(s).     |
| `onSelect`        | `(date) => void` | —                    | Callback when a date is selected.                 |                                                                             |                                     |
| `captionLayout`   | \`"label"        | "dropdown"\`         | `"dropdown"`                                      | Controls whether month/year are displayed as text or interactive dropdowns. |                                     |
| `startMonth`      | `Date`           | `new Date(1950, 0)`  | The earliest month available in the dropdown.     |                                                                             |                                     |
| `endMonth`        | `Date`           | `new Date(2050, 11)` | The latest month available in the dropdown.       |                                                                             |                                     |
| `disabled`        | \`Matcher        | Matcher\[]\`         | —                                                 | Dates or patterns to disable (e.g. `{'{ dayOfWeek: [0, 6] }'}`).            |                                     |
| `showOutsideDays` | `boolean`        | `true`               | Show dates from adjacent months to fill the grid. |                                                                             |                                     |