feat(web): add calendar event detail view

internal/web/templates/calendar_test.go

@@ -33,6 +33,54 @@ func TestEventTextColorDarkensLightColors(t *testing.T) {
 	}
 }
 
+// TestEventRangeText pins the human-readable "When" strings shown on the
+// event detail view so any change to date formatting is intentional.
+func TestEventRangeText(t *testing.T) {
+	cases := []struct {
+		name string
+		form EventFormData
+		want string
+	}{
+		{
+			name: "single allday date",
+			form: EventFormData{AllDay: true, StartDate: "2026-08-05", EndDate: "2026-08-05"},
+			want: "August 5, 2026",
+		},
+		{
+			name: "all-day multi-day same month",
+			form: EventFormData{AllDay: true, StartDate: "2026-08-05", EndDate: "2026-08-07"},
+			want: "Aug 5 – 7, 2026",
+		},
+		{
+			name: "all-day multi-day different months",
+			form: EventFormData{AllDay: true, StartDate: "2026-08-30", EndDate: "2026-09-02"},
+			want: "Aug 30, 2026 – Sep 2, 2026",
+		},
+		{
+			name: "timed same day",
+			form: EventFormData{AllDay: false, StartDate: "2026-08-05", StartTime: "14:00", EndDate: "2026-08-05", EndTime: "15:00"},
+			want: "August 5, 2026, 14:00 – 15:00",
+		},
+		{
+			name: "timed different days same month",
+			form: EventFormData{AllDay: false, StartDate: "2026-08-05", StartTime: "23:30", EndDate: "2026-08-06", EndTime: "01:00"},
+			want: "Aug 5, 23:30 – 01:00, 2026",
+		},
+		{
+			name: "timed different months",
+			form: EventFormData{AllDay: false, StartDate: "2026-08-31", StartTime: "10:00", EndDate: "2026-09-01", EndTime: "11:00"},
+			want: "Aug 31, 2026, 10:00 – Sep 1, 2026, 11:00",
+		},
+	}
+	for _, c := range cases {
+		t.Run(c.name, func(t *testing.T) {
+			if got := eventRangeText(c.form); got != c.want {
+				t.Errorf("eventRangeText(%+v) = %q, want %q", c.form, got, c.want)
+			}
+		})
+	}
+}
+
 func TestEventTextColorFallsBackForInvalidInput(t *testing.T) {
 	if got := eventTextColor(""); got != colorOrDefault("") {
 		t.Errorf("eventTextColor(\"\") = %s, want the same default colorOrDefault returns", got)