diff --git a/web/components/events/event-card.tsx b/web/components/events/event-card.tsx index 287984fd..38756e56 100644 --- a/web/components/events/event-card.tsx +++ b/web/components/events/event-card.tsx @@ -1,12 +1,11 @@ import clsx from 'clsx' import {HOUR_MS} from 'common/util/time' import dayjs from 'dayjs' -import {capitalize} from 'lodash' import Link from 'next/link' import {Event} from 'web/hooks/use-events' import {useUser} from 'web/hooks/use-user' import {useLocale, useT} from 'web/lib/locale' -import {formatTimeShort, fromNow} from 'web/lib/util/time' +import {capitalizePure, formatTimeShort, fromNow} from 'web/lib/util/time' import {UserLink, UserLinkFromId} from './user-link' @@ -26,7 +25,8 @@ export function EventCard(props: { const isRsvped = user && event.participants.includes(user.id) const isMaybe = user && event.maybe.includes(user.id) const isCreator = user && event.creator_id === user.id - const isPast = new Date(event.event_start_time) < new Date() + const start = new Date(event.event_start_time) + const isPast = start < new Date() const formattedDate = formatTimeShort(event.event_start_time, locale) const formattedEnd = @@ -36,10 +36,22 @@ export function EventCard(props: { locale, dayjs(event.event_end_time).isSame(event.event_start_time, 'day'), ) + + const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone + const longFormatter = new Intl.DateTimeFormat(locale, { + timeZone, + timeZoneName: 'long', + }) + const offsetFormatter = new Intl.DateTimeFormat(locale, { + timeZone, + timeZoneName: 'longOffset', // gives "GMT+5:30", "GMT-5:00", etc. + }) + const longName = longFormatter.formatToParts(start).find((p) => p.type === 'timeZoneName')?.value + const offset = offsetFormatter.formatToParts(start).find((p) => p.type === 'timeZoneName')?.value + const timezone = `${longName} (${offset})` + let timeAgo = fromNow(event.event_start_time, false, t, locale) - const assumedEnd = new Date( - event.event_end_time ?? new Date(event.event_start_time).getTime() + 24 * HOUR_MS, - ) + const assumedEnd = new Date(event.event_end_time ?? start.getTime() + 24 * HOUR_MS) if (isPast && assumedEnd > new Date()) timeAgo = t('events.started', 'Started {time}', {time: timeAgo}) @@ -61,9 +73,11 @@ export function EventCard(props: { {/* Date & Time */}

- {formattedDate} - {formattedEnd} + {capitalizePure(formattedDate)} {formattedEnd && '- '} + {formattedEnd}

-

{capitalize(timeAgo)}

+

{capitalizePure(timezone)}

+

{capitalizePure(timeAgo)}

{/* Description */} diff --git a/web/lib/util/time.ts b/web/lib/util/time.ts index e407da5a..eee47d36 100644 --- a/web/lib/util/time.ts +++ b/web/lib/util/time.ts @@ -30,10 +30,10 @@ export function formatTimeShort( hourOnly: boolean | null = null, ) { let date = dayjs(time) - let template = hourOnly ? 'h:mm A' : 'MMM D, h:mm A' + let template = hourOnly ? 'h:mm A' : 'dddd, MMMM D · h:mm A' if (locale) { date = date.locale(locale) - if (locale !== 'en') template = hourOnly ? 'HH:mm' : 'D MMM, HH:mm' + if (locale !== 'en') template = hourOnly ? 'HH:mm' : 'dddd D MMMM · HH:mm' } return date.format(template) } @@ -71,3 +71,7 @@ export const getCountdownStringHoursMinutes = (endDate: Date) => { return `${isPast ? '-' : ''} ${hoursStr} ${minutesStr}` } + +export function capitalizePure(word: string): string { + return word.charAt(0).toUpperCase() + word.slice(1) +}