From 0e78ae3cc430fca14ed60c46991d8bd4114992f1 Mon Sep 17 00:00:00 2001
From: Tom Hubrecht <tom.hubrecht@ens.fr>
Date: Sun, 6 Mar 2022 01:44:33 +0100
Subject: [PATCH] Add date if allDay event, time if not

---
 src/EventModal.svelte | 30 ++++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/EventModal.svelte b/src/EventModal.svelte
index 0eba947..7b956b1 100644
--- a/src/EventModal.svelte
+++ b/src/EventModal.svelte
@@ -4,6 +4,12 @@
   export let event = undefined;
   export let open = undefined;
   export let toggle = undefined;
+
+  const timeFormat = d =>
+    d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+  const dateFormat = d =>
+    d.toLocaleDateString('fr-FR', { month: '2-digit', day: '2-digit' });
 </script>
 
 <Modal isOpen={open} {toggle} centered scrollable>
@@ -16,10 +22,22 @@
     </ModalBody>
   {/if}
 
-  {#if event.extendedProps.location}
-    <ModalFooter class="justify-content-start">
-      <Icon name="geo" />
-      <span>{event.extendedProps.location}</span>
-    </ModalFooter>
-  {/if}
+  <ModalFooter class="justify-content-between">
+    <span>
+      {#if event.extendedProps.location}
+        <Icon name="geo" />
+        <span class="ms-1">{event.extendedProps.location}</span>
+      {/if}
+    </span>
+
+    <span>
+      {#if event.allDay}
+        <Icon name="calendar-range" />
+        <span class="ms-1">{dateFormat(event.start)} - {dateFormat(event.end)}</span>
+      {:else}
+        <Icon name="clock" />
+        <span class="ms-1">{timeFormat(event.start)} - {timeFormat(event.end)}</span>
+      {/if}
+    </span>
+  </ModalFooter>
 </Modal>