Add a year view to the calendar
All checks were successful
Build and deploy static pages / build-and-push (push) Successful in 13s
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:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user