Creating multi day event overlaps like Google Calendar

Hi everyone,

I’m looking for some assistance creating the multi day event overlap functionality that google calendar has. See below screenshot 1 as example:

You can see how the event extends over multiple days and effectively overlays on top of the calendar base. Where it gets really good is when there are two overlapping multiday events of different durations, the events stay continuous and don’t collapse to the top of the date cell like Tetris. See second example screenshot 2:

I have built a calendar from scratch in my bubble app by following the tutorial at this link: https://www.youtube.com/watch?v=oM2Qz9jMk0U. My preference is not to use plugins as I am unable to get the granular control that I want over the design, hence building the calendar from scratch.

I have nested an event repeating group within the calendar repeating group to show the events on that date. See below screenshot 3:

You can see I have done a little ‘brute forcing’ to make the multi-day events look kind of like they overlap. Really there are just a bunch of conditionals saying show the group if it is within the start and finish date of the event.

Where I am coming unstuck is when I have two multiday events overlapping. Because the events don’t actually overlay, what happens is the groups start pushing each other out of line based on the order of the repeating group. See below screenshot 4:

I want the events to stay on the same line like in screenshot 2. I assume that this will require some CSS which I am fine with, I just haven’t been able to figure it out myself and would love some assistance.

Thanks in advance!

Check out one of the calendar plugins

Thanks for replying Boston. I would prefer not to use the calendar plugins due to then being dependent on them staying up-to-date. They also aren’t as customizable as I would like. I was hoping that there may be an easy way that I haven’t thought of to achieve this functionality with a custom built calendar.

Hi there, did succeed rendering multiple multi day events?

This topic was automatically closed after 70 days. New replies are no longer allowed.