add setting for first day of week

src/Model/model.ts

@@ -152,6 +152,7 @@ export const isEncryptionAvailable = window.crypto.subtle != undefined;
 export const senderName = React.restoreState("sender-name", "");
 export const pageZoom = React.restoreState("page-zoom", 100);
 export const objectFilterInput = React.restoreState("object-filter", "");
+export const firstDayOfWeek = React.restoreState("first-day-of-week", 0);
 export const dayInCalendar = React.restoreState("calendar-day", new Date().toISOString().split("T")[0])
 
 pageZoom.subscribe(() => {

src/Views/Objects/calendarView.tsx

@@ -1,10 +1,14 @@
 import * as React from "bloatless-react";
 
-import { Chat, MessageObject, MessageObjectWithIndex } from "../../Model/chatModel";
+import {
+  Chat,
+  MessageObject,
+  MessageObjectWithIndex,
+} from "../../Model/chatModel";
+import { dayInCalendar, firstDayOfWeek } from "../../Model/model";
 
 import { DayView } from "./dayView";
 import { MonthGridCell } from "./monthGridCell";
-import { dayInCalendar } from "../../Model/model";
 import { translation } from "../../translations";
 
 export function CalendarView(
@@ -22,7 +26,7 @@ export function CalendarView(
   );
   dayInCalendar.subscribeSilent(() => {
     selectedDate = new Date(dayInCalendar.value);
-  })
+  });
   updateSelectedDate();
 
   function updateSelectedDate() {
@@ -50,8 +54,11 @@ export function CalendarView(
   }
 
   let monthGridCells = new React.State<HTMLElement[]>([]);
-  dayInCalendar.subscribe((newValue) => {
-    const newSelectedDate = new Date(newValue);
+  React.bulkSubscribe([dayInCalendar, firstDayOfWeek], updateMonthGrid);
+  updateMonthGrid();
+
+  function updateMonthGrid() {
+    const newSelectedDate = new Date(dayInCalendar.value);
 
     const currentDate = new Date();
     monthGridCells.value = [];
@@ -61,14 +68,19 @@ export function CalendarView(
     currentDate.setUTCMonth(newSelectedDate.getMonth());
 
     // labels
+    let currentLabelIndex = firstDayOfWeek.value;
     for (let i = 0; i < 7; i++) {
       monthGridCells.value.push(
-        <b class="secondary ellipsis width-100">{translation.weekdays[i]}</b>
+        <b class="secondary ellipsis width-100">
+          {translation.weekdays[currentLabelIndex]}
+        </b>
       );
+      currentLabelIndex++;
+      if (currentLabelIndex >= 7) currentLabelIndex = 0;
     }
 
     // create blank dates starting sunday
-    const monthOffset = currentDate.getDay();
+    const monthOffset = currentDate.getDay() - firstDayOfWeek.value;
     for (let i = 0; i < monthOffset; i++) {
       monthGridCells.value.push(<div></div>);
     }
@@ -82,7 +94,7 @@ export function CalendarView(
     }
 
     monthGridCells.callSubscriptions();
-  });
+  }
 
   return (
     <div class="calendar-wrapper">

src/Views/settingsModal.tsx

@@ -5,6 +5,7 @@ import {
   clearCategories,
   clearObjectSearches,
   clearStatuses,
+  firstDayOfWeek,
   isPresentingSettingsModal,
   repairApp,
   toggleSettings,
@@ -16,12 +17,32 @@ import { icons } from "../icons";
 import { translation } from "../translations";
 
 export function SettingsModal() {
+  const stringToWeekdayOption: React.StateItemConverter<number> = (value) => {
+    const isSelected = value == firstDayOfWeek.value;
+    return <option toggle:selected={isSelected} value={value}>{translation.weekdays[value]}</option>;
+  };
+
   return (
     <div class="modal" toggle:open={isPresentingSettingsModal}>
       <div>
         <main>
           <h2>{translation.settings}</h2>
 
+          <label class="tile">
+            <span class="icon">calendar_month</span>
+            <div>
+              <span>{translation.firstDayOfWeek}</span>
+              <select bind:value={firstDayOfWeek}>
+                {...translation.weekdays.map((weekday, i) =>
+                  stringToWeekdayOption(i)
+                )}
+              </select>
+              <span class="icon">arrow_drop_down</span>
+            </div>
+          </label>
+
+          <hr></hr>
+
           <div class="flex-row width-input gap">
             <button class="width-100 flex justify-start" on:click={zoomOut}>
               <span class="icon">zoom_out</span>

src/translations.ts

@@ -10,6 +10,7 @@ const englishTranslations = {
   discard: "Discard",
   rename: "Rename",
 
+  firstDayOfWeek: "First day of week",
   weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
   previousMonth: "previous month",
   nextMonth: "next month",
@@ -155,6 +156,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     discard: "Descartar",
     rename: "Renombrar",
 
+    firstDayOfWeek: "Primer día de la semana",
     weekdays: ["Dom", "Lun", "Mar", "Mié", "Jue", "Vie", "Sáb"],
     previousMonth: "Último mes",
     nextMonth: "Próximo mes",
@@ -297,6 +299,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     discard: "Verwerfen",
     rename: "Umbenennen",
 
+    firstDayOfWeek: "Erster Wochentag",
     weekdays: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
     previousMonth: "Vorheriger Monat",
     nextMonth: "Nächster Monat",