From 827c432dc0fe74fe2cfcd4c7d2108001616f0147 Mon Sep 17 00:00:00 2001 From: Vincent Lannurien Date: Mon, 17 Aug 2026 21:48:44 +0200 Subject: [PATCH] Make the year view readable at a glance MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- site/assets/js/calendar.js | 21 +++++++++++++++- site/layouts/partials/extend_head.html | 34 ++++++++++++++++++++++++-- 2 files changed, 52 insertions(+), 3 deletions(-) diff --git a/site/assets/js/calendar.js b/site/assets/js/calendar.js index ed5d7cf..061cf37 100644 --- a/site/assets/js/calendar.js +++ b/site/assets/js/calendar.js @@ -24,7 +24,26 @@ document.addEventListener('DOMContentLoaded', function () { multiMonthYear: { // Dots keep the year grid readable when a day holds several deadlines. eventDisplay: 'list-item', - multiMonthMinWidth: 260 + 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) { diff --git a/site/layouts/partials/extend_head.html b/site/layouts/partials/extend_head.html index d88b99c..0a2ddbf 100644 --- a/site/layouts/partials/extend_head.html +++ b/site/layouts/partials/extend_head.html @@ -1,5 +1,9 @@ {{- if eq .Layout "calendar" }} {{- end }}