Make startOfWeek setting work properly alongside different locales (#1433)

* Fix startOfWeek user setting not being respected

* Update WeekPicker computed locales after language change

Author: davinotdavid

frontend/src/keys.ts

@@ -14,6 +14,7 @@ type DayjsType = ((_?: ConfigType) => Dayjs) & {
   max: (...dayjs: Dayjs[]) => Dayjs | null,
   min: (...dayjs: Dayjs[]) => Dayjs | null,
   duration: CreateDurationType,
+  locale: (preset?: string) => string,
 } & ((objToParse: any, format: string) => Dayjs);
 export const dayjsKey = Symbol('dayjs') as InjectionKey<DayjsType>;
 export const isoWeekdaysKey = Symbol('isoWeekdays') as InjectionKey<IsoWeekday[]>;

frontend/src/utils.ts

@@ -17,6 +17,46 @@ import {
 } from '@/models';
 import { BookingStatus } from './definitions';
 
+/**
+ * Convert ISO weekday (1=Monday, 7=Sunday) to dayjs weekday (0=Sunday, 1=Monday, etc.)
+ * @param isoDay - ISO weekday number (1-7)
+ * @returns dayjs weekday number (0-6)
+ */
+export const isoWeekdayToDayjs = (isoDay: number): number => {
+  return isoDay === 7 ? 0 : isoDay;
+};
+
+/**
+ * Calculate the start of week for a given date based on user's preferred start of week.
+ * @param date - Dayjs date object
+ * @param startOfWeekIso - ISO weekday format: 1=Monday, 2=Tuesday, ..., 7=Sunday
+ * @returns Dayjs object representing the start of the week
+ */
+export const getStartOfWeek = (date: Dayjs, startOfWeekIso: number): Dayjs => {
+  // Convert ISO format (1=Monday, 7=Sunday) to dayjs format (0=Sunday, 1=Monday)
+  const startOfWeekDayjs = isoWeekdayToDayjs(startOfWeekIso);
+
+  // Get current day of week (0=Sunday, 1=Monday, ..., 6=Saturday)
+  const currentDay = date.day();
+
+  // Calculate the difference to get to the start of week
+  const diff = (currentDay - startOfWeekDayjs + 7) % 7;
+
+  return date.subtract(diff, 'day').startOf('day');
+};
+
+/**
+ * Calculate the end of week for a given date based on user's preferred start of week.
+ * @param date - Dayjs date object
+ * @param startOfWeekIso - ISO weekday format: 1=Monday, 2=Tuesday, ..., 7=Sunday
+ * @returns Dayjs object representing the end of the week
+ */
+export const getEndOfWeek = (date: Dayjs, startOfWeekIso: number): Dayjs => {
+  // Get the start of week and add 6 days to get the end of week
+  const weekStart = getStartOfWeek(date, startOfWeekIso);
+  return weekStart.add(6, 'day').endOf('day');
+};
+
 /**
 * Lowercases the first character of a string
 */
@@ -457,4 +497,7 @@ export default {
   compareAvailabilityStart,
   deepClone,
   isUnconfirmed,
+  isoWeekdayToDayjs,
+  getStartOfWeek,
+  getEndOfWeek,
 };

frontend/src/views/BookerView/components/BookingViewSlotSelection.vue

@@ -7,8 +7,10 @@ import { PhGlobe } from '@phosphor-icons/vue';
 
 import { useBookingViewStore } from '@/stores/booking-view-store';
 import { useCalendarStore } from '@/stores/calendar-store';
+import { useUserStore } from '@/stores/user-store';
 import { Slot, TimeFormatted } from '@/models';
 import { dayjsKey } from '@/keys';
+import { getStartOfWeek, getEndOfWeek } from '@/utils';
 
 import WeekPicker from '@/views/DashboardView/components/WeekPicker.vue';
 import WeekCalendar from '@/views/DashboardView/components/WeekCalendar.vue';
@@ -17,14 +19,18 @@ import SlotSelectionHeader from './SlotSelectionHeader.vue';
 
 const { t } = useI18n();
 const calendarStore = useCalendarStore();
+const userStore = useUserStore();
 const { appointment, activeDate, selectedEvent } = storeToRefs(useBookingViewStore());
 const dj = inject(dayjsKey);
 
 // current selected date, defaults to now
-const activeDateRange = computed(() => ({
-  start: activeDate.value.startOf('week').format('YYYY-MM-DD'),
-  end: activeDate.value.endOf('week').format('YYYY-MM-DD'),
-}));
+const activeDateRange = computed(() => {
+  const startOfWeek = userStore.data.settings.startOfWeek ?? 7;
+  return {
+    start: getStartOfWeek(activeDate.value, startOfWeek).format('YYYY-MM-DD'),
+    end: getEndOfWeek(activeDate.value, startOfWeek).format('YYYY-MM-DD'),
+  };
+});
 
 const timezone = computed(() => dj.tz.guess());
 

frontend/src/views/DashboardView/components/WeekCalendar.vue

@@ -174,6 +174,10 @@ const shortestDuration = computed(() => {
 const weekdays = computed(() => {
   const { start, end } = props.activeDateRange;
 
+  // Access language setting to trigger recomputation when locale changes
+  // The actual locale is set globally on dayjs, but we need this reactive dependency
+  void userStore.data.settings.language;
+
   // Parse the start and end dates using dayjs's automatic parsing
   const startDate = dj(start);
   const endDate = dj(end);

frontend/src/views/DashboardView/components/WeekPicker.vue

@@ -4,8 +4,11 @@ import { useI18n } from 'vue-i18n';
 import { dayjsKey } from '@/keys';
 import { PhCaretLeft, PhCaretRight } from '@phosphor-icons/vue';
 import { TimeFormatted } from '@/models';
+import { useUserStore } from '@/stores/user-store';
+import { getStartOfWeek, getEndOfWeek } from '@/utils';
 
 const dj = inject(dayjsKey);
+const userStore = useUserStore();
 
 const props = defineProps<{
   onDateChange: (dateObj: TimeFormatted) => void,
@@ -21,24 +24,34 @@ const { t } = useI18n();
 const dateInputRef = ref<HTMLInputElement>();
 
 // Computed values for accessibility
+// Access language setting to trigger recomputation when locale changes
 const currentWeekLabel = computed(() => {
+  void userStore.data.settings.language;
   const startDate = dj(props.activeDateRange.start).format('L');
   const endDate = dj(props.activeDateRange.end).format('L');
   return startDate + ' – ' + endDate;
 });
 
 const previousWeekLabel = computed(() => {
+  void userStore.data.settings.language;
   const prevStart = dj(props.activeDateRange.start).subtract(7, 'day').format('L');
   const prevEnd = dj(props.activeDateRange.start).subtract(1, 'day').format('L');
   return t('label.previousWeek') + ': ' + prevStart + ' – ' + prevEnd;
 });
 
 const nextWeekLabel = computed(() => {
+  void userStore.data.settings.language;
   const nextStart = dj(props.activeDateRange.end).add(1, 'day').format('L');
   const nextEnd = dj(props.activeDateRange.end).add(7, 'day').format('L');
   return t('label.nextWeek') + ': ' + nextStart + ' – ' + nextEnd;
 });
 
+// Week picker button display text
+const weekPickerButtonText = computed(() => {
+  void userStore.data.settings.language;
+  return `${dj(props.activeDateRange.start).format('MMMM DD')} – ${dj(props.activeDateRange.end).format('MMMM DD')}`;
+});
+
 function onPreviousWeekButtonClicked() {
   props.onDateChange({
     start: dj(props.activeDateRange.start).subtract(7, 'day').toString(),
@@ -63,12 +76,13 @@ function onDateSelected(event: Event) {
 
   if (target.value) {
     const selectedDate = dj(target.value);
-    const startOfWeek = selectedDate.startOf('week');
-    const endOfWeek = selectedDate.endOf('week');
+    const startOfWeekSetting = userStore.data.settings.startOfWeek ?? 7;
+    const weekStart = getStartOfWeek(selectedDate, startOfWeekSetting);
+    const weekEnd = getEndOfWeek(selectedDate, startOfWeekSetting);
 
     props.onDateChange({
-      start: startOfWeek.format('YYYY-MM-DD'),
-      end: endOfWeek.format('YYYY-MM-DD'),
+      start: weekStart.format('YYYY-MM-DD'),
+      end: weekEnd.format('YYYY-MM-DD'),
     });
   }
 }
@@ -116,7 +130,7 @@ function onKeyDown(event: KeyboardEvent) {
       :aria-label="t('label.selectWeek') + ': ' + currentWeekLabel"
       :title="t('label.selectWeek')"
     >
-      {{ dj(activeDateRange.start).format('MMMM DD') }} – {{ dj(activeDateRange.end).format('MMMM DD') }}
+      {{ weekPickerButtonText }}
     </button>
 
     <button

frontend/src/views/DashboardView/index.vue

@@ -6,6 +6,7 @@ import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { dayjsKey, refreshKey } from '@/keys';
 import { TimeFormatted } from '@/models';
+import { getStartOfWeek, getEndOfWeek } from '@/utils';
 import QuickActionsSideBar from './components/QuickActionsSideBar.vue';
 import WeekPicker from './components/WeekPicker.vue';
 import UserCalendarSync from './components/UserCalendarSync.vue';
@@ -14,22 +15,27 @@ import WeekCalendar from './components/WeekCalendar.vue';
 // stores
 import { useCalendarStore } from '@/stores/calendar-store';
 import { useAppointmentStore } from '@/stores/appointment-store';
+import { useUserStore } from '@/stores/user-store';
 
 const route = useRoute();
 const dj = inject(dayjsKey);
 const refresh = inject(refreshKey);
 
 const calendarStore = useCalendarStore();
 const appointmentStore = useAppointmentStore();
+const userStore = useUserStore();
 const { remoteEvents } = storeToRefs(calendarStore);
 const { pendingAppointments } = storeToRefs(appointmentStore);
 
 // current selected date, defaults to now
 const activeDate = ref(dj());
-const activeDateRange = computed(() => ({
-  start: activeDate.value.startOf('week').format('YYYY-MM-DD'),
-  end: activeDate.value.endOf('week').format('YYYY-MM-DD'),
-}));
+const activeDateRange = computed(() => {
+  const startOfWeek = userStore.data.settings.startOfWeek ?? 7;
+  return {
+    start: getStartOfWeek(activeDate.value, startOfWeek).format('YYYY-MM-DD'),
+    end: getEndOfWeek(activeDate.value, startOfWeek).format('YYYY-MM-DD'),
+  };
+});
 
 async function onDateChange(dateObj: TimeFormatted) {
   const start = dj(dateObj.start);

frontend/src/views/SettingsView/components/Preferences.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { isoWeekdaysKey } from '@/keys';
+import { dayjsKey } from '@/keys';
 import { ColourSchemes } from '@/definitions';
 import { BubbleSelect, SegmentedControl, SelectInput } from '@thunderbirdops/services-ui';
 import { useSettingsStore } from '@/stores/settings-store';
+import { useUserStore } from '@/stores/user-store';
 import { storeToRefs } from 'pinia';
 
 const { t, availableLocales } = useI18n();
-const isoWeekdays = inject(isoWeekdaysKey);
+const dj = inject(dayjsKey);
+const userStore = useUserStore();
 
 const settingsStore = useSettingsStore();
 const { currentState } = storeToRefs(settingsStore);
@@ -71,13 +73,28 @@ const timeFormat = computed({
 })
 
 // Start of Week
-// TODO: As long as we use Qalendar, we can only support Sunday and Monday as start of week
-const availableStartOfTheWeekOptions = computed(
-  () => isoWeekdays.filter((day) => [7,1].includes(day.iso)).map((e) => ({
-    label: e.short,
-    value: e.iso,
-  }))
-);
+// Generate options dynamically using dayjs to respect current locale
+const availableStartOfTheWeekOptions = computed(() => {
+  // Access language to trigger recomputation when locale changes
+  void userStore.data.settings.language;
+
+  // ISO weekday values: 1=Monday, 2=Tuesday, ..., 7=Sunday
+  // dayjs weekday values: 0=Sunday, 1=Monday, ..., 6=Saturday
+  const allDays = [
+    { iso: 7, dayjsDay: 0 }, // Sunday
+    { iso: 1, dayjsDay: 1 }, // Monday
+    { iso: 2, dayjsDay: 2 }, // Tuesday
+    { iso: 3, dayjsDay: 3 }, // Wednesday
+    { iso: 4, dayjsDay: 4 }, // Thursday
+    { iso: 5, dayjsDay: 5 }, // Friday
+    { iso: 6, dayjsDay: 6 }, // Saturday
+  ];
+
+  return allDays.map((day) => ({
+    label: dj().day(day.dayjsDay).format('ddd'),
+    value: day.iso,
+  }));
+});
 
 const startOfWeek = computed({
   get: () => {

frontend/src/views/SettingsView/index.vue

@@ -7,7 +7,7 @@ import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
 import { PrimaryButton, LinkButton, NoticeBar, NoticeBarTypes, IconButton } from '@thunderbirdops/services-ui';
 import { enumToObject } from '@/utils';
-import { callKey } from '@/keys';
+import { callKey, dayjsKey } from '@/keys';
 import { SettingsSections, ColourSchemes } from '@/definitions';
 import { Alert, SubscriberResponse } from '@/models';
 import { useUserStore } from '@/stores/user-store';
@@ -23,6 +23,7 @@ import ConnectedApplications from './components/ConnectedApplications.vue';
 
 // component constants
 const call = inject(callKey);
+const dj = inject(dayjsKey);
 const { t, locale } = useI18n({ useScope: 'global' });
 const route = useRoute();
 const router = useRouter();
@@ -116,6 +117,9 @@ async function updatePreferences() {
   // Update i18n locale to change language on the page without page refresh
   locale.value = currentState.value.language;
 
+  // Update dayjs locale to match the new language
+  dj.locale(currentState.value.language);
+
   // Update the userStore internal state with fresh backend values
   await userStore.profile();
 }