Add a localstorage option to change the start of the week (Fixes #589)

frontend/src/components/CalendarQalendar.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {
-  ref, computed, inject, toRefs, watch, onMounted
+  ref, computed, inject, toRefs, watch, onMounted,
 } from 'vue';
 import { Qalendar } from 'qalendar';
 import 'qalendar/dist/style.css';
@@ -12,12 +12,13 @@ import {
 } from '@/definitions';
 import { getLocale, getPreferredTheme, timeFormat } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
-import { dayjsKey } from '@/keys';
+import { dayjsKey, isoWeekdaysKey } from '@/keys';
 
 // component constants
 const dj = inject(dayjsKey);
 const router = useRouter();
 const route = useRoute();
+const isoWeekdays = inject(isoWeekdaysKey);
 
 // component properties
 const props = defineProps({
@@ -311,7 +312,7 @@ const config = ref({
     showEventsOnMobileView: false,
   },
   week: {
-    startsOn: locale === 'de' ? 'monday' : 'sunday',
+    startsOn: localStorage?.getItem('startOfTheWeek') ?? isoWeekdays[0].long.toLowerCase(),
   },
   style: {
     // Just the pre-calculated list from tailwind, could use some fine-tuning.
@@ -334,13 +335,13 @@ const config = ref({
   },
   dayBoundaries: {
     start: dayBoundary.value.start,
-    end: dayBoundary.value.end
+    end: dayBoundary.value.end,
   },
   eventDialog: {
     // We roll our own
     isDisabled: true,
   },
-  locale: locale === 'de' ? 'de-DE' : 'en-US'
+  locale: locale === 'de' ? 'de-DE' : 'en-US',
 });
 
 /**

frontend/src/components/SettingsGeneral.vue

@@ -1,18 +1,22 @@
 <script setup lang="ts">
 import { ColorSchemes } from '@/definitions';
 import {
-  ref, reactive, inject, watch,
+  ref, reactive, inject, watch, computed,
 } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useUserStore } from '@/stores/user-store';
-import { dayjsKey, callKey } from '@/keys';
+import { dayjsKey, callKey, isoWeekdaysKey } from '@/keys';
 import { SubscriberResponse } from '@/models';
 
 // component constants
 const user = useUserStore();
 const { t, locale, availableLocales } = useI18n({ useScope: 'global' });
 const call = inject(callKey);
 const dj = inject(dayjsKey);
+const isoWeekdays = inject(isoWeekdaysKey);
+
+const startOfTheWeek = ref(localStorage?.getItem('startOfTheWeek') ?? isoWeekdays[0].long.toLowerCase());
+const availableStartOfTheWeekOptions = computed(() => isoWeekdays.filter((day) => day.long === 'Monday' || day.long === 'Sunday'));
 
 // handle ui languages
 // TODO: move to settings store
@@ -81,6 +85,11 @@ const updateTimezone = async () => {
     // TODO show some confirmation
   }
 };
+
+// save timezone config
+const updateStartOfTheWeek = async (evt) => {
+  localStorage?.setItem('startOfTheWeek', evt.target.value.toLowerCase());
+};
 </script>
 
 <template>
@@ -140,6 +149,22 @@ const updateTimezone = async () => {
         <div class="w-full max-w-2xs">{{ t('label.MMDDYYYY') }}</div> -->
       </label>
     </div>
+    <div class="mt-6 pl-6">
+      <div class="text-lg">{{ t('label.timeZone') }}</div>
+      <label class="mt-4 flex items-center pl-4">
+        <div class="w-full max-w-2xs">{{ t('label.startOfTheWeek') }}</div>
+        <select
+          v-model="startOfTheWeek"
+          class="w-full max-w-sm rounded-md"
+          @change="updateStartOfTheWeek"
+          data-testid="settings-general-timezone-select"
+        >
+          <option v-for="day in availableStartOfTheWeekOptions" :key="day.long" :value="day.long.toLowerCase()">
+            {{ day.long }}
+          </option>
+        </select>
+      </label>
+    </div>
     <div class="mt-6 pl-6">
       <div class="text-lg">{{ t('label.timeZone') }}</div>
       <label class="mt-4 flex items-center pl-4">

frontend/src/locales/en.json

@@ -316,6 +316,7 @@
     "startDate": "Start date",
     "startTime": "Start time",
     "startUsingTba": "Try Appointment",
+    "startOfTheWeek": "Start of the week",
     "status": "Status",
     "success": "Success",
     "sync": "Sync",