Skip to content

feat: stack overlapping events in the weekly view instead of squeezing them - #1390

Closed
oskarsss wants to merge 1 commit into
FossifyOrg:mainfrom
oskarsss:feat/stacked-overlapping-events
Closed

oskarsss wants to merge 1 commit into
FossifyOrg:mainfrom
oskarsss:feat/stacked-overlapping-events

Conversation

@oskarsss

Copy link
Copy Markdown

When events overlap in the weekly view, they split the day column into equal slots. A long event gets squeezed by any short event during it. For example, a full-day "Work" block shrinks to half width because of a 45 minute lunch. Desktop calendars (macOS, Google) stack overlapping events instead, and that looks much cleaner.

This PR stacks them:

  • The base keeps the full width. The earliest event (or the longest one, if they start together) is always full width.
  • Overlapping events are nested. Each later overlapping event is drawn on top of the event that's still running when it starts, indented to the right.
  • Close starts take half. A child that starts within 30 minutes of its parent covers only the right half, so the parent's title stays readable (similar to FullCalendar's "at most half obscured" rule). Children that start later cover 75%.
  • Ended events are ignored. An event that has already ended doesn't affect the layout of later ones. A child keeps its indent even if its base ends first, like Google and Apple.
  • Nested events have a thin border in the background colour. In RTL the layout is mirrored. Indents are capped, so even many simultaneous events stay at least 20% wide.

Comparisons

All six scenarios come from the same test week, shown on a phone in the 7-day view.

  • Fossify now / This PR: real emulator screenshots (Android 15, 420 dpi).
  • Google-style: the real react-big-calendar overlap layout algorithm, which is modelled on Google Calendar.
  • FullCalendar: the real FullCalendar v6 with its default settings.
  • macOS Calendar: an approximation drawn for this comparison, not a screenshot. Apple doesn't document its layout and it can't be rendered here.

Both libraries were rendered at the phone's column width and density.

A short event inside a long one

Events starting at about the same time

A cascade

A child that ends after its base

Back-to-back events inside a long one

A staggered chain

Known limitation: with four or more events starting at the same time, the deepest ones stack at the 20% cap and only the top one is visible there. The others can still be reached from the day and list views.

Testing

  • assembleFossDebug, detekt and lintFossDebug pass.
  • Checked manually on an Android 15 emulator in LTR and RTL (Hebrew), with past events dimmed.

Reviewed with sol-pre-commit-review: 3 rounds with gpt-6.1-sol on high. Sol verdict: approved

Created with Claude Opus 5.5 in Claude Code.

🤖 Generated with Claude Code

Overlapping events used to split the day column into equal slots, so a
long event got squeezed by any short event during it. Now the earliest
(or longest) event keeps the full width and later overlapping events are
drawn on top of it, indented like in desktop calendars. Events starting
at about the same time leave the left half of the event below visible,
so its title stays readable.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@oskarsss
oskarsss requested a review from naveensingh as a code owner October 30, 2026 16:10
@fossifybot

fossifybot Bot commented Oct 30, 2026

Copy link
Copy Markdown
Contributor

Fossify accepts code contributions only for open issues labeled help wanted. This pull request does not meet that requirement or one of the documented exceptions, so it is being closed without review. Please read the contribution guidelines before starting work.

@fossifybot fossifybot Bot closed this Oct 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant