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 }