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; }; }