From 49a3e2ca0e9c5bbc8123ad75de3f190a52ccb112 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Mon, 12 Aug 2024 15:59:01 -0700
Subject: [PATCH] fixing time for multi-day events

---
 .../PageEduEventDetail.stories.js             | 14 +++++++++-
 packages/vue/src/utils/mixins.ts              | 26 +++++++++----------
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js
index 2570d204..e86a3814 100644
--- a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js
+++ b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.stories.js
@@ -1,6 +1,5 @@
 import { BlockKeyPointsData } from './../../../components/BlockKeyPoints/BlockKeyPoints.stories'
 import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
-import { EventDetailHeroData } from './../../../components/EventDetailHero/EventDetailHero.stories'
 import { EventsBlockLinkCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories'
 import PageEduEventDetail from './PageEduEventDetail.vue'
 
@@ -150,6 +149,19 @@ export const CustomDate = {
   }
 }
 
+export const MultiDayEvent = {
+  args: {
+    data: {
+      ...PageEduEventDetailData,
+      startDate: '2024-08-08',
+      endDate: '2024-08-12',
+      startDatetime: '2024-08-08T14:00:00-07:00',
+      startTime: '15:00:00',
+      endDatetime: '2024-08-12T22:00:00-07:00'
+    }
+  }
+}
+
 export const Ongoing = {
   args: {
     data: {
diff --git a/packages/vue/src/utils/mixins.ts b/packages/vue/src/utils/mixins.ts
index 6cfbcab7..eacf4d97 100644
--- a/packages/vue/src/utils/mixins.ts
+++ b/packages/vue/src/utils/mixins.ts
@@ -339,27 +339,27 @@ export const mixinFormatEventTimeInHoursAndMinutes = (
   endDatetime?: string,
   endTime?: string
 ): string => {
-  // Only display time if event spans less than one day
   const startDateDayjs = dayjs(startDatetime)
   let time = ''
 
   if (endDatetime) {
     const endDateDayjs = dayjs(endDatetime)
-    if (
-      endDateDayjs.diff(startDateDayjs, 'hour') <= 24 &&
-      endDateDayjs.diff(startDateDayjs, 'day') === 0
-    ) {
-      // Event is less than 24 hours and spans 1 day
-      if (endTime) {
-        if (startDateDayjs.format('a') === endDateDayjs.format('a')) {
-          time = `${startDateDayjs.format('h:mm')} - ${endDateDayjs.format('h:mm a z')}`
-        } else {
-          time = `${startDateDayjs.format('h:mm a')} - ${endDateDayjs.format('h:mm a z')}`
-        }
+    // Only display time if event spans less than one day
+    // if (
+    //   endDateDayjs.diff(startDateDayjs, 'hour') <= 24 &&
+    //   endDateDayjs.diff(startDateDayjs, 'day') === 0
+    // ) {
+    // Event is less than 24 hours and spans 1 day
+    if (endTime) {
+      if (startDateDayjs.format('a') === endDateDayjs.format('a')) {
+        time = `${startDateDayjs.format('h:mm')} - ${endDateDayjs.format('h:mm a z')}`
       } else {
-        time = `${startDateDayjs.format('h:mm a z')}`
+        time = `${startDateDayjs.format('h:mm a')} - ${endDateDayjs.format('h:mm a z')}`
       }
+    } else {
+      time = `${startDateDayjs.format('h:mm a z')}`
     }
+    // }
   }
   return time
 }