fixing time for multi-day events

nasa-jpl · Aug 12, 2024 · 49a3e2c · 49a3e2c
1 parent da75687
commit 49a3e2c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git 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
@@ -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
 }