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

@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

Keith,
Are you going to implement any sort of RRules or ExDate functionality in this calendar plugin you’re building? Some would argue that they’re the only correct way to store business hours / recurring event information. As one can see, they’re quite powerful in ways that are not currently available in bubble.

Oh hai, @zelus_pudding: Well, CG Pro does not directly ingest iCal format data. It ingests dates, start/end dates and/or date ranges to understand what days it should show as blocked. It’s for day level date picking and display.

It has a built in facility (“day of week” or “DOW blocks”) to indicate days that should always be blocked (and this is done via an Action, so one could dynamically change those.

The use cases that CG Pro addresses are for day-level date picking as you’d have in a vacation rental, hotel or similar booking application.

What you’re talking about may be appropriate for its companion element “Time Grid”, which is still in development.

BTW Calendar Grid Pro is already available and you can find a lot more info about it here:

As for plugins that directly ingest iCal data… It’s MAYBE something I might add. Obviously, I’ve built a microservice that parses iCal for GRUPZ.com and returns date info to Bubble. The thing is, a feature like that would make these plugins EXTREMELY expensive, as then it’s a whole app, really, and we’re starting to talk about a level of value that’s up in the thousands, not tens or hundreds of dollars.

-K-

3 Likes

@codurly I have an issue with this weekly calendar when on Sundays calendar doesn’t open the right week. I wonder if’s related to timezone or what?

Also, it would be nice to have an option when week starts on monday but i’m not sure how to change that.

Preview

Editor

This is amazing!

Did anyone manage to then have a custom built calendar like this populated with events from google calendar?

I figured it out thanks to gf_wolfers reply to boostsalesgroup.

Also just posting my solution in here, in case any one else would find it useful

Thank you !!! I had the problem today :slight_smile:

Did anyone get the week view to start on monday?

Try this:

function getDaysInMonth(month,year) {
var date=new Date(year,month,1);
var days=;
var n=new Date(year,month,0).getDate();
var firstDay=date.getDay();
if(firstDay == 0)
firstDay=7;
for(i=firstDay-2;0<=i;i–)
days.push(new Date(year,month-1,n-i));
for(;date.getMonth()===month;)
days.push(new Date(date)),date.setDate(date.getDate()+1);
var g=new Date(year,month+1,1);
for(i=days[days.length-1].getDay();6!=i;i++)
days.push(new Date(g)),g.setDate(g.getDate()+1);
for(i=days.length;42!=i;i++)
days.push(new Date(g)),g.setDate(g.getDate()+1);
return days;
}

4 Likes

Amazing ! thanks - Sorry, if I wanted that to work on the weekly view, how do I need to alter that code?

If I copy the “Main Calendar” and paste it into my app, will it work flawslessly? Or I have other things to do?

Hi Nic, I am receiving the same error, with the day of the calendar empty.

I also receive this error code:

The plugin Toolbox / element Expression threw the following error: SyntaxError: Invalid or unexpected token
at eval (PLUGIN_Toolbox-update–Expression-.js:1:73)
at https://dhtiece9044ep.cloudfront.net/package/run_debug_js/2e7badfa8a9729c34055cf622e91c7c92b3d8d710b990b61f63cfbe7b154d3a4/xfalse/x5:18:444777 (please report this to the plugin author)

How can I fix that?

Thank you so much
Andrea

So far I have tried different code and this looks working perfectly. Thank you guys :slight_smile:

Did you ever get an answer on how to display the weekly calendar to start on the current week (and not the first week of the month)?