6 / 6
the brief
Three events on a 14-day strip:
- Event A: day 2 → day 5 (4 days, amber)
- Event B: day 4 → day 9 (overlaps A by 2 days, indigo)
- Event C: day 11 → day 12 (2 days, green)
Layout:
- 14-column grid, ~52px each
- day-number row at row 1; events on rows 2–4 (one per row)
- events are pills positioned with `grid-column` running from start day to end day + 1
The starter's `events` array carries `{ start, end, kind, label }`. Render and position via inline `style={{ gridColumn: ..., gridRow: ... }}`.grid-column · jsx · span · overlap
preview · live iframe