# Calendar

Month calendar with dots under each day that show how busy it is. Swipe between months, fold it into a single week, pick a day to swap the agenda below, and tap Today to jump back.

> Composed · Pro · Data Display — React Native, Expo Go incompatible (dev build required).

## Install

```bash
npx @lumioui/cli add pro/calendar
```

## Import

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

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `selected?` | `string | Date | null` | Controlled selected date (ISO "yyyy-MM-dd" or Date). |
| `defaultSelected?` | `string | Date | null` | Uncontrolled initial selection. Ignored when `selected` is provided. |
| `onSelect?` | `(date: Date) => void` | — |
| `events?` | `CalendarEvent[]` | Events per day — drawn as up to three dots, coloured by category. |
| `categories?` | `Record<string, CalendarTint>` | Dot colour per event category. Unlisted categories use the accent. |
| `markedDates?` | `string[]` | ISO date keys that get a single accent dot (shorthand for `events`). |
| `availableDates?` | `string[]` | ISO date keys that are open (availability, free slots). When set, the grid becomes a light map: open days are lit at full ink, the rest stay dim. Dim days remain selectable. |
| `disabledDates?` | `string[]` | ISO date keys that can't be picked (closed, blocked). |
| `minDate?` | `string` | Earliest selectable date (ISO, inclusive). Paging stops at its month. |
| `maxDate?` | `string` | Latest selectable date (ISO, inclusive). Paging stops at its month. |
| `initialMonth?` | `Date` | Month initially shown when `selected` is unset. |
| `onMonthChange?` | `(month: Date) => void` | Fires when the visible month changes (first of the month). |
| `collapsed?` | `boolean` | Controlled fold: true shows only the selected week. |
| `defaultCollapsed?` | `boolean` | Uncontrolled initial fold. |
| `onCollapsedChange?` | `(collapsed: boolean) => void` | — |
| `showTodayButton?` | `boolean` | Show the Today pill once the view pages away from today. Default true. |
| `renderAgenda?` | `(date: Date, events: CalendarEvent[]) => React.ReactNode` | Agenda for the picked day (today when nothing is picked), rendered below the grid. It swaps in place when the day changes. |
| `className?` | `string` | — |

## Icons rendered

- `chevron-left` — /icons.html?i=chevron-left
- `chevron-right` — /icons.html?i=chevron-right

Source: https://lumioui.com/components/calendar