From e251e678cd4029a015cc53ae45a28aa050c5fe9e Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Sun, 12 May 2024 16:32:25 +0200
Subject: [PATCH] special time formatting when event items are in a calendar

---
 web/src/components/events/EventContainer.tsx | 2 +-
 web/src/components/events/EventItem.tsx      | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/src/components/events/EventContainer.tsx b/web/src/components/events/EventContainer.tsx
index 78c09ee..ed3fe24 100644
--- a/web/src/components/events/EventContainer.tsx
+++ b/web/src/components/events/EventContainer.tsx
@@ -67,7 +67,7 @@ const EventCalendar = ({ events }: { events: EventFragment[] }) => {
                   </h3>
                   <ul>
                     {eventsByDate[yearMonth][week][day].map((event) => (
-                      <EventItem key={event.id} event={event} />
+                      <EventItem key={event.id} event={event} mode="calendar" />
                     ))}
                   </ul>
                 </div>
diff --git a/web/src/components/events/EventItem.tsx b/web/src/components/events/EventItem.tsx
index 6254ea1..b64eba9 100644
--- a/web/src/components/events/EventItem.tsx
+++ b/web/src/components/events/EventItem.tsx
@@ -8,8 +8,10 @@ import { toLocalTime, formatDate, commonDateFormat } from "@/lib/date";
 
 export const EventItem = ({
   event,
+  mode,
 }: {
   event: SingularEvent | EventFragment;
+  mode: "list" | "calendar";
 }) => {
   return (
     <li className={`${styles.eventItem} linkItem`}>
@@ -26,11 +28,16 @@ export const EventItem = ({
       </div>
       <div className={styles.text}>
         <h1 className={styles.title}>{event.title}</h1>
-        {event.occurrence?.start && (
+        {event.occurrence?.start && mode === "list" && (
           <p className={styles.details}>
             {formatDate(event.occurrence?.start, commonDateFormat)}
           </p>
         )}
+        {event.occurrence?.start && mode === "calendar" && (
+          <p className={styles.details}>
+            {formatDate(event.occurrence?.start, "'kl.' HH:mm")}
+          </p>
+        )}
       </div>
       <Link href={`/arrangementer/${event.slug}`} className="hiddenLink">
         Mer om arrangementet {event.title}