diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index fc9d1dde34..553a1eab28 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -316,7 +316,7 @@ const BookerComponent = ({
className={classNames(
"border-subtle rtl:border-default flex h-full w-full flex-col overflow-x-auto px-5 py-3 pb-0 rtl:border-r ltr:md:border-l",
layout === BookerLayouts.MONTH_VIEW &&
- "scroll-bar h-full overflow-auto md:w-[var(--booker-timeslots-width)]",
+ "h-full overflow-hidden md:w-[var(--booker-timeslots-width)]",
layout !== BookerLayouts.MONTH_VIEW && "sticky top-0"
)}
ref={timeslotsRef}
diff --git a/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx b/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx
index 3243d1e5e2..f4d681aa79 100644
--- a/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx
+++ b/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx
@@ -10,6 +10,7 @@ import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
import { BookerLayouts } from "@calcom/prisma/zod-utils";
import { trpc } from "@calcom/trpc";
+import { AvailableTimesHeader } from "../../components/AvailableTimesHeader";
import { useBookerStore } from "../store";
import { useEvent, useScheduleForEvent } from "../utils/event";
@@ -100,33 +101,47 @@ export const AvailableTimeSlots = ({
}, [containerRef, schedule.isLoading, isEmbed, isMobile]);
return (
-
- {schedule.isLoading
- ? // Shows exact amount of days as skeleton.
- Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) =>
)
- : slotsPerDay.length > 0 &&
- slotsPerDay.map((slots) => (
-
- ))}
-
+ <>
+
+ {schedule.isLoading
+ ? // Shows exact amount of days as skeleton.
+ Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) =>
)
+ : slotsPerDay.length > 0 &&
+ slotsPerDay.map((slots) => (
+
+ ))}
+
+
+ {schedule.isLoading
+ ? // Shows exact amount of days as skeleton.
+ Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) =>
)
+ : slotsPerDay.length > 0 &&
+ slotsPerDay.map((slots) => (
+
+ ))}
+
+ >
);
};
diff --git a/packages/features/bookings/components/AvailableTimes.tsx b/packages/features/bookings/components/AvailableTimes.tsx
index 0808394202..4d9b4a3a21 100644
--- a/packages/features/bookings/components/AvailableTimes.tsx
+++ b/packages/features/bookings/components/AvailableTimes.tsx
@@ -1,22 +1,16 @@
import { CalendarX2 } from "lucide-react";
-import { shallow } from "zustand/shallow";
-import type { Dayjs } from "@calcom/dayjs";
import dayjs from "@calcom/dayjs";
import type { Slots } from "@calcom/features/schedules";
import { classNames } from "@calcom/lib";
import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { nameOfDay } from "@calcom/lib/weekday";
-import { BookerLayouts } from "@calcom/prisma/zod-utils";
import { Button, SkeletonText } from "@calcom/ui";
import { useBookerStore } from "../Booker/store";
import { useTimePreferences } from "../lib";
import { SeatsAvailabilityText } from "./SeatsAvailabilityText";
-import { TimeFormatToggle } from "./TimeFormatToggle";
type AvailableTimesProps = {
- date: Dayjs;
slots: Slots[string];
onTimeSelect: (
time: string,
@@ -28,58 +22,25 @@ type AvailableTimesProps = {
showAvailableSeatsCount?: boolean | null;
showTimeFormatToggle?: boolean;
className?: string;
- availableMonth?: string | undefined;
selectedSlots?: string[];
};
export const AvailableTimes = ({
- date,
slots,
onTimeSelect,
seatsPerTimeSlot,
showAvailableSeatsCount,
showTimeFormatToggle = true,
className,
- availableMonth,
selectedSlots,
}: AvailableTimesProps) => {
const { t, i18n } = useLocale();
const [timeFormat, timezone] = useTimePreferences((state) => [state.timeFormat, state.timezone]);
const bookingData = useBookerStore((state) => state.bookingData);
const hasTimeSlots = !!seatsPerTimeSlot;
- const [layout] = useBookerStore((state) => [state.layout], shallow);
- const isColumnView = layout === BookerLayouts.COLUMN_VIEW;
- const isMonthView = layout === BookerLayouts.MONTH_VIEW;
- const isToday = dayjs().isSame(date, "day");
return (
-
-
-
- {nameOfDay(i18n.language, Number(date.format("d")), "short")}
-
-
- {date.format("DD")}
- {availableMonth && `, ${availableMonth}`}
-
-
-
- {showTimeFormatToggle && (
-
-
-
- )}
-
{!slots.length && (
diff --git a/packages/features/bookings/components/AvailableTimesHeader.tsx b/packages/features/bookings/components/AvailableTimesHeader.tsx
new file mode 100644
index 0000000000..eeba9ca57e
--- /dev/null
+++ b/packages/features/bookings/components/AvailableTimesHeader.tsx
@@ -0,0 +1,60 @@
+import { shallow } from "zustand/shallow";
+
+import type { Dayjs } from "@calcom/dayjs";
+import dayjs from "@calcom/dayjs";
+import { classNames } from "@calcom/lib";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { nameOfDay } from "@calcom/lib/weekday";
+import { BookerLayouts } from "@calcom/prisma/zod-utils";
+
+import { useBookerStore } from "../Booker/store";
+import { TimeFormatToggle } from "./TimeFormatToggle";
+
+type AvailableTimesHeaderProps = {
+ date: Dayjs;
+ showTimeFormatToggle?: boolean;
+ availableMonth?: string | undefined;
+};
+
+export const AvailableTimesHeader = ({
+ date,
+
+ showTimeFormatToggle = true,
+
+ availableMonth,
+}: AvailableTimesHeaderProps) => {
+ const { t, i18n } = useLocale();
+ const [layout] = useBookerStore((state) => [state.layout], shallow);
+ const isColumnView = layout === BookerLayouts.COLUMN_VIEW;
+ const isMonthView = layout === BookerLayouts.MONTH_VIEW;
+ const isToday = dayjs().isSame(date, "day");
+
+ return (
+
+
+
+ {nameOfDay(i18n.language, Number(date.format("d")), "short")}
+
+
+ {date.format("DD")}
+ {availableMonth && `, ${availableMonth}`}
+
+
+
+ {showTimeFormatToggle && (
+
+
+
+ )}
+
+ );
+};
diff --git a/packages/features/bookings/index.ts b/packages/features/bookings/index.ts
index 75d6c92b0e..2488ab0061 100644
--- a/packages/features/bookings/index.ts
+++ b/packages/features/bookings/index.ts
@@ -6,3 +6,4 @@ export {
EventTitle,
} from "./components/event-meta";
export { AvailableTimes, AvailableTimesSkeleton } from "./components/AvailableTimes";
+export { AvailableTimesHeader } from "./components/AvailableTimesHeader";
diff --git a/packages/features/embed/Embed.tsx b/packages/features/embed/Embed.tsx
index 2cd33e5514..be757d4255 100644
--- a/packages/features/embed/Embed.tsx
+++ b/packages/features/embed/Embed.tsx
@@ -10,6 +10,7 @@ import { shallow } from "zustand/shallow";
import type { Dayjs } from "@calcom/dayjs";
import dayjs from "@calcom/dayjs";
+import { AvailableTimesHeader } from "@calcom/features/bookings";
import { AvailableTimes } from "@calcom/features/bookings";
import { useBookerStore, useInitializeBookerStore } from "@calcom/features/bookings/Booker/store";
import { useEvent, useScheduleForEvent } from "@calcom/features/bookings/Booker/utils/event";
@@ -248,9 +249,9 @@ const EmailEmbed = ({ eventType, username }: { eventType?: EventType; username: