(() => {
const base = new Date()
return [10, 15, 22].map((d) => new Date(base.getFullYear(), base.getMonth(), d))
})
return
}
```
### Disabled dates [#disabled-dates]
`disabled` accepts any react-day-picker [`Matcher`](https://daypicker.dev/api/type-aliases/Matcher) — a date, a range, a set of weekdays, or a predicate. Disabled days are struck through and can't be selected. This example blocks every weekend.
```tsx
import { Calendar } from '@appica/ui-react/calendar'
export default function CalendarDisabled() {
return
}
```
### Sizes [#sizes]
The `size` prop scales the cell size and text. `captionLayout="label"` swaps the month/year dropdowns for a static label with arrow navigation.
```tsx
import { Calendar } from '@appica/ui-react/calendar'
const sizes = ['sm', 'md', 'lg'] as const
export default function CalendarSizes() {
return (
{sizes.map((size) => (
))}
)
}
```
## RTL [#rtl]
Every Appica UI component supports right-to-left layouts out of the box. Set the `dir` attribute on a container (commonly your `` element) so CSS logical properties resolve correctly, and wrap your tree in `DirectionProvider` so direction-aware behavior — roving focus, popup placement, and the like — follows the same direction.
```tsx
import { DirectionProvider } from '@appica/ui-react/providers/direction-provider'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
For setup details and caveats, see the [RTL guide](/ui/docs/react/rtl).
## API reference [#api-reference]
| Prop | Type | Default | Description |
| ------------------------- | --------------------------------------------------------------------------- | --------------- | ------------------------------------------------------------------------ |
| `size` | 'sm' \| 'md' \| 'lg' | `'md'` | Cell size and text scale (Appica extension). |
| `mode` | 'single' \| 'multiple' \| 'range' | — | Selection behavior. Omit for a display-only calendar. |
| `selected` | Date \| Date\[] \| DateRange | — | Controlled selection; the shape matches `mode`. Pair with `onSelect`. |
| `onSelect` | (value, triggerDate, modifiers, event) => void | — | Fires when the selection changes. |
| `captionLayout` | 'dropdown' \| 'dropdown-months' \| 'dropdown-years' \| 'label' | `'dropdown'` | Month/year header: select dropdowns, or a static label with arrows. |
| `showOutsideDays` | `boolean` | `true` | Render days from the adjacent months. |
| `weekStartsOn` | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | `1` (Mon) | First day of the week. |
| `numberOfMonths` | `number` | `1` | How many months to display. |
| `month` | `Date` | — | Controlled displayed month. Pair with `onMonthChange`. |
| `onMonthChange` | (month: Date) => void | — | Fires when the user navigates to another month. |
| `defaultMonth` | `Date` | current month | Uncontrolled initial month to display. |
| `startMonth` / `endMonth` | `Date` | `1925` / `2050` | Bounds of the navigable range. |
| `disabled` | `Matcher` | — | Dates that can't be selected (a date, range, weekday set, or predicate). |
| `required` | `boolean` | `false` | Prevent clearing the selection by re-clicking the selected day. |
| `className` | `string` | — | Extra classes on the root, merged via `tailwind-merge`. |
`Calendar` forwards every other [`DayPicker`](https://daypicker.dev/api/interfaces/DayPickerProps) prop — `modifiers`/`modifiersClassNames`, `formatters`/`labels`, `dir`, mode-specific options, and more — straight through. See the react-day-picker docs for the full API.
## Accessibility [#accessibility]
* Renders a `role="grid"` of day buttons; selected days expose `aria-selected`, and the current day is marked `today`.
* **←/→/↑/↓** move between days, **Page Up/Down** change months, and **Enter**/**Space** select — react-day-picker's full keyboard model.
* The previous/next buttons and the month/year dropdowns carry accessible labels.
* Disabled days are removed from selection and the pointer, and are visually struck through.
* Day hover/press transitions are wrapped in `motion-reduce:` variants, so they're skipped when the user prefers reduced motion.