Home/Components/Calendar

Calendar

A read-only month or week grid. Used to visualise events — shifts, lessons, deliveries — not for picking dates.

Stable .calendar Month · week · day

Month

7-column grid. Today highlighted; events sit inline as coloured pills.

June 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
1
2
3
Faith · shift
3 deliveries
4
5
Faith · shift
Sarah · lunch
6
7
8
Stock take
9
10
11
12
Audit visit
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Month view

Week

Time-slotted day columns. Events are tall blocks tinted by category.

null

Do & 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.