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" } }