feat: improve overlapping events display in weekly calendar view #24880

eunjae-lee · 2025-11-03T17:43:21Z

What does this PR do?

This PR fixes three critical bugs in the weekly calendar component's overlapping events display:

Store isolation bug: Multiple Calendar components on the same page were sharing global Zustand state, causing date/event changes in one calendar to affect all others
Event overflow bug: With 10+ overlapping events, the cascading layout was causing events to bleed into adjacent day columns
CSS positioning conflict: The inset-x-1 class was setting both left and right positioning, conflicting with inline width styles

Link to Devin run: https://app.devin.ai/sessions/4df3fcc8688d45b0ba228ba391088626
Requested by: @eunjae-lee ([email protected])

Visual Demo

Before

After

Screenshot.2025-11-04.at.14.35.37.mp4

Mandatory Tasks

I have self-reviewed the code
N/A - No documentation changes needed (internal component improvements)
I confirm automated tests are in place (21 tests including overflow prevention with 20+ events)

How should this be tested?

Testing the Fixes

Navigate to playground: /settings/admin/playground/weekly-calendar (with [email protected])
other places where this Calendar component is used
- /availability/troubleshoot

- Add cascading layout algorithm for overlapping events - First event at 80% width, subsequent events offset by 8% - Implement hover behavior to bring events to front (z-index 100) - Extract overlap logic into reusable utility functions - Add comprehensive unit tests for overlap detection and layout calculation - Sort events by start time, then by duration for consistent rendering Co-Authored-By: [email protected] <[email protected]>

devin-ai-integration · 2025-11-03T17:43:25Z

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

Address comments on this PR that start with 'DevinAI' or '@devin'.
Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

Disable automatic comment and CI monitoring

- Create comprehensive playground page with 8 test scenarios - Include two overlapping, three cascading, non-overlapping, same start time, chain overlaps, dense day, touching events, and mixed statuses - Add focused view with scenario selector and grid view for side-by-side comparison - Update playground index to include weekly calendar link - Each scenario includes description, expected behavior, and collapsible event data Co-Authored-By: [email protected] <[email protected]>

vercel · 2025-11-03T19:52:04Z

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
cal	Ignored			Nov 5, 2025 2:49pm
cal-eu	Ignored			Nov 5, 2025 2:49pm

cubic-dev-ai

1 issue found across 5 files

Prompt for AI agents (all 1 issues)


Understand the root cause of the following 1 issues and fix them.


<file name="apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx">

<violation number="1" location="apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx:344">
User-facing copy should go through t() for localization; this hardcoded “Weekly Calendar Playground” string bypasses translation and breaks the project’s localization convention. Please wrap it (and other visible strings in this component) with the appropriate t() call.</violation>
</file>

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

cubic-dev-ai · 2025-11-03T20:04:08Z

...web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx

+  return (
+    <div className="space-y-8 p-6">
+      <div>
+        <h1 className="text-3xl font-bold">Weekly Calendar Playground</h1>


User-facing copy should go through t() for localization; this hardcoded “Weekly Calendar Playground” string bypasses translation and breaks the project’s localization convention. Please wrap it (and other visible strings in this component) with the appropriate t() call.

Prompt for AI agents

Address the following comment on apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx at line 344: <comment>User-facing copy should go through t() for localization; this hardcoded “Weekly Calendar Playground” string bypasses translation and breaks the project’s localization convention. Please wrap it (and other visible strings in this component) with the appropriate t() call.</comment> <file context> @@ -0,0 +1,409 @@ + return ( + <div className="space-y-8 p-6"> + <div> + <h1 className="text-3xl font-bold">Weekly Calendar Playground</h1> + <p className="text-subtle mt-2"> + Test the overlapping events cascading layout with various scenarios. Events should cascade with </file context>

- Refactor useCalendarStore to use Zustand's createStore with React Context - Each Calendar component now creates its own isolated store instance - Maintains backward compatibility with global store fallback - Fixes issue where multiple Calendar instances on same page shared state This allows the playground page to render multiple Calendar instances without state conflicts between them. Co-Authored-By: [email protected] <[email protected]>

cubic-dev-ai

No issues found across 1 file

- Dynamically compress offset step based on overlap group size - Ensure leftOffset + width never exceeds 100% to prevent bleeding into next day - Add width clamping as safety guard against rounding errors - Add 3 new tests for overflow prevention with dense event scenarios Fixes issue where 10+ overlapping events would cascade beyond day boundary and bleed into the next day's column. The algorithm now calculates the maximum safe step size per overlap group while maintaining visual cascade. Co-Authored-By: [email protected] <[email protected]>

- Add safetyMarginPercent (0.5%) to prevent rounding and CSS box model overflow - Implement floor3 rounding for width to guarantee left + width <= 100 - safetyMargin - Calculate width from rounded left offset to avoid rounding mismatch - Remove inset-x-1 class conflict that was setting both left and right positioning - Change from marginLeft to left positioning for proper control - Add test for 20+ overlapping events to verify no overflow - Update existing tests to verify safety margin is respected This fixes the slight overflow issue reported by the user where events were still bleeding into adjacent day columns despite the initial dynamic step compression fix. The root cause was a combination of: 1. CSS conflict: inset-x-1 class setting both left and right positioning 2. Rounding mismatch: width calculated from unrounded left offset 3. No safety margin for CSS box model effects (borders, padding) All 21 tests now pass including new safety margin verification. Co-Authored-By: [email protected] <[email protected]>

- Increase from 11 to 21 overlapping events in Dense Day scenario - Update title from '10+ Events' to '20+ Events' - Add 10 more diverse events with staggered start times - Better stress test for overflow prevention with safety margin This provides a more comprehensive test case for the overflow prevention fix and matches the user's request for 20+ events instead of 10+. Co-Authored-By: [email protected] <[email protected]>

cubic-dev-ai

No issues found across 4 files

…com:calcom/cal.com into devin/overlapping-events-cascade-1762191291

cubic-dev-ai

No issues found across 5 files

- Replace simple title-only tooltip with rich content tooltip - Display event title, time range, description, and status - Add color indicator matching the event's visual style - Set min-width (200px) and max-width (300px) for better readability - Use inverted theme colors for better contrast in tooltip Co-Authored-By: [email protected] <[email protected]>

…vents-cascade-1762191291' into devin/overlapping-events-cascade-1762191291

- Show tooltip on right side for Monday-Thursday (days 1-4) - Show tooltip on left side for Friday-Sunday (days 5-0) - Calculate day of week using dayjs from event start date Co-Authored-By: [email protected] <[email protected]>

- Ensure very short events (e.g., 3 minutes) are still visible - Use CSS max() to apply minimum height while respecting duration-based height - Prevents events from becoming too small to interact with Co-Authored-By: [email protected] <[email protected]>

…com:calcom/cal.com into devin/overlapping-events-cascade-1762191291

cubic-dev-ai

Reviewed changes from recent commits (found 2 issues).

2 issues found across 3 files

Prompt for AI agents (all 2 issues)


Understand the root cause of the following 2 issues and fix them.


<file name="packages/features/calendars/weeklyview/components/event/Event.tsx">

<violation number="1" location="packages/features/calendars/weeklyview/components/event/Event.tsx:122">
`displayType !== &quot;single-line&quot;` is supposed to allow multi-line content, but the title keeps `whitespace-nowrap`, so longer titles are still forced to one clipped line. Please drop the nowrap (and shrink) so taller events can actually wrap their text.</violation>
</file>

<file name="packages/features/calendars/weeklyview/components/event/EventList.tsx">

<violation number="1" location="packages/features/calendars/weeklyview/components/event/EventList.tsx:69">
Setting a hard 15px minimum height makes short back-to-back events visually overlap even when their times do not, so the UI shows incorrect durations and obscures subsequent events. Please keep the rendered height proportional to the true duration (or rework the layout to avoid inflating the block beyond its actual end).</violation>
</file>

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

cubic-dev-ai · 2025-11-04T15:04:53Z

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

+            </div>
+          )}
+          {displayType !== "single-line" && (
+            <p className={classNames("shrink-0 whitespace-nowrap text-left leading-4")}>{event.title}</p>


displayType !== "single-line" is supposed to allow multi-line content, but the title keeps whitespace-nowrap, so longer titles are still forced to one clipped line. Please drop the nowrap (and shrink) so taller events can actually wrap their text.

Prompt for AI agents

Address the following comment on packages/features/calendars/weeklyview/components/event/Event.tsx at line 122: <comment>`displayType !== "single-line"` is supposed to allow multi-line content, but the title keeps `whitespace-nowrap`, so longer titles are still forced to one clipped line. Please drop the nowrap (and shrink) so taller events can actually wrap their text.</comment> <file context> @@ -101,25 +103,30 @@ export function Event({ + </div> + )} + {displayType !== "single-line" && ( + <p className={classNames("shrink-0 whitespace-nowrap text-left leading-4")}>{event.title}</p> + )} + {displayType !== "single-line" && !event.options?.hideTime && ( </file context>

Suggested change

<p className={classNames("shrink-0 whitespace-nowrap text-left leading-4")}>{event.title}</p>

<p className={classNames("w-full text-left leading-4")}>{event.title}</p>

cubic-dev-ai · 2025-11-04T15:04:54Z

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

+              width: `${layout.widthPercent}%`,
+              zIndex,
+              top: `calc(${eventStartDiff}*var(--one-minute-height))`,
+              height: `max(15px, calc(${eventDuration}*var(--one-minute-height)))`,


Setting a hard 15px minimum height makes short back-to-back events visually overlap even when their times do not, so the UI shows incorrect durations and obscures subsequent events. Please keep the rendered height proportional to the true duration (or rework the layout to avoid inflating the block beyond its actual end).

Prompt for AI agents

Address the following comment on packages/features/calendars/weeklyview/components/event/EventList.tsx at line 69: <comment>Setting a hard 15px minimum height makes short back-to-back events visually overlap even when their times do not, so the UI shows incorrect durations and obscures subsequent events. Please keep the rendered height proportional to the true duration (or rework the layout to avoid inflating the block beyond its actual end).</comment> <file context> @@ -66,7 +66,7 @@ export function EventList({ day }: Props) { zIndex, top: `calc(${eventStartDiff}*var(--one-minute-height))`, - height: `calc(${eventDuration}*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, </file context>

Suggested change

height: `max(15px, calc(${eventDuration}*var(--one-minute-height)))`,

height: `calc(${eventDuration}*var(--one-minute-height))`,

cubic-dev-ai

3 issues found across 9 files

Prompt for AI agents (all 3 issues)


Understand the root cause of the following 3 issues and fix them.


<file name="apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/page.tsx">

<violation number="1" location="apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/page.tsx:13">
Please wrap this new link title with the t() localization helper so it adheres to our frontend translation requirement.</violation>
</file>

<file name="packages/features/calendars/weeklyview/state/store.ts">

<violation number="1" location="packages/features/calendars/weeklyview/state/store.ts:44">
Sorting the incoming `events` array in place mutates the props object passed into the calendar, which can leak side effects to callers expecting their data to stay untouched. Please sort a copy before storing it.</violation>
</file>

<file name="apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx">

<violation number="1" location="apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx:490">
Wrap this user-facing string with the t() localization helper so it participates in translations.</violation>
</file>

_{React with 👍 or 👎 to teach cubic. Mention @cubic-dev-ai to give feedback, ask questions, or re-run the review.}

apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/page.tsx

packages/features/calendars/weeklyview/state/store.ts

...web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx

Udit-takkar · 2025-11-04T19:02:44Z

@eunjae-lee can you address all the AI reviews? Some of them are valid

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

cubic-dev-ai

No issues found across 2 files

github-actions · 2025-11-05T14:19:28Z

E2E results are ready!

Workflow #86803.2 latest results

pull-request-size bot added the size/XL label Nov 3, 2025

keithwillcode added consumer core area: core, team members only labels Nov 3, 2025

vercel bot deployed to Preview – dev November 3, 2025 19:25 View deployment

cubic-dev-ai bot reviewed Nov 3, 2025

View reviewed changes

vercel bot deployed to Preview – dev November 3, 2025 20:50 View deployment

eunjae-lee and others added 3 commits November 4, 2025 11:15

update base props

ddfbf97

remove unneccessary things

4c18cb6

cubic-dev-ai bot reviewed Nov 4, 2025

View reviewed changes

pull-request-size bot added size/XXL and removed size/XL labels Nov 4, 2025

eunjae-lee and others added 3 commits November 4, 2025 11:47

remove global store

d2c10b2

github-actions bot added the 🐛 bug Something isn't working label Nov 4, 2025

cubic-dev-ai bot reviewed Nov 4, 2025

View reviewed changes

Merge branch 'devin/overlapping-events-cascade-1762191291' of github.…

58e10b3

…com:calcom/cal.com into devin/overlapping-events-cascade-1762191291

cubic-dev-ai bot reviewed Nov 4, 2025

View reviewed changes

sean-brydon and others added 6 commits November 4, 2025 11:49

WIP

ec889d0

Merge remote-tracking branch 'refs/remotes/origin/devin/overlapping-e…

95a2429

…vents-cascade-1762191291' into devin/overlapping-events-cascade-1762191291

faster animation

fbcfe86

feat: position tooltip based on day of week

7b974b8

- Show tooltip on right side for Monday-Thursday (days 1-4) - Show tooltip on left side for Friday-Sunday (days 5-0) - Calculate day of week using dayjs from event start date Co-Authored-By: [email protected] <[email protected]>

add margin for tooltip

ff58afb

devin-ai-integration bot and others added 4 commits November 4, 2025 14:22

Merge branch 'devin/overlapping-events-cascade-1762191291' of github.…

7ae5f3e

…com:calcom/cal.com into devin/overlapping-events-cascade-1762191291

update playground

e47dda3

Merge branch 'main' into devin/overlapping-events-cascade-1762191291

b2d6480

eunjae-lee marked this pull request as ready for review November 4, 2025 14:46

eunjae-lee requested review from a team as code owners November 4, 2025 14:46

cubic-dev-ai bot reviewed Nov 4, 2025

View reviewed changes

vercel bot deployed to Preview – dev November 4, 2025 15:56 View deployment

Udit-takkar reviewed Nov 4, 2025

View reviewed changes

packages/features/calendars/weeklyview/components/event/EventList.tsx Outdated Show resolved Hide resolved

eunjae-lee added 3 commits November 5, 2025 10:58

do not mutate

165eaa3

pre-compute some values

01d30ea

Merge branch 'main' into devin/overlapping-events-cascade-1762191291

6a17894

cubic-dev-ai bot reviewed Nov 5, 2025

View reviewed changes

Udit-takkar approved these changes Nov 5, 2025

View reviewed changes

Udit-takkar enabled auto-merge (squash) November 5, 2025 10:42

vercel bot had a problem deploying to Preview – dev November 5, 2025 11:25 Failure

Merge branch 'main' into devin/overlapping-events-cascade-1762191291

e281886

eunjae-lee added the ready-for-e2e label Nov 5, 2025

eunjae-lee disabled auto-merge November 5, 2025 14:41

Merge branch 'main' into devin/overlapping-events-cascade-1762191291

13c11be

eunjae-lee enabled auto-merge (squash) November 5, 2025 14:58

sean-brydon approved these changes Nov 5, 2025

View reviewed changes

eunjae-lee merged commit b01cb27 into main Nov 5, 2025
59 of 63 checks passed

eunjae-lee deleted the devin/overlapping-events-cascade-1762191291 branch November 5, 2025 15:56

vercel bot deployed to Preview – dev November 5, 2025 16:35 View deployment

devin-ai-integration bot mentioned this pull request Nov 21, 2025

fix: improve overlapping events with dynamic offsets and widths #25310

Merged

7 tasks

	<p className={classNames("shrink-0 whitespace-nowrap text-left leading-4")}>{event.title}</p>
	<p className={classNames("w-full text-left leading-4")}>{event.title}</p>

	height: `max(15px, calc(${eventDuration}*var(--one-minute-height)))`,
	height: `calc(${eventDuration}*var(--one-minute-height))`,

feat: improve overlapping events display in weekly calendar view #24880

feat: improve overlapping events display in weekly calendar view #24880

Uh oh!

Conversation

eunjae-lee commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Visual Demo

Before

After

Mandatory Tasks

How should this be tested?

Testing the Fixes

Uh oh!

devin-ai-integration bot commented Nov 3, 2025

🤖 Devin AI Engineer

Uh oh!

vercel bot commented Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Nov 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Nov 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Nov 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Udit-takkar commented Nov 4, 2025

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

E2E results are ready!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

eunjae-lee commented Nov 3, 2025 •

edited

Loading

vercel bot commented Nov 3, 2025 •

edited

Loading

cubic-dev-ai bot Nov 3, 2025 •

edited

Loading

cubic-dev-ai bot Nov 4, 2025 •

edited

Loading

cubic-dev-ai bot Nov 4, 2025 •

edited

Loading

github-actions bot commented Nov 5, 2025 •

edited

Loading