chore(react/collections/calendar): add views & first day of week

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

@@ -1,27 +1,22 @@
 import { useEffect, useRef } from "preact/hooks";
-import { Calendar as FullCalendar, PluginDef } from "@fullcalendar/core";
+import { CalendarOptions, Calendar as FullCalendar, PluginDef } from "@fullcalendar/core";
 
-interface CalendarProps {
-    view: string;
+interface CalendarProps extends CalendarOptions {
     tabIndex?: number;
-    plugins: PluginDef[];
 }
 
-export default function Calendar({ tabIndex, view, plugins }: CalendarProps) {
+export default function Calendar({ tabIndex, ...options }: 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
-        });
+        const calendar = new FullCalendar(containerRef.current, options);
         calendar.render();
 
         return () => calendar.destroy();
-    }, [ containerRef ]);
+    }, [ containerRef, options ]);
 
     return (
         <div ref={containerRef} className="calendar-container" tabIndex={tabIndex} />

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

@@ -3,20 +3,34 @@ import { ViewModeProps } from "../interface";
 import Calendar from "./calendar";
 import { useEffect, useState } from "preact/hooks";
 import "./index.css";
+import { useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
 
 interface CalendarViewData {
 
 }
 
+const CALENDAR_VIEWS = [
+    "timeGridWeek",
+    "dayGridMonth",
+    "multiMonthYear",
+    "listMonth"
+]
+
 export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarViewData>) {
     const plugins = usePlugins(false, false);
+    const [ firstDayOfWeek ] = useTriliumOptionInt("firstDayOfWeek");
 
     return (plugins &&
         <div className="calendar-view">
             <Calendar
                 plugins={plugins}
                 tabIndex={100}
-                view="dayGridMonth"
+                initialView="dayGridMonth"
+                headerToolbar={{
+                    start: "title",
+                    end: `${CALENDAR_VIEWS.join(",")} today prev,next`
+                }}
+                firstDay={firstDayOfWeek ?? 0}
             />
         </div>
     );

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

@@ -46,12 +46,7 @@ interface Event {
     endTime?: string | null
 }
 
-const CALENDAR_VIEWS = [
-    "timeGridWeek",
-    "dayGridMonth",
-    "multiMonthYear",
-    "listMonth"
-]
+
 
 export default class CalendarView extends ViewMode<{}> {
 
@@ -91,14 +86,11 @@ export default class CalendarView extends ViewMode<{}> {
         }
 
         const calendar = new Calendar(this.$calendarContainer[0], {
-            plugins,
-            initialView,
             events: eventBuilder,
             editable: isEditable,
             selectable: isEditable,
             select: (e) => this.#onCalendarSelection(e),
             eventChange: (e) => this.#onEventMoved(e),
-            firstDay: options.getInt("firstDayOfWeek") ?? 0,
             weekends: !this.parentNote.hasAttribute("label", "calendar:hideWeekends"),
             weekNumbers: this.parentNote.hasAttribute("label", "calendar:weekNumbers"),
             locale: await getFullCalendarLocale(options.get("locale")),
@@ -167,10 +159,6 @@ export default class CalendarView extends ViewMode<{}> {
                 }
             },
             datesSet: (e) => this.#onDatesSet(e),
-            headerToolbar: {
-                start: "title",
-                end: `${CALENDAR_VIEWS.join(",")} today prev,next`
-            }
         });
 
         new ResizeObserver(() => calendar.updateSize())