fix(deps): migrate FullCalendar to v7 (#10890)

Author: eliandoran

apps/client/package.json

@@ -18,13 +18,7 @@
   },
   "dependencies": {
     "@excalidraw/excalidraw": "0.18.1",
-    "@fullcalendar/core": "6.1.21",
-    "@fullcalendar/daygrid": "6.1.21",
-    "@fullcalendar/interaction": "6.1.21",
-    "@fullcalendar/list": "6.1.21",
-    "@fullcalendar/multimonth": "6.1.21",
-    "@fullcalendar/rrule": "6.1.21",
-    "@fullcalendar/timegrid": "6.1.21",
+    "@fullcalendar/rrule": "7.0.2",
     "@mermaid-js/layout-elk": "0.2.2",
     "@popperjs/core": "2.11.8",
     "@preact/signals": "2.10.1",
@@ -52,6 +46,7 @@
     "dompurify": "3.4.12",
     "draggabilly": "3.0.0",
     "force-graph": "1.51.4",
+    "fullcalendar": "7.0.2",
     "gridstack": "13.0.2",
     "htmldiff-js": "1.0.5",
     "i18next": "26.3.6",
@@ -74,7 +69,8 @@
     "reveal.js": "6.0.1",
     "rrule": "2.8.1",
     "svg-pan-zoom": "3.6.2",
-    "tabulator-tables": "6.5.2"
+    "tabulator-tables": "6.5.2",
+    "temporal-polyfill": "1.0.3"
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-inspector": "5.0.3",

apps/client/src/stylesheets/style.css

@@ -2946,14 +2946,6 @@ iframe.print-iframe {
     overflow: hidden;
 }
 
-/* Calendar collection */
-
-.calendar-view a.fc-timegrid-event,
-.calendar-view a.fc-daygrid-event {
-    /* Workaround: set font weight only if the theme-next is not active */
-    font-weight: var(--root-background, 800);
-}
-
 @media (max-width: 991px) {
     body.mobile {
         .split-note-container-widget {

apps/client/src/widgets/collections/board/index.css

@@ -14,7 +14,7 @@
   height: 100%;
   display: flex;
   gap: 1em;
-  padding: 4px var(--content-margin-inline);
+  padding: var(--content-margin-inline);
   align-items: flex-start;
   overflow-x: auto;
 }

apps/client/src/widgets/collections/calendar/EventPopover.tsx

@@ -18,7 +18,7 @@ import EventDatesEditor from "./EventDatesEditor";
 import { EventFieldList } from "./EventField";
 import { useEventLabelOmissions } from "./hooks";
 import RecurrenceEditor from "./RecurrenceEditor";
-import { AnchorPoint } from "./selection";
+import { AnchorPoint, narrowAnchorRect } from "./selection";
 
 /**
  * The whole of an event: the note's title, its own fields — when it happens, how it repeats — its
@@ -118,7 +118,9 @@ function EventPopoverShell({ note, anchorRect, updateKey, parentNote, isEditable
             // A press on another chip is not a dismissal but a switch: the click behind it re-points
             // this popover at that event (see onEventClick), which would otherwise have to tear the
             // popover down on the press and build it again on the click.
-            keepOpenSelector=".fc-event"
+            // Named by the attribute eventDidMount stamps on every chip rather than by a
+            // FullCalendar class: v7 emits hashed class names, so `.fc-event` no longer exists.
+            keepOpenSelector="[data-event-note-id]"
             onDismiss={onClose}
         >
             <EventDetails note={note} parentNote={parentNote} isEditable={isEditable} onClose={onClose} onFollowLink={onFollowLink} />
@@ -288,9 +290,12 @@ function EventDetailsBody({ note, parentNote, isEditable, onClose }: {
  * row, so the one under the click is the one pointed at, falling back to the first drawn, and to
  * the bare click point where no chip is on the grid at all. Read afresh on every reposition (see
  * Popover), so the popover follows the chip through scrolls and redraws.
+ *
+ * A chip too wide to be stood beside — an event spanning the whole week, which is drawn the width
+ * of the grid — is narrowed to the click within it (see {@link narrowAnchorRect}).
  */
 function eventAnchorRect(container: HTMLElement | null, noteId: string, point: AnchorPoint | null): DOMRect {
-    const chips = container?.querySelectorAll<HTMLElement>(`.fc-event[data-event-note-id="${CSS.escape(noteId)}"]`);
+    const chips = container?.querySelectorAll<HTMLElement>(`[data-event-note-id="${CSS.escape(noteId)}"]`);
 
     if (chips?.length) {
         let pick: HTMLElement | undefined;
@@ -303,7 +308,7 @@ function eventAnchorRect(container: HTMLElement | null, noteId: string, point: A
                 }
             }
         }
-        return (pick ?? chips[0]).getBoundingClientRect();
+        return narrowAnchorRect((pick ?? chips[0]).getBoundingClientRect(), point);
     }
 
     return new DOMRect(point?.x ?? 0, point?.y ?? 0, 0, 0);

apps/client/src/widgets/collections/calendar/GhostPopover.tsx

@@ -9,7 +9,7 @@ import Button from "../../react/Button";
 import FormTextBox from "../../react/FormTextBox";
 import Modal from "../../react/Modal";
 import Popover from "../../react/Popover";
-import { AnchorPoint, EventDraft } from "./selection";
+import { AnchorPoint, EventDraft, narrowAnchorRect } from "./selection";
 
 /**
  * The ghost: the form an event is decided in before its note exists. It asks for the one thing the
@@ -165,13 +165,19 @@ export default function GhostPopover({ draft, anchor, container, onCommit, onCan
 
 /**
  * Where the ghost stands: beside the range's own shading, read back off the grid. FullCalendar
- * draws the selection as one `.fc-highlight` per row it crosses, so the piece under the mouseup is
- * the one pointed at — where the drag ended is where the eye is — falling back to the last piece
- * drawn, and to the bare point where no shading is on the grid at all. Read afresh on every
- * reposition (see Popover), so the ghost follows the shading through scrolls and redraws.
+ * draws the selection as one piece per row it crosses, so the piece under the mouseup is the one
+ * pointed at — where the drag ended is where the eye is — falling back to the last piece drawn, and
+ * to the bare point where no shading is on the grid at all. Read afresh on every reposition (see
+ * Popover), so the ghost follows the shading through scrolls and redraws.
+ *
+ * A piece too wide to be stood beside — a range dragged across a whole week — is narrowed to the
+ * end of the drag within it (see {@link narrowAnchorRect}).
+ *
+ * The pieces answer to the name the calendar gives them through `highlightClass`, FullCalendar
+ * having no class of its own left to go by (see the calendar view).
  */
 function ghostAnchorRect(container: HTMLElement | null, point: AnchorPoint | null): DOMRect {
-    const highlights = container?.querySelectorAll<HTMLElement>(".fc-highlight");
+    const highlights = container?.querySelectorAll<HTMLElement>(".calendar-highlight");
 
     if (highlights?.length) {
         let pick: HTMLElement | undefined;
@@ -184,7 +190,7 @@ function ghostAnchorRect(container: HTMLElement | null, point: AnchorPoint | nul
                 }
             }
         }
-        return (pick ?? highlights[highlights.length - 1]).getBoundingClientRect();
+        return narrowAnchorRect((pick ?? highlights[highlights.length - 1]).getBoundingClientRect(), point);
     }
 
     return new DOMRect(point?.x ?? 0, point?.y ?? 0, 0, 0);

apps/client/src/widgets/collections/calendar/calendar.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useLayoutEffect, useRef } from "preact/hooks";
-import { CalendarOptions, Calendar as FullCalendar, PluginDef } from "@fullcalendar/core";
+import { CalendarOptions, Calendar as FullCalendar } from "fullcalendar";
 import { RefObject } from "preact";
 
 export interface CalendarProps extends CalendarOptions {

apps/client/src/widgets/collections/calendar/event_builder.ts

@@ -1,6 +1,6 @@
-import { EventInput, EventSourceFuncArg, EventSourceInput } from "@fullcalendar/core/index.js";
 import { dayjs } from "@triliumnext/commons";
 import clsx from "clsx";
+import { EventInput, EventSourceFuncInfo, EventSourceInput } from "fullcalendar";
 import * as rruleLib from 'rrule';
 
 import FNote from "../../../entities/fnote";
@@ -48,7 +48,7 @@ export async function buildEvents(noteIds: string[]) {
     return events.flat();
 }
 
-export async function buildEventsForCalendar(note: FNote, e: EventSourceFuncArg) {
+export async function buildEventsForCalendar(note: FNote, e: EventSourceFuncInfo) {
     const events: EventInput[] = [];
 
     // Gather all the required date note IDs.

apps/client/src/widgets/collections/calendar/index.css

@@ -1,10 +1,4 @@
 .calendar-view {
-    --fc-event-border-color: var(--calendar-coll-event-text-color, var(--main-text-color));
-    --fc-event-bg-color: var(--calendar-coll-event-background-color, var(--accented-background-color));
-    --fc-event-text-color: var(--calendar-coll-event-text-color, var(--main-text-color));
-    --fc-event-selected-overlay-color: transparent;
-    --fc-today-bg-color: var(--calendar-coll-today-background-color, var(--more-accented-background-color));
-
     overflow: hidden;
     position: relative;
     outline: 0;
@@ -13,7 +7,6 @@
     padding: 0;
     display: flex;
     flex-direction: column;
-    padding-bottom: 16px;
     box-sizing: border-box;
 
     @media (max-width: 991px) {
@@ -26,11 +19,6 @@
     }
 }
 
-.calendar-view a,
-:root .calendar-view a.fc-daygrid-event:hover {
-    color: var(--fc-event-text-color);
-}
-
 .search-result-widget-content .calendar-view {
     position: absolute;
     top: 0;
@@ -41,19 +29,12 @@
 
 .calendar-container {
     height: 100%;
-    --fc-page-bg-color: var(--main-background-color);
-    --fc-border-color: var(--main-border-color);
-    --fc-neutral-bg-color: var(--launcher-pane-background-color);
-    --fc-list-event-hover-bg-color: var(--left-pane-item-hover-background);
-    padding: 0 var(--content-margin-inline);
 }
 
-.calendar-container .fc-list-sticky .fc-list-day > * {
-    z-index: 50;
-}
-
-.calendar-container .fc-button {
-    padding: 0.2em 0.5em;
+/* Stacked beneath the title, the chip's own container being a column wherever these are shown at
+   all (see hasRoomForAttributes). Kept narrow so the overflow below has something to bite on. */
+.calendar-view .calendar-event-attributes {
+    min-width: 0;
 }
 
 .calendar-container .promoted-attribute {
@@ -94,109 +75,80 @@
 
 /* #region Events */
 
-/*
- * week, month, year views
- */
-
-.calendar-container a.fc-event {
+.calendar-view .calendar-event:hover {
     text-decoration: none;
 }
 
-.calendar-container a.fc-event.archived {
-    opacity: .65;
-}
-
-.calendar-container a.fc-event.archived::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: -1;
-
-    --c1: transparent;
-    --c2: var(--callendar-coll-event-archived-sripe-color, #00000013);
-
-    background: repeating-linear-gradient(45deg, var(--c1), var(--c1) 8px,
-                                          var(--c2) 8px, var(--c2) 16px);
-}
-
-.calendar-view a.fc-timegrid-event,
-.calendar-view a.fc-daygrid-event,
-.calendar-view .fc-daygrid-dot-event .fc-event-title {
-    font-weight: 500;
-}
-
-.calendar-view a.fc-timegrid-event,
-.calendar-view a.fc-daygrid-event {
-    --border-color: transparent;
-
-    border: 2px solid;
-    border-left-width: 4px;
-    border-color: var(--border-color) var(--border-color) var(--border-color)
-                  var(--fc-event-text-color) !important;
-    background: var(--fc-event-bg-color) !important;
+/*
+ * Forma draws a chip out of a single accent colour: a solid bar down its leading edge, and a 30%
+ * tint of that same colour for the body. Trilium's chip is a pair rather than a derivation — a
+ * black bar over a flat #eaeaea body — so the two are split. The accent is handed to the bar
+ * through the palette's --fc-forma-event, and the body is stated here, on a class eventClass puts
+ * on every chip.
+ */
+.calendar-view .calendar-event {
+    background: var(--calendar-coll-event-background-color, var(--accented-background-color));
 
-    padding-left: 8px;
+    /* Said outright, and so beyond the reach of the app-wide a:hover, the chip being an anchor. */
+    color: var(--calendar-coll-event-text-color, var(--main-text-color));
 }
 
-.calendar-view .fc-timegrid-event.with-hue,
-.calendar-view .fc-daygrid-event.with-hue {
-    --fc-event-text-color: var(--custom-color);
-
-    --fc-event-bg-color: hsl(var(--custom-color-hue),
+/*
+ * A note carrying a colour of its own says both: the bar takes the colour, the body a pale wash of
+ * the same hue. Said as border-color rather than through --fc-event-color, which FullCalendar
+ * writes inline on the chip and a stylesheet therefore cannot reach.
+ */
+.calendar-view .calendar-event.with-hue {
+    border-color: var(--custom-color);
+    color: var(--custom-color);
+    background: hsl(var(--custom-color-hue),
                     var(--calendar-coll-event-background-saturation, 80%),
-                    var(--calendar-coll-event-background-lightness, 95%)) !important;
-}
-
-.calendar-view a.fc-timegrid-event:focus-visible,
-.calendar-view a.fc-daygrid-event:focus-visible {
-    outline: none;
+                    var(--calendar-coll-event-background-lightness, 95%));
 }
 
-.calendar-view a.fc-timegrid-event.fc-event-selected,
-.calendar-view a.fc-timegrid-event.fc-event:focus,
-.calendar-view a.fc-daygrid-event.fc-event-selected,
-.calendar-view a.fc-daygrid-event.fc-event:focus {
-    --border-color: var(--custom-color, var(--input-focus-outline-color));
+/* Flat body and all, a chip still has to answer the pointer; Forma's own hover tint is what the
+   rule above overrides. */
+.calendar-view .calendar-event:hover {
+    filter: var(--calendar-coll-event-hover-filter, none);
 }
 
-/* The event the popover stands for, marked the way a focused event is. */
-.calendar-view a.fc-timegrid-event.calendar-event-selected,
-.calendar-view a.fc-daygrid-event.calendar-event-selected {
-    --border-color: var(--custom-color, var(--input-focus-outline-color));
+/* The shading a dragged range stands in, named by us rather than left to the theme's hashed class
+   so the ghost can anchor to it; the colour is still Forma's, off the palette. */
+.calendar-view .calendar-highlight {
+    background-color: var(--fc-forma-highlight);
 }
 
-.calendar-view a.fc-timegrid-event:hover,
-.calendar-view a.fc-daygrid-event:hover {
-    filter: var(--calendar-coll-event-hover-filter, none);
-    border-color: var(--fc-event-text-color);
-    text-decoration: none;
-    color: currentColor;
-    opacity: 1;
+/* The note's icon, leading its title on the chip (see eventContent). */
+.calendar-view .calendar-event-icon {
+    margin-inline-end: .25em;
 }
 
-.calendar-view .fc-daygrid-event-dot {
-    display: none;
+/* An archived note is faded and hatched, the stripes drawn behind its content. */
+.calendar-view .calendar-event.archived {
+    opacity: .65;
 }
 
+.calendar-view .calendar-event.archived::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    bottom: 0;
+    z-index: -1;
 
-.calendar-view .fc-event-time {
-    opacity: .75;
-}
-
-/*
- * List view
- */
+    --c1: transparent;
+    --c2: var(--callendar-coll-event-archived-sripe-color, #00000013);
 
-.fc-list-table tr.fc-event.archived {
-    opacity: .5;
+    background: repeating-linear-gradient(45deg, var(--c1), var(--c1) 8px,
+                                          var(--c2) 8px, var(--c2) 16px);
 }
 
-.fc-list-table .fc-list-event-dot {
-    /* Apply note colors to the list item dots */
-    --fc-event-border-color: var(--custom-color);
+/* The event the popover stands for, marked the way a focused event is. An outline rather than a
+   border, the chip's only border being the bar down its leading edge. */
+.calendar-view .calendar-event-selected {
+    outline: 2px solid var(--custom-color, var(--input-focus-outline-color));
+    outline-offset: -2px;
 }
 
 /* #endregion */