From d1ce24cb692b0aadcb36376ce1329db3af9e5243 Mon Sep 17 00:00:00 2001
From: Massedil <massedil-framagit.org@msd.im>
Date: Mon, 14 Oct 2024 16:18:25 +0200
Subject: [PATCH] #1511 format <start-time-icon> with the timezone and the
 formatTimeString() function  already used for that in Mobilizon

---
 src/components/Event/StartTimeIcon.vue | 14 ++++----------
 src/views/Event/EventView.vue          |  1 +
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/components/Event/StartTimeIcon.vue b/src/components/Event/StartTimeIcon.vue
index 7d1fe0a95..38abc97bc 100644
--- a/src/components/Event/StartTimeIcon.vue
+++ b/src/components/Event/StartTimeIcon.vue
@@ -12,30 +12,24 @@
   </div>
 </template>
 <script lang="ts" setup>
+import { formatTimeString } from "@/filters/datetime";
 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;
+    timezone?: string;
     small?: boolean;
   }>(),
-  { small: false }
+  { small: false, timezone: "Etc/UTC" }
 );
 
 const dateObj = computed<Date>(() => new Date(props.date));
 
 const time = computed<string>(() =>
-  dateObj.value.toLocaleTimeString(localeConverted, {
-    hour: "2-digit",
-    minute: "2-digit",
-  })
+  formatTimeString(props.date, props.timezone)
 );
 
 const smallStyle = computed<string>(() => (props.small ? "0.9" : "2"));
diff --git a/src/views/Event/EventView.vue b/src/views/Event/EventView.vue
index 0ad9ff065..c8b275991 100755
--- a/src/views/Event/EventView.vue
+++ b/src/views/Event/EventView.vue
@@ -24,6 +24,7 @@
         >
           <start-time-icon
             :date="event.beginsOn.toString()"
+            :timezone="event.options.timezone ?? undefined"
             class="absolute right-3 -top-16"
           />
         </div>