Calendar vertical scroll


I’m trying to recreate the design of the Google calendar app.
When you open the application, the agenda is displayed vertically. You can scroll indefinitely in the future as well as in the past.
Dates are organized in weeks, where only days with events are displayed.

And I would like to scroll automatically to the current date when the page is loaded.

Do you have any idea how to do this on bubble ?

I’m not looking to connect to the Google calendar, it’s really a design question.


Yep essentially just a repeating group with a list of events in it, 1 column and infinite rows.

Now, you could technically load all the entries and then scroll to todays date, but it would be hella slow at scale.

Instead have 2 groups, one for today+ future, and one for past events, past events would be on the top and in reverse scroll order, future on the bottom, normal scroll order, that way you can go up and down.

You’ll need to tweak it here and there to make it play nice, but thats the general approach I would make

Thank you very much, that’s a good start… The only problem is that it will only display existing events, whereas the google calendar displays weeks, and shows days only if there’s an event.

Sure thing, so just display a list of dates, and have an event group which has a conditional rule to show up if there is an event on that date?

Do you know how to display a list of dates ?

I would use the list of dates plugin.

You could also use toolset and JS but it’s much easier to use the plugin IMO

Thank you, I’ve been looking for a long time. Maybe with this two answers I’ll be able to figure it out.

I’ll see what it does…

Ive used that for custom calendars before etc and it’s very handy. If you get stuck and want to screen share shoot me a DM

1 Like