Forum Academy Marketplace Showcase Pricing Features

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

@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)?

This thing is just amazing. I believe I just found a way to block date ranges in this custom calendar. Very useful for me. A big thanks. Zero cash spent is a plus :ok_hand:

1 Like

Hi @maxime.rb

I’m curious whether you managed to do this in the end?

Thanks!

1 Like

Just in case somebody needs a Weekly View - starting monday - with 5 days

  • starting mondays (see first bold text) -> this will change the first day of the week
  • with 5 days (see second bold text) -> changing this value will change the number of days

hope it helps, thanks for sharing this tutorial, very helpful!

this is the code
function getDaysInWeek(e,t){var a=new Date(e,0,1);a.setDate(a.getDate()+7*(t-1));var D=a.getDay()-1;for(s=0;s<D;s++)a.setDate(a.getDate()-1);for(var n=new Date(a),r=[],g=[],s=0;s<5;s++)r.push(n.getDate()),g.push(new Date(+n)),n.setDate(n.getDate()+1);return g}

6 Likes