@wfarrell73, what you’re looking at there is a new type of Bubble element that I call Calendar Grid. It uses the same ideas as the custom calendar technique, but performs MUCH faster and adds a HUGE amount of functionality that takes weeks to build in Bubble, if you DIY. Here’s how it came to be…
I had built a bunch of app features around the custom calendar-via-a-repeating-group concept. In doing so, I learned a lot about date picking, range picking and date presentation/manipulation. (I already had an idea about a new approach to date range picking, which at the time was entirely novel, but has been adopted other places since.)
Range presentation and picking using the custom-calendar-via-RG technique is actually very difficult to implement (especially if one’s blocked ranges are coming from an API, which can lead to what I’ve called “the API ghetto” problem).
Because Bubble makes it difficult to do some types of iteration, it at first appears impossible to build an interactive range-picker in vanilla Bubble (even with Toolbox). But it can be done (see my GRUPZ.com project – https://grupz.com/vacation-rental-booking).
Unfortunately, at a certain level of complexity, the custom RG solution becomes very slow – both in terms of loading and in terms of responsiveness. (While it’s acceptably performant on desktop systems, it does not do well on lower end mobile devices – e.g., iPhone 6 is entirely unacceptable.)
The issue is that the only way to build this in Bubble is to make the calendar an insanely complicated state machine. (Rather than telling each “cell” – the dates in the calendar – how they should appear, you literally have to have each cell figure out how it should look based on a couple of dozen conditional evaluations – most of which involve search and/or filter operations.) This becomes very slow, very quickly as there are 42 of these little state machines doing this over and over.
The result is an element with a LOT of options, but that makes it easy to:
- Create a visually-pleasing, responsive calendar that
- Can also act as a simple calendar, interactive date picker, multi-date picker or date range picker
- Is timezone-aware
- Automatically detects locale and calendar/date presentation preferences (and adjusts itself to match)
- Is responsive to hover events
- Exports selected ranges as both date ranges AND the individual dates that compose the range (this is literally, actually impossible in vanilla Bubble, and only barely achievable in mildly modified Bubble) … AND…
- A bunch of other stuff…
And, yet, it loads nearly instantaneously and performance is nearly instantaneous, even on lower-end mobile devices.
Basically, it’s a specialized type of “repeating group” – designed not to display just ANY sort of list, but to generate, display and work with one very specialized type of list. And it’s designed FOR Bubble programmers BY (arguably the best) Bubble programmer(s)… So its gozintas and gozoutas make sense to the Bubble user.
Coming soon as a paid plugin.