Vincent Lannurien
827c432dc0
All checks were successful
Build and deploy static pages / build-and-push (push) Successful in 14s
Three things worked against the year grid. The page inherited PaperMod's 720px column, so twelve months across three columns left day cells too narrow for any label; the calendar layout now runs to 1100px, which the nine-column deadline table below the grid wants anyway. Each cell was also short enough to fit a single deadline, collapsing the days that carry both an abstract and a paper into a '+2 more' link. The view hardcodes dayMaxEvents, so the height comes from aspectRatio: month tables are width / ratio over six rows, and 1.1 leaves about 50px a week. Finally, 'OSDI — abstract deadline' never fit a day cell and rendered as a cropped fragment. The year view keeps the venue, which is the part that identifies the dot, and leaves the rest to the hover text and the month and list views. '+N more' still appears when a day carries three deadlines, and was drawn with the library's default event border, an unmapped blue that read as a stray button; it becomes quiet text, and the popover it opens picks up the calendar's own card treatment. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
64 lines
2.4 KiB
JavaScript
64 lines
2.4 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,
|
|
// The view hardcodes dayMaxEvents to "fit the cell", so the only way to
|
|
// show more than one deadline per day is to make the weeks taller. Month
|
|
// table height is width / aspectRatio over six rows: at three columns
|
|
// that leaves ~50px a week, enough for the day number plus the two
|
|
// deadlines a day carries when an abstract and a paper share a date.
|
|
aspectRatio: 1.1,
|
|
// A day cell in the year grid is ~50px wide, so the full
|
|
// "OSDI — abstract deadline" title only ever renders as a cropped
|
|
// fragment. Keep the venue, which is the part that identifies the dot,
|
|
// and leave the rest to the hover text and the month and list views.
|
|
eventContent: function (arg) {
|
|
var dot = document.createElement('div')
|
|
dot.className = 'fc-daygrid-event-dot'
|
|
dot.style.borderColor = arg.borderColor || arg.backgroundColor
|
|
var title = document.createElement('div')
|
|
title.className = 'fc-event-title'
|
|
title.textContent = arg.event.title.split(' — ')[0]
|
|
return { domNodes: [dot, title] }
|
|
}
|
|
}
|
|
},
|
|
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()
|
|
})
|