From 29ecaec59c89f46e3c3693101aa376251c840982 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 1 May 2024 15:43:48 +0200
Subject: [PATCH] Added timespan to long events

---
 src/components/calendar/CalendarEventDetails.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/calendar/CalendarEventDetails.vue b/src/components/calendar/CalendarEventDetails.vue
index b81e413..c9bd2c0 100644
--- a/src/components/calendar/CalendarEventDetails.vue
+++ b/src/components/calendar/CalendarEventDetails.vue
@@ -17,7 +17,7 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.startD
 <template>
   <PopoverContent
     class="w-96"
-    align="start"
+    :align="'start'"
     :align-offset="50"
     :collision-padding="20"
     :class="{
@@ -47,13 +47,21 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.startD
       </div>
 
       <div class="mb-1 space-y-1">
-        <p class="font-semibold">{{ getFormattedDateTitle(event.startDate, true) }}</p>
+        <template v-if="event.startDate && !event.endDate">
+          <p class="font-semibold">{{ getFormattedDateTitle(event.startDate, true) }}</p>
+        </template>
+        <template v-else-if="event.startDate && event.endDate">
+          <p class="font-semibold">
+            Du {{ getFormattedDateTitle(event.startDate, true) }} au
+            {{ getFormattedDateTitle(event.endDate, true) }}
+          </p>
+        </template>
         <p class="text-sm italic opacity-75 flex items-center gap-1">
           <PhHourglassMedium size="16" weight="fill" /> {{ dateDifference }}
         </p>
       </div>
 
-      <div v-if="event.category || event.secondaryCategories">
+      <template v-if="event.category || event.secondaryCategories">
         <ul class="flex gap-1">
           <li v-if="event.category">
             <Badge class="mix-blend-luminosity font-bold bg-gray-600" variant="secondary">
@@ -67,7 +75,7 @@ const dateDifference: string = getRelativeString(defaultDate, props.event.startD
             </Badge>
           </li>
         </ul>
-      </div>
+      </template>
 
       <div class="mt-2 italic text-sm text-slate-500">
         {{ event.description }}