Event calendar

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.

August 2026

Click an event, a day, or an overflow row.

Overflow

Past maxEventsPerDay, here two, the rest collapse into an overflow row. It becomes a button when onDateClick is set, so a day view is one handler away.

August 2026
Brunch11:00
Stand-up11:301:1 sync16:30
Gym07:00
Game night19:00
HolidaysBirthday dinner20:30
Retro15:00
Planning10:00Haircut16:00
Stand-up11:30Team lunch13:00
Dinner with friends19:15
Yoga07:30
Brunch11:00
Payday

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.

August 2026
26
27
28
29
30
31
1
Brunch11:00
2
3
Stand-up11:301:1 sync16:30
4
5
Gym07:00
6
7
8
Game night19:00
9
10
11
HolidaysBirthday dinner20:30
12
13
14
Retro15:00
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5