Composed
Calendar
A day cell with five states, and the month grid built from it.
Day states
1213141516
Month · selected 14
MTWTFSS
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/calendar.jsonSelected and today are different things
selected is where you are; today is when you are. They can be the same cell
and often are not, so they render differently — a filled disc versus a ring.
marked is an orthogonal dot: a day can be marked whether or not it is selected.
The month leads with the grid, not the numbers
CalendarMonth owns its own navigation state and reports selections upward. Days
outside the month render muted rather than being omitted, so the grid keeps its
shape across months of different lengths.
| Prop | Type | Default | Description |
|---|---|---|---|
| day | number | string | — | CalendarDay. |
| state | "default" | "selected" | "today" | "muted" | "default" | CalendarDay. |
| marked | boolean | number[] | — | A dot under the day. On CalendarMonth, the days to mark. |
| today | { year, month, day } | — | CalendarMonth. Month is 0-indexed. |
| onSelect | (d: { year, month, day }) => void | — | CalendarMonth. |