30 && "flex-col py-1")}>
-
-
{event.title}
- {eventDuration <= 30 && !event.options?.hideTime && (
-
- {dayjs(event.start).format("HH:mm")} - {dayjs(event.end).format("HH:mm")}
-
- )}
-
- {eventDuration > 30 && !event.options?.hideTime && (
-
+
+ {displayType === "single-line" && (
+
+
{event.title}
+ {!event.options?.hideTime && (
+
+ {dayjs(event.start).format("HH:mm")} - {dayjs(event.end).format("HH:mm")}
+
+ )}
+
+ )}
+ {displayType !== "single-line" && (
+
{event.title}
+ )}
+ {displayType !== "single-line" && !event.options?.hideTime && (
+
{dayjs(event.start).format("HH:mm")} - {dayjs(event.end).format("HH:mm")}
)}
- {eventDuration > 45 && event.description && (
+ {displayType === "full" && event.description && (
{event.description}
)}
diff --git a/packages/features/calendars/weeklyview/components/event/EventList.tsx b/packages/features/calendars/weeklyview/components/event/EventList.tsx
index 609f56dae2e8a3..0bfe8f6bf2a671 100644
--- a/packages/features/calendars/weeklyview/components/event/EventList.tsx
+++ b/packages/features/calendars/weeklyview/components/event/EventList.tsx
@@ -1,9 +1,10 @@
-import { useRef } from "react";
+import { useMemo, useState } from "react";
import { shallow } from "zustand/shallow";
import dayjs from "@calcom/dayjs";
import { useCalendarStore } from "../../state/store";
+import { calculateEventLayouts, createLayoutMap } from "../../utils/overlap";
import { Event } from "./Event";
type Props = {
@@ -20,110 +21,84 @@ export function EventList({ day }: Props) {
shallow
);
- // Use a ref so we dont trigger a re-render
- const longestRef = useRef<{
- start: Date;
- end: Date;
- duration: number;
- idx: number;
- } | null>(null);
+ const [hoveredEventId, setHoveredEventId] = useState
(null);
- return (
- <>
- {events
- .filter((event) => {
- return dayjs(event.start).isSame(day, "day") && !event.options?.allDay; // Filter all events that are not allDay and that are on the current day
- })
- .map((event, idx, eventsArray) => {
- let width = 90;
- let marginLeft: string | number = 0;
- let right = 0;
- let zIndex = 61;
+ const dayEvents = useMemo(() => {
+ return events.filter((event) => {
+ return dayjs(event.start).isSame(day, "day") && !event.options?.allDay;
+ });
+ }, [events, day]);
+
+ const layoutMap = useMemo(() => {
+ const layouts = calculateEventLayouts(dayEvents);
+ return createLayoutMap(layouts);
+ }, [dayEvents]);
- const eventStart = dayjs(event.start);
- const eventEnd = dayjs(event.end);
+ const eventCalculations = useMemo(() => {
+ return new Map(
+ dayEvents.map((event) => {
+ const eventStart = dayjs(event.start);
+ const eventEnd = dayjs(event.end);
+ const eventDuration = eventEnd.diff(eventStart, "minutes");
+ const eventStartHour = eventStart.hour();
+ const eventStartDiff = (eventStartHour - (startHour || 0)) * 60 + eventStart.minute();
- const eventDuration = eventEnd.diff(eventStart, "minutes");
+ return [
+ event.id,
+ {
+ eventStart,
+ eventDuration,
+ eventStartDiff,
+ },
+ ];
+ })
+ );
+ }, [dayEvents, startHour]);
- const eventStartHour = eventStart.hour();
- const eventStartDiff = (eventStartHour - (startHour || 0)) * 60 + eventStart.minute();
- const nextEvent = eventsArray[idx + 1];
- const prevEvent = eventsArray[idx - 1];
+ // Find which overlap group the hovered event belongs to
+ const hoveredEventLayout = hoveredEventId ? layoutMap.get(hoveredEventId) : null;
+ const hoveredGroupIndex = hoveredEventLayout?.groupIndex ?? null;
- if (!longestRef.current) {
- longestRef.current = {
- idx,
- start: eventStart.toDate(),
- end: eventEnd.toDate(),
- duration: eventDuration,
- };
- } else if (
- eventDuration > longestRef.current.duration &&
- eventStart.isBetween(longestRef.current.start, longestRef.current.end)
- ) {
- longestRef.current = {
- idx,
- start: eventStart.toDate(),
- end: eventEnd.toDate(),
- duration: eventDuration,
- };
- }
- // By default longest event doesnt have any styles applied
- if (longestRef.current.idx !== idx) {
- if (nextEvent) {
- // If we have a next event
- const nextStart = dayjs(nextEvent.start);
- // If the next event is inbetween the longest start and end make 65% width
- if (nextStart.isBetween(longestRef.current.start, longestRef.current.end)) {
- zIndex = 65;
- marginLeft = "auto";
- right = 4;
- width = width / 2;
+ return (
+ <>
+ {dayEvents.map((event) => {
+ const layout = layoutMap.get(event.id);
+ if (!layout) return null;
- // If not - we check to see if the next starts within 5 mins of this event - allowing us to do side by side events whenwe have
- // close start times
- } else if (nextStart.isBetween(eventStart.add(-5, "minutes"), eventStart.add(5, "minutes"))) {
- zIndex = 65;
- marginLeft = "auto";
- right = 4;
- width = width / 2;
- }
- } else if (prevEvent) {
- const prevStart = dayjs(prevEvent.start);
+ const calc = eventCalculations.get(event.id);
+ if (!calc) return null;
- // If the next event is inbetween the longest start and end make 65% width
+ const { eventStart, eventDuration, eventStartDiff } = calc;
- if (prevStart.isBetween(longestRef.current.start, longestRef.current.end)) {
- zIndex = 65;
- marginLeft = "auto";
- right = 4;
- // If not - we check to see if the next starts within 5 mins of this event - allowing us to do side by side events whenwe have
- // close start times (Inverse of above )
- } else if (eventStart.isBetween(prevStart.add(5, "minutes"), prevStart.add(-5, "minutes"))) {
- zIndex = 65;
- right = 4;
- width = width / 2;
- }
- }
- }
+ const isHovered = hoveredEventId === event.id;
+ const isInHoveredGroup = hoveredGroupIndex !== null && layout.groupIndex === hoveredGroupIndex;
+ const zIndex = isHovered ? 100 : layout.baseZIndex;
- return (
-
-
-
- );
- })}
+ return (
+ setHoveredEventId(event.id)}
+ onMouseLeave={() => setHoveredEventId(null)}
+ style={{
+ left: `${layout.leftOffsetPercent}%`,
+ width: `${layout.widthPercent}%`,
+ zIndex,
+ top: `calc(${eventStartDiff}*var(--one-minute-height))`,
+ height: `max(15px, calc(${eventDuration}*var(--one-minute-height)))`,
+ transform: isHovered ? "scale(1.02)" : "scale(1)",
+ opacity: hoveredGroupIndex !== null && !isHovered && isInHoveredGroup ? 0.6 : 1,
+ }}>
+
+
+ );
+ })}
);
}
diff --git a/packages/features/calendars/weeklyview/state/store.ts b/packages/features/calendars/weeklyview/state/store.ts
index 97df1159c64909..5776328b589a2d 100644
--- a/packages/features/calendars/weeklyview/state/store.ts
+++ b/packages/features/calendars/weeklyview/state/store.ts
@@ -1,4 +1,6 @@
-import { create } from "zustand";
+import React from "react";
+import { createStore, useStore } from "zustand";
+import type { StoreApi } from "zustand";
import dayjs from "@calcom/dayjs";
import { CURRENT_TIMEZONE } from "@calcom/lib/timezoneConstants";
@@ -25,60 +27,77 @@ const defaultState: CalendarComponentProps = {
borderColor: "default",
};
-export const useCalendarStore = create((set) => ({
- ...defaultState,
- setView: (view: CalendarComponentProps["view"]) => set({ view }),
- setStartDate: (startDate: CalendarComponentProps["startDate"]) => set({ startDate }),
- setEndDate: (endDate: CalendarComponentProps["endDate"]) => set({ endDate }),
- setEvents: (events: CalendarComponentProps["events"]) => set({ events }),
- // This looks a bit odd but init state only overrides the public props + actions as we don't want to override our internal state
- initState: (state: CalendarState & CalendarPublicActions) => {
- // Handle sorting of events if required
- let events = state.events;
+export function createCalendarStore(initial?: Partial): StoreApi {
+ return createStore((set) => ({
+ ...defaultState,
+ ...initial,
+ setView: (view: CalendarComponentProps["view"]) => set({ view }),
+ setStartDate: (startDate: CalendarComponentProps["startDate"]) => set({ startDate }),
+ setEndDate: (endDate: CalendarComponentProps["endDate"]) => set({ endDate }),
+ setEvents: (events: CalendarComponentProps["events"]) => set({ events }),
+ // This looks a bit odd but init state only overrides the public props + actions as we don't want to override our internal state
+ initState: (state: CalendarState & CalendarPublicActions) => {
+ // Handle sorting of events if required
+ let events = state.events;
- if (state.sortEvents) {
- events = state.events.sort((a, b) => dayjs(a.start).valueOf() - dayjs(b.start).valueOf());
- }
- const blockingDates = mergeOverlappingDateRanges(state.blockingDates || []); // We merge overlapping dates so we don't get duplicate blocking "Cells" in the UI
+ if (state.sortEvents) {
+ events = [...state.events].sort((a, b) => dayjs(a.start).valueOf() - dayjs(b.start).valueOf());
+ }
+ const blockingDates = mergeOverlappingDateRanges(state.blockingDates || []); // We merge overlapping dates so we don't get duplicate blocking "Cells" in the UI
+
+ set({
+ ...state,
+ blockingDates,
+ events,
+ });
+ },
+ setSelectedEvent: (event) => set({ selectedEvent: event }),
+ handleDateChange: (payload) =>
+ set((state) => {
+ const { startDate, endDate } = state;
+ if (payload === "INCREMENT") {
+ const newStartDate = dayjs(startDate).add(1, state.view).toDate();
+ const newEndDate = dayjs(endDate).add(1, state.view).toDate();
- set({
- ...state,
- blockingDates,
- events,
- });
- },
- setSelectedEvent: (event) => set({ selectedEvent: event }),
- handleDateChange: (payload) =>
- set((state) => {
- const { startDate, endDate } = state;
- if (payload === "INCREMENT") {
- const newStartDate = dayjs(startDate).add(1, state.view).toDate();
- const newEndDate = dayjs(endDate).add(1, state.view).toDate();
+ // Do nothing if
+ if (
+ (state.minDate && newStartDate < state.minDate) ||
+ (state.maxDate && newEndDate > state.maxDate)
+ ) {
+ return {
+ startDate,
+ endDate,
+ };
+ }
- // Do nothing if
- if (
- (state.minDate && newStartDate < state.minDate) ||
- (state.maxDate && newEndDate > state.maxDate)
- ) {
+ // We call this callback if we have it -> Allows you to change your state outside of the component
+ state.onDateChange?.(newStartDate, newEndDate);
return {
- startDate,
- endDate,
+ startDate: newStartDate,
+ endDate: newEndDate,
};
}
-
- // We call this callback if we have it -> Allows you to change your state outside of the component
+ const newStartDate = dayjs(startDate).subtract(1, state.view).toDate();
+ const newEndDate = dayjs(endDate).subtract(1, state.view).toDate();
state.onDateChange?.(newStartDate, newEndDate);
return {
startDate: newStartDate,
endDate: newEndDate,
};
- }
- const newStartDate = dayjs(startDate).subtract(1, state.view).toDate();
- const newEndDate = dayjs(endDate).subtract(1, state.view).toDate();
- state.onDateChange?.(newStartDate, newEndDate);
- return {
- startDate: newStartDate,
- endDate: newEndDate,
- };
- }),
-}));
+ }),
+ }));
+}
+
+export const CalendarStoreContext = React.createContext | null>(null);
+
+export function useCalendarStore(
+ selector: (state: CalendarStoreProps) => T,
+ equalityFn?: (a: T, b: T) => boolean
+): T {
+ const store = React.useContext(CalendarStoreContext);
+ if (!store) {
+ throw new Error("useCalendarStore must be used within a CalendarStoreProvider");
+ }
+
+ return useStore(store, selector, equalityFn);
+}
diff --git a/packages/features/calendars/weeklyview/utils/overlap.test.ts b/packages/features/calendars/weeklyview/utils/overlap.test.ts
new file mode 100644
index 00000000000000..78fbc0bd9bd42b
--- /dev/null
+++ b/packages/features/calendars/weeklyview/utils/overlap.test.ts
@@ -0,0 +1,364 @@
+import { describe, expect, it } from "vitest";
+
+import type { CalendarEvent } from "../types/events";
+import {
+ buildOverlapGroups,
+ calculateEventLayouts,
+ createLayoutMap,
+ sortEvents,
+} from "./overlap";
+
+describe("overlap utility", () => {
+ describe("sortEvents", () => {
+ it("should sort events by start time ascending", () => {
+ const events: CalendarEvent[] = [
+ { id: 1, title: "Event 1", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T11:00:00") },
+ { id: 2, title: "Event 2", start: new Date("2024-01-01T09:00:00"), end: new Date("2024-01-01T10:00:00") },
+ { id: 3, title: "Event 3", start: new Date("2024-01-01T11:00:00"), end: new Date("2024-01-01T12:00:00") },
+ ];
+
+ const sorted = sortEvents(events);
+
+ expect(sorted[0].id).toBe(2);
+ expect(sorted[1].id).toBe(1);
+ expect(sorted[2].id).toBe(3);
+ });
+
+ it("should sort events with same start time by end time descending (longer first)", () => {
+ const events: CalendarEvent[] = [
+ { id: 1, title: "Event 1", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T11:00:00") },
+ { id: 2, title: "Event 2", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T12:00:00") },
+ { id: 3, title: "Event 3", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T10:30:00") },
+ ];
+
+ const sorted = sortEvents(events);
+
+ expect(sorted[0].id).toBe(2); // Longest (2 hours)
+ expect(sorted[1].id).toBe(1); // Medium (1 hour)
+ expect(sorted[2].id).toBe(3); // Shortest (30 min)
+ });
+
+ it("should not mutate the original array", () => {
+ const events: CalendarEvent[] = [
+ { id: 1, title: "Event 1", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T11:00:00") },
+ { id: 2, title: "Event 2", start: new Date("2024-01-01T09:00:00"), end: new Date("2024-01-01T10:00:00") },
+ ];
+
+ const originalFirstId = events[0].id;
+ sortEvents(events);
+
+ expect(events[0].id).toBe(originalFirstId);
+ });
+ });
+
+ describe("buildOverlapGroups", () => {
+ it("should return empty array for no events", () => {
+ const groups = buildOverlapGroups([]);
+ expect(groups).toEqual([]);
+ });
+
+ it("should return single group for single event", () => {
+ const events: CalendarEvent[] = [
+ { id: 1, title: "Event 1", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T11:00:00") },
+ ];
+
+ const groups = buildOverlapGroups(events);
+
+ expect(groups).toHaveLength(1);
+ expect(groups[0]).toHaveLength(1);
+ expect(groups[0][0].id).toBe(1);
+ });
+
+ it("should group two overlapping events together", () => {
+ const events: CalendarEvent[] = [
+ { id: 1, title: "Event 1", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T11:00:00") },
+ { id: 2, title: "Event 2", start: new Date("2024-01-01T10:30:00"), end: new Date("2024-01-01T11:30:00") },
+ ];
+
+ const sorted = sortEvents(events);
+ const groups = buildOverlapGroups(sorted);
+
+ expect(groups).toHaveLength(1);
+ expect(groups[0]).toHaveLength(2);
+ expect(groups[0][0].id).toBe(1);
+ expect(groups[0][1].id).toBe(2);
+ });
+
+ it("should separate non-overlapping events into different groups", () => {
+ const events: CalendarEvent[] = [
+ { id: 1, title: "Event 1", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T11:00:00") },
+ { id: 2, title: "Event 2", start: new Date("2024-01-01T11:00:00"), end: new Date("2024-01-01T12:00:00") },
+ ];
+
+ const sorted = sortEvents(events);
+ const groups = buildOverlapGroups(sorted);
+
+ expect(groups).toHaveLength(2);
+ expect(groups[0]).toHaveLength(1);
+ expect(groups[1]).toHaveLength(1);
+ expect(groups[0][0].id).toBe(1);
+ expect(groups[1][0].id).toBe(2);
+ });
+
+ it("should handle chain overlaps (A overlaps B, B overlaps C)", () => {
+ const events: CalendarEvent[] = [
+ { id: 1, title: "Event 1", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T11:00:00") },
+ { id: 2, title: "Event 2", start: new Date("2024-01-01T10:30:00"), end: new Date("2024-01-01T11:30:00") },
+ { id: 3, title: "Event 3", start: new Date("2024-01-01T11:00:00"), end: new Date("2024-01-01T12:00:00") },
+ ];
+
+ const sorted = sortEvents(events);
+ const groups = buildOverlapGroups(sorted);
+
+ expect(groups).toHaveLength(1);
+ expect(groups[0]).toHaveLength(3);
+ expect(groups[0][0].id).toBe(1);
+ expect(groups[0][1].id).toBe(2);
+ expect(groups[0][2].id).toBe(3);
+ });
+
+ it("should handle multiple separate overlap groups", () => {
+ const events: CalendarEvent[] = [
+ { id: 1, title: "Event 1", start: new Date("2024-01-01T09:00:00"), end: new Date("2024-01-01T10:00:00") },
+ { id: 2, title: "Event 2", start: new Date("2024-01-01T09:30:00"), end: new Date("2024-01-01T10:30:00") },
+ { id: 3, title: "Event 3", start: new Date("2024-01-01T11:00:00"), end: new Date("2024-01-01T12:00:00") },
+ { id: 4, title: "Event 4", start: new Date("2024-01-01T11:30:00"), end: new Date("2024-01-01T12:30:00") },
+ ];
+
+ const sorted = sortEvents(events);
+ const groups = buildOverlapGroups(sorted);
+
+ expect(groups).toHaveLength(2);
+ expect(groups[0]).toHaveLength(2);
+ expect(groups[1]).toHaveLength(2);
+ expect(groups[0][0].id).toBe(1);
+ expect(groups[0][1].id).toBe(2);
+ expect(groups[1][0].id).toBe(3);
+ expect(groups[1][1].id).toBe(4);
+ });
+
+ it("should handle events that start at the same time", () => {
+ const events: CalendarEvent[] = [
+ { id: 1, title: "Event 1", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T12:00:00") },
+ { id: 2, title: "Event 2", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T11:00:00") },
+ { id: 3, title: "Event 3", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T10:30:00") },
+ ];
+
+ const sorted = sortEvents(events);
+ const groups = buildOverlapGroups(sorted);
+
+ expect(groups).toHaveLength(1);
+ expect(groups[0]).toHaveLength(3);
+ });
+ });
+
+ describe("calculateEventLayouts", () => {
+ it("should calculate layout for single event", () => {
+ const events: CalendarEvent[] = [
+ { id: 1, title: "Event 1", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T11:00:00") },
+ ];
+
+ const layouts = calculateEventLayouts(events);
+
+ expect(layouts).toHaveLength(1);
+ expect(layouts[0].event.id).toBe(1);
+ expect(layouts[0].leftOffsetPercent).toBe(0);
+ expect(layouts[0].widthPercent).toBe(80);
+ expect(layouts[0].baseZIndex).toBe(60);
+ expect(layouts[0].groupIndex).toBe(0);
+ expect(layouts[0].indexInGroup).toBe(0);
+ });
+
+ it("should calculate cascading layout for two overlapping events", () => {
+ const events: CalendarEvent[] = [
+ { id: 1, title: "Event 1", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T11:00:00") },
+ { id: 2, title: "Event 2", start: new Date("2024-01-01T10:30:00"), end: new Date("2024-01-01T11:30:00") },
+ ];
+
+ const layouts = calculateEventLayouts(events);
+
+ expect(layouts).toHaveLength(2);
+
+ expect(layouts[0].event.id).toBe(1);
+ expect(layouts[0].leftOffsetPercent).toBe(0);
+ expect(layouts[0].widthPercent).toBe(80);
+ expect(layouts[0].baseZIndex).toBe(60);
+
+ expect(layouts[1].event.id).toBe(2);
+ expect(layouts[1].leftOffsetPercent).toBe(8);
+ expect(layouts[1].widthPercent).toBe(80);
+ expect(layouts[1].baseZIndex).toBe(61);
+ });
+
+ it("should calculate cascading layout for three overlapping events", () => {
+ const events: CalendarEvent[] = [
+ { id: 1, title: "Event 1", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T11:00:00") },
+ { id: 2, title: "Event 2", start: new Date("2024-01-01T10:30:00"), end: new Date("2024-01-01T11:30:00") },
+ { id: 3, title: "Event 3", start: new Date("2024-01-01T11:00:00"), end: new Date("2024-01-01T12:00:00") },
+ ];
+
+ const layouts = calculateEventLayouts(events);
+
+ expect(layouts).toHaveLength(3);
+
+ expect(layouts[0].leftOffsetPercent).toBe(0);
+ expect(layouts[1].leftOffsetPercent).toBe(8);
+ expect(layouts[2].leftOffsetPercent).toBe(16);
+
+ expect(layouts[0].baseZIndex).toBe(60);
+ expect(layouts[1].baseZIndex).toBe(61);
+ expect(layouts[2].baseZIndex).toBe(62);
+ });
+
+ it("should respect custom configuration", () => {
+ const events: CalendarEvent[] = [
+ { id: 1, title: "Event 1", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T11:00:00") },
+ { id: 2, title: "Event 2", start: new Date("2024-01-01T10:30:00"), end: new Date("2024-01-01T11:30:00") },
+ ];
+
+ const layouts = calculateEventLayouts(events, {
+ baseWidthPercent: 70,
+ offsetStepPercent: 10,
+ baseZIndex: 50,
+ });
+
+ expect(layouts[0].widthPercent).toBe(70);
+ expect(layouts[0].leftOffsetPercent).toBe(0);
+ expect(layouts[0].baseZIndex).toBe(50);
+
+ expect(layouts[1].widthPercent).toBe(70);
+ expect(layouts[1].leftOffsetPercent).toBe(10);
+ expect(layouts[1].baseZIndex).toBe(51);
+ });
+
+ it("should handle non-overlapping events in separate groups", () => {
+ const events: CalendarEvent[] = [
+ { id: 1, title: "Event 1", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T11:00:00") },
+ { id: 2, title: "Event 2", start: new Date("2024-01-01T11:00:00"), end: new Date("2024-01-01T12:00:00") },
+ ];
+
+ const layouts = calculateEventLayouts(events);
+
+ expect(layouts).toHaveLength(2);
+
+ expect(layouts[0].groupIndex).toBe(0);
+ expect(layouts[0].indexInGroup).toBe(0);
+ expect(layouts[0].leftOffsetPercent).toBe(0);
+
+ expect(layouts[1].groupIndex).toBe(1);
+ expect(layouts[1].indexInGroup).toBe(0);
+ expect(layouts[1].leftOffsetPercent).toBe(0);
+ });
+
+ it("should prevent overflow with many overlapping events (dense scenario)", () => {
+ const events: CalendarEvent[] = [
+ { id: 1, title: "Event 1", start: new Date("2024-01-01T09:00:00"), end: new Date("2024-01-01T09:30:00") },
+ { id: 2, title: "Event 2", start: new Date("2024-01-01T09:15:00"), end: new Date("2024-01-01T10:00:00") },
+ { id: 3, title: "Event 3", start: new Date("2024-01-01T09:45:00"), end: new Date("2024-01-01T11:00:00") },
+ { id: 4, title: "Event 4", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T10:30:00") },
+ { id: 5, title: "Event 5", start: new Date("2024-01-01T10:15:00"), end: new Date("2024-01-01T11:30:00") },
+ { id: 6, title: "Event 6", start: new Date("2024-01-01T11:00:00"), end: new Date("2024-01-01T12:00:00") },
+ { id: 7, title: "Event 7", start: new Date("2024-01-01T11:30:00"), end: new Date("2024-01-01T12:30:00") },
+ { id: 8, title: "Event 8", start: new Date("2024-01-01T12:00:00"), end: new Date("2024-01-01T13:30:00") },
+ { id: 9, title: "Event 9", start: new Date("2024-01-01T12:30:00"), end: new Date("2024-01-01T13:00:00") },
+ { id: 10, title: "Event 10", start: new Date("2024-01-01T13:00:00"), end: new Date("2024-01-01T14:00:00") },
+ { id: 11, title: "Event 11", start: new Date("2024-01-01T13:15:00"), end: new Date("2024-01-01T14:00:00") },
+ ];
+
+ const layouts = calculateEventLayouts(events);
+
+ layouts.forEach((layout) => {
+ const totalWidth = layout.leftOffsetPercent + layout.widthPercent;
+ expect(totalWidth).toBeLessThanOrEqual(100 - 0.5);
+ });
+
+ expect(layouts).toHaveLength(11);
+ });
+
+ it("should respect safety margin with 20+ overlapping events", () => {
+ const events: CalendarEvent[] = Array.from({ length: 21 }, (_, i) => ({
+ id: i + 1,
+ title: `Event ${i + 1}`,
+ start: new Date(`2024-01-01T09:${String(i * 2).padStart(2, '0')}:00`),
+ end: new Date(`2024-01-01T10:${String(i * 2).padStart(2, '0')}:00`),
+ }));
+
+ const layouts = calculateEventLayouts(events);
+
+ expect(layouts).toHaveLength(21);
+
+ layouts.forEach((layout) => {
+ const totalWidth = layout.leftOffsetPercent + layout.widthPercent;
+ expect(totalWidth).toBeLessThanOrEqual(100 - 0.5);
+ });
+
+ const lastLayout = layouts[layouts.length - 1];
+ expect(lastLayout.leftOffsetPercent + lastLayout.widthPercent).toBeLessThanOrEqual(99.5);
+ });
+
+ it("should compress offset step for dense overlaps while maintaining cascade", () => {
+ const events: CalendarEvent[] = Array.from({ length: 12 }, (_, i) => ({
+ id: i + 1,
+ title: `Event ${i + 1}`,
+ start: new Date(`2024-01-01T10:${String(i * 5).padStart(2, '0')}:00`),
+ end: new Date(`2024-01-01T11:${String(i * 5).padStart(2, '0')}:00`),
+ }));
+
+ const layouts = calculateEventLayouts(events);
+
+ expect(layouts).toHaveLength(12);
+
+ layouts.forEach((layout, index) => {
+ expect(layout.leftOffsetPercent + layout.widthPercent).toBeLessThanOrEqual(100);
+
+ if (index > 0) {
+ expect(layout.leftOffsetPercent).toBeGreaterThan(layouts[index - 1].leftOffsetPercent);
+ }
+ });
+
+ const lastLayout = layouts[layouts.length - 1];
+ expect(lastLayout.leftOffsetPercent + lastLayout.widthPercent).toBeLessThanOrEqual(100);
+ });
+
+ it("should maintain full width for small overlap groups", () => {
+ const events: CalendarEvent[] = [
+ { id: 1, title: "Event 1", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T11:00:00") },
+ { id: 2, title: "Event 2", start: new Date("2024-01-01T10:30:00"), end: new Date("2024-01-01T11:30:00") },
+ { id: 3, title: "Event 3", start: new Date("2024-01-01T11:00:00"), end: new Date("2024-01-01T12:00:00") },
+ ];
+
+ const layouts = calculateEventLayouts(events);
+
+ expect(layouts[0].widthPercent).toBe(80);
+ expect(layouts[1].widthPercent).toBe(80);
+ expect(layouts[2].widthPercent).toBe(80);
+
+ expect(layouts[0].leftOffsetPercent).toBe(0);
+ expect(layouts[1].leftOffsetPercent).toBe(8);
+ expect(layouts[2].leftOffsetPercent).toBe(16);
+ });
+ });
+
+ describe("createLayoutMap", () => {
+ it("should create a map from event ID to layout", () => {
+ const events: CalendarEvent[] = [
+ { id: 1, title: "Event 1", start: new Date("2024-01-01T10:00:00"), end: new Date("2024-01-01T11:00:00") },
+ { id: 2, title: "Event 2", start: new Date("2024-01-01T10:30:00"), end: new Date("2024-01-01T11:30:00") },
+ ];
+
+ const layouts = calculateEventLayouts(events);
+ const map = createLayoutMap(layouts);
+
+ expect(map.size).toBe(2);
+ expect(map.get(1)?.event.id).toBe(1);
+ expect(map.get(2)?.event.id).toBe(2);
+ expect(map.get(1)?.leftOffsetPercent).toBe(0);
+ expect(map.get(2)?.leftOffsetPercent).toBe(8);
+ });
+
+ it("should handle empty layouts", () => {
+ const map = createLayoutMap([]);
+ expect(map.size).toBe(0);
+ });
+ });
+});
diff --git a/packages/features/calendars/weeklyview/utils/overlap.ts b/packages/features/calendars/weeklyview/utils/overlap.ts
new file mode 100644
index 00000000000000..c473222cb13783
--- /dev/null
+++ b/packages/features/calendars/weeklyview/utils/overlap.ts
@@ -0,0 +1,155 @@
+import dayjs from "@calcom/dayjs";
+
+import type { CalendarEvent } from "../types/events";
+
+export interface OverlapLayoutConfig {
+ baseWidthPercent?: number;
+ offsetStepPercent?: number;
+ baseZIndex?: number;
+ safetyMarginPercent?: number;
+}
+
+export interface EventLayout {
+ event: CalendarEvent;
+ leftOffsetPercent: number;
+ widthPercent: number;
+ baseZIndex: number;
+ groupIndex: number;
+ indexInGroup: number;
+}
+
+const DEFAULT_CONFIG: Required = {
+ baseWidthPercent: 80,
+ offsetStepPercent: 8,
+ baseZIndex: 60,
+ safetyMarginPercent: 0.5,
+};
+
+/**
+ * Rounds a number to 3 decimal places using standard rounding
+ */
+function round3(value: number): number {
+ return Number(value.toFixed(3));
+}
+
+/**
+ * Floors a number to 3 decimal places (always rounds down)
+ */
+function floor3(value: number): number {
+ return Math.floor(value * 1000) / 1000;
+}
+
+/**
+ * Sorts events by start time (ascending), then by end time (descending for longer events first)
+ */
+export function sortEvents(events: CalendarEvent[]): CalendarEvent[] {
+ return [...events].sort((a, b) => {
+ const startA = dayjs(a.start);
+ const startB = dayjs(b.start);
+ const startDiff = startA.diff(startB);
+
+ if (startDiff !== 0) {
+ return startDiff;
+ }
+
+ const endA = dayjs(a.end);
+ const endB = dayjs(b.end);
+ return endB.diff(endA);
+ });
+}
+
+/**
+ * Groups overlapping events together using a sweep algorithm
+ * Events overlap if one starts before another ends
+ */
+export function buildOverlapGroups(sortedEvents: CalendarEvent[]): CalendarEvent[][] {
+ if (sortedEvents.length === 0) {
+ return [];
+ }
+
+ const groups: CalendarEvent[][] = [];
+ let currentGroup: CalendarEvent[] = [sortedEvents[0]];
+ let currentGroupEnd = dayjs(sortedEvents[0].end);
+
+ for (let i = 1; i < sortedEvents.length; i++) {
+ const event = sortedEvents[i];
+ const eventStart = dayjs(event.start);
+ const eventEnd = dayjs(event.end);
+
+ if (eventStart.isBefore(currentGroupEnd)) {
+ currentGroup.push(event);
+ if (eventEnd.isAfter(currentGroupEnd)) {
+ currentGroupEnd = eventEnd;
+ }
+ } else {
+ groups.push(currentGroup);
+ currentGroup = [event];
+ currentGroupEnd = eventEnd;
+ }
+ }
+
+ groups.push(currentGroup);
+
+ return groups;
+}
+
+/**
+ * Calculates layout information for all events including position and z-index
+ * Dynamically adjusts offset step to prevent overflow when many events overlap
+ * Uses safety margin and floor rounding to guarantee no overflow even with CSS box model effects
+ */
+export function calculateEventLayouts(
+ events: CalendarEvent[],
+ config: OverlapLayoutConfig = {}
+): EventLayout[] {
+ const { baseWidthPercent, offsetStepPercent, baseZIndex, safetyMarginPercent } = {
+ ...DEFAULT_CONFIG,
+ ...config,
+ };
+
+ const sortedEvents = sortEvents(events);
+ const groups = buildOverlapGroups(sortedEvents);
+
+ const layouts: EventLayout[] = [];
+
+ groups.forEach((group, groupIndex) => {
+ const groupSize = group.length;
+ const allowedOffsetSpace = Math.max(0, 100 - baseWidthPercent - safetyMarginPercent);
+ const stepUsed = Math.min(
+ offsetStepPercent,
+ allowedOffsetSpace / Math.max(1, groupSize - 1)
+ );
+
+ group.forEach((event, indexInGroup) => {
+ const leftRaw = indexInGroup * stepUsed;
+ const left = round3(leftRaw);
+
+ const maxWidthCap = 100 - left - safetyMarginPercent;
+ const widthCap = Math.min(baseWidthPercent, maxWidthCap);
+
+ const width = floor3(Math.max(0, widthCap));
+
+ layouts.push({
+ event,
+ leftOffsetPercent: left,
+ widthPercent: width,
+ baseZIndex: baseZIndex + indexInGroup,
+ groupIndex,
+ indexInGroup,
+ });
+ });
+ });
+
+ return layouts;
+}
+
+/**
+ * Creates a map from event ID to layout information for quick lookup
+ */
+export function createLayoutMap(layouts: EventLayout[]): Map {
+ const map = new Map();
+ layouts.forEach((layout) => {
+ map.set(layout.event.id, layout);
+ });
+ return map;
+}
diff --git a/packages/ui/components/tooltip/Tooltip.tsx b/packages/ui/components/tooltip/Tooltip.tsx
index 33c2af485f9f2f..991ac855419890 100644
--- a/packages/ui/components/tooltip/Tooltip.tsx
+++ b/packages/ui/components/tooltip/Tooltip.tsx
@@ -29,6 +29,7 @@ export function Tooltip({
className={classNames(
"calcom-tooltip",
side === "top" && "-mt-7",
+ side === "left" && "mr-2",
side === "right" && "ml-2",
"bg-inverted text-inverted relative z-50 rounded-md px-2 py-1 text-xs font-semibold shadow-lg",
props.className && `${props.className}`