chore(react/launch_bar): get days of the week to render

apps/client/src/widgets/buttons/calendar.ts

@@ -56,18 +56,6 @@ const DROPDOWN_TPL = `
 
 </div>`;
 
-const DAYS_OF_WEEK = [
-    t("calendar.sun"),
-    t("calendar.mon"),
-    t("calendar.tue"),
-    t("calendar.wed"),
-    t("calendar.thu"),
-    t("calendar.fri"),
-    t("calendar.sat")
-];
-
-
-
 interface WeekCalculationOptions {
     firstWeekType: number;
     minDaysInFirstWeek: number;
@@ -100,7 +88,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         super.doRender();
 
         this.$month = this.$dropdownContent.find('[data-calendar-area="month"]');
-        this.$weekHeader = this.$dropdownContent.find(".calendar-week");
 
         this.manageFirstDayOfWeek();
         this.initWeekCalculation();
@@ -216,14 +203,6 @@ export default class CalendarWidget extends RightDropdownButtonWidget {
         this.weekNoteEnable = noteAttributes.some(a => a.name === 'enableWeekNote');
     }
 
-    // Store firstDayOfWeek as ISO (1–7)
-    manageFirstDayOfWeek() {
-        let localeDaysOfWeek = [...DAYS_OF_WEEK];
-        const shifted = localeDaysOfWeek.splice(0, rawFirstDayOfWeek);
-        localeDaysOfWeek = ['', ...localeDaysOfWeek, ...shifted];
-        this.$weekHeader.html(localeDaysOfWeek.map((el) => `<span>${el}</span>`).join(''));
-    }
-
     initWeekCalculation() {
         this.weekCalculationOptions = {
             firstWeekType: options.getInt("firstWeekOfYear") || 0,

apps/client/src/widgets/launch_bar/CalendarWidget.tsx

@@ -7,7 +7,7 @@ import { useTriliumOptionInt } from "../react/hooks";
 import clsx from "clsx";
 import "./CalendarWidget.css";
 import server from "../../services/server";
-import { DateRangeInfo, getMonthInformation, getWeekNumber } from "./CalendarWidgetUtils";
+import { DateRangeInfo, DAYS_OF_WEEK, getMonthInformation, getWeekNumber } from "./CalendarWidgetUtils";
 import { VNode } from "preact";
 
 interface DateNotesForMonth {
@@ -17,8 +17,6 @@ interface DateNotesForMonth {
 export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }) {
     const { title, icon } = useLauncherIconAndTitle(launcherNote);
     const [ date, setDate ] = useState<Dayjs>();
-    const [ rawFirstDayOfWeek ] = useTriliumOptionInt("firstDayOfWeek") ?? 0;
-    const firstDayOfWeekISO = (rawFirstDayOfWeek === 0 ? 7 : rawFirstDayOfWeek);
 
     useEffect(() => {
 
@@ -36,23 +34,41 @@ export default function CalendarWidget({ launcherNote }: { launcherNote: FNote }
             }}
         >
             {date && <div className="calendar-dropdown-widget" style={{ width: 400 }}>
-                <Calendar date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
+                <Calendar date={date} />
             </div>}
         </LaunchBarDropdownButton>
     )
 }
 
-function Calendar({ date, firstDayOfWeekISO }: { date: Dayjs, firstDayOfWeekISO: number }) {
+function Calendar({ date }: { date: Dayjs }) {
+    const [ rawFirstDayOfWeek ] = useTriliumOptionInt("firstDayOfWeek") ?? 0;
+    const firstDayOfWeekISO = (rawFirstDayOfWeek === 0 ? 7 : rawFirstDayOfWeek);
+
     const month = date.format('YYYY-MM');
     const firstDay = date.startOf('month');
     const firstDayISO = firstDay.isoWeekday();
     const monthInfo = getMonthInformation(date, firstDayISO, firstDayOfWeekISO);
 
     return (
-        <div className="calendar-body" data-calendar-area="month">
+        <>
-            {firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} info={monthInfo.prevMonth} />}
+            <CalendarWeekHeader rawFirstDayOfWeek={rawFirstDayOfWeek} />
-            <CurrentMonthDays date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
+            <div className="calendar-body" data-calendar-area="month">
-            <NextMonthDays date={date} dates={monthInfo.nextMonth.dates} />
+                {firstDayISO !== firstDayOfWeekISO && <PreviousMonthDays date={date} info={monthInfo.prevMonth} />}
+                <CurrentMonthDays date={date} firstDayOfWeekISO={firstDayOfWeekISO} />
+                <NextMonthDays date={date} dates={monthInfo.nextMonth.dates} />
+            </div>
+        </>
+    )
+}
+
+function CalendarWeekHeader({ rawFirstDayOfWeek }: { rawFirstDayOfWeek: number }) {
+    let localeDaysOfWeek = [...DAYS_OF_WEEK];
+    const shifted = localeDaysOfWeek.splice(0, rawFirstDayOfWeek);
+    localeDaysOfWeek = ['', ...localeDaysOfWeek, ...shifted];
+
+    return (
+        <div className="calendar-week">
+            {localeDaysOfWeek.map(dayOfWeek => <span>{dayOfWeek}</span>)}
         </div>
     )
 }

apps/client/src/widgets/launch_bar/CalendarWidgetUtils.ts

@@ -1,4 +1,15 @@
 import { Dayjs } from "@triliumnext/commons";
+import { t } from "../../services/i18n";
+
+export const DAYS_OF_WEEK = [
+    t("calendar.sun"),
+    t("calendar.mon"),
+    t("calendar.tue"),
+    t("calendar.wed"),
+    t("calendar.thu"),
+    t("calendar.fri"),
+    t("calendar.sat")
+];
 
 export interface DateRangeInfo {
     weekNumbers: number[];