Calendar
@/components/kamod-ui/calendar
Installation
Add `@kamod-ch/ui` to your app and import `Calendar`. This implementation mirrors the shadcn/ui Calendar **API surface** (modes, captions, disabled, modifiers, week numbers, RTL) without bundling `react-day-picker`; see [React DayPicker](https://react-day-picker.js.org/) for the upstream reference behaviour.
pnpm add @kamod-ch/uiUsage
Import Calendar from `@/components/kamod-ui/calendar`, then control selected/onSelect in mode="single" or pass a DateRange in mode="range". The shadcn Calendar wraps React DayPicker; Kamod provides a lightweight grid with a parallel prop surface for demos and composition. Build a date picker with Popover and Button (see /docs/date-picker/installation in this app). If the highlighted day shifts vs your timezone, pass timeZone from Intl.DateTimeFormat().resolvedOptions().timeZone on the client (useEffect), as documented on ui.shadcn.com. For a tighter layout (e.g. narrow popovers), pass `size="sm"`.
import { Calendar } from "@/components/kamod-ui/calendar";<Calendar />Demo
Top-of-page example with `captionLayout="dropdown"` — same role as the live preview on ui.shadcn.com.
Selected Date (With TimeZone)
Pass `timeZone` so captions align with the user’s zone; detect it client-side to avoid SSR hydration mismatches (see shadcn note on the same page).
Basic
A basic calendar. We use `class="rounded-lg border"` like the shadcn examples.
Range Calendar
Use `mode="range"` with two months and an optional `disabled` predicate — matches the Range Calendar + disabled snippet on ui.shadcn.com.
Month and Year Selector
Use `captionLayout="dropdown"` for month and year `<select>` controls, with ghost prev/next icons on the sides (same chrome as ui.shadcn.com). Month labels follow `locale` (e.g. März → Mär in de-DE).
Presets
Controlled `month` / `onMonthChange` with preset buttons and `fixedWeeks` for a stable six-row grid.
Date and Time Picker
Calendar plus time fields in the card footer (composition pattern from ui.shadcn.com).
Booked dates
`disabled` with `modifiers` and `modifiersClassNames` for strike-through booked days.
Custom Cell Size
Responsive `[--cell-size:…]` and `dayAddon` for secondary labels (e.g. prices). The code tab also shows fixed `rem` / spacing-token variants from the shadcn page.
Week Numbers
Use `showWeekNumber` to show ISO week indices (zero-padded), in line with the shadcn example.
API Reference
Props, slots and variants for this component.
Calendar
Calendar component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| mode | "single" | "range" | "single" |
| selected | Date | DateRange | undefined | undefined |
| onSelect | (value: Date | DateRange | undefined) => void | undefined |
| value / onValueChange | Date + callback | deprecated; use selected/onSelect |
| defaultMonth | Date | from selected or today |
| month / onMonthChange | Date + callback | optional controlled month |
| numberOfMonths | 1 | 2 | 1 |
| captionLayout | "buttons" | "dropdown" | "buttons" |
| size | "default" | "sm" | "default" |
| dir | "ltr" | "rtl" | "ltr" |
| showOutsideDays | boolean | true |
| fixedWeeks | boolean | false |
| disabled | ((date: Date) => boolean) | Date[] | undefined |
| showWeekNumber | boolean | false |
| modifiers | Record<string, Date[]> | undefined |
| modifiersClassNames | Record<string, string> | undefined |
| locale | string (BCP 47) | undefined |
| timeZone | string | undefined |
| dayAddon | (date, outside) => children | undefined | undefined |
| class | string | undefined |
Accessibility Notes
Day cells are `<button>` elements; prev/next use the shared `Button` ghost icon pattern. Dropdown captions expose `aria-label` on selects. Pair with visible labels in forms.