TLDR: Trying to build a Google Calendar–style day view from scratch in Bubble where each event’s top position and height are determined by its start time and duration. Currently using CSS via the Classify plugin to set these values; positioning works reliably, but height sometimes resets to Bubble’s 20px minimum, likely due to conflicts with Bubble’s native layout rules. Looking for a native Bubble approach to dynamically control element height/position or advice from others who have built similar calendars
MORE DETAIL:
I am trying to build a Google Calendar-style day view scheduling calendar in Bubble.
I know there are plugins that can provide this kind of functionality, but I want to build it from scratch as I have a unique design idea for how the calendar functions.
I have events in a repeating group. Each event has Start Time and Durration. My goal is to have the Top Position and the Height of each event element be determined by the Start Time and Durration. Currently, I am using custom CSS through the Classify plugin to achieve this.
The Top Position works flawlessly. I create an event with a start time and the element is positioned correctly on the calendar based on that start time.
The Height works some of the time. In bubble, the height field is set to a 20px minimum. Sometimes the Height correlates correctly to the Durration of the event. And sometimes it defaults back to that 20px minimum. It seems that the CSS in Classify is conflicting with Bubble’s native Height instructions. If I could natively add dynamic data to Bubble’s height field I believe that would solve all my problems.
Is there a way to do that? Is there a better way to approach building a day-view calendar? Is anyone else working on the same kind of project?
I would especially love to know how the builders of the day-view calendar plugins have achieved this dynamic position/height functionality!
Happy to provide more details if anyone is interested. (Attached is a screenshot of the calendar I am building)
1 Like
Do you use the !important in css to override the rules of Bubble’s element? Why set minimum heigth? Why you don’t using 0 and leave css take care?
Appreciate the feedback!
I didn’t know to use !important in the CSS. I will try that! How should that be formated in the CSS?
I set a minimum height of 20px after testing out every other combination of height settings. If I set it to a minimum of 0 then it still alternates bewteen accepting the CSS and defaulting to a height of 0. At zero the event apears as a tiny line that cannot be clicked. The benefit of 20px is that, when it defaults back to it, I can still see the event and click on it. That allows me to change the time durration. For some reason updating the durration “wakes up” the CSS and causes it to set the height correctly.
1 Like
#my-button {
background-color: red !important;
color: white !important;
border-radius: 10px !important;
}
Just try and test! Maybe solve your issue.
Thanks! I tried this but it unfortunately did not solve my problem. In fact, for reasons I don’t understand, it caused the events to consistently fail to apply the CSS and to be stuck on 20px minimums. I just wish I understood how the day-view calendar plugins achieve this functionality! (Thanks again for the help. Even if it didn’t solve the issue thus far, I really appreciate it)
1 Like
I really appreciate all the suggestions and feedback here. I was able to solve the issue the other day and I wanted to share my solution:
Solution:
I ended up solving this without CSS by switching to a fully native Bubble approach.
I created a field on the Event that calculates the number of 5-minute blocks by dividing the duration by 5. Then I added a repeating group inside each event, using an Option Set containing numbers (1–150) as the data source.
The repeating group’s data source is:
All Option Set values :items until Event’s number of 5-minute blocks
This allows the RG to generate the correct number of cells dynamically. It causes the number of cells to be determined by the number in the “number of 5-minute blocks” field. This way, there is the correct number of blocks to account for the duration of the event.
Each cell is set to a fixed height of 20px, so the total height of the event scales correctly with its duration and aligns perfectly with the 5-minute calendar grid the events are hovering over.
After that, I removed the Classify CSS entirely and adjusted the layout settings (fit height to content, scrolling behavior, etc.) so Bubble handles sizing natively.
Everything now renders consistently with no timing issues.
Hope that makes sense. Happy to answer questions.
1 Like
