Files
publish-assistant/site/assets/js/calendar.js
Vincent Lannurien 68c33be090
All checks were successful
Build and deploy static pages / build-and-push (push) Successful in 13s
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 <noreply@anthropic.com>
2026-08-17 21:17:59 +02:00

45 lines
1.3 KiB
JavaScript

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')
if (!el) return
var events
try { events = JSON.parse(el.dataset.events || '[]') } catch (_) { events = [] }
var cal = new Calendar(el, {
plugins: [dayGridPlugin, listPlugin, multiMonthPlugin],
initialView: 'dayGridMonth',
firstDay: 1,
events: events,
headerToolbar: {
left: 'prev,next today',
center: 'title',
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) {
info.jsEvent.preventDefault()
window.location.href = info.event.url
}
},
eventDidMount: function (info) {
var parts = [info.event.title]
var props = info.event.extendedProps || {}
if (props.location) parts.push(props.location)
info.el.title = parts.join(' — ')
}
})
cal.render()
})