From 68c33be0902184831e67f1d75e1e9d36e4c7b5ba Mon Sep 17 00:00:00 2001 From: Vincent Lannurien Date: Mon, 17 Aug 2026 21:17:59 +0200 Subject: [PATCH] Add a year view to the calendar Pull in @fullcalendar/multimonth so the deadline calendar can show all twelve months at once, between the month grid and the year list. Events render as dots there and the type scales down, so the month tables stay legible two or three to a row. Co-Authored-By: Claude Opus 5 --- site/assets/js/calendar.js | 12 ++++++++-- site/layouts/partials/extend_head.html | 8 +++++++ site/package-lock.json | 31 +++++++++++++++++++------- site/package.json | 3 ++- 4 files changed, 43 insertions(+), 11 deletions(-) diff --git a/site/assets/js/calendar.js b/site/assets/js/calendar.js index 8451537..ed5d7cf 100644 --- a/site/assets/js/calendar.js +++ b/site/assets/js/calendar.js @@ -1,6 +1,7 @@ import { Calendar } from '@fullcalendar/core' import dayGridPlugin from '@fullcalendar/daygrid' import listPlugin from '@fullcalendar/list' +import multiMonthPlugin from '@fullcalendar/multimonth' document.addEventListener('DOMContentLoaded', function () { var el = document.getElementById('pa-calendar') @@ -10,14 +11,21 @@ document.addEventListener('DOMContentLoaded', function () { try { events = JSON.parse(el.dataset.events || '[]') } catch (_) { events = [] } var cal = new Calendar(el, { - plugins: [dayGridPlugin, listPlugin], + plugins: [dayGridPlugin, listPlugin, multiMonthPlugin], initialView: 'dayGridMonth', firstDay: 1, events: events, headerToolbar: { left: 'prev,next today', center: 'title', - right: 'dayGridMonth,listYear' + right: 'dayGridMonth,multiMonthYear,listYear' + }, + views: { + multiMonthYear: { + // Dots keep the year grid readable when a day holds several deadlines. + eventDisplay: 'list-item', + multiMonthMinWidth: 260 + } }, eventClick: function (info) { if (info.event.url) { diff --git a/site/layouts/partials/extend_head.html b/site/layouts/partials/extend_head.html index 6c76e23..d88b99c 100644 --- a/site/layouts/partials/extend_head.html +++ b/site/layouts/partials/extend_head.html @@ -32,5 +32,13 @@ .fc .fc-daygrid-day-number, .fc .fc-col-header-cell-cushion { color: var(--secondary); } .fc .fc-day-today .fc-daygrid-day-number { color: var(--accent); font-weight: 600; } .fc-event { border-radius: 4px; } + /* Year view: months sit two or three to a row, so scale the text down and + let event titles ellipsize instead of stretching the month tables. */ + .fc .fc-multimonth-title { font-size: 0.95rem; padding: 0.7em 0; } + .fc .fc-multimonth-multicol .fc-multimonth-month { padding: 0 0.6em 1em; } + .fc-multimonth .fc-daygrid-day-number, + .fc-multimonth .fc-col-header-cell-cushion { font-size: 0.7rem; } + .fc-multimonth .fc-event { font-size: 0.68rem; } + .fc-multimonth .fc-event-title { text-overflow: ellipsis; } {{- end }} diff --git a/site/package-lock.json b/site/package-lock.json index 2f2ebeb..0c3f97b 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -10,23 +10,26 @@ "dependencies": { "@fullcalendar/core": "^6.1.15", "@fullcalendar/daygrid": "^6.1.15", - "@fullcalendar/list": "^6.1.15" + "@fullcalendar/list": "^6.1.15", + "@fullcalendar/multimonth": "^6.1.21" } }, "node_modules/@fullcalendar/core": { - "version": "6.1.20", - "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.20.tgz", - "integrity": "sha512-1cukXLlePFiJ8YKXn/4tMKsy0etxYLCkXk8nUCFi11nRONF2Ba2CD5b21/ovtOO2tL6afTJfwmc1ed3HG7eB1g==", + "version": "6.1.21", + "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.21.tgz", + "integrity": "sha512-t3u/+sqh3Iq7TWtUnVLcGDUE6OWZh0UD3c04bI/l7lSLAgAKr3kngBmhHiQD1QXpwC8ZN5iNqG7a7gOVixhSKQ==", + "license": "MIT", "dependencies": { "preact": "~10.12.1" } }, "node_modules/@fullcalendar/daygrid": { - "version": "6.1.20", - "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.20.tgz", - "integrity": "sha512-AO9vqhkLP77EesmJzuU+IGXgxNulsA8mgQHynclJ8U70vSwAVnbcLG9qftiTAFSlZjiY/NvhE7sflve6cJelyQ==", + "version": "6.1.21", + "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.21.tgz", + "integrity": "sha512-QYb1y40RGYLlOxKpYWg8O+7njEnKnFG8Tt7qjnubJGR35s1phQg67E+81y2TyAbbm59p2JFOCXGDk9t6KDujIA==", + "license": "MIT", "peerDependencies": { - "@fullcalendar/core": "~6.1.20" + "@fullcalendar/core": "~6.1.21" } }, "node_modules/@fullcalendar/list": { @@ -37,6 +40,18 @@ "@fullcalendar/core": "~6.1.20" } }, + "node_modules/@fullcalendar/multimonth": { + "version": "6.1.21", + "resolved": "https://registry.npmjs.org/@fullcalendar/multimonth/-/multimonth-6.1.21.tgz", + "integrity": "sha512-/5IZDDcdRzgO/h7V3RBEhzhrza5TIQ2T025IjA2Dfq3xbvxSnMAl2CMcy7VrSHsKaY1eWvxQXg/NZZm7hLmDYA==", + "license": "MIT", + "dependencies": { + "@fullcalendar/daygrid": "~6.1.21" + }, + "peerDependencies": { + "@fullcalendar/core": "~6.1.21" + } + }, "node_modules/preact": { "version": "10.12.1", "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz", diff --git a/site/package.json b/site/package.json index 781651a..9c8d2ba 100644 --- a/site/package.json +++ b/site/package.json @@ -6,6 +6,7 @@ "dependencies": { "@fullcalendar/core": "^6.1.15", "@fullcalendar/daygrid": "^6.1.15", - "@fullcalendar/list": "^6.1.15" + "@fullcalendar/list": "^6.1.15", + "@fullcalendar/multimonth": "^6.1.21" } }