diff --git a/packages/features/bookings/Booker/components/LargeCalendar.tsx b/packages/features/bookings/Booker/components/LargeCalendar.tsx
index d1accdc72a..893f9c6572 100644
--- a/packages/features/bookings/Booker/components/LargeCalendar.tsx
+++ b/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;
});
diff --git a/packages/features/calendars/weeklyview/components/Calendar.tsx b/packages/features/calendars/weeklyview/components/Calendar.tsx
index 86dc7e93a3..339d83cddc 100644
--- a/packages/features/calendars/weeklyview/components/Calendar.tsx
+++ b/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")
)}
/>
{/* While startDate < endDate: */}
diff --git a/packages/features/calendars/weeklyview/components/event/Event.tsx b/packages/features/calendars/weeklyview/components/event/Event.tsx
index 0bb88902f9..1ed03ed941 100644
--- a/packages/features/calendars/weeklyview/components/event/Event.tsx
+++ b/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"
diff --git a/packages/features/calendars/weeklyview/components/event/EventList.tsx b/packages/features/calendars/weeklyview/components/event/EventList.tsx
index 0bfe8f6bf2..c643f46cf0 100644
--- a/packages/features/calendars/weeklyview/components/event/EventList.tsx
+++ b/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 (
setHoveredEventId(event.id)}
onMouseLeave={() => setHoveredEventId(null)}
diff --git a/packages/features/calendars/weeklyview/types/events.ts b/packages/features/calendars/weeklyview/types/events.ts
index b8d68914d1..d49cfc13ac 100644
--- a/packages/features/calendars/weeklyview/types/events.ts
+++ b/packages/features/calendars/weeklyview/types/events.ts
@@ -15,5 +15,6 @@ export interface CalendarEvent {
className?: string;
bookingId?: number;
"data-test-id"?: string;
+ borderOnly?: boolean;
};
}