# Shadcn Event List

> Calendar with event list

- Type: example, free and open source (MIT)
- Component: [Calendar](https://reui.io/components/calendar.md)
- Page: https://reui.io/components/calendar/c-calendar-22
- 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-22")`
- Registry item: https://reui.io/r/styles/base-nova/c-calendar-22.json
- Uses: Button, Calendar, Card

## Best for

A compact card listing events under the grid with colored bars, time spans and an Add Event button

## Agent notes

- `events` holds 3 fixed January 2026 entries and ignores the selected `date`, so the list never changes
- The Add Event `Button` has no handler; wire it to your own create flow

## When not to use

- A full month or week view where entries are dragged and resized: use [Event Calendar](https://reui.io/components/event-calendar.md) (`get_component("event-calendar")`)

## Third-party libraries

- little-date v1: [API reference](https://github.com/vercel/little-date#advanced-options), [docs](https://github.com/vercel/little-date)
- 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-22
```

## 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.