fix: load date picker on client side (#8690)

packages/features/bookings/Booker/Booker.tsx

@@ -15,7 +15,6 @@ import { AvailableTimeSlots } from "./components/AvailableTimeSlots";
 import { Away } from "./components/Away";
 import { BookEventForm } from "./components/BookEventForm";
 import { BookFormAsModal } from "./components/BookEventForm/BookFormAsModal";
-import { DatePicker } from "./components/DatePicker";
 import { EventMeta } from "./components/EventMeta";
 import { LargeCalendar } from "./components/LargeCalendar";
 import { LargeViewHeader } from "./components/LargeViewHeader";
@@ -26,6 +25,9 @@ import type { BookerLayout, BookerProps } from "./types";
 import { useEvent } from "./utils/event";
 
 const PoweredBy = dynamic(() => import("@calcom/ee/components/PoweredBy"));
+const DatePicker = dynamic(() => import("./components/DatePicker").then((mod) => mod.DatePicker), {
+  ssr: false,
+});
 
 const useBrandColors = ({ brandColor, darkBrandColor }: { brandColor?: string; darkBrandColor?: string }) => {
   const brandTheme = useGetBrandingColours({

packages/features/bookings/Booker/components/DatePicker.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from "react";
 import { shallow } from "zustand/shallow";
 
 import type { Dayjs } from "@calcom/dayjs";
@@ -12,7 +11,6 @@ import { useBookerStore } from "../store";
 import { useEvent, useScheduleForEvent } from "../utils/event";
 
 export const DatePicker = () => {
-  const [isLoadedClientSide, setIsLoadedClientSide] = useState(false);
   const { i18n } = useLocale();
   const [month, selectedDate] = useBookerStore((state) => [state.month, state.selectedDate], shallow);
   const [setSelectedDate, setMonth] = useBookerStore(
@@ -23,15 +21,6 @@ export const DatePicker = () => {
   const schedule = useScheduleForEvent();
   const nonEmptyScheduleDays = useNonEmptyScheduleDays(schedule?.data?.slots);
 
-  // Not rendering the component on the server side to avoid hydration issues
-  // @TODO: We should update the datepicker component as soon as the current booker isn't
-  // used anymore, so we don't need to have this check.
-  useEffect(() => {
-    setIsLoadedClientSide(true);
-  }, []);
-
-  if (!isLoadedClientSide) return null;
-
   return (
     <DatePickerComponent
       isLoading={schedule.isLoading}