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>
28 lines
1.3 KiB
TypeScript
28 lines
1.3 KiB
TypeScript
/* ═══════════════════════════════════════════════════════════════
|
|
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>
|
|
)
|
|
}
|