[HOW-TO] Create a custom Calendar using repeating group

This is a simple workflow of a Custom State. Check out our Template for the Workflow:

Editor: https://bubble.io/page?type=page&name=calendar&id=topshelf-elements&tab=tabs-1

Preview mode: https://topshelf-elements.bubbleapps.io/version-test/calendar

1 Like

Wow!
Just wanted to give a :+1:t2::+1:t2::+1:t2: on this!
Took me 5 minutes to get much better UI with this calendar.
Used a small version of the month view to create a customized date picker!
This is a great addition to bubble’s resources!
Thanks a lot @codurly !!!

1 Like

Hey @recrutbox ,

did you have any luck with displaying colored stripes for each event created?

Did you ever get a reply back?

No I did not. I have not attempted this portion of my app yet either as I expect it to cause me great issues.

Evolution…

1 Like

How did you create that?

@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.

SO, I recently started converting my Bubble version (which you might consider a prototype) into a plug-in element, coded in JavaScript with minimal reliance on external libraries (except for moment/moment-timezone, which is indispensable for projects like this).

The result is an element with a LOT of options, but that makes it easy to:

  1. Create a visually-pleasing, responsive calendar that
  2. Can also act as a simple calendar, interactive date picker, multi-date picker or date range picker
  3. Is timezone-aware
  4. Automatically detects locale and calendar/date presentation preferences (and adjusts itself to match)
  5. Is responsive to hover events
  6. 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…
  7. 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.

5 Likes

Curious about this, especially since you say it will be MUCH faster. How much faster are we talking here?

Especially since I found the main limitations of any calendar to simply be Bubble’s ability to quickly load Bubble Data to into it (the actual painting of the repeating groups and dates have a slight delay, but waiting for data to fill in the calendar can be painful depending how the app’s data is set up). Would it allow for more optimized searches somehow?

1 Like

Do you have a set timeline for this? Genuinely intrigued by this.

This is on my iPhone 6…
https://vimeo.com/327597921

https://vimeo.com/327597990

https://vimeo.com/327597947

It’s currently a full replacement for the custom RG-based calendar as I use it in GRUPZ. However, there are a few more features I’d like to add before publishing an initial version.

(These are rather advanced ideas, like a “chain” or “master/slave” mode - which would also enable range picking ACROSS calendar grids in a repeating group, a way to export/import styling parameters which are pretty extensive, and I also need to knock out a couple companion elements like separate DOW heading and month display modules.)

But soon!

Looks great :+1:

How are you loading the conditions into the calendar to show different colours / clickability? (such as loading data in another element and filtering on the client. Or pulling from the database and the conditions are built into the plugin somehow, etc)

Looks fast but also hard to know that without understanding how that data is setup and if there are a lot of conditions running on it

1 Like

@keith this looks cool.
Is this a date picker or an event calendar.
By event calendar i mean a calendar that allows you to have timed events (e.g. a person’s schedule for a day) for each day?

@gf_wolfer, Bubble’s not bad at grabbing single date or date range data at all. But there’s a ton of overhead in repeating groups (likely because of how they are designed to include and encapsulate any type of element).

What I’m showing in this iPhone videos is actually faster than the same sort of operation on Airbnb’s live site - and on a free test app.

Calendar Grid actually does a callback up into Bubble when the first date of the range is picked, so that you can do things like lookup the min/max nights for that starting date. And it waits until Bubble sends that data back to the plugin. It works faster than when Airbnb does this with React Dates and their insanely fast backend.

The problem with range picking in Bubble is (1) well, there IS no date range picker for Bubble except for the one I built for GRUPZ but (2) the problem with speed in THAT range picker is front-end (client-side) speed, NOT backend db access speed.

In its present and original version it is a calendar viewer/generator, date picker (single or multi — multi-date-picking is perhaps something with no application, but it does it), and Airbnb/VRBO/hotel/travel-style interactive date range picker (<— that part is the money shot).

Blocked dates and ranges shown conceptually represent a single thing’s availability, snapped to start of days.

I intend to extend this to a slightly different version to represent multiple things’ availability and/or times WITHIN the day.

2 Likes

@gf_wolfer, you just send it date ranges that should appear as blocked and/or start and end date list pairs representing the same thing (as you might have from an API) and/or single dates that represent an entire day of blockage and it does the rest (including optionally unblocking the first day of a blocking range if your start day blocks represent days that are available for “checkout”).

It also supports dynamic min/max night selections based on checkin date as you need in Airbnb/VRBO/GRUPZ type applications.

Basically, if you have this you have all the business logic for any daily availability booking system. (Obviously, the concept could be extended to any arbitrary time interval, but that’s step 2 or 3 for me. Currently, the main goal for me is to replace the RG-based calendar/range-picker used in GRUPZ calendars and booking widget with this superior plugin, while adding some features that make it more generally useful to other Bubble developers — e.g., I’ve no need for single datepicking, but I built that mode in as there are no Locale- and Timezone-aware datepickers for Bubble.)

The single-pane rangepicking feature that took me literally months to build in vanilla-ish Bubble when I first was working on GRUPZ are the main point of this though.

1 Like

I’m excited to see this. Tomorrow I am starting on the booking portion of my app and was reviewing the forums on the topic. I know this plugin will be very useful for me as my main purpose with bubble is to create booking applications. Still haven’t had much time to spare on learning javascript to have more control over things, so will be attempting to use only bubble and the code found on the forum. I’m sure I’d replace whatever I come up with, with the plugin.

Hey @boston85719 (and anyone else interested in this project):

There’s now a video intro to my Calendar Grid Pro plugin posted here:

Check it out!

1 Like

Has someone already figured out how to get a week view with hours of the dayN