Centrim Design System — a token-first, accessible React component system.
Activities calendar
A CRM activities calendar: a month overview of scheduled activities with view switching, a type colour key, filters and an active filter summary.
What it demonstrates
- The month grid as the page — one bordered surface, hairline cells, no card per day
- Activity type carried by a tone-coded chip and repeated in the colour key, never by colour alone
- View switching (Month / Week / Day / List) and scope (All / My activities) as SegmentedControls either side of the month label
- Status, type and assignee filters grouped once in the header, with active filter chips and Clear all
- Today marked with the brand disc; days outside the month hatched rather than clickable
How to adapt it
- Composition: Breadcrumb → PageHeader with filters → active filter summary → EventCalendar.
- Keep no more than a few events per cell — use maxEventsPerDay and send people to a day view for the rest.
- Always ship the colour key next to the grid; the tone is meaningless without it.
- Use it for a schedule. For a collection of records see List & management, for an overview see Dashboard.
Composed from
Nothing on this screen is new. Every part is an existing component, layout or pattern.