A month at a glance
Date picker selects a date, this one shows a schedule: a full month grid with event pills on their days, an overflow row once a day is full, and month navigation. It places what it is given, so fetching, filtering, and what a click means stay with you.
A month with plans
Events carry a date, a title, an optional time, and an accent from the core accent roles, never the action teal. Untimed events sort first within a day, and rows share the height of the fullest day in their week. Clicking a day, or anywhere on its cell, moves the teal selection chip to its number.
Selected: 2026-08-20
Overflow
Past maxEventsPerDay, here two, the rest collapse into an overflow row. With onDateClick set it becomes a button, as in the demo above, so a day view is one handler away.
Read only
With no click handlers, pills and day numbers render as inert text rather than buttons, so a display calendar contains no fake affordances. Month navigation still works.
// From the npm package
import { EventCalendar } from 'rift-ds/components/EventCalendar/EventCalendar';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/event-calendar.json