components / calendar
calendar.
month date grid with selectable days, today ring, and prev/next header. pass renderDay to layer dots or counts onto cells, or renderCell + cellClassName to take over cells for agenda-style month views.
May 2026
S
M
T
W
T
F
S
installation
bunx @justin06lee/chrome@latest add calendarprops
| name | type | default | description |
|---|---|---|---|
| month * | string | - | "YYYY-MM" displayed month. |
| onMonthChange | (month: string) => void | - | enables prev/next. |
| selected | string | null | - | "YYYY-MM-DD". |
| onSelect | (date: string) => void | - | |
| today | string | - | "YYYY-MM-DD" to ring. |
| renderDay | (date: string) => ReactNode | - | extra cell content under the day number. |
| renderCell | (day: CalendarDay) => ReactNode | - | replace the whole cell (day number included) for rich month grids. day = { date, day, isToday, isSelected }. days stay buttons when onSelect is set, otherwise plain divs so hosts can embed links. |
| cellClassName | string | ((day: CalendarDay) => string) | - | per-cell classes — heatmap tint, min-height. works in both modes. |
| showHeader | boolean | true | hide the built-in month header (title + prev/next) when an external nav, e.g. calendar-nav, already pages the month. |
| fillHeight | boolean | false | stretch the day rows to equal heights (auto-rows-fr) to fill the component's height — give the root a height via className for a full-page agenda month grid. best with renderCell. |