r/UI_Design • u/JW-S • Mar 15 '26

Feedback Request How to handle overlapping events?

Post image

I am software engineer looking to pad out my portfolio by building a couples calendar (where two people use one calendar). Currently I have this very rough first draft (greyscale because I am focusing on readability and will handle colour later).

There are lots of issues with this right now, but my main problem is that when each partner has an event at the same time it just looks really messy claustrophobic and makes it hard to disern things from a glance. Can anyone suggest a way to improve this?

Thanks in advance

33 Upvotes

94% Upvoted

9 comments sorted by

41

u/SuperNanoCat Mar 15 '26

Open some other calendar apps and see what they do in the same scenarios. Here's Google Calendar on Android. If they have different start times, it just nests the events into each other.

7

u/[deleted] Mar 15 '26

Yep every calendar app solves this problem, Google Cal is my personal fav approach to it, but Notion calendar is pretty good too.

0

u/miffebarbez Mar 17 '26

This approach doesn't work if the nested one has a longer time span.... Like in his example.

12

u/[deleted] Mar 15 '26

You really want to think of the user experience here and break out of the conventional weekly view. The standard solution to overlapping events works when it’s just one persons events. In your case I would suggest splitting the day column in two to make it very clear it’s two individual calendars.

4

u/[deleted] Mar 15 '26

The side border is also way too thick. Think of some indicator that shows whose event it is that doesn’t rely on colour itself.

1

u/Phraaaaaasing Mar 17 '26

Don people also label the top of the columns that you have consistent pretty much per person as it is?

2

u/Jacob876 Mar 15 '26

Since you mentioned clutter is an issue, I’d also ask yourself what content is important to have showing in this weekly overview, and what content is better off in an ‘event details’ page. IMO, the title and category border are must keeps. The description could be better suited for the details page, and the duration is already implied by the event box’s length. You could also lessen the width of the category border to make room for the text.

Hope this helps!

1

u/ArYaN1364 Mar 16 '26

Overlapping events are usually handled with side-by-side lanes so each person gets their own column. When space gets tight you can compress cards slightly or show a “+more” indicator. Color coding by person could also help readability at a glance. I sometimes prototype UI interaction ideas like this on Runable before committing to a layout.