Add a year view to the calendar
All checks were successful
Build and deploy static pages / build-and-push (push) Successful in 13s

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 <noreply@anthropic.com>
This commit is contained in:
2026-08-17 21:17:59 +02:00
parent 4de1553c21
commit 68c33be090
4 changed files with 43 additions and 11 deletions

View File

@@ -1,6 +1,7 @@
import { Calendar } from '@fullcalendar/core' import { Calendar } from '@fullcalendar/core'
import dayGridPlugin from '@fullcalendar/daygrid' import dayGridPlugin from '@fullcalendar/daygrid'
import listPlugin from '@fullcalendar/list' import listPlugin from '@fullcalendar/list'
import multiMonthPlugin from '@fullcalendar/multimonth'
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
var el = document.getElementById('pa-calendar') var el = document.getElementById('pa-calendar')
@@ -10,14 +11,21 @@ document.addEventListener('DOMContentLoaded', function () {
try { events = JSON.parse(el.dataset.events || '[]') } catch (_) { events = [] } try { events = JSON.parse(el.dataset.events || '[]') } catch (_) { events = [] }
var cal = new Calendar(el, { var cal = new Calendar(el, {
plugins: [dayGridPlugin, listPlugin], plugins: [dayGridPlugin, listPlugin, multiMonthPlugin],
initialView: 'dayGridMonth', initialView: 'dayGridMonth',
firstDay: 1, firstDay: 1,
events: events, events: events,
headerToolbar: { headerToolbar: {
left: 'prev,next today', left: 'prev,next today',
center: 'title', 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) { eventClick: function (info) {
if (info.event.url) { if (info.event.url) {

View File

@@ -32,5 +32,13 @@
.fc .fc-daygrid-day-number, .fc .fc-col-header-cell-cushion { color: var(--secondary); } .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 .fc-day-today .fc-daygrid-day-number { color: var(--accent); font-weight: 600; }
.fc-event { border-radius: 4px; } .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; }
</style> </style>
{{- end }} {{- end }}

31
site/package-lock.json generated
View File

@@ -10,23 +10,26 @@
"dependencies": { "dependencies": {
"@fullcalendar/core": "^6.1.15", "@fullcalendar/core": "^6.1.15",
"@fullcalendar/daygrid": "^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": { "node_modules/@fullcalendar/core": {
"version": "6.1.20", "version": "6.1.21",
"resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.20.tgz", "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.21.tgz",
"integrity": "sha512-1cukXLlePFiJ8YKXn/4tMKsy0etxYLCkXk8nUCFi11nRONF2Ba2CD5b21/ovtOO2tL6afTJfwmc1ed3HG7eB1g==", "integrity": "sha512-t3u/+sqh3Iq7TWtUnVLcGDUE6OWZh0UD3c04bI/l7lSLAgAKr3kngBmhHiQD1QXpwC8ZN5iNqG7a7gOVixhSKQ==",
"license": "MIT",
"dependencies": { "dependencies": {
"preact": "~10.12.1" "preact": "~10.12.1"
} }
}, },
"node_modules/@fullcalendar/daygrid": { "node_modules/@fullcalendar/daygrid": {
"version": "6.1.20", "version": "6.1.21",
"resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.20.tgz", "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.21.tgz",
"integrity": "sha512-AO9vqhkLP77EesmJzuU+IGXgxNulsA8mgQHynclJ8U70vSwAVnbcLG9qftiTAFSlZjiY/NvhE7sflve6cJelyQ==", "integrity": "sha512-QYb1y40RGYLlOxKpYWg8O+7njEnKnFG8Tt7qjnubJGR35s1phQg67E+81y2TyAbbm59p2JFOCXGDk9t6KDujIA==",
"license": "MIT",
"peerDependencies": { "peerDependencies": {
"@fullcalendar/core": "~6.1.20" "@fullcalendar/core": "~6.1.21"
} }
}, },
"node_modules/@fullcalendar/list": { "node_modules/@fullcalendar/list": {
@@ -37,6 +40,18 @@
"@fullcalendar/core": "~6.1.20" "@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": { "node_modules/preact": {
"version": "10.12.1", "version": "10.12.1",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz", "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",

View File

@@ -6,6 +6,7 @@
"dependencies": { "dependencies": {
"@fullcalendar/core": "^6.1.15", "@fullcalendar/core": "^6.1.15",
"@fullcalendar/daygrid": "^6.1.15", "@fullcalendar/daygrid": "^6.1.15",
"@fullcalendar/list": "^6.1.15" "@fullcalendar/list": "^6.1.15",
"@fullcalendar/multimonth": "^6.1.21"
} }
} }