Add a reusable event calendar and put it on the front page

EventCalendar shows events on a month grid or as a list of the
month. Multi-day events are lane-packed bars that break at week
edges, series events appear on every meeting with their time, and
clicking a day lists everything on it. Phones get the list. Visitors
can narrow by scope, type, online only and search, all starting at
"all"; a page can pin section, host or type through props, which
hides that control.

Migration 019 rebuilds front_page_sections to allow a 'calendar'
band and slots it in after the retreats carousel, so it can be
reordered, retitled or hidden from the Front page editor.

useEvents drops its empty fallback so a failed request surfaces as
an error rather than an empty list, and returns the scope list
alongside the events for the calendar's scope filter.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

server/src/admin-schema.js

@@ -716,7 +716,7 @@ const frontPage = {
       columns: [
         enumeration(
           "section",
-          ["countdown", "retreats", "stats", "timeline", "connect"],
+          ["countdown", "retreats", "calendar", "stats", "timeline", "connect"],
           { required: true },
         ),
         text("title"),

server/src/migrations/019_front_page_calendar.sql

@@ -0,0 +1,61 @@
+-- ═══════════════════════════════════════════════════════════════
+-- FRONT PAGE: calendar band
+--
+-- Adds 'calendar' to the sections the front page can draw. The key
+-- is a CHECK, and SQLite can't alter a CHECK in place, so the table
+-- is rebuilt: new table, copy, drop, rename.
+--
+-- No PRAGMA foreign_keys dance. front_page_sections only points out
+-- (at front_page); nothing points in, so dropping the old table
+-- cascades into nothing, and the copy keeps every page_id valid.
+--
+-- The new band is inserted straight after the retreats carousel,
+-- where "what's on" reads naturally, by shifting everything below it
+-- down one. If retreats was removed on this box, it goes last.
+--
+-- Adding another section later is the same three steps: this CHECK,
+-- the enum in both descriptor halves, and SECTIONS in Home.tsx.
+--
+-- No BEGIN...END in this file.
+-- ═══════════════════════════════════════════════════════════════
+
+CREATE TABLE front_page_sections_new (
+  id          INTEGER PRIMARY KEY AUTOINCREMENT,
+  page_id     TEXT NOT NULL REFERENCES front_page (id) ON DELETE CASCADE,
+  sort_order  INTEGER NOT NULL DEFAULT 0,
+  section     TEXT NOT NULL
+                CHECK (section IN ('countdown', 'retreats', 'calendar', 'stats',
+                                   'timeline', 'connect')),
+  title       TEXT,
+  blurb       TEXT,
+  is_hidden   INTEGER NOT NULL DEFAULT 0 CHECK (is_hidden IN (0, 1)),
+  UNIQUE (page_id, section)
+) STRICT;
+
+INSERT INTO front_page_sections_new (id, page_id, sort_order, section, title, blurb, is_hidden)
+SELECT id, page_id, sort_order, section, title, blurb, is_hidden
+  FROM front_page_sections;
+
+DROP TABLE front_page_sections;
+
+ALTER TABLE front_page_sections_new RENAME TO front_page_sections;
+
+UPDATE front_page_sections
+   SET sort_order = sort_order + 1
+ WHERE page_id = 'home'
+   AND sort_order > COALESCE(
+         (SELECT sort_order FROM front_page_sections
+           WHERE page_id = 'home' AND section = 'retreats'),
+         (SELECT MAX(sort_order) FROM front_page_sections WHERE page_id = 'home'));
+
+INSERT INTO front_page_sections (page_id, sort_order, section, title, blurb)
+SELECT 'home',
+       COALESCE(
+         (SELECT sort_order + 1 FROM front_page_sections
+           WHERE page_id = 'home' AND section = 'retreats'),
+         (SELECT COALESCE(MAX(sort_order), -1) + 1 FROM front_page_sections
+           WHERE page_id = 'home')),
+       'calendar',
+       'What''s on',
+       'Every gathering, class and meeting in one place.'
+ WHERE EXISTS (SELECT 1 FROM front_page WHERE id = 'home');

src/data/eventData.d.ts

@@ -2,7 +2,7 @@
    server/src/routes/content.js sends them. */
 
 import type { EventType } from "../lib/eventTypes.ts";
-import type { EventListItem } from "../lib/useContent.ts";
+import type { EventListItem, EventSection } from "../lib/useContent.ts";
 
 export type EventFilter = {
   section?: string;
@@ -13,6 +13,8 @@ export type EventFilter = {
 
 export declare function useEvents(filter?: EventFilter): {
   events: EventListItem[];
+  /** event_sections, in scope order. Empty until loaded. */
+  sections: EventSection[];
   loading: boolean;
   error: Error | null;
 };

src/data/eventData.js

@@ -18,6 +18,13 @@
    belongs to, the type is what kind of gathering it is. A regional
    class matches both { section: "regional" } and { type: "class" }.
 
+   The event_sections rows (the scope list) come back alongside, for
+   anything that offers a scope filter.
+
+   No fallback. An empty list on a failed request would read as
+   "nothing scheduled" when the truth is "the server is down", so
+   the error comes back and each caller says so.
+
    Filtering here rather than in the query keeps the endpoint to
    one cached response. At a few dozen events that's the right
    trade; if the list ever runs to hundreds, move the filters into
@@ -28,12 +35,15 @@ import { useMemo } from "react";
 
 import { useResource } from "../lib/useResource.js";
 
-const EMPTY = { events: [] };
+/* One shared empty list, so a memo keyed on `sections` doesn't
+   restart on every render before the data arrives. */
+const NO_SECTIONS = [];
 
 export function useEvents({ section, host, status, type } = {}) {
-  const { data, error, loading } = useResource("/events", { fallback: EMPTY });
+  const { data, error, loading } = useResource("/events");
 
   const all = data?.events;
+  const sections = data?.sections ?? NO_SECTIONS;
 
   /* An array prop is a new identity on every render, which would
      restart the memo each time. Joining it gives the dependency
@@ -55,7 +65,7 @@ export function useEvents({ section, host, status, type } = {}) {
     return list;
   }, [all, section, host, status, typeKey]);
 
-  return { events, loading, error };
+  return { events, sections, loading, error };
 }
 
 /* Past and upcoming, split. `status` arrives already resolved — the

src/lib/adminSchema.js

@@ -948,13 +948,14 @@ const timeline = {
    the page. Photos and the livestream are editable whatever the
    mode, so either can be ready before the switch is flipped.
 
-   Section keys and stat sources are the CHECK lists in migration
+   Section keys and stat sources are the CHECK lists in migrations
-   017. The labels here are what the admin reads; the values are
+   017 and 019. The labels here are what the admin reads; the values are
    what the page and the API key on. */
 
 const FRONT_PAGE_SECTIONS = [
   ["countdown", "Countdown to the next event"],
   ["retreats", "National Retreats carousel"],
+  ["calendar", "Event calendar"],
   ["stats", "Numbers"],
   ["timeline", "Featured timeline"],
   ["connect", "Find your way in"],

src/lib/eventSeries.ts

@@ -171,6 +171,39 @@ export function upcomingOccurrences(
   return out
 }
 
+/** Every meeting between two dates, inclusive, in order. For a
+ *  calendar page: `from` and `to` are the visible range. */
+export function occurrencesBetween(
+  series: EventSeries | null | undefined,
+  startsOn: string | null | undefined,
+  endsOn: string | null | undefined,
+  from: string,
+  to: string,
+): string[] {
+  if (!series) return []
+  const out: string[] = []
+  for (const date of occurrences(series, startsOn, endsOn)) {
+    if (date > to) break
+    if (date >= from) out.push(date)
+  }
+  return out
+}
+
+/** The first meeting on or after `from`, or null if the series has
+ *  ended by then. */
+export function firstOccurrenceFrom(
+  series: EventSeries | null | undefined,
+  startsOn: string | null | undefined,
+  endsOn: string | null | undefined,
+  from: string,
+): string | null {
+  if (!series) return null
+  for (const date of occurrences(series, startsOn, endsOn)) {
+    if (date >= from) return date
+  }
+  return null
+}
+
 /* ── Words ───────────────────────────────────────────────────── */
 
 const ORDINALS = ['', '1st', '2nd', '3rd', '4th', 'last']

src/lib/useFrontPage.ts

@@ -16,7 +16,13 @@ import type { EventSeries } from './eventSeries.ts'
 export type HeroMode = 'brand' | 'photos' | 'livestream'
 
 /** The CHECK list on front_page_sections.section. */
-export type FrontPageSectionKey = 'countdown' | 'retreats' | 'stats' | 'timeline' | 'connect'
+export type FrontPageSectionKey =
+  | 'countdown'
+  | 'retreats'
+  | 'calendar'
+  | 'stats'
+  | 'timeline'
+  | 'connect'
 
 export type HeroButton = { label: string; url: string }
 

src/pages/Home.tsx

@@ -27,6 +27,7 @@ import type { ReactNode } from 'react'
 import HeroStage from './sections/home/HeroStage.tsx'
 import NextEventCountdown from './sections/home/NextEventCountdown.tsx'
 import RetreatsBand from './sections/home/RetreatsBand.tsx'
+import CalendarBand from './sections/home/CalendarBand.tsx'
 import StatsBand from './sections/home/StatsBand.tsx'
 import FeaturedTimelineRail from './sections/home/FeaturedTimelineRail.tsx'
 import Pathfinder from './sections/home/Pathfinder.tsx'
@@ -64,6 +65,12 @@ const SECTIONS: Record<
       <RetreatsBand id="retreats" title={title} blurb={section.blurb} />
     ),
   },
+  calendar: {
+    title: 'What’s on',
+    render: ({ section, title }) => (
+      <CalendarBand id="calendar" title={title} blurb={section.blurb} />
+    ),
+  },
   stats: {
     title: 'By the numbers',
     render: ({ page, section, title }) =>

src/pages/sections/EventCalendar.tsx

@@ -0,0 +1,791 @@
+/* ═══════════════════════════════════════════════════════════════
+   EVENT CALENDAR
+
+   Every published event on a month grid, or as a list of the month.
+   Self contained like EventListCards: give it a filter and it
+   fetches, so it can sit on any page.
+
+     <EventCalendar />                          everything
+     <EventCalendar host="northwest" />         one host's calendar
+     <EventCalendar section="national" />       one scope
+     <EventCalendar type={["class", "workshop"]} controls={["search"]} />
+
+   Two layers of filtering, and they answer different questions:
+
+     props      what this page's calendar is about. Pinned; the
+                visitor can't widen them, and the control for a
+                pinned dimension doesn't render.
+     controls   what the visitor can narrow by within that: scope,
+                type, online only, search. All four by default,
+                every one starting at "all".
+
+   What lands on a day:
+
+     one-off    every day from starts_on to ends_on, drawn as one
+                bar across the days it spans, broken at the week
+                edge and marked as continuing
+     series     every meeting the schedule produces in view (see
+                eventSeries.ts), one day each, with its time
+     undated    nowhere — there's no day to put it on. Counted
+                under the grid so it doesn't vanish without a word.
+
+   Bars are laid out per week in lanes, so a long event keeps its
+   row across the days it covers. MAX_LANES rows show; a day with
+   more says "+N more", and clicking any day lists everything on it
+   below the grid.
+
+   Below md the grid would be seven unreadable slivers, so the month
+   view shows the list there instead. The toggle still works; it
+   just has one answer on a phone.
+   ═══════════════════════════════════════════════════════════════ */
+
+import { useMemo, useState } from 'react'
+import { Link } from 'react-router-dom'
+
+import { typesPresent, useEvents } from '../../data/eventData.js'
+import type { EventFilter } from '../../data/eventData.js'
+import { EVENT_TYPES, eventTypeLabel } from '../../lib/eventTypes.ts'
+import { firstOccurrenceFrom, occurrencesBetween, seriesTimes } from '../../lib/eventSeries.ts'
+import { eventHref } from '../../lib/hrefs.ts'
+import type { EventListItem } from '../../lib/useContent.ts'
+
+export type CalendarControl = 'scope' | 'type' | 'online' | 'search'
+export type CalendarView = 'month' | 'list'
+
+const ALL_CONTROLS: CalendarControl[] = ['scope', 'type', 'online', 'search']
+
+/* Bar rows drawn per week before a day collapses to "+N more". */
+const MAX_LANES = 3
+
+const TEAL = '#138ba0'
+const INK = '#073d4a'
+const BODY = '#4a6b72'
+
+const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+type EventCalendarProps = EventFilter & {
+  accent?: string
+  /** Which visitor controls render. A pinned prop hides its own. */
+  controls?: CalendarControl[]
+  defaultView?: CalendarView
+}
+
+/* One appearance of an event on the calendar: a whole one-off, or a
+   single meeting of a series. Dates are inclusive 'YYYY-MM-DD'. */
+type Occurrence = {
+  key: string
+  event: EventListItem
+  start: string
+  end: string
+  time: string | null
+}
+
+type Segment = Occurrence & {
+  col: number
+  span: number
+  lane: number
+  continuesBefore: boolean
+  continuesAfter: boolean
+}
+
+/* ── Dates ───────────────────────────────────────────────────── */
+
+const pad = (n: number) => String(n).padStart(2, '0')
+const iso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+
+function parse(date: string): Date {
+  const [y, m, d] = date.split('-').map(Number)
+  return new Date(y, m - 1, d)
+}
+
+const addDays = (date: string, n: number) => {
+  const d = parse(date)
+  d.setDate(d.getDate() + n)
+  return iso(d)
+}
+
+const dayDiff = (a: string, b: string) =>
+  Math.round((parse(b).getTime() - parse(a).getTime()) / 86_400_000)
+
+const monthKey = (date: string) => date.slice(0, 7)
+
+/* The six Sunday-started weeks that cover a month. */
+function gridFor(month: string): string[][] {
+  const first = parse(`${month}-01`)
+  const start = addDays(iso(first), -first.getDay())
+  return Array.from({ length: 6 }, (_, w) =>
+    Array.from({ length: 7 }, (_, d) => addDays(start, w * 7 + d)),
+  )
+}
+
+const monthTitle = (month: string) =>
+  parse(`${month}-01`).toLocaleDateString(undefined, { month: 'long', year: 'numeric' })
+
+const shiftMonth = (month: string, n: number) => {
+  const d = parse(`${month}-01`)
+  d.setMonth(d.getMonth() + n)
+  return monthKey(iso(d))
+}
+
+const longDay = (date: string) =>
+  parse(date).toLocaleDateString(undefined, {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  })
+
+function rangeLabel(start: string, end: string): string {
+  const opts: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric' }
+  if (start === end) return parse(start).toLocaleDateString(undefined, opts)
+  return `${parse(start).toLocaleDateString(undefined, opts)} – ${parse(end).toLocaleDateString(undefined, opts)}`
+}
+
+/* ── Occurrences ─────────────────────────────────────────────── */
+
+function occurrencesIn(events: EventListItem[], from: string, to: string): Occurrence[] {
+  const out: Occurrence[] = []
+
+  for (const event of events) {
+    if (!event.starts_on) continue
+
+    if (event.series) {
+      const time = seriesTimes(event.series)
+      for (const date of occurrencesBetween(event.series, event.starts_on, event.ends_on, from, to)) {
+        out.push({ key: `${event.id}@${date}`, event, start: date, end: date, time })
+      }
+      continue
+    }
+
+    const start = event.starts_on
+    const end = event.ends_on && event.ends_on >= start ? event.ends_on : start
+    if (end < from || start > to) continue
+    out.push({ key: event.id, event, start, end, time: null })
+  }
+
+  // Longest first within a day, so multi-day bars claim the top lanes.
+  return out.sort(
+    (a, b) => a.start.localeCompare(b.start) || dayDiff(b.start, b.end) - dayDiff(a.start, a.end),
+  )
+}
+
+/* Greedy lane packing for one week: each segment takes the first
+   lane whose last occupant ended before it starts. */
+function layoutWeek(week: string[], occurrences: Occurrence[]): Segment[] {
+  const first = week[0]
+  const last = week[6]
+  const laneEnds: number[] = []
+  const segments: Segment[] = []
+
+  for (const occ of occurrences) {
+    if (occ.end < first || occ.start > last) continue
+    const start = occ.start < first ? first : occ.start
+    const end = occ.end > last ? last : occ.end
+    const col = dayDiff(first, start)
+    const span = dayDiff(start, end) + 1
+
+    let lane = laneEnds.findIndex((endCol) => endCol < col)
+    if (lane === -1) lane = laneEnds.length
+    laneEnds[lane] = col + span - 1
+
+    segments.push({
+      ...occ,
+      col,
+      span,
+      lane,
+      continuesBefore: occ.start < first,
+      continuesAfter: occ.end > last,
+    })
+  }
+
+  return segments
+}
+
+/* The next date after `after` that any of these events lands on. */
+function nextDateAfter(events: EventListItem[], after: string): string | null {
+  let best: string | null = null
+  const from = addDays(after, 1)
+  for (const event of events) {
+    if (!event.starts_on) continue
+    const date = event.series
+      ? firstOccurrenceFrom(event.series, event.starts_on, event.ends_on, from)
+      : event.starts_on >= from
+        ? event.starts_on
+        : null
+    if (date && (!best || date < best)) best = date
+  }
+  return best
+}
+
+/* ── Component ───────────────────────────────────────────────── */
+
+export default function EventCalendar({
+  section,
+  host,
+  status,
+  type,
+  accent = TEAL,
+  controls = ALL_CONTROLS,
+  defaultView = 'month',
+}: EventCalendarProps) {
+  const { events: pinned, sections, loading, error } = useEvents({ section, host, status, type })
+
+  const today = iso(new Date())
+  const [month, setMonth] = useState(monthKey(today))
+  const [view, setView] = useState<CalendarView>(defaultView)
+  const [selected, setSelected] = useState<string | null>(null)
+
+  const [scope, setScope] = useState('')
+  const [kind, setKind] = useState('')
+  const [onlineOnly, setOnlineOnly] = useState(false)
+  const [query, setQuery] = useState('')
+
+  const show = (control: CalendarControl) => controls.includes(control)
+  const showScope = show('scope') && !section
+  const showType = show('type') && !type
+
+  const types = useMemo(() => typesPresent(pinned, EVENT_TYPES), [pinned])
+  const scopes = useMemo(() => {
+    const present = new Set(pinned.map((e) => e.section_id))
+    return sections.filter((s) => present.has(s.id))
+  }, [pinned, sections])
+
+  const events = useMemo(() => {
+    const needle = query.trim().toLowerCase()
+    return pinned.filter((e) => {
+      if (scope && e.section_id !== scope) return false
+      if (kind && e.event_type !== kind) return false
+      if (onlineOnly && !e.is_online) return false
+      if (needle) {
+        const haystack = [
+          e.title,
+          e.theme,
+          e.location_label,
+          e.locality,
+          ...(e.hosts ?? []).map((h) => h.name),
+        ]
+          .filter(Boolean)
+          .join(' ')
+          .toLowerCase()
+        if (!haystack.includes(needle)) return false
+      }
+      return true
+    })
+  }, [pinned, scope, kind, onlineOnly, query])
+
+  const weeks = useMemo(() => gridFor(month), [month])
+  const gridFrom = weeks[0][0]
+  const gridTo = weeks[5][6]
+  const monthFrom = `${month}-01`
+  const monthTo = addDays(`${shiftMonth(month, 1)}-01`, -1)
+
+  const occurrences = useMemo(
+    () => occurrencesIn(events, gridFrom, gridTo),
+    [events, gridFrom, gridTo],
+  )
+  const inMonth = occurrences.filter((o) => o.end >= monthFrom && o.start <= monthTo)
+  const undated = events.filter((e) => !e.starts_on).length
+  const filtering = Boolean(scope || kind || onlineOnly || query)
+  const next = inMonth.length === 0 ? nextDateAfter(events, monthTo) : null
+
+  const onDay = (date: string) => occurrences.filter((o) => o.start <= date && o.end >= date)
+
+  const go = (target: string) => {
+    setMonth(target)
+    setSelected(null)
+  }
+
+  const clearFilters = () => {
+    setScope('')
+    setKind('')
+    setOnlineOnly(false)
+    setQuery('')
+  }
+
+  return (
+    <div className="mx-auto max-w-6xl px-6" style={{ color: INK }}>
+      {/* ── Month navigation and view ── */}
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="flex items-center gap-2">
+          <NavButton label="Previous month" onClick={() => go(shiftMonth(month, -1))} accent={accent}>
+            ‹
+          </NavButton>
+          <NavButton label="Next month" onClick={() => go(shiftMonth(month, 1))} accent={accent}>
+            ›
+          </NavButton>
+        </div>
+
+        <h3 className="min-w-[11rem] font-display text-2xl font-bold" aria-live="polite">
+          {monthTitle(month)}
+        </h3>
+
+        {month !== monthKey(today) && (
+          <button
+            type="button"
+            onClick={() => go(monthKey(today))}
+            className="rounded-full border px-3 py-1 text-sm font-semibold hover:bg-white"
+            style={{ borderColor: accent, color: accent }}
+          >
+            Today
+          </button>
+        )}
+
+        <div
+          className="ml-auto hidden overflow-hidden rounded-full border md:flex"
+          style={{ borderColor: accent }}
+          role="group"
+          aria-label="Calendar view"
+        >
+          {(['month', 'list'] as const).map((option) => (
+            <button
+              key={option}
+              type="button"
+              onClick={() => setView(option)}
+              aria-pressed={view === option}
+              className="px-4 py-1.5 text-sm font-semibold capitalize transition-colors"
+              style={
+                view === option
+                  ? { background: accent, color: '#ffffff' }
+                  : { color: accent }
+              }
+            >
+              {option}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* ── Filters ── */}
+      {(showScope || showType || show('online') || show('search')) && (
+        <div className="mt-5 flex flex-wrap items-center gap-3">
+          {showScope && scopes.length > 1 && (
+            <FilterSelect
+              label="Scope"
+              value={scope}
+              onChange={setScope}
+              all="All scopes"
+              options={scopes.map((s) => [s.id, s.name])}
+            />
+          )}
+          {showType && types.length > 1 && (
+            <FilterSelect
+              label="Type"
+              value={kind}
+              onChange={setKind}
+              all="All types"
+              options={types.map((t) => [t.id, t.plural])}
+            />
+          )}
+          {show('online') && (
+            <label className="flex cursor-pointer items-center gap-2 rounded-full border border-[#138ba0]/25 bg-white px-4 py-2 text-sm">
+              <input
+                type="checkbox"
+                checked={onlineOnly}
+                onChange={(e) => setOnlineOnly(e.target.checked)}
+                className="h-4 w-4 rounded"
+                style={{ accentColor: accent }}
+              />
+              Online only
+            </label>
+          )}
+          {show('search') && (
+            <input
+              type="search"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search events"
+              aria-label="Search events"
+              className="min-w-[12rem] flex-1 rounded-full border border-[#138ba0]/25 bg-white px-4 py-2 text-sm outline-none focus:border-[#138ba0] md:max-w-xs"
+            />
+          )}
+          {filtering && (
+            <button
+              type="button"
+              onClick={clearFilters}
+              className="text-sm font-semibold hover:underline"
+              style={{ color: accent }}
+            >
+              Clear filters
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* ── Body ── */}
+      <div className="mt-6">
+        {error ? (
+          <p className="rounded-2xl bg-white p-6 text-[#b3261e]">
+            Couldn’t load events. {error.message}
+          </p>
+        ) : loading ? (
+          <div className="h-[32rem] animate-pulse rounded-3xl bg-white/70" aria-hidden="true" />
+        ) : (
+          <>
+            {view === 'month' && (
+              <div className="hidden md:block">
+                <MonthGrid
+                  weeks={weeks}
+                  month={month}
+                  today={today}
+                  occurrences={occurrences}
+                  selected={selected}
+                  onSelect={(date) => setSelected((s) => (s === date ? null : date))}
+                  accent={accent}
+                />
+                {selected && (
+                  <DayPanel
+                    date={selected}
+                    items={onDay(selected)}
+                    accent={accent}
+                    onClose={() => setSelected(null)}
+                  />
+                )}
+              </div>
+            )}
+
+            <div className={view === 'month' ? 'md:hidden' : ''}>
+              <MonthList items={inMonth} monthFrom={monthFrom} accent={accent} />
+            </div>
+
+            {inMonth.length === 0 && (
+              <div className="mt-4 text-center text-sm" style={{ color: BODY }}>
+                {next ? (
+                  <button
+                    type="button"
+                    onClick={() => go(monthKey(next))}
+                    className="font-semibold hover:underline"
+                    style={{ color: accent }}
+                  >
+                    Jump to the next event, {monthTitle(monthKey(next))} →
+                  </button>
+                ) : filtering ? (
+                  'Nothing matches these filters.'
+                ) : null}
+              </div>
+            )}
+
+            {undated > 0 && (
+              <p className="mt-4 text-center text-xs" style={{ color: BODY }}>
+                {undated === 1 ? '1 event has' : `${undated} events have`} no dates yet, so{' '}
+                {undated === 1 ? 'isn’t' : 'aren’t'} on the calendar.
+              </p>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/* ── Month grid ──────────────────────────────────────────────── */
+
+type MonthGridProps = {
+  weeks: string[][]
+  month: string
+  today: string
+  occurrences: Occurrence[]
+  selected: string | null
+  onSelect: (date: string) => void
+  accent: string
+}
+
+function MonthGrid({ weeks, month, today, occurrences, selected, onSelect, accent }: MonthGridProps) {
+  return (
+    <div className="overflow-hidden rounded-3xl border border-[#138ba0]/15 bg-white shadow-sm">
+      <div className="grid grid-cols-7 border-b border-[#138ba0]/10 bg-[#f6fbfc]">
+        {WEEKDAYS.map((day) => (
+          <div
+            key={day}
+            className="px-3 py-2 text-xs font-bold uppercase tracking-widest"
+            style={{ color: BODY }}
+          >
+            {day}
+          </div>
+        ))}
+      </div>
+
+      {weeks.map((week) => {
+        const segments = layoutWeek(week, occurrences)
+        const visible = segments.filter((s) => s.lane < MAX_LANES)
+        const hiddenOn = (col: number) =>
+          segments.filter((s) => s.lane >= MAX_LANES && s.col <= col && s.col + s.span > col).length
+        const countOn = (col: number) =>
+          segments.filter((s) => s.col <= col && s.col + s.span > col).length
+
+        return (
+          <div key={week[0]} className="relative min-h-[8rem] border-b border-[#138ba0]/10 last:border-b-0">
+            {/* Day cells: the click targets, and the numbers. */}
+            <div className="absolute inset-0 grid grid-cols-7">
+              {week.map((date, col) => {
+                const outside = monthKey(date) !== month
+                const isToday = date === today
+                const isSelected = date === selected
+                const count = countOn(col)
+                const hidden = hiddenOn(col)
+                return (
+                  <button
+                    key={date}
+                    type="button"
+                    onClick={() => onSelect(date)}
+                    aria-pressed={isSelected}
+                    aria-label={`${longDay(date)}${count ? `, ${count} event${count === 1 ? '' : 's'}` : ''}`}
+                    className="relative flex flex-col items-start border-r border-[#138ba0]/10 p-2 text-left transition-colors last:border-r-0 hover:bg-[#f6fbfc]"
+                    style={{
+                      background: isSelected ? `${accent}14` : outside ? '#fbfdfd' : undefined,
+                    }}
+                  >
+                    <span
+                      className="flex h-7 w-7 items-center justify-center rounded-full text-sm font-semibold"
+                      style={
+                        isToday
+                          ? { background: accent, color: '#ffffff' }
+                          : { color: outside ? '#b8c6c9' : INK }
+                      }
+                    >
+                      {Number(date.slice(8))}
+                    </span>
+                    {hidden > 0 && (
+                      <span className="mt-auto text-xs font-semibold" style={{ color: accent }}>
+                        +{hidden} more
+                      </span>
+                    )}
+                  </button>
+                )
+              })}
+            </div>
+
+            {/* Bars, laid over the cells. Only the bars take clicks. */}
+            <div
+              className="pointer-events-none relative grid grid-cols-7 gap-y-1 pb-7 pt-10"
+              style={{ gridTemplateRows: `repeat(${MAX_LANES}, 1.5rem)` }}
+            >
+              {visible.map((seg) => (
+                <Bar key={`${seg.key}-${week[0]}`} seg={seg} accent={accent} />
+              ))}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+function Bar({ seg, accent }: { seg: Segment; accent: string }) {
+  const color = seg.event.color || accent
+  const cancelled = seg.event.status === 'cancelled'
+
+  return (
+    <Link
+      to={eventHref(seg.event.id)}
+      title={`${seg.event.title}${seg.time ? ` · ${seg.time}` : ''}`}
+      className={`pointer-events-auto flex items-center gap-1 truncate px-2 text-xs font-semibold text-white transition-[filter] hover:brightness-110 ${
+        seg.continuesBefore ? 'ml-0 rounded-l-none' : 'ml-1 rounded-l-md'
+      } ${seg.continuesAfter ? 'mr-0 rounded-r-none' : 'mr-1 rounded-r-md'} ${
+        cancelled ? 'line-through opacity-60' : ''
+      }`}
+      style={{
+        gridColumn: `${seg.col + 1} / span ${seg.span}`,
+        gridRow: seg.lane + 1,
+        background: color,
+      }}
+    >
+      {seg.continuesBefore && <span aria-hidden="true">←</span>}
+      <span className="truncate">
+        {seg.time && seg.span === 1 && <span className="font-normal opacity-85">{seg.time.split(' – ')[0]} </span>}
+        {seg.event.title}
+      </span>
+      {seg.continuesAfter && (
+        <span className="ml-auto" aria-hidden="true">
+          →
+        </span>
+      )}
+    </Link>
+  )
+}
+
+/* ── The selected day ────────────────────────────────────────── */
+
+function DayPanel({
+  date,
+  items,
+  accent,
+  onClose,
+}: {
+  date: string
+  items: Occurrence[]
+  accent: string
+  onClose: () => void
+}) {
+  return (
+    <div className="mt-4 rounded-3xl border bg-white p-6" style={{ borderColor: `${accent}40` }}>
+      <div className="flex items-center gap-4">
+        <h4 className="font-display text-lg font-bold">{longDay(date)}</h4>
+        <button
+          type="button"
+          onClick={onClose}
+          className="ml-auto text-sm font-semibold hover:underline"
+          style={{ color: accent }}
+        >
+          Close
+        </button>
+      </div>
+      {items.length === 0 ? (
+        <p className="mt-3 text-sm" style={{ color: BODY }}>
+          Nothing on this day.
+        </p>
+      ) : (
+        <ul className="mt-4 space-y-3">
+          {items.map((item) => (
+            <li key={item.key}>
+              <EventLine item={item} accent={accent} />
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+/* ── List view ───────────────────────────────────────────────── */
+
+/* The month's occurrences by day. An event that began last month
+   files under the 1st, where it's still on. */
+function MonthList({
+  items,
+  monthFrom,
+  accent,
+}: {
+  items: Occurrence[]
+  monthFrom: string
+  accent: string
+}) {
+  if (items.length === 0) {
+    return (
+      <p className="rounded-3xl bg-white p-10 text-center" style={{ color: BODY }}>
+        Nothing on the calendar this month.
+      </p>
+    )
+  }
+
+  const byDay = new Map<string, Occurrence[]>()
+  for (const item of items) {
+    const day = item.start < monthFrom ? monthFrom : item.start
+    const list = byDay.get(day)
+    if (list) list.push(item)
+    else byDay.set(day, [item])
+  }
+
+  return (
+    <ol className="space-y-4">
+      {[...byDay.entries()].map(([day, list]) => {
+        const d = parse(day)
+        return (
+          <li key={day} className="flex gap-5 rounded-3xl bg-white p-5 shadow-sm">
+            <div className="w-14 shrink-0 text-center">
+              <p className="text-xs font-bold uppercase tracking-widest" style={{ color: accent }}>
+                {d.toLocaleDateString(undefined, { weekday: 'short' })}
+              </p>
+              <p className="font-display text-3xl font-extrabold leading-none">{d.getDate()}</p>
+            </div>
+            <ul className="min-w-0 flex-1 space-y-3">
+              {list.map((item) => (
+                <li key={item.key}>
+                  <EventLine item={item} accent={accent} />
+                </li>
+              ))}
+            </ul>
+          </li>
+        )
+      })}
+    </ol>
+  )
+}
+
+/* One occurrence as a line of text, shared by the day panel and the
+   list so the two describe an event the same way. */
+function EventLine({ item, accent }: { item: Occurrence; accent: string }) {
+  const { event } = item
+  const color = event.color || accent
+  const where = event.location_label || (event.is_online ? 'Online' : null)
+  const cancelled = event.status === 'cancelled'
+
+  return (
+    <Link
+      to={eventHref(event.id)}
+      className="group flex items-start gap-3 rounded-xl p-2 transition-colors hover:bg-[#f6fbfc]"
+    >
+      <span className="mt-1.5 h-3 w-3 shrink-0 rounded-full" style={{ background: color }} aria-hidden="true" />
+      <span className="min-w-0">
+        <span className={`block font-semibold group-hover:underline ${cancelled ? 'line-through' : ''}`}>
+          {event.title}
+          {cancelled && <span className="ml-2 text-xs font-bold uppercase text-[#b3261e] no-underline">Cancelled</span>}
+        </span>
+        <span className="block text-sm" style={{ color: BODY }}>
+          {[
+            item.time ?? (item.start !== item.end ? rangeLabel(item.start, item.end) : null),
+            eventTypeLabel(event.event_type),
+            where,
+          ]
+            .filter(Boolean)
+            .join(' · ')}
+        </span>
+      </span>
+    </Link>
+  )
+}
+
+/* ── Controls ────────────────────────────────────────────────── */
+
+function NavButton({
+  label,
+  onClick,
+  accent,
+  children,
+}: {
+  label: string
+  onClick: () => void
+  accent: string
+  children: string
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={label}
+      className="flex h-10 w-10 items-center justify-center rounded-full border text-xl transition-colors hover:bg-white"
+      style={{ borderColor: accent, color: accent }}
+    >
+      {children}
+    </button>
+  )
+}
+
+function FilterSelect({
+  label,
+  value,
+  onChange,
+  all,
+  options,
+}: {
+  label: string
+  value: string
+  onChange: (value: string) => void
+  all: string
+  options: Array<[string, string]>
+}) {
+  return (
+    <select
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      aria-label={label}
+      className="rounded-full border border-[#138ba0]/25 bg-white px-4 py-2 text-sm outline-none focus:border-[#138ba0]"
+    >
+      <option value="">{all}</option>
+      {options.map(([id, name]) => (
+        <option key={id} value={id}>
+          {name}
+        </option>
+      ))}
+    </select>
+  )
+}

src/pages/sections/home/CalendarBand.tsx

@@ -0,0 +1,28 @@
+/* ═══════════════════════════════════════════════════════════════
+   CALENDAR BAND
+
+   EventCalendar on the front page: every scope and every type, all
+   four visitor filters, starting on this month. The same component
+   can go on any page with a narrower filter — a region's page would
+   pass host, a classes page would pass type — and this file only
+   adds the front page's heading around it.
+   ═══════════════════════════════════════════════════════════════ */
+
+import EventCalendar from '../EventCalendar.tsx'
+
+type CalendarBandProps = { id: string; title: string; blurb?: string | null }
+
+export default function CalendarBand({ id, title, blurb }: CalendarBandProps) {
+  return (
+    <section id={id} className="py-24" style={{ background: '#f6fbfc' }}>
+      <div className="mx-auto mb-10 max-w-6xl px-6">
+        <h2 className="font-display text-4xl font-extrabold text-[#073d4a] md:text-5xl">
+          {title}
+        </h2>
+        {blurb && <p className="mt-3 max-w-xl text-lg text-[#4a6b72]">{blurb}</p>}
+      </div>
+
+      <EventCalendar />
+    </section>
+  )
+}