@rjayaddimalik Yep, this is doable in Bubble without plugins
The cleanest way is to make a vertical repeating group where each row is a fixed time slot like 30 minutes. Then your booking cards are just groups inside the RG, not separate rows. You set the height of each booking group based on the duration for example: number of slots × row height, so longer bookings are taller.
Position the booking group based on its start time, use conditionals for status colors, and a couple of custom states for the selected week/day. No plugins needed, just a bit of layout math.
Totally possible in Bubble, it’s more about structure than fancy features.
Overlaps are the tricky part. I’d still keep the fixed time-slot repeating group as the base. Each booking knows its start time and end time. From that, you calculate two things:
how tall the booking card is (duration ÷ slot length × row height)
how far from the top it should start (start time ÷ slot length × row height)
For overlaps, you don’t stack bookings vertically. Instead, you split the column width. Before displaying, you check how many bookings overlap in the same time range and assign each one a “lane” number (1, 2, 3…). Then you set the booking card’s width to 100% ÷ number of overlapping bookings and its left margin based on its lane.
So visually:
Time controls vertical position and height
Overlaps control horizontal position and width
All of that can be done with calculated fields + conditionals in Bubble. It’s a bit of logic, but once the overlap rules are clear, it stays predictable.
Make a vertical repeating group for fixed time slots.
Put each booking as a group inside the RG. Set its height = duration ÷ slot length × row height and top offset = start time ÷ slot length × row height.
For overlaps, assign each booking a “lane” number, then set width = 100 ÷ overlapping bookings and left margin = (lane - 1) × width.
Use conditionals for status colors and custom states to track week/day or lane info.
All of this works with RGs, groups, custom states, and basic math and no plugins needed.
I’ve already created a very similar version using custom HTML, CSS, and JS. My main challenge was figuring out the best way to integrate it properly into Bubble — for some reason, using an HTML element didn’t click in my mind initially.
I’ll obviously be using an HTML element to embed the calendar, but if you’re able to share how you approached it (especially the Bubble-side setup), it would be a huge help. I don’t want to spend more time reinventing the wheel if there’s a clean and efficient way to do this.
Really appreciate you sharing this — it’s very close to what I need.
Awesome work @senecadatabase ! Could you move the events to other time slots by dragging them (similar to google calendar and pretty much other calendar apps) or is it limited to updating the time manually within the popup?
I did test it rather quickly this morning, and it worked, but as I said, I need to test it more and make sure everything is working perfectly.
You need to go into the code and set the demo to false. It’s on true right now, so it will show demo data. Once you set it to false, it will be blank, obviously, until you add your data. Once you do this, and you have your data type set up and the 3 backend workflows, it works. You can change the settings in the backend workflows to suit you, and also you can change the code, etc., for your use case. Obviously, you can upload the code to AI (I used GPT) and ask it to make the changes you want.
The workflows are set to ignore privacy rules (as you can see), and it’s set to no auth, because I just have it in test mode.
This automatically adds to your database and is set for the current time, etc. (hopefully )
The code you can put into an HTML element on your page. Again, if you want to clean it up without the demo, that’s your choice. CSS and JS are included in the HTML, so don’t worry about that:
You can take this and change it the way you want to fit your needs. I’m sure the code could be cleaned up if you wanted…but this is what I ended up with before making a lot of edits to tweak it
I was actually trying to be good today and stay out of trouble
I actually used Grok, an Ouija Board, and my toaster. I’ll do a screenshot in a little bit.
But seriously, I don’t have anything against Gemini. But it seems when I use it for writing and stuff, it always seems too corporate and for older people. I found GPT just seems to be more lively and exciting…then again, maybe it’s the way I prompt them both
Question:
)
