Calendar
A read-only month or week grid. Used to visualise events — shifts, lessons, deliveries — not for picking dates.
Month
7-column grid. Today highlighted; events sit inline as coloured pills.
June 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Week
Time-slotted day columns. Events are tall blocks tinted by category.
nullDo & don't
Do
Use a calendar to visualise time-bound events. Use a date picker for selecting a date.
Don't
Render hundreds of events on a month view. Aggregate, show a "+N more" indicator.
Do
Make the month view static-first. Pan/zoom is for week and day.
Don't
Mix the picker UI inside a calendar view.