From 462ed5b3c738d08bc058686a973a930aa22b7ca7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sosth=C3=A8ne=20Gu=C3=A9don?= <sosthene@guedon.gdn>
Date: Sun, 30 Jun 2024 18:25:43 +0200
Subject: [PATCH] Use the correct locale to create the event date and time
 icons

---
 src/components/Event/DateCalendarIcon.vue | 13 +++++++++----
 src/components/Event/StartTimeIcon.vue    |  8 +++++++-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/Event/DateCalendarIcon.vue b/src/components/Event/DateCalendarIcon.vue
index d598a7c4e..51649cbf6 100644
--- a/src/components/Event/DateCalendarIcon.vue
+++ b/src/components/Event/DateCalendarIcon.vue
@@ -22,7 +22,12 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { locale } = useI18n({ useScope: "global" });
+
+const localeConverted = locale.replace("_", "-");
 
 const props = withDefaults(
   defineProps<{
@@ -35,15 +40,15 @@ const props = withDefaults(
 const dateObj = computed<Date>(() => new Date(props.date));
 
 const month = computed<string>(() =>
-  dateObj.value.toLocaleString(undefined, { month: "short" })
+  dateObj.value.toLocaleString(localeConverted, { month: "short" })
 );
 
 const day = computed<string>(() =>
-  dateObj.value.toLocaleString(undefined, { day: "numeric" })
+  dateObj.value.toLocaleString(localeConverted, { day: "numeric" })
 );
 
 const weekday = computed<string>(() =>
-  dateObj.value.toLocaleString(undefined, { weekday: "short" })
+  dateObj.value.toLocaleString(localeConverted, { weekday: "short" })
 );
 
 const smallStyle = computed<string>(() => (props.small ? "1.2" : "2"));
diff --git a/src/components/Event/StartTimeIcon.vue b/src/components/Event/StartTimeIcon.vue
index b0f463d76..7d1fe0a95 100644
--- a/src/components/Event/StartTimeIcon.vue
+++ b/src/components/Event/StartTimeIcon.vue
@@ -13,8 +13,14 @@
 </template>
 <script lang="ts" setup>
 import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+
 import Clock from "vue-material-design-icons/ClockTimeTenOutline.vue";
 
+const { locale } = useI18n({ useScope: "global" });
+
+const localeConverted = locale.replace("_", "-");
+
 const props = withDefaults(
   defineProps<{
     date: string;
@@ -26,7 +32,7 @@ const props = withDefaults(
 const dateObj = computed<Date>(() => new Date(props.date));
 
 const time = computed<string>(() =>
-  dateObj.value.toLocaleTimeString(undefined, {
+  dateObj.value.toLocaleTimeString(localeConverted, {
     hour: "2-digit",
     minute: "2-digit",
   })