diff --git a/apps/client/src/widgets/collections/calendar/index.tsx b/apps/client/src/widgets/collections/calendar/index.tsx index 3ffe1fc9d..1df397f88 100644 --- a/apps/client/src/widgets/collections/calendar/index.tsx +++ b/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 Promise<{ default: LocaleInput }; export default function CalendarView({ note, noteIds }: ViewModeProps) { + const containerRef = useRef(null); const calendarRef = useRef(null); const plugins = usePlugins(false, false); const locale = useLocale(); @@ -45,9 +46,10 @@ export default function CalendarView({ note, noteIds }: ViewModeProps setCalendarView(initialView.current)); + useResizeObserver(containerRef, () => calendarRef.current?.updateSize()); return (plugins && -
+
{ if (initialView.current !== view.type) { diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx index 97b890e02..c86fa544d 100644 --- a/apps/client/src/widgets/react/hooks.tsx +++ b/apps/client/src/widgets/react/hooks.tsx @@ -627,3 +627,18 @@ export function useTouchBar( parentComponent?.triggerCommand("refreshTouchBar"); }, inputs); } + +export function useResizeObserver(ref: RefObject, callback: () => void) { + const resizeObserver = useRef(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 ]); +} diff --git a/apps/client/src/widgets/view_widgets/calendar_view.ts b/apps/client/src/widgets/view_widgets/calendar_view.ts index ee771144a..b091126d0 100644 --- a/apps/client/src/widgets/view_widgets/calendar_view.ts +++ b/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; }