# Calendar

> Date and range selection (react-day-picker).

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/calendar.json`

## Install

```tsx
import { Calendar } from "@aspyn-io/kit";
```

### Single date

Month and year dropdowns are built in, so you can jump to any date without clicking through the nav arrows.

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

<Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
```

### Date picker (Popover composition)

The standard date-picker pattern: a Calendar inside a Popover.

```tsx
<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger asChild>
    <Button variant="outline" className="w-56 justify-start font-normal">
      <CalendarIcon />
      {date ? format(date) : "Pick a date"}
    </Button>
  </PopoverTrigger>
  <PopoverContent className="w-auto p-0">
    <Calendar mode="single" selected={date} onSelect={(d) => { setDate(d); setOpen(false); }} />
  </PopoverContent>
</Popover>
```

### Range selection

```tsx
<Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />
```

### Disabled & constrained dates

disabled takes any react-day-picker Matcher or array of them, so you can mix min/max bounds, day-of-week patterns, specific blackout dates, and predicates. Disabled days are also unselectable via keyboard.

```tsx
<Calendar
  mode="single"
  disabled={[
    { dayOfWeek: [0, 6] },            // weekends
    { before: new Date(2026, 8, 5) }, // min (nothing earlier)
    { after: new Date(2026, 8, 25) }, // max (nothing later)
    new Date(2026, 8, 16),            // a specific blackout day
    (date) => date.getDate() === 1,   // any predicate you like
  ]}
/>
```

### Presets

Pair the calendar with quick-pick buttons that set the selected date and jump the visible month to match.

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

const pick = (offsetDays: number) => {
  const next = new Date();
  next.setDate(next.getDate() + offsetDays);
  setDate(next);
  setMonth(next);
};

<div className="flex gap-3">
  <div className="flex flex-col gap-2">
    <Button variant="outline" size="sm" onClick={() => pick(0)}>Today</Button>
    <Button variant="outline" size="sm" onClick={() => pick(3)}>In 3 days</Button>
    <Button variant="outline" size="sm" onClick={() => pick(7)}>Next week</Button>
  </div>
  <Calendar mode="single" selected={date} onSelect={setDate} month={month} onMonthChange={setMonth} />
</div>
```

## Notes

- Built on react-day-picker v10: disabled dates, min/max, and localization all pass through.
- disabled accepts a Matcher or Matcher[]: a Date, { from, to } range, { before } / { after } for min/max, { dayOfWeek } patterns, or a (date) => boolean predicate. Combine them in an array.
- Month + year dropdowns are on by default (built from the kit's Select). The year range defaults to 100 years back through 10 years ahead; pass startMonth/endMonth to constrain it, or captionLayout="label" for a static caption.
- For a typeable date input — type a date as numbers or words, or pick one — use DateField, which packages this composition.