Make the year view readable at a glance

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>

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) {

site/layouts/partials/extend_head.html

@@ -1,5 +1,9 @@
 {{- if eq .Layout "calendar" }}
 <style>
+  /* The year grid never fits PaperMod's 720px column: twelve months across
+     three columns leave day cells too narrow to read. Widen the whole calendar
+     page — the nine-column deadline table below the grid gains from it too. */
+  main.main { max-width: calc(1100px + var(--gap) * 2); }
   #pa-calendar { margin: 1.5rem 0 2.5rem; }
   .fc .fc-toolbar-title { font-size: 1.1rem; }
   .fc-event { cursor: pointer; font-size: 0.78rem; }
@@ -16,6 +20,8 @@
     --fc-border-color:             var(--border);
     --fc-today-bg-color:           var(--accent-soft);
     --fc-list-event-hover-bg-color: var(--accent-soft);
+    --fc-popover-bg-color:         var(--entry);
+    --fc-popover-border-color:     var(--border);
     --fc-button-text-color:        var(--primary);
     --fc-button-bg-color:          var(--entry);
     --fc-button-border-color:      var(--border);
@@ -38,7 +44,31 @@
   .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 { font-size: 0.68rem; padding: 0; }
-  .fc-multimonth .fc-event-title { text-overflow: ellipsis; }
+  .fc-multimonth .fc-event-title {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  /* Every pixel the dot and its default 4px margins give back is one more
+     character of the venue acronym in a ~45px day cell. */
+  .fc-multimonth .fc-daygrid-event-dot { margin: 0 2px 0 0; }
+  .fc-multimonth .fc-daygrid-event-harness { margin-top: 1px; }
+  /* "+N more" overflow links. FullCalendar boxes them with the default event
+     border colour, which reads as a stray button; make them quiet text that
+     picks up the accent on hover, like the rest of the site's links. */
+  .fc .fc-daygrid-more-link {
+    color: var(--secondary);
+    text-decoration: none;
+    border: 0;
+    border-radius: 3px;
+    padding: 0 2px;
+  }
+  .fc .fc-daygrid-more-link:hover { color: var(--accent); background: var(--accent-soft); }
+  .fc .fc-multimonth-multicol .fc-daygrid-more-link { border: 0; padding: 0 2px; font-size: 0.68rem; }
+  /* The popover the link opens: same card treatment as the calendar itself. */
+  .fc .fc-popover { border-radius: var(--radius); box-shadow: var(--shadow); }
+  .fc .fc-popover-header { background: var(--code-bg); color: var(--primary); }
+  .fc .fc-popover-title { font-size: 0.8rem; font-weight: 600; }
 </style>
 {{- end }}