Data display
Calendar
A month schedule view: a six-week grid with a weekday header, a pill marker on today, event chips in the six-tone status palette with a “+N more” overflow, and prev / next / Today navigation. Pure local date math — no date library.
npx shadcn@latest add @orbit/calendarOverview
Events render as soft-tinted chips in their day cells — a dot in the tone color plus the title. Clicking a chip fires onSelectEvent (open your own detail dialog); clicking a cell fires onSelectDate.
Click an event chip or a day cell — navigate with ‹ › and Today.
Event tones
Six palette tones — blue, violet, green, amber, rose, teal — map categories to color. Keep the tone → category mapping stable so people learn to read the calendar by color. Tones derive from theme tokens, so they survive dark mode and every preset.
Controlled month: 2026-06 · maxVisibleEvents={2} tightens the overflow to “+N more” sooner.
Real today
today defaults to the current date, so a bare <Calendar /> opens on the live month with the marker in the right place. Pass a fixed today (and defaultMonth) when demos or tests need stable output.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| month | Date | — | Controlled visible month (any date within it). Leave undefined for uncontrolled use. |
| defaultMonth | Date | — | Starting month for uncontrolled use. Falls back to today's month. |
| onMonthChange | (month: Date) => void | — | Fires on ‹ › and Today navigation with the first of the new month. |
| events | CalendarEvent[] | [] | Chips per day. { id, date: "YYYY-MM-DD", title, tone?, start?, end? } — start orders chips within a day. |
| today | Date | new Date() | The pri-pill day marker and the Today button's target. Override for stable demos and tests. |
| onSelectDate | (date: Date) => void | — | A day cell was clicked. |
| onSelectEvent | (event: CalendarEvent) => void | — | An event chip was clicked — open your detail dialog here. |
| maxVisibleEvents | number | 3 | Chips shown per day before the “+N more” overflow. |
| …rest | HTMLAttributes<HTMLDivElement> | — | Everything else is forwarded to the root element, including ref. |
Usage
Color by category, consistently
Keep the tone → category mapping stable so people learn to read the calendar by color.
Cram every detail into a chip
A chip is a dot and a title. Push time, location, and guests into a detail dialog via onSelectEvent.
Keep the path back to today
The Today button lets a user who's navigated months away return in one click — don't hide it.
Use a calendar when time isn't the axis
A calendar earns its complexity only when dates drive the content — otherwise a list or table is clearer.
Keyboard & accessibility
The grid uses ARIA grid semantics with labelled cells; the month title is a polite live region so navigation announces. Event chips are real buttons — Tab reaches them, Enter and Space activate. Prev / next / Today are labelled buttons with the 3px themed focus ring.
Click an event chip or a day cell — navigate with ‹ › and Today.