Components · Calendar

Month grid

The calendar engine's MonthView — the always-42-cell monthMatrix under a weekday header. Events bucket to their local start day (groupEventsByDay) and stack as chips: a 3px tone bar, an optional time, then a truncating title. Today gets a filled accent pip; adjacent-month days dim onto surface-2. Past MAX_CHIPS_PER_DAY = 3 the rest collapse to a +N more row with the day's total in the corner.

Calendar view="month" · July 2026 fixture

July 2026

SunMonTue WedThuFriSat
28
29
30
1
2
3
4
5
6
7
8
9
10
114
+1 more
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8

Today (Jul 2) carries the accent pip + aria-current="date"; its first chip is pinned :hover. The 11th holds four events → three chips + +1 more, the corner showing the full count. Red is reserved for major actions (isMajor → semibold + inset ring): the Freedom Rally and the County hearing. Chip tone is accent · good · warn · bad · neutral; each links to its event via onSelectEvent.

events
CalendarEvent[] bucketed to the local start day by groupEventsByDay; each bucket sorts ascending by start time and stacks in the day cell.
EventChip
A 3px tone bar (TONE_BAR) + optional fmtTime + truncating title over a soft tone fill (TONE_CHIP). isMajor adds semibold + an inset current-color ring.
overflow
MAX_CHIPS_PER_DAY = 3. Extra events collapse to a +N more row; the day's total count is shown top-right of the cell.
today / month
Today → filled accent pip + aria-current="date". Leading/trailing days from adjacent months render on surface-2 with faint numbers.
grid a11y
role=grid > weekday columnheader row > 6 role=row weeks of 7 gridcells. Roving tabindex, arrow-key nav (nextFocusDay) pages the month on a boundary cross.

Source · ds/calendar/MonthView.tsx (EventChip, TONE_CHIP/TONE_BAR, nextFocusDay) · date-utils.ts (monthMatrix, groupEventsByDay, fmtTime) · composed under the toolbar by Calendar.tsx.