"use client" import { useEffect, useMemo, useRef, useState } from "react" import NextLink from "next/link" import { usePathname, useRouter, useSearchParams } from "next/navigation" import { Badge, Box, Button, Flex, Grid, HStack, IconButton, Popover, Portal, Spinner, Stack, Text } from "@chakra-ui/react" import { Icon } from "@obelisk/blocks" const WEEKDAYS = ["Ma", "Di", "Wo", "Do", "Vr", "Za", "Zo"] const MAX_VISIBLE = 3 // Kop + drie regels bepalen samen de vaste celhoogte (28 + 3 × 22 = 94px). const HEADER_HEIGHT = "28px" const ROW_HEIGHT = "22px" const CELL_HEIGHT = "94px" const API = "/api/app/credits/events/" const MONTH_PARAM = "maand" const pad = (n) => String(n).padStart(2, "0") const isoDate = (d) => d.getFullYear() + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate()) const sameDay = (a, b) => isoDate(a) === isoDate(b) /** Maandag t/m zondag: de eerste maandag op of vóór de 1e van de maand. */ function gridStart(year, month) { const first = new Date(year, month, 1) const offset = (first.getDay() + 6) % 7 return new Date(year, month, 1 - offset) } /** 42 cellen (6 weken) zodat de tabel niet in hoogte springt per maand. */ function gridDays(year, month) { const start = gridStart(year, month) return Array.from({ length: 42 }, (_, i) => new Date(start.getFullYear(), start.getMonth(), start.getDate() + i)) } /** * Kleur van het bolletje: de status van het event, niet het type. Groen is * open (er is plek), rood is vol, grijs is afgelast of geweest. Zo lees je in * één blik waar je nog bij kunt, zonder legenda. */ function statusColor(ev) { if (isInactive(ev)) return "gray.400" if (ev.is_full) return "red.500" return "theme.accent" } function monthLabel(year, month) { const label = new Date(year, month, 1).toLocaleDateString("nl-NL", { month: "long", year: "numeric" }) return label.charAt(0).toUpperCase() + label.slice(1) } function dayLabel(key) { return new Date(key + "T12:00:00").toLocaleDateString("nl-NL", { weekday: "long", day: "numeric", month: "long" }) } function timeLabel(value) { const d = new Date(value) return isNaN(d) ? "" : pad(d.getHours()) + ":" + pad(d.getMinutes()) } function timeRange(ev) { return timeLabel(ev.starts_at) + (ev.ends_at ? " – " + timeLabel(ev.ends_at) : "") } /** Het label van een event in de kalender: het eventtype, met de titel als terugval. */ function label(ev) { return ev.event_type_title || ev.event_type || ev.title || "" } /** Statusbadge voor een event dat niet (meer) gewoon gepubliceerd is; vol telt ook. */ function statusBadge(ev, size) { if (ev.status === "cancelled") return Afgelast if (ev.status === "completed") return Geweest if (ev.is_full) return Vol return null } /** Afgelaste en afgeronde events staan gedempt in de kalender. */ function isInactive(ev) { return ev.status === "cancelled" || ev.status === "completed" } /** * Popover met de details van één of meer events. De trigger is het element * dat de aanroeper meegeeft (een eventregel of een "+N meer"); de inhoud is * per event een blokje met type, tijd, bezetting, credits en een knop naar * de eventpagina. */ function EventPopover({ title, events, color, eventBaseHref, children }) { return ( {children} {title ? ( {title} ) : null} {events.map((ev) => ( {label(ev)} {statusBadge(ev, "sm")} {timeRange(ev)} {ev.max_participants && !isInactive(ev) ? ( {ev.registration_count} / {ev.max_participants} plekken ) : null} ))} ) } /** * Maandkalender van events uit de Credits-app. * * Client-side: de bezoeker bladert door maanden, dus de data komt per zichtbare * periode uit het events-endpoint van de Credits-app * (/api/app/credits/events/?from&to). Dat endpoint levert per event ook het * aantal inschrijvingen en of het vol is — iets wat de publieke records-API * niet kan, omdat inschrijvingen niet openbaar zijn. De grid is altijd zes * weken van maandag t/m zondag; dagen buiten de maand staan er wel (gedempt), * zodat de tabel een vaste hoogte houdt. * * Elke dagcel heeft het dagnummer als kop en daaronder maximaal drie events * met de begintijd, het eventtype als label en een stip in de statuskleur * (groen open, rood vol, grijs afgelast/geweest) plus een statusbadge. De cel zelf is niet klikbaar; elk * event wél: dat opent een popover met de details en een knop naar de * eventpagina, en "+N meer" opent een popover met de hele daglijst. Op mobiel * zijn zeven kolommen te smal voor labels: daar blijft per event alleen de * stip met de tijd over, met dezelfde popover. */ export default function AgendaMonth({ eventBaseHref = "/events/" }) { const today = useMemo(() => new Date(), []) const router = useRouter() const pathname = usePathname() const searchParams = useSearchParams() // De maand staat in de URL (?maand=2026-09): deelbaar, en de terugknop // bladert terug. Zonder (of met een ongeldige) parameter: de huidige maand. const cursor = useMemo(() => { const match = /^(\d{4})-(\d{2})$/.exec(searchParams.get(MONTH_PARAM) || "") const month = match ? Number(match[2]) - 1 : -1 if (match && month >= 0 && month <= 11) return { year: Number(match[1]), month } return { year: today.getFullYear(), month: today.getMonth() } }, [searchParams, today]) const [state, setState] = useState({ loading: true, events: [], failed: false }) // Cache per zichtbare periode: een al bekeken maand staat er direct weer, // terwijl op de achtergrond een verse versie wordt opgehaald. const cache = useRef({}) const days = useMemo(() => gridDays(cursor.year, cursor.month), [cursor]) useEffect(() => { let cancelled = false const from = days[0] const to = new Date(days[41].getFullYear(), days[41].getMonth(), days[41].getDate() + 1) const params = new URLSearchParams({ from: isoDate(from), to: isoDate(to) }) const key = params.toString() const known = cache.current[key] setState((s) => ({ events: known || s.events, loading: !known, failed: false })) fetch(API + "?" + key, { credentials: "same-origin" }) .then((r) => (r.ok ? r.json() : Promise.reject(new Error("HTTP " + r.status)))) .then((body) => { const events = body.results || [] cache.current = { ...cache.current, [key]: events } if (!cancelled) setState({ loading: false, failed: false, events }) }) .catch(() => { if (!cancelled) setState((s) => ({ loading: false, failed: !known, events: known || [] })) }) return () => { cancelled = true } }, [days]) /** Navigeer naar een maand via de URL; null = huidige maand (parameter weg). */ const goTo = (year, month) => { const next = new URLSearchParams(searchParams.toString()) const isCurrent = year === today.getFullYear() && month === today.getMonth() if (isCurrent) next.delete(MONTH_PARAM) else next.set(MONTH_PARAM, year + "-" + pad(month + 1)) const query = next.toString() // push, geen replace: elke maand wordt een stap in de geschiedenis, zodat // de terugknop terugbladert. scroll:false houdt de kalender op z'n plek. router.push(pathname + (query ? "?" + query : ""), { scroll: false }) } const byDay = useMemo(() => { const map = {} for (const ev of state.events) { const d = new Date(ev.starts_at) if (isNaN(d)) continue const key = isoDate(d) map[key] = [...(map[key] || []), ev] } return map }, [state.events]) const inMonth = state.events.filter((ev) => { const d = new Date(ev.starts_at) return d.getFullYear() === cursor.year && d.getMonth() === cursor.month }) const move = (delta) => { const d = new Date(cursor.year, cursor.month + delta, 1) goTo(d.getFullYear(), d.getMonth()) } const popoverProps = { color: statusColor, eventBaseHref } return ( move(-1)}> {monthLabel(cursor.year, cursor.month)} move(1)}> {state.loading ? : null} {state.failed ? "De agenda kon niet geladen worden." : inMonth.length + (inMonth.length === 1 ? " event" : " events") + " in " + monthLabel(cursor.year, cursor.month).toLowerCase()} goTo(today.getFullYear(), today.getMonth())} > Vandaag {WEEKDAYS.map((d) => ( {d} ))} {/* Tijdens het laden blijft de vorige maand (of de cache) staan, licht gedempt, in plaats van een lege grid die daarna inspringt. */} {days.map((day) => { const key = isoDate(day) const events = byDay[key] || [] const outside = day.getMonth() !== cursor.month const isToday = sameDay(day, today) // Precies drie regels per cel: passen ze niet allemaal, dan tonen we // er twee en neemt "+N meer" de derde regel — nooit een vierde. const visible = events.length > MAX_VISIBLE ? MAX_VISIBLE - 1 : events.length const hidden = events.length - visible // De cel zelf is geen knop: alleen de eventregels (en "+N meer") // zijn klikbaar. Bovenin het dagnummer als kop, daaronder de events. // Vaste hoogte: kop + drie regels, zonder padding (zie CELL_HEIGHT). return ( {pad(day.getDate())} {/* Geen padding op de cel: de regels lopen van rand tot rand, met hun eigen padding, zodat de hover de hele breedte vult. */} {events.slice(0, visible).map((ev) => ( {timeLabel(ev.starts_at)} {/* Label alleen op desktop; op mobiel zijn zeven kolommen te smal */} {label(ev)} {statusBadge(ev, "xs")} ))} {hidden ? ( +{hidden} meer ) : null} ) })} ) } export function Preview() { return }

Training

Praktisch

Meedoen?