jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(events): pipe displayTimezone through list and sidebar formatters

Browse source 
Sidebar (EventsMiniSidebar), public events list, member dashboard
"Upcoming" block, and EventTicketPurchase all formatted dates in
viewer-local TZ. Switch each formatter to accept the event (or an
eventTimezone prop) and pass it to Intl.DateTimeFormat so the
displayed wall-clock matches the event's intended zone.
This commit is contained in:
Jennie Robinson Faber 2026-05-19 10:46:44 +01:00
parent acbd3c0737
commit 9dd007657a
5 changed files with 40 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/pages/events/[slug].vue
View file

@ -131,6 +131,7 @@
:event-id="event._id || event.id"
:event-start-date="event.startDate"
:event-title="event.title"
:event-timezone="eventTimeZone"
:user-email="memberData?.email"
:user-name="memberData?.name"
@success="handleTicketSuccess"

28
app/pages/events/index.vue
View file

@ -34,8 +34,8 @@
:class="{ 'is-cancelled': event.isCancelled }"
>
<div class="event-date-col">
<span class="event-date">{{ formatDate(event.startDate) }}</span>
<span class="event-time">{{ formatTime(event.startDate) }}</span>
<span class="event-date">{{ formatDate(event) }}</span>
<span class="event-time">{{ formatTime(event) }}</span>
</div>
<div class="event-info">
<div class="event-title">
@ -152,18 +152,24 @@ const activeSeries = computed(() => {
);
});
const formatDate = (dateStr) => {
if (!dateStr) return "";
const d = new Date(dateStr);
const opts = { month: "short", day: "numeric" };
if (d.getFullYear() !== new Date().getFullYear()) opts.year = "numeric";
const formatDate = (event) => {
if (!event?.startDate) return "";
const tz = event.displayTimezone || "America/Toronto";
const d = new Date(event.startDate);
const opts = { month: "short", day: "numeric", timeZone: tz };
const dYear = d.toLocaleDateString("en-US", { year: "numeric", timeZone: tz });
const nowYear = new Date().toLocaleDateString("en-US", { year: "numeric", timeZone: tz });
if (dYear !== nowYear) opts.year = "numeric";
return d.toLocaleDateString("en-US", opts);
};
const formatTime = (dateStr) => {
if (!dateStr) return "";
const d = new Date(dateStr);
return d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
const formatTime = (event) => {
if (!event?.startDate) return "";
return new Date(event.startDate).toLocaleTimeString("en-US", {
hour: "numeric",
minute: "2-digit",
timeZone: event.displayTimezone || "America/Toronto",
});
};
const formatLocation = (event) => {

18
app/pages/member/dashboard.vue
View file

@ -60,9 +60,7 @@
:to="`/events/${evt.slug || evt._id}`"
class="event-item"
>
<span class="event-date">{{
formatEventDate(evt.startDate)
}}</span>
<span class="event-date">{{ formatEventDate(evt) }}</span>
<span class="event-title">{{ evt.title }}</span>
<CircleBadge v-if="evt.circle" :circle="evt.circle" />
</NuxtLink>
@ -365,20 +363,22 @@ const getEventImageUrl = (featureImage) => {
return "";
};
const formatEventDate = (dateString) => {
const date = new Date(dateString);
const formatEventDate = (event) => {
if (!event?.startDate) return "";
return new Intl.DateTimeFormat("en-US", {
month: "short",
day: "numeric",
}).format(date);
timeZone: event.displayTimezone || "America/Toronto",
}).format(new Date(event.startDate));
};
const formatEventTime = (dateString) => {
const date = new Date(dateString);
const formatEventTime = (event) => {
if (!event?.startDate) return "";
return new Intl.DateTimeFormat("en-US", {
hour: "numeric",
minute: "2-digit",
}).format(date);
timeZone: event.displayTimezone || "America/Toronto",
}).format(new Date(event.startDate));
};
const formatMemberSince = (dateString) => {