chore(react/collections/calendar): handle resize

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

@@ -3,7 +3,7 @@ import { ViewModeProps } from "../interface";
 import Calendar from "./calendar";
 import { useEffect, useRef, useState } from "preact/hooks";
 import "./index.css";
-import { useNoteLabel, useNoteLabelBoolean, useSpacedUpdate, useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
+import { useNoteLabel, useNoteLabelBoolean, useResizeObserver, useSpacedUpdate, useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
 import { LOCALE_IDS } from "@triliumnext/commons";
 import { Calendar as FullCalendar } from "@fullcalendar/core";
 import { setLabel } from "../../../services/attributes";
@@ -36,6 +36,7 @@ const LOCALE_MAPPINGS: Record<LOCALE_IDS, (() => Promise<{ default: LocaleInput
 };
 
 export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarViewData>) {
+    const containerRef = useRef<HTMLDivElement>(null);
     const calendarRef = useRef<FullCalendar>(null);
     const plugins = usePlugins(false, false);
     const locale = useLocale();
@@ -45,9 +46,10 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
     const [ calendarView, setCalendarView ] = useNoteLabel(note, "calendar:view");
     const initialView = useRef(calendarView);
     const viewSpacedUpdate = useSpacedUpdate(() => setCalendarView(initialView.current));
+    useResizeObserver(containerRef, () => calendarRef.current?.updateSize());
 
     return (plugins &&
-        <div className="calendar-view">
+        <div className="calendar-view" ref={containerRef}>
             <Calendar
                 calendarRef={calendarRef}
                 plugins={plugins}
@@ -60,6 +62,7 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
                 firstDay={firstDayOfWeek ?? 0}
                 weekends={!hideWeekends}
                 weekNumbers={weekNumbers}
+                handleWindowResize={false}
                 locale={locale}
                 viewDidMount={({ view }) => {
                     if (initialView.current !== view.type) {

apps/client/src/widgets/react/hooks.tsx

@@ -627,3 +627,18 @@ export function useTouchBar(
         parentComponent?.triggerCommand("refreshTouchBar");
     }, inputs);
 }
+
+export function useResizeObserver(ref: RefObject<HTMLElement>, callback: () => void) {
+    const resizeObserver = useRef<ResizeObserver>(null);
+    useEffect(() => {
+        resizeObserver.current?.disconnect();
+        const observer = new ResizeObserver(callback);
+        resizeObserver.current = observer;
+
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+
+        return () => observer.disconnect();
+    }, [ callback, ref ]);
+}

apps/client/src/widgets/view_widgets/calendar_view.ts

@@ -70,7 +70,6 @@ export default class CalendarView extends ViewMode<{}> {
             eventChange: (e) => this.#onEventMoved(e),
             height: "100%",
             nowIndicator: true,
-            handleWindowResize: false,
             eventDidMount: (e) => {
                 const { iconClass, promotedAttributes } = e.event.extendedProps;
 
@@ -135,9 +134,6 @@ export default class CalendarView extends ViewMode<{}> {
             datesSet: (e) => this.#onDatesSet(e),
         });
 
-        new ResizeObserver(() => calendar.updateSize())
-            .observe(this.$calendarContainer[0]);
-
         return this.$root;
     }