// Trove — School Calendar
// A browsable calendar of UK primary school events. Agenda + grid views,
// filters by type and key stage, and a detail drawer that links into the Wiki.
// Data: window.SCHOOL_CALENDAR (calendar-data.js).
const CAL_TYPES = {
festival: { label: 'Festival', color: 'oklch(0.58 0.13 320)' },
awareness: { label: 'Awareness day', color: 'oklch(0.56 0.11 245)' },
seasonal: { label: 'Seasonal & fun', color: 'oklch(0.56 0.11 150)' },
national: { label: 'National day', color: 'oklch(0.56 0.13 28)' },
commemoration: { label: 'Commemoration', color: 'oklch(0.52 0.03 265)' },
term: { label: 'Term dates', color: 'oklch(0.62 0.10 72)' },
};
const CAL_YEARS = ['2025/26', '2026/27'];
// Academic-year month order: September (8) through August (7).
const CAL_MONTH_ORDER = [8, 9, 10, 11, 0, 1, 2, 3, 4, 5, 6, 7];
const CAL_MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const CAL_WD_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const CAL_WD_LONG = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
function calParseISO(s) { const [y, m, d] = s.split('-').map(Number); return new Date(y, m - 1, d); }
function calEvRange(ev, year) {
const d = ev.d[year];
if (!d) return null;
if (Array.isArray(d)) return { start: calParseISO(d[0]), end: calParseISO(d[1]) };
return { start: calParseISO(d), end: null };
}
function calLongDate(date) { return `${date.getDate()} ${CAL_MONTHS[date.getMonth()]} ${date.getFullYear()}`; }
function calFullWhen(r) {
if (!r.end) return `${CAL_WD_LONG[r.start.getDay()]} ${calLongDate(r.start)}`;
return `${calLongDate(r.start)} to ${calLongDate(r.end)}`;
}
function calCurrentAcademicYear() {
const now = new Date();
const y = now.getFullYear();
const start = now.getMonth() >= 8 ? y : y - 1;
const label = `${start}/${String(start + 1).slice(2)}`;
return CAL_YEARS.includes(label) ? label : CAL_YEARS[0];
}
// Grid index (into CAL_MONTH_ORDER) of the current month, if today falls in this academic year.
function calDefaultGridIdx(year) {
const now = new Date();
const sy = parseInt(year.slice(0, 4), 10);
const inYear = now >= new Date(sy, 8, 1) && now <= new Date(sy + 1, 7, 31, 23, 59, 59);
if (!inYear) return 0;
const pos = CAL_MONTH_ORDER.indexOf(now.getMonth());
return pos < 0 ? 0 : pos;
}
// Next few real-world occurrences across every academic year in the data.
function calUpcoming(events, limit = 5) {
const today = new Date(); today.setHours(0, 0, 0, 0);
const horizon = new Date(today.getTime() + 28 * 86400000);
const out = [];
events.forEach(ev => {
Object.keys(ev.d || {}).forEach(year => {
const r = calEvRange(ev, year);
if (!r) return;
const s = new Date(r.start); s.setHours(0, 0, 0, 0);
const e = new Date(r.end || r.start); e.setHours(0, 0, 0, 0);
if (e >= today && s <= horizon) out.push({ ev, year, r, start: s, end: e });
});
});
return out.sort((a, b) => a.start - b.start).slice(0, limit);
}
function calWhenLabel(o) {
const today = new Date(); today.setHours(0, 0, 0, 0);
if (today >= o.start && today <= o.end) return 'Today';
const days = Math.round((o.start - today) / 86400000);
if (days === 1) return 'Tomorrow';
if (days < 7) return CAL_WD_LONG[o.start.getDay()];
if (days < 14) return 'Next week';
return `${o.start.getDate()} ${CAL_MONTHS[o.start.getMonth()].slice(0, 3)}`;
}
function CalendarScreen({ onOpenArticle, onOpenWiki, initialEventId }) {
const { isMobile } = window.useViewport();
const events = window.SCHOOL_CALENDAR || [];
// If we arrived from a search result or a homepage card, open that event's
// drawer on the academic year whose occurrence is still to come.
const arrivedOn = React.useMemo(() => {
if (!initialEventId) return null;
const ev = events.find(e => e.id === initialEventId);
if (!ev) return null;
const today = new Date(); today.setHours(0, 0, 0, 0);
const years = CAL_YEARS.filter(y => ev.d && ev.d[y]);
if (!years.length) return null;
const upcoming = years.find(y => {
const r = calEvRange(ev, y);
return r && (r.end || r.start) >= today;
});
return { id: ev.id, year: upcoming || years[years.length - 1] };
}, [initialEventId, events]);
const [year, setYear] = React.useState(() => (arrivedOn ? arrivedOn.year : calCurrentAcademicYear()));
const [view, setView] = React.useState('agenda'); // agenda | grid
const [types, setTypes] = React.useState(() => Object.fromEntries(Object.keys(CAL_TYPES).map(k => [k, true])));
const [ks, setKs] = React.useState('all'); // all | KS1 | KS2
const [selectedId, setSelectedId] = React.useState(arrivedOn ? arrivedOn.id : null);
const [gridIdx, setGridIdx] = React.useState(() => calDefaultGridIdx(year)); // index into CAL_MONTH_ORDER
const startYear = parseInt(year.slice(0, 4), 10);
const allTypesOn = Object.values(types).every(Boolean);
const withDates = React.useMemo(() => {
return events
.filter(ev => types[ev.type] && (ks === 'all' || (ev.ks || []).includes(ks)))
.map(ev => ({ ev, r: calEvRange(ev, year) }))
.filter(x => x.r)
.sort((a, b) => a.r.start - b.r.start);
}, [events, types, ks, year]);
const selected = selectedId ? events.find(e => e.id === selectedId) : null;
const selectedRange = selected ? calEvRange(selected, year) : null;
function toggleType(k) { setTypes(t => ({ ...t, [k]: !t[k] })); }
function setAllTypes(v) { setTypes(Object.fromEntries(Object.keys(CAL_TYPES).map(k => [k, v]))); }
React.useEffect(() => {
function onKey(e) { if (e.key === 'Escape') setSelectedId(null); }
document.addEventListener('keydown', onKey);
return () => document.removeEventListener('keydown', onKey);
}, []);
// Jump the grid to the current month when the user picks a year from the tab.
function selectYear(y) { setYear(y); setGridIdx(calDefaultGridIdx(y)); }
// Continuous month navigation across both academic years (Sept of year N rolls back to Aug of year N-1).
const yearIdx = CAL_YEARS.indexOf(year);
const canGridPrev = gridIdx > 0 || yearIdx > 0;
const canGridNext = gridIdx < 11 || yearIdx < CAL_YEARS.length - 1;
function gridPrev() {
if (gridIdx > 0) setGridIdx(gridIdx - 1);
else if (yearIdx > 0) { setYear(CAL_YEARS[yearIdx - 1]); setGridIdx(11); }
}
function gridNext() {
if (gridIdx < 11) setGridIdx(gridIdx + 1);
else if (yearIdx < CAL_YEARS.length - 1) { setYear(CAL_YEARS[yearIdx + 1]); setGridIdx(0); }
}
// Agenda: group by month, in academic order (already sorted chronologically).
const groups = [];
{ let cur = null;
withDates.forEach(({ ev, r }) => {
const key = `${r.start.getFullYear()}-${r.start.getMonth()}`;
if (!cur || cur.key !== key) { cur = { key, label: `${CAL_MONTHS[r.start.getMonth()]} ${r.start.getFullYear()}`, items: [] }; groups.push(cur); }
cur.items.push({ ev, r });
});
}
return (
Trove School Calendar
The primary school year, all in one place.
Festivals, awareness days, commemorations and term dates for UK primary schools. Tap any event to learn more, with links into the Wiki.
{ setYear(o.year); setGridIdx(calDefaultGridIdx(o.year)); setSelectedId(o.ev.id); }} />
{/* Controls: year + view */}
setView('agenda')} icon="List" label="Agenda" />
setView('grid')} icon="Grid" label="Grid" />
{/* Filters */}
{Object.entries(CAL_TYPES).map(([k, meta]) => {
const on = types[k];
return (
);
})}
{types.term && (
*
Term dates are a guide only and vary by local authority and school.
)}
{!types.term && }
{withDates.length === 0 ? (
No events match these filters. Try turning a type back on.
) : view === 'agenda' ? (
) : (
)}
{selected && (
setSelectedId(null)}
onOpenArticle={onOpenArticle}
/>
)}
);
}
// ── Agenda view (collapsible months) ──────────────────────────
function CalAgenda({ groups, onSelect, year }) {
// Default-open the current real-world month if it's in this academic year,
// otherwise the first month that has events.
const now = new Date();
const nowKey = `${now.getFullYear()}-${now.getMonth()}`;
const defaultKey = groups.some(g => g.key === nowKey) ? nowKey : (groups[0] && groups[0].key);
const [open, setOpen] = React.useState({});
// Reset open-state whenever the set of months changes (year/filter change).
React.useEffect(() => {
setOpen(defaultKey ? { [defaultKey]: true } : {});
}, [year, defaultKey, groups.length]);
const allOpen = groups.length > 0 && groups.every(g => open[g.key]);
function toggle(key) { setOpen(o => ({ ...o, [key]: !o[key] })); }
function setAll(v) { const next = {}; if (v) groups.forEach(g => next[g.key] = true); setOpen(next); }
return (
{groups.map(g => {
const isOpen = !!open[g.key];
const isNow = g.key === nowKey;
return (
{isOpen && (
{g.items.map(({ ev, r }) => {
const meta = CAL_TYPES[ev.type];
return (
);
})}
)}
);
})}
);
}
// ── Grid view ─────────────────────────────────────────────────
function CalGrid({ startYear, gridIdx, items, onSelect, onPrev, onNext, canPrev, canNext }) {
const { isMobile } = window.useViewport();
const monthIdx = CAL_MONTH_ORDER[gridIdx];
const calYear = monthIdx >= 8 ? startYear : startYear + 1;
const firstDow = (new Date(calYear, monthIdx, 1).getDay() + 6) % 7; // Monday-first offset
const daysInMonth = new Date(calYear, monthIdx + 1, 0).getDate();
// events active on each day of this month
function eventsOnDay(day) {
const cell = new Date(calYear, monthIdx, day).setHours(0, 0, 0, 0);
return items.filter(({ r }) => {
const s = new Date(r.start).setHours(0, 0, 0, 0);
const e = (r.end ? new Date(r.end) : new Date(r.start)).setHours(0, 0, 0, 0);
return cell >= s && cell <= e;
});
}
const cells = [];
for (let i = 0; i < firstDow; i++) cells.push(null);
for (let d = 1; d <= daysInMonth; d++) cells.push(d);
const monthHasEvents = items.some(({ r }) => {
const inMonth = (dt) => dt.getFullYear() === calYear && dt.getMonth() === monthIdx;
return inMonth(r.start) || (r.end && (inMonth(r.end) || (r.start < new Date(calYear, monthIdx, 1) && r.end > new Date(calYear, monthIdx + 1, 0))));
});
return (
{/* Month navigator */}
{CAL_MONTHS[monthIdx]} {calYear}
{/* Weekday header */}
{['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map(d => (
{d}
))}
{/* Day cells */}
{cells.map((d, i) => {
const evs = d ? eventsOnDay(d) : [];
const isWeekend = (i % 7) >= 5;
const now = new Date();
const isToday = d && calYear === now.getFullYear() && monthIdx === now.getMonth() && d === now.getDate();
return (
= 7 ? '1px solid var(--border)' : 0,
background: isToday ? 'color-mix(in oklab, var(--gold) 12%, var(--surface))' : (d ? (isWeekend ? 'color-mix(in oklab, var(--bg-sunken) 50%, transparent)' : 'transparent') : 'var(--bg-sunken)'),
display: 'flex', flexDirection: 'column', gap: 3,
}}>
{d && (
isToday
?
{d}
:
{d}
)}
{evs.slice(0, 3).map(({ ev }) => {
const meta = CAL_TYPES[ev.type];
return (
);
})}
{evs.length > 3 &&
+{evs.length - 3} more
}
);
})}
{!monthHasEvents && (
No events this month with the current filters. Use the arrows to browse other months.
)}
e.stopPropagation()} className="cal-drawer"
style={{ width: 'min(440px, 100%)', height: '100%', background: 'var(--bg)', borderLeft: '1px solid var(--border)',
boxShadow: 'var(--shadow-xl)', overflowY: 'auto', padding: '24px 28px 40px' }}>
{meta.label}
{ev.title}
{calFullWhen(range)}
{(ev.ks || []).map(k => {k})}
{ev.blurb}
{ev.note && (
*
{ev.note}
)}
{hasArticle ? (
) : (
No Wiki article for this one yet.
)}
);
}
// ── Upcoming strip (top of the page) ──────────────────────────
function CalUpcoming({ events, onPick }) {
const { isMobile } = window.useViewport();
const items = React.useMemo(() => calUpcoming(events), [events]);
if (!items.length) return null;
const soon = items.some(o => (o.start - new Date().setHours(0, 0, 0, 0)) / 86400000 < 7);
return (
{soon ? 'Events this week' : 'Coming up next'}
{items.map(o => {
const meta = CAL_TYPES[o.ev.type];
const when = calWhenLabel(o);
const isToday = when === 'Today';
return (
);
})}
);
}
// ── Small shared controls ─────────────────────────────────────
function CalSegmented({ options, labels, value, onChange, small }) {
return (
{options.map((opt, i) => {
const on = opt === value;
return (
);
})}
);
}
function CalViewBtn({ active, onClick, icon, label }) {
const I = Icon[icon];
return (
);
}
window.CalendarScreen = CalendarScreen;