Client - localize calendar header

fittrackee_client/src/components/Dashboard/UserCalendar/CalendarDays.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="calendar-days">
     <div class="calendar-day" v-for="(day, index) in days" :key="index">
-      {{ format(day, 'EEE', localeOptions) }}
+      {{ format(day, 'EEE', { locale: localeOptions }) }}
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { format, addDays } from 'date-fns'
+  import { Locale, format, addDays } from 'date-fns'
 
   interface Props {
     startDate: Date
-    localeOptions: string
+    localeOptions: Locale
   }
   const props = defineProps<Props>()
 

fittrackee_client/src/components/Dashboard/UserCalendar/CalendarHeader.vue

@@ -8,7 +8,7 @@
     </div>
     <div class="calendar-month">
       <span>
-        {{ format(day, 'MMM yyyy', localeOptions) }}
+        {{ format(day, 'MMM yyyy', { locale: localeOptions }) }}
       </span>
     </div>
     <div
@@ -21,12 +21,12 @@
 </template>
 
 <script setup lang="ts">
-  import { format } from 'date-fns'
+  import { Locale, format } from 'date-fns'
   import { toRefs } from 'vue'
 
   interface Props {
     day: Date
-    localeOptions: string
+    localeOptions: Locale
   }
   const props = defineProps<Props>()
 

fittrackee_client/src/components/Dashboard/UserCalendar/index.vue

@@ -3,11 +3,14 @@
     <div class="calendar-card box">
       <CalendarHeader
         :day="day"
-        locale-options="enGB"
+        :locale-options="localeOptions"
         @displayNextMonth="displayNextMonth"
         @displayPreviousMonth="displayPreviousMonth"
       />
-      <CalendarDays :start-date="calendarDates.start" locale-options="enGB" />
+      <CalendarDays
+        :start-date="calendarDates.start"
+        :locale-options="localeOptions"
+      />
       <CalendarCells
         :currentDay="day"
         :end-date="calendarDates.end"
@@ -22,13 +25,13 @@
 </template>
 
 <script setup lang="ts">
-  import { addMonths, format, subMonths } from 'date-fns'
+  import { Locale, addMonths, format, subMonths } from 'date-fns'
   import { ComputedRef, computed, ref, toRefs, onBeforeMount } from 'vue'
 
   import CalendarCells from '@/components/Dashboard/UserCalendar/CalendarCells.vue'
   import CalendarDays from '@/components/Dashboard/UserCalendar/CalendarDays.vue'
   import CalendarHeader from '@/components/Dashboard/UserCalendar/CalendarHeader.vue'
-  import { WORKOUTS_STORE } from '@/store/constants'
+  import { ROOT_STORE, WORKOUTS_STORE } from '@/store/constants'
   import { ISport } from '@/types/sports'
   import { IUserProfile } from '@/types/user'
   import { IWorkout, TWorkoutsPayload } from '@/types/workouts'
@@ -51,6 +54,9 @@
   const calendarWorkouts: ComputedRef<IWorkout[]> = computed(
     () => store.getters[WORKOUTS_STORE.GETTERS.CALENDAR_WORKOUTS]
   )
+  const localeOptions: ComputedRef<Locale> = computed(
+    () => store.getters[ROOT_STORE.GETTERS.LOCALE]
+  )
 
   onBeforeMount(() => getCalendarWorkouts())