fix(calendar): Prevent date range header from flickering

packages/features/bookings/Booker/Booker.tsx

@@ -39,7 +39,7 @@ import { RedirectToInstantMeetingModal } from "./components/RedirectToInstantMee
 import { BookerSection } from "./components/Section";
 import { NotFound } from "./components/Unavailable";
 import { useIsQuickAvailabilityCheckFeatureEnabled } from "./components/hooks/useIsQuickAvailabilityCheckFeatureEnabled";
-import { fadeInLeft, getBookerSizeClassNames, useBookerResizeAnimation } from "./config";
+import { extraDaysConfig, fadeInLeft, getBookerSizeClassNames, useBookerResizeAnimation } from "./config";
 import framerFeatures from "./framer-features";
 import type { BookerProps, WrappedBookerProps } from "./types";
 import { isBookingDryRun } from "./utils/isBookingDryRun";
@@ -103,6 +103,7 @@ const BookerComponent = ({
     hideEventTypeDetails,
     isEmbed,
     bookerLayouts,
+    isTablet,
   } = bookerLayout;
 
   const [seatedEventData, setSeatedEventData] = useBookerStoreContext(
@@ -128,9 +129,53 @@ const BookerComponent = ({
       : 0;
   // Taking one more available slot(extraDays + 1) to calculate the no of days in between, that next and prev button need to shift.
   const availableSlots = nonEmptyScheduleDays.slice(0, extraDays + 1);
-  if (nonEmptyScheduleDays.length !== 0)
-    columnViewExtraDays.current =
-      Math.abs(dayjs(selectedDate).diff(availableSlots[availableSlots.length - 2], "day")) + addonDays;
+
+  const columnViewExtraDaysConfig = isTablet
+    ? extraDaysConfig[BookerLayouts.COLUMN_VIEW].tablet
+    : extraDaysConfig[BookerLayouts.COLUMN_VIEW].desktop;
+
+  const relevantDates = nonEmptyScheduleDays.slice(0, columnViewExtraDaysConfig + 1).join(",");
+
+  const calculatedColumnViewExtraDays = useMemo(() => {
+    if (layout !== BookerLayouts.COLUMN_VIEW) {
+      return columnViewExtraDays.current;
+    }
+
+    if (nonEmptyScheduleDays.length === 0) {
+      return columnViewExtraDaysConfig;
+    }
+
+    const columnAddonDays =
+      nonEmptyScheduleDays.length < columnViewExtraDaysConfig
+        ? (columnViewExtraDaysConfig - nonEmptyScheduleDays.length + 1) * totalWeekDays
+        : nonEmptyScheduleDays.length === columnViewExtraDaysConfig
+        ? totalWeekDays
+        : 0;
+
+    const columnAvailableSlots = nonEmptyScheduleDays.slice(0, columnViewExtraDaysConfig + 1);
+
+    if (columnAvailableSlots.length < 2) {
+      return columnViewExtraDaysConfig;
+    }
+
+    const calculated =
+      Math.abs(dayjs(selectedDate).diff(columnAvailableSlots[columnAvailableSlots.length - 2], "day")) +
+      columnAddonDays;
+
+    return calculated;
+  }, [
+    layout,
+    selectedDate,
+    relevantDates,
+    nonEmptyScheduleDays.length,
+    isTablet,
+    columnViewExtraDays,
+    columnViewExtraDaysConfig,
+  ]);
+
+  if (layout === BookerLayouts.COLUMN_VIEW) {
+    columnViewExtraDays.current = calculatedColumnViewExtraDays;
+  }
 
   const nextSlots =
     Math.abs(dayjs(selectedDate).diff(availableSlots[availableSlots.length - 1], "day")) + addonDays;

packages/features/bookings/Booker/__mocks__/config.ts

@@ -2,4 +2,10 @@ vi.mock("../config", () => ({
   useBookerResizeAnimation: () => ({ current: document.createElement("div") }),
   getBookerSizeClassNames: () => [],
   fadeInLeft: {},
+  extraDaysConfig: {
+    mobile: {desktop: 0, tablet: 0},
+    month_view: {desktop: 0, tablet: 0},
+    week_view: {desktop: 7, tablet: 4},
+    column_view: {desktop: 6, tablet: 2},
+  }
 }));

packages/features/bookings/Booker/__tests__/Booker.test.tsx

@@ -136,6 +136,7 @@ const defaultProps = {
     extraDays: 7,
     columnViewExtraDays: { current: 7 },
     isMobile: false,
+    isTablet: false,
     layout: "MONTH_VIEW",
     hideEventTypeDetails: false,
     isEmbed: false,