Mobile calendar

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

@@ -44,7 +44,7 @@ import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import isSmsCalEmail from "@calcom/lib/isSmsCalEmail";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
-import { getIs24hClockFromLocalStorage, isBrowserLocale24h } from "@calcom/lib/timeFormat";
+import { isBrowserLocale24h } from "@calcom/lib/timeFormat";
 import { localStorage } from "@calcom/lib/webstorage";
 import { BookingStatus, SchedulingType } from "@calcom/prisma/enums";
 import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
@@ -256,7 +256,7 @@ export default function Success(props: PageProps) {
     setDate(
       date.tz(localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess() || "Europe/London")
     );
-    setIs24h(props?.userTimeFormat ? props.userTimeFormat === 24 : !!getIs24hClockFromLocalStorage());
+    setIs24h(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [eventType, needsConfirmation]);
 

packages/features/bookings/Booker/Booker.tsx

@@ -17,7 +17,6 @@ import { VerifyCodeDialog } from "../components/VerifyCodeDialog";
 import { AvailableTimeSlots } from "./components/AvailableTimeSlots";
 import { BookEventForm } from "./components/BookEventForm";
 import { BookFormAsModal } from "./components/BookEventForm/BookFormAsModal";
-import { EventMeta } from "./components/EventMeta";
 import { HavingTroubleFindingTime } from "./components/HavingTroubleFindingTime";
 import { Header } from "./components/Header";
 import { InstantBooking } from "./components/InstantBooking";
@@ -281,6 +280,7 @@ const BookerComponent = ({
             !isEmbed && "sm:transition-[width] sm:duration-300",
             isEmbed && layout === BookerLayouts.MONTH_VIEW && "border-booker sm:border-booker-width",
             !isEmbed && layout === BookerLayouts.MONTH_VIEW && `border-subtle border`,
+
             `${customClassNames?.bookerContainer}`
           )}>
           <AnimatePresence>
@@ -327,37 +327,6 @@ const BookerComponent = ({
                 )}
               </BookerSection>
             )}
-            <StickyOnDesktop key="meta" className={classNames("relative z-10 flex [grid-area:meta]")}>
-              <BookerSection
-                area="meta"
-                className="max-w-screen flex w-full flex-col md:w-[var(--booker-meta-width)]">
-                {!hideEventTypeDetails && orgBannerUrl && !isPlatform && (
-                  <img
-                    loading="eager"
-                    className="-mb-9 ltr:rounded-tl-md rtl:rounded-tr-md"
-                    alt="org banner"
-                    src={orgBannerUrl}
-                  />
-                )}
-                <EventMeta
-                  classNames={{
-                    eventMetaContainer: customClassNames?.eventMetaCustomClassNames?.eventMetaContainer,
-                    eventMetaTitle: customClassNames?.eventMetaCustomClassNames?.eventMetaTitle,
-                    eventMetaTimezoneSelect:
-                      customClassNames?.eventMetaCustomClassNames?.eventMetaTimezoneSelect,
-                  }}
-                  event={event.data}
-                  isPending={event.isPending}
-                  isPlatform={isPlatform}
-                />
-                {layout !== BookerLayouts.MONTH_VIEW &&
-                  !(layout === "mobile" && bookerState === "booking") && (
-                    <div className="mt-auto px-5 py-3">
-                      <DatePicker event={event} schedule={schedule} scrollToTimeSlots={scrollToTimeSlots} />
-                    </div>
-                  )}
-              </BookerSection>
-            </StickyOnDesktop>
 
             <BookerSection
               key="book-event-form"
@@ -368,33 +337,11 @@ const BookerComponent = ({
               {EventBooker}
             </BookerSection>
 
-            <BookerSection
-              key="datepicker"
-              area="main"
-              visible={bookerState !== "booking" && layout === BookerLayouts.MONTH_VIEW}
-              {...fadeInLeft}
-              initial="visible"
-              className="md:border-subtle ml-[-1px] h-full flex-shrink px-5 py-3 md:border-l lg:w-[var(--booker-main-width)]">
-              <DatePicker
-                classNames={{
-                  datePickerContainer: customClassNames?.datePickerCustomClassNames?.datePickerContainer,
-                  datePickerTitle: customClassNames?.datePickerCustomClassNames?.datePickerTitle,
-                  datePickerDays: customClassNames?.datePickerCustomClassNames?.datePickerDays,
-                  datePickerDate: customClassNames?.datePickerCustomClassNames?.datePickerDate,
-                  datePickerDatesActive: customClassNames?.datePickerCustomClassNames?.datePickerDatesActive,
-                  datePickerToggle: customClassNames?.datePickerCustomClassNames?.datePickerToggle,
-                }}
-                event={event}
-                schedule={schedule}
-                scrollToTimeSlots={scrollToTimeSlots}
-              />
-            </BookerSection>
-
             <BookerSection
               key="large-calendar"
               area="main"
               visible={layout === BookerLayouts.WEEK_VIEW}
-              className="border-subtle sticky top-0 ml-[-1px] h-full md:border-l"
+              className="border-subtle sticky top-0  ml-[-1px] h-full md:border-l"
               {...fadeInLeft}>
               <LargeCalendar
                 extraDays={extraDays}

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

@@ -9,7 +9,6 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { BookerLayouts } from "@calcom/prisma/zod-utils";
 import { Button, ButtonGroup, Icon, ToggleGroup, Tooltip } from "@calcom/ui";
 
-import { TimeFormatToggle } from "../../components/TimeFormatToggle";
 import { useBookerStore } from "../store";
 import type { BookerLayout } from "../types";
 
@@ -134,7 +133,7 @@ export function Header({
       </div>
       <div className="ml-auto flex gap-2">
         {renderOverlay?.()}
-        <TimeFormatToggle />
+        {/*<TimeFormatToggle />*/}
         <div className="fixed top-4 ltr:right-4 rtl:left-4">
           <LayoutToggleWithData
             layout={layout}

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

@@ -79,7 +79,7 @@ export const LargeCalendar = ({
   }, [overlayEvents, displayOverlay]);
 
   return (
-    <div className="h-full [--calendar-dates-sticky-offset:66px]">
+    <div className="h-full ">
       <Calendar
         isPending={isLoading}
         availableTimeslots={availableSlots}

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

@@ -2,9 +2,7 @@ import { useIsPlatform } from "@calcom/atoms/monorepo";
 
 import type { UseCalendarsReturnType } from "../hooks/useCalendars";
 import { useOverlayCalendar } from "../hooks/useOverlayCalendar";
-import { OverlayCalendarContinueModal } from "./OverlayCalendarContinueModal";
 import { OverlayCalendarSettingsModal } from "./OverlayCalendarSettingsModal";
-import { OverlayCalendarSwitch } from "./OverlayCalendarSwitch";
 
 type OverlayCalendarProps = Pick<
   UseCalendarsReturnType,
@@ -48,18 +46,18 @@ export const OverlayCalendar = ({
 
   return (
     <>
-      <OverlayCalendarSwitch
-        enabled={isOverlayCalendarEnabled}
-        hasSession={hasSession}
-        onStateChange={handleSwitchStateChange}
-      />
-      {!isPlatform && (
-        <OverlayCalendarContinueModal
-          open={isOpenOverlayContinueModal}
-          onClose={handleCloseContinueModal}
-          onContinue={handleClickContinue}
-        />
-      )}
+      {/*<OverlayCalendarSwitch*/}
+      {/*  enabled={isOverlayCalendarEnabled}*/}
+      {/*  hasSession={hasSession}*/}
+      {/*  onStateChange={handleSwitchStateChange}*/}
+      {/*/>*/}
+      {/*{!isPlatform && (*/}
+      {/*  <OverlayCalendarContinueModal*/}
+      {/*    open={isOpenOverlayContinueModal}*/}
+      {/*    onClose={handleCloseContinueModal}*/}
+      {/*    onContinue={handleClickContinue}*/}
+      {/*  />*/}
+      {/*)}*/}
       <OverlayCalendarSettingsModal
         connectedCalendars={connectedCalendars}
         open={isOpenOverlaySettingsModal}

packages/features/bookings/Booker/config.ts

@@ -152,9 +152,7 @@ export const getBookerSizeClassNames = (
       `[--booker-main-width:480px] ${getBookerMetaClass("lg:[--booker-meta-width:280px]")}`,
     // Fullscreen view settings.
     layout !== BookerLayouts.MONTH_VIEW &&
-      `[--booker-main-width:480px] [--booker-meta-width:340px] ${getBookerMetaClass(
-        "lg:[--booker-meta-width:424px]"
-      )}`,
+      `[--booker-main-width:480px] ${getBookerMetaClass("lg:[--booker-meta-width:424px]")}`,
   ];
 };