diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx index bb2c42ab83..ebd9d1ab68 100644 --- a/apps/web/components/booking/pages/BookingPage.tsx +++ b/apps/web/components/booking/pages/BookingPage.tsx @@ -22,6 +22,7 @@ import { useIsEmbed, } from "@calcom/embed-core/embed-iframe"; import { createBooking, createRecurringBooking } from "@calcom/features/bookings/lib"; +import { useTimePreferences } from "@calcom/features/bookings/lib"; import { getBookingFieldsWithSystemFields, SystemField, @@ -39,7 +40,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; import useTheme from "@calcom/lib/hooks/useTheme"; import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery"; import { HttpError } from "@calcom/lib/http-error"; -import { parseDate, parseRecurringDates } from "@calcom/lib/parse-dates"; +import { parseDate, parseDateTimeWithTimeZone, parseRecurringDates } from "@calcom/lib/parse-dates"; import { getEveryFreqFor } from "@calcom/lib/recurringStrings"; import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry"; import { TimeFormat } from "@calcom/lib/timeFormat"; @@ -231,6 +232,8 @@ const BookingPage = ({ {} ); + const { timezone } = useTimePreferences(); + const reserveSlot = () => { if (queryDuration) { reserveSlotMutation.mutate({ @@ -602,7 +605,7 @@ const BookingPage = ({ {isClientTimezoneAvailable && typeof booking.startTime === "string" && - parseDate(dayjs(booking.startTime), i18n.language, { + parseDateTimeWithTimeZone(booking.startTime, i18n.language, timezone, { selectedTimeFormat: timeFormat, })}

diff --git a/packages/lib/parse-dates.ts b/packages/lib/parse-dates.ts index d61d2d59d5..dcb6555b33 100644 --- a/packages/lib/parse-dates.ts +++ b/packages/lib/parse-dates.ts @@ -25,6 +25,45 @@ export const parseDate = (date: string | null | Dayjs, language: string, options return processDate(date, language, options); }; +const timeOptions: Intl.DateTimeFormatOptions = { + hour12: true, + hourCycle: "h12", + hour: "numeric", + minute: "numeric", +}; + +const dateOptions: Intl.DateTimeFormatOptions = { + weekday: "long", + year: "numeric", + month: "long", + day: "numeric", +}; + +export const parseDateTimeWithTimeZone = ( + date: Date, + language: string, + timezone: string, + options?: ExtraOptions +): string => { + timeOptions.timeZone = timezone; + dateOptions.timeZone = timezone; + + if (options?.withDefaultTimeFormat) { + timeOptions.hourCycle = "h12"; + } else if (options?.selectedTimeFormat) { + timeOptions.hourCycle = options.selectedTimeFormat === TimeFormat.TWELVE_HOUR ? "h12" : "h24"; + if (timeOptions.hourCycle === "h24") { + delete timeOptions.hour12; + } + } + const formattedDate = new Date(date).toLocaleDateString(language, dateOptions); + const formattedTime = new Date(date) + .toLocaleTimeString(language, timeOptions) + .replace(" ", "") + .toLowerCase(); + return `${formattedTime}, ${formattedDate}`; +}; + export const parseRecurringDates = ( { startDate,