# Shadcn Forward Presets

> Calendar with presets

- Type: example, free and open source (MIT)
- Component: [Calendar](https://reui.io/components/calendar.md)
- Page: https://reui.io/components/calendar/c-calendar-18
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/calendar.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/calendar.md
- MCP: `get_example("c-calendar-18")`
- Registry item: https://reui.io/r/styles/base-nova/c-calendar-18.json
- Uses: Button, Calendar, Card

## Best for

Forward shortcuts Today, Tomorrow, 3 days, Week and 2 weeks as a footer button row in a compact card

## Agent notes

- The initial `date` is fixed to 12 February this year, while `currentMonth` opens on the current month

## When not to use

- Shortcuts back to past days, such as Yesterday or Last year: use [Date Presets](https://reui.io/components/calendar/c-calendar-15.md) (`get_example("c-calendar-15")`)

## Third-party libraries

- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started)
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), through shadcn Calendar

## Install

```bash
npx shadcn@latest add @reui/c-calendar-18
```

## About Shadcn Calendar

### When to use

- Inline grids for picking one day, several separate days or a from and to range
- Date and date range fields that open the grid in a popover under a trigger button
- Booking and planning steps that pair a day with time slots, daily prices or an event list

### When not to use

- A filter over day, month, quarter or year periods with before, after and between operators: use [Date Selector](https://reui.io/components/date-selector.md) (`get_component("date-selector")`)
- A ready made booking widget with host details, duration choices and a confirm step: use the [Schedule blocks](https://reui.io/blocks/application/schedule.md)
- A month, week or day view of entries that users drag, resize and create: use [Event Calendar](https://reui.io/components/event-calendar.md) (`get_component("event-calendar")`)

### Agent notes

- `selected` takes a `Date`, a `Date` array or a `DateRange` to match `mode` single, multiple or range
- Without `required`, clicking the only selected day clears it, so `onSelect` can hand back `undefined` or an empty array

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.