fix: Cal Video sidebar not showing meeting time in timezone (calcom#22821)

* Pass params as object to `formatToLocalizedTime`

* Refactor videos-single-view

* Refactor bookings-single-view

Author: joeauyeung

apps/web/modules/bookings/views/bookings-single-view.tsx

@@ -1229,8 +1229,21 @@ function RecurringBookings({
             <div key={idx} className={classNames("mb-2", isCancelled ? "line-through" : "")}>
               {formatToLocalizedDate(dayjs.tz(dateStr, tz), language, "full", tz)}
               <br />
-              {formatToLocalizedTime(dayjs(dateStr), language, undefined, !is24h, tz)} -{" "}
-              {formatToLocalizedTime(dayjs(dateStr).add(duration, "m"), language, undefined, !is24h, tz)}{" "}
+              {formatToLocalizedTime({
+                date: dayjs(dateStr),
+                locale: language,
+                timeStyle: undefined,
+                hour12: !is24h,
+                timeZone: tz,
+              })}{" "}
+              -{" "}
+              {formatToLocalizedTime({
+                date: dayjs(dateStr).add(duration, "m"),
+                locale: language,
+                timeStyle: undefined,
+                hour12: !is24h,
+                timeZone: tz,
+              })}{" "}
               <span className="text-bookinglight">
                 ({formatToLocalizedTimezone(dayjs(dateStr), language, tz)})
               </span>
@@ -1249,14 +1262,19 @@ function RecurringBookings({
                   <div key={idx} className={classNames("mb-2", isCancelled ? "line-through" : "")}>
                     {formatToLocalizedDate(dayjs.tz(dateStr, tz), language, "full", tz)}
                     <br />
-                    {formatToLocalizedTime(dayjs(dateStr), language, undefined, !is24h, tz)} -{" "}
-                    {formatToLocalizedTime(
-                      dayjs(dateStr).add(duration, "m"),
-                      language,
-                      undefined,
-                      !is24h,
-                      tz
-                    )}{" "}
+                    {formatToLocalizedTime({
+                      date: dayjs(dateStr),
+                      locale: language,
+                      hour12: !is24h,
+                      timeZone: tz,
+                    })}{" "}
+                    -{" "}
+                    {formatToLocalizedTime({
+                      date: dayjs(dateStr).add(duration, "m"),
+                      locale: language,
+                      hour12: !is24h,
+                      timeZone: tz,
+                    })}{" "}
                     <span className="text-bookinglight">
                       ({formatToLocalizedTimezone(dayjs(dateStr), language, tz)})
                     </span>
@@ -1273,8 +1291,13 @@ function RecurringBookings({
     <div className={classNames(isCancelled ? "line-through" : "")}>
       {formatToLocalizedDate(date, language, "full", tz)}
       <br />
-      {formatToLocalizedTime(date, language, undefined, !is24h, tz)} -{" "}
-      {formatToLocalizedTime(dayjs(date).add(duration, "m"), language, undefined, !is24h, tz)}{" "}
+      {formatToLocalizedTime({ date, locale: language, hour12: !is24h, timeZone: tz })} -{" "}
+      {formatToLocalizedTime({
+        date: dayjs(date).add(duration, "m"),
+        locale: language,
+        hour12: !is24h,
+        timeZone: tz,
+      })}{" "}
       <span className="text-bookinglight">({formatToLocalizedTimezone(date, language, tz)})</span>
     </div>
   );

apps/web/modules/videos/views/videos-single-view.tsx

@@ -288,6 +288,7 @@ export function VideoMeetingInfo(props: VideoMeetingInfo) {
 
   const endTime = new Date(booking.endTime);
   const startTime = new Date(booking.startTime);
+  const timeZone = booking.user?.timeZone;
 
   useDailyEvent("left-meeting", () => {
     if (rediectAttendeeToOnExit) {
@@ -306,11 +307,11 @@ export function VideoMeetingInfo(props: VideoMeetingInfo) {
           <h3>{t("what")}:</h3>
           <p>{booking.title}</p>
           <h3>{t("invitee_timezone")}:</h3>
-          <p>{booking.user?.timeZone}</p>
+          <p>{timeZone}</p>
           <h3>{t("when")}:</h3>
           <p suppressHydrationWarning={true}>
             {formatToLocalizedDate(startTime)} <br />
-            {formatToLocalizedTime(startTime)}
+            {formatToLocalizedTime({ date: startTime, timeZone })}
           </p>
           <h3>{t("time_left")}</h3>
           <ProgressBar

packages/lib/dayjs/index.ts

@@ -79,13 +79,19 @@ export const formatToLocalizedDate = (
  * given Date object and locale. Undefined values mean the defaults
  * associated with the browser's current locale will be used.
  */
-export const formatToLocalizedTime = (
-  date: Date | Dayjs,
-  locale: string | undefined = undefined,
-  timeStyle: Intl.DateTimeFormatOptions["timeStyle"] = "short",
-  hour12: Intl.DateTimeFormatOptions["hour12"] = undefined,
-  timeZone?: string
-) => formatLocalizedDateTime(date, { timeStyle, hour12, timeZone }, locale);
+export const formatToLocalizedTime = ({
+  date,
+  locale = undefined,
+  timeStyle = "short",
+  hour12 = undefined,
+  timeZone,
+}: {
+  date: Date | Dayjs;
+  locale?: string | undefined;
+  timeStyle?: Intl.DateTimeFormatOptions["timeStyle"];
+  hour12?: Intl.DateTimeFormatOptions["hour12"];
+  timeZone?: string;
+}) => formatLocalizedDateTime(date, { timeStyle, hour12, timeZone }, locale);
 
 /**
  * Returns a translated timezone based on the given Date object and