fix/availability-tz-offset (#3185)

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -31,7 +31,6 @@ import {
 } from "@calcom/embed-core/embed-iframe";
 import classNames from "@calcom/lib/classNames";
 import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
-import { yyyymmdd } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getRecurringFreq } from "@calcom/lib/recurringStrings";
 import { localStorage } from "@calcom/lib/webstorage";
@@ -125,8 +124,8 @@ const useSlots = ({
       {
         eventTypeId,
         startTime: startTime?.toISOString() || "",
-        timeZone,
         endTime: endTime?.toISOString() || "",
+        timeZone,
       },
     ],
     { enabled: !!startTime && !!endTime }
@@ -182,7 +181,6 @@ const SlotPicker = ({
   }, [router.isReady, month, date, timeZone]);
 
   const { i18n, isLocaleReady } = useLocale();
-
   const { slots: _1 } = useSlots({
     eventTypeId: eventType.id,
     startTime: selectedDate?.startOf("day"),
@@ -224,7 +222,7 @@ const SlotPicker = ({
       {selectedDate && (
         <AvailableTimes
           isLoading={isLoading}
-          slots={slots[yyyymmdd(selectedDate.toDate())]}
+          slots={slots[selectedDate.format("YYYY-MM-DD")]}
           date={selectedDate}
           timeFormat={timeFormat}
           eventTypeId={eventType.id}

apps/web/lib/slots.ts

@@ -41,6 +41,13 @@ const getSlots = ({ inviteeDate, frequency, minimumBookingNotice, workingHours,
   const startOfDay = dayjs.utc().startOf("day");
   const startOfInviteeDay = inviteeDate.startOf("day");
   // checks if the start date is in the past
+
+  /**
+   *  TODO: change "day" for "hour" to stop displaying 1 day before today
+   * This is displaying a day as available as sometimes difference between two dates is < 24 hrs.
+   * But when doing timezones an available day for an owner can be 2 days available in other users tz.
+   *
+   * */
   if (inviteeDate.isBefore(startDate, "day")) {
     return [];
   }

apps/web/server/routers/viewer/slots.tsx

@@ -198,8 +198,8 @@ export const slotsRouter = createRouter().query("getSchedule", {
         periodDays: eventType.periodDays,
       });
 
-    // AFAIK startTime and endTime already have timezone info on them
-    let time = dayjs(startTime);
+    let time = input.timeZone === "Etc/GMT" ? startTime.utc() : startTime.tz(input.timeZone);
+
     do {
       // get slots retrieves the available times for a given day
       const times = getSlots({
@@ -209,7 +209,6 @@ export const slotsRouter = createRouter().query("getSchedule", {
         minimumBookingNotice: eventType.minimumBookingNotice,
         frequency: eventType.slotInterval || eventType.length,
       });
-
       // if ROUND_ROBIN - slots stay available on some() - if normal / COLLECTIVE - slots only stay available on every()
       const filterStrategy =
         !eventType.schedulingType || eventType.schedulingType === SchedulingType.COLLECTIVE
@@ -223,7 +222,7 @@ export const slotsRouter = createRouter().query("getSchedule", {
           )
         );
 
-      slots[yyyymmdd(time.toDate())] = filteredTimes.map((time) => ({
+      slots[time.format("YYYY-MM-DD")] = filteredTimes.map((time) => ({
         time: time.toISOString(),
         users: eventType.users.map((user) => user.username || ""),
         // Conditionally add the attendees and booking id to slots object if there is already a booking during that time