chore(react/collections/calendar): bring back locale

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

@@ -1,9 +1,10 @@
-import { PluginDef } from "@fullcalendar/core/index.js";
+import { LocaleInput, PluginDef } from "@fullcalendar/core/index.js";
 import { ViewModeProps } from "../interface";
 import Calendar from "./calendar";
 import { useEffect, useState } from "preact/hooks";
 import "./index.css";
 import { useNoteLabel, useNoteLabelBoolean, useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
+import { LOCALE_IDS } from "@triliumnext/commons";
 
 interface CalendarViewData {
 
@@ -16,8 +17,24 @@ const CALENDAR_VIEWS = [
     "listMonth"
 ]
 
+// Here we hard-code the imports in order to ensure that they are embedded by webpack without having to load all the languages.
+const LOCALE_MAPPINGS: Record<LOCALE_IDS, (() => Promise<{ default: LocaleInput }>) | null> = {
+    de: () => import("@fullcalendar/core/locales/de"),
+    es: () => import("@fullcalendar/core/locales/es"),
+    fr: () => import("@fullcalendar/core/locales/fr"),
+    cn: () => import("@fullcalendar/core/locales/zh-cn"),
+    tw: () => import("@fullcalendar/core/locales/zh-tw"),
+    ro: () => import("@fullcalendar/core/locales/ro"),
+    ru: () => import("@fullcalendar/core/locales/ru"),
+    ja: () => import("@fullcalendar/core/locales/ja"),
+    "pt_br": () => import("@fullcalendar/core/locales/pt-br"),
+    uk: () => import("@fullcalendar/core/locales/uk"),
+    en: null
+};
+
 export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarViewData>) {
     const plugins = usePlugins(false, false);
+    const locale = useLocale();
     const [ firstDayOfWeek ] = useTriliumOptionInt("firstDayOfWeek");
     const [ hideWeekends ] = useNoteLabelBoolean(note, "calendar:hideWeekends");
     const [ weekNumbers ] = useNoteLabelBoolean(note, "calendar:weekNumbers");
@@ -35,6 +52,7 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
                 firstDay={firstDayOfWeek ?? 0}
                 weekends={!hideWeekends}
                 weekNumbers={weekNumbers}
+                locale={locale}
             />
         </div>
     );
@@ -61,3 +79,19 @@ function usePlugins(isEditable: boolean, isCalendarRoot: boolean) {
 
     return plugins;
 }
+
+function useLocale() {
+    const [ locale ] = useTriliumOption("locale");
+    const [ calendarLocale, setCalendarLocale ] = useState<LocaleInput>();
+
+    useEffect(() => {
+        const correspondingLocale = LOCALE_MAPPINGS[locale];
+        if (correspondingLocale) {
+            correspondingLocale().then((locale) => setCalendarLocale(locale.default));
+        } else {
+            setCalendarLocale(undefined);
+        }
+    });
+
+    return calendarLocale;
+}

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

@@ -17,21 +17,6 @@ import type { TouchBarItem } from "../../components/touch_bar.js";
 import type { SegmentedControlSegment } from "electron";
 import { LOCALE_IDS } from "@triliumnext/commons";
 
-// Here we hard-code the imports in order to ensure that they are embedded by webpack without having to load all the languages.
-const LOCALE_MAPPINGS: Record<LOCALE_IDS, (() => Promise<{ default: LocaleInput }>) | null> = {
-    de: () => import("@fullcalendar/core/locales/de"),
-    es: () => import("@fullcalendar/core/locales/es"),
-    fr: () => import("@fullcalendar/core/locales/fr"),
-    cn: () => import("@fullcalendar/core/locales/zh-cn"),
-    tw: () => import("@fullcalendar/core/locales/zh-tw"),
-    ro: () => import("@fullcalendar/core/locales/ro"),
-    ru: () => import("@fullcalendar/core/locales/ru"),
-    ja: () => import("@fullcalendar/core/locales/ja"),
-    "pt_br": () => import("@fullcalendar/core/locales/pt-br"),
-    uk: () => import("@fullcalendar/core/locales/uk"),
-    en: null
-};
-
 // TODO: Deduplicate
 interface CreateChildResponse {
     note: {
@@ -91,7 +76,6 @@ export default class CalendarView extends ViewMode<{}> {
             selectable: isEditable,
             select: (e) => this.#onCalendarSelection(e),
             eventChange: (e) => this.#onEventMoved(e),
-            locale: await getFullCalendarLocale(options.get("locale")),
             height: "100%",
             nowIndicator: true,
             handleWindowResize: false,
@@ -575,12 +559,3 @@ export default class CalendarView extends ViewMode<{}> {
     }
 
 }
-
-export async function getFullCalendarLocale(locale: LOCALE_IDS) {
-    const correspondingLocale = LOCALE_MAPPINGS[locale];
-    if (correspondingLocale) {
-        return (await correspondingLocale()).default;
-    } else {
-        return undefined;
-    }
-}