fix: weekly view slots not clickable with overlay calendar (calcom#25484)

Author: kartik-212004

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

@@ -45,7 +45,7 @@ export const LargeCalendar = ({
 
   // HACK: force rerender when overlay events change
   // Sine we dont use react router here we need to force rerender (ATOM SUPPORT)
-  useEffect(() => {}, [displayOverlay]);
+  useEffect(() => { }, [displayOverlay]);
 
   const overlayEventsForDate = useMemo(() => {
     if (!overlayEvents || !displayOverlay) return [];
@@ -57,6 +57,7 @@ export const LargeCalendar = ({
         title: "Busy",
         options: {
           status: "ACCEPTED",
+          borderOnly: true,
         },
       } as CalendarEvent;
     });

packages/features/calendars/weeklyview/components/Calendar.tsx

@@ -80,9 +80,9 @@ function CalendarInner(props: CalendarComponentProps) {
                 className={classNames(
                   "bg-default dark:bg-cal-muted ring-muted sticky left-0 z-10 w-16 flex-none ring-1",
                   showBorder &&
-                    (borderColor === "subtle"
-                      ? "border-subtle border-l border-r"
-                      : "border-default border-l border-r")
+                  (borderColor === "subtle"
+                    ? "border-subtle border-l border-r"
+                    : "border-default border-l border-r")
                 )}
               />
               <div
@@ -91,10 +91,10 @@ function CalendarInner(props: CalendarComponentProps) {
                   showBackgroundPattern === false
                     ? undefined
                     : {
-                        backgroundColor: "var(--disabled-gradient-background)",
-                        background:
-                          "repeating-linear-gradient(-45deg, var(--disabled-gradient-background), var(--disabled-gradient-background) 2.5px, var(--disabled-gradient-foreground) 2.5px, var(--disabled-gradient-foreground) 5px)",
-                      }
+                      backgroundColor: "var(--disabled-gradient-background)",
+                      background:
+                        "repeating-linear-gradient(-45deg, var(--disabled-gradient-background), var(--disabled-gradient-background) 2.5px, var(--disabled-gradient-foreground) 2.5px, var(--disabled-gradient-foreground) 5px)",
+                    }
                 }>
                 <HorizontalLines
                   hours={hours}
@@ -129,6 +129,7 @@ function CalendarInner(props: CalendarComponentProps) {
                         className="relative"
                         key={i}
                         style={{
+                          gridColumnStart: i + 1,
                           gridRow: `1 / span ${numberOfGridStopsPerDay}`,
                         }}>
                         {/* While startDate < endDate:  */}

packages/features/calendars/weeklyview/components/event/Event.tsx

@@ -34,6 +34,10 @@ const eventClasses = cva(
         true: "bg-inverted text-inverted border border-transparent",
         false: "",
       },
+      borderOnly: {
+        true: "bg-transparent border-[1.5px] border-subtle border-dashed opacity-60",
+        false: "",
+      },
     },
   }
 );
@@ -91,6 +95,7 @@ export function Event({
             status: options?.status,
             disabled,
             selected,
+            borderOnly: options?.borderOnly ?? false,
           }),
           options?.className,
           isHovered && "ring-brand-default shadow-lg ring-2 ring-offset-0"

packages/features/calendars/weeklyview/components/event/EventList.tsx

@@ -2,6 +2,7 @@ import { useMemo, useState } from "react";
 import { shallow } from "zustand/shallow";
 
 import dayjs from "@calcom/dayjs";
+import classNames from "@calcom/ui/classNames";
 
 import { useCalendarStore } from "../../state/store";
 import { calculateEventLayouts, createLayoutMap } from "../../utils/overlap";
@@ -77,7 +78,10 @@ export function EventList({ day }: Props) {
         return (
           <div
             key={`${event.id}-${eventStart.toISOString()}`}
-            className="absolute transition-all duration-100 ease-out"
+            className={classNames(
+              "absolute transition-all duration-100 ease-out",
+              event.options?.borderOnly && "pointer-events-none"
+            )}
             data-testid={event.options?.["data-test-id"]}
             onMouseEnter={() => setHoveredEventId(event.id)}
             onMouseLeave={() => setHoveredEventId(null)}

packages/features/calendars/weeklyview/types/events.ts

@@ -15,5 +15,6 @@ export interface CalendarEvent {
     className?: string;
     bookingId?: number;
     "data-test-id"?: string;
+    borderOnly?: boolean;
   };
 }