chore(react/collections/calendar): get calendar to render

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

@@ -6,6 +6,7 @@ import { ListView, GridView } from "./legacy/ListOrGridView";
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 import GeoView from "./geomap";
 import ViewModeStorage from "../view_widgets/view_mode_storage";
+import CalendarView from "./calendar";
 
 interface NoteListProps<T extends object> {
     note?: FNote | null;
@@ -82,6 +83,8 @@ function getComponentByViewType(viewType: ViewTypeOptions, props: ViewModeProps<
             return <GridView {...props} />;
         case "geoMap":
             return <GeoView {...props} />;
+        case "calendar":
+            return <CalendarView {...props} />
     }
 }
 

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

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from "preact/hooks";
+import { Calendar as FullCalendar, PluginDef } from "@fullcalendar/core";
+
+interface CalendarProps {
+    view: string;
+    tabIndex?: number;
+    plugins: PluginDef[];
+}
+
+export default function Calendar({ tabIndex, view, plugins }: CalendarProps) {
+    const calendarRef = useRef<FullCalendar>();
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        const calendar = new FullCalendar(containerRef.current, {
+            initialView: view,
+            plugins: plugins
+        });
+        calendar.render();
+
+        return () => calendar.destroy();
+    }, [ containerRef ]);
+
+    return (
+        <div ref={containerRef} className="calendar-container" tabIndex={tabIndex} />
+    );
+}

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

@@ -0,0 +1,42 @@
+import { PluginDef } from "@fullcalendar/core/index.js";
+import { ViewModeProps } from "../interface";
+import Calendar from "./calendar";
+import { useEffect, useState } from "preact/hooks";
+
+interface CalendarViewData {
+
+}
+
+export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarViewData>) {
+    const plugins = usePlugins(false, false);
+
+    return (plugins &&
+        <Calendar
+            plugins={plugins}
+            tabIndex={100}
+            view="dayGridMonth"
+        />
+    );
+}
+
+function usePlugins(isEditable: boolean, isCalendarRoot: boolean) {
+    const [ plugins, setPlugins ] = useState<PluginDef[]>();
+
+    useEffect(() => {
+        async function loadPlugins() {
+            const plugins: PluginDef[] = [];
+            plugins.push((await import("@fullcalendar/daygrid")).default);
+            plugins.push((await import("@fullcalendar/timegrid")).default);
+            plugins.push((await import("@fullcalendar/list")).default);
+            plugins.push((await import("@fullcalendar/multimonth")).default);
+            if (isEditable || isCalendarRoot) {
+                plugins.push((await import("@fullcalendar/interaction")).default);
+            }
+            setPlugins(plugins);
+        }
+
+        loadPlugins();
+    }, [ isEditable, isCalendarRoot ]);
+
+    return plugins;
+}

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

@@ -98,9 +98,6 @@ const TPL = /*html*/`
         overflow: hidden;
     }
     </style>
-
-    <div class="calendar-container" tabindex="100">
-    </div>
 </div>
 `;
 
@@ -148,14 +145,6 @@ export default class CalendarView extends ViewMode<{}> {
         const isEditable = !this.isCalendarRoot;
 
         const { Calendar } = await import("@fullcalendar/core");
-        const plugins: PluginDef[] = [];
-        plugins.push((await import("@fullcalendar/daygrid")).default);
-        plugins.push((await import("@fullcalendar/timegrid")).default);
-        plugins.push((await import("@fullcalendar/list")).default);
-        plugins.push((await import("@fullcalendar/multimonth")).default);
-        if (isEditable || this.isCalendarRoot) {
-            plugins.push((await import("@fullcalendar/interaction")).default);
-        }
 
         let eventBuilder: EventSourceFunc;
         if (!this.isCalendarRoot) {
@@ -165,7 +154,6 @@ export default class CalendarView extends ViewMode<{}> {
         }
 
         // Parse user's initial view, if valid.
-        let initialView = "dayGridMonth";
         const userInitialView = this.parentNote.getLabelValue("calendar:view");
         if (userInitialView && CALENDAR_VIEWS.includes(userInitialView)) {
             initialView = userInitialView;
@@ -253,8 +241,6 @@ export default class CalendarView extends ViewMode<{}> {
                 end: `${CALENDAR_VIEWS.join(",")} today prev,next`
             }
         });
-        calendar.render();
-        this.calendar = calendar;
 
         new ResizeObserver(() => calendar.updateSize())
             .observe(this.$calendarContainer[0]);