Hello mate,
Does your calendar supports ical imports? Say I already have a calendar in another app and I want to import its data from Ical to this app. Is it possible?
1 Like
Hello @keith,
I was wondering if it possible to create some statistics based on the blocked dates. Say percentage blocked, etc.
Hey @simon and @keith and other CGrid users.
Just wanted to draw your attention to the fact that Bubble’s newly introduced :minus list makes this problem easier to solve, and I’ve successfully simplified this on a few places in my app.
Instead of having to pre-generate a list of blocked dates, you can now solve it with only the CGrid plugin, by:
- Use the Util 4: Construct List of Dates from Range to construct a list of ALL dates from the first to the last (regardless of being available or not), by using the first and last date in the range of available dates as data Example: Jan 1 to Jan 31
- This gives you a list of 31 dates
- Set up the blocked dates as those 31 dates:minus list available dates. Let’s the Jan 15th is your only available date, this would leave a list of dates from Jan 1st to Jan 31st, minus Jan 15th.
Described it very briefly here as this is a niche problem, but let me know if anyone wants me to elaborate.
2 Likes
Before I purchase it there are a few questions I have @keith:
1- Can you extract the number of days blocked in a certain month. And if so, is it possible to extract that number even the calendar is in another page.
2 - Can the same day be devided into 2? Say I have a date range that ends in 2 Nov, and another stat starts at 2 Nov. (interface wise).
3- Can diferent blocked ranges display an image and different color depending on the data that range has?
Thanks in advance
Hi @paulogustavopeixoto! In answer to your questions:
1. Short answer: Yes, it’s easy to get the blocked days for any arbitrary time period. Longer answer:
Calendar Grid Pro is a client-side plugin. It operates in the page. (I mention this because you ask, “… even if the calendar is in another page.”) So, unless CG Pro is in your page, you can’t ask questions of it / get data from it.
While CG Pro does not – at the moment – have an “invisible” mode (it always has a display component) but of course it can be styled such that it is invisible and put into “Display Only” mode, which makes it non-interactible. And, in this way, it can be used strictly for its computation features.
(A “No-interface” mode is something I intend to add, but it’s not really an easy thing and there are other higher-priority features that are on the list of planned features.)
Now on to your specific question about how blocked dates are reported to you: Calendar Grid Pro works as follows:
- You provide some combination of date ranges and/or individual dates that will be shown as blocked.
- CG Pro will display those as blocked and – depending upon what mode you are in – will prevent them from being selected.
- Internally, the dates and date ranges you specify as blocked are turned into a list of blocked dates. CG Pro publishes this list of dates as CG Pro’s Blocked Dates. (That list is all of the dates that are blocked.)
Now, of course you can :filter that list of dates by any sort of criteria, including blocked dates that are within a certain month. For example, let’s say we want to know, “What blocked dates are inside the month that CG Pro is displaying?” In Bubble, we just take the list of dates and :filter it by the criteria “some_date_range contains point this date”.
First, CG Pro reports its “Month Displayed” (this is a date representing the first moment of the first day of the month) as “CG Pro's Month Displayed”. So, that’s the start of the month.
Now, what’s the end of that month? In Bubble terms, that’s the moment that is just before the start of the next month. The start of the next month would be "CG Pro's Month Displayed +months: 1". The moment just before that is “CG Pro's Month Displayed +months 1 +seconds -1”.
(The reason we have to do that is Bubble’s rangewise comparisons include the ending time slice. It would be nice if we could tell Bubble whether we want to do that or not, but that’s the way it goes.)
I’d include a picture but that doesn’t seem to be working here in the forum right now. The List filter expression ends up looking like this:
Constraint: CalendarGridPro's Month Displayed +(months): 1 +(seconds): -1 <- range -> CalendarGridPro's Month Displayed contains point This date
and
Keep in mind that CG Pro is not a generic calendar display solution. It is, at its heart, an advanced date range picker designed primarily for nightly booking scenarios. It has other applications, of course, but it’s not designed to do everything you might conceive of, calendar-wise.
As such, it does not at present delineate overlapping date ranges. Blocked dates simply appear as blocked. Blocked ranges that overlap or that abut will essentially appear as a single contiguous range. (A related cool feature is that CG Pro publishes the resulting contiguous ranges, which is actually a pretty cool trick – impossible to compute in vanilla Bubble.)
The next update to CG Pro includes a couple of new features that may give you what you want.:
First, it has a “Label Dates” Action that can be used for things like indicating nightly prices, but could be used for other sorts of indications. While images are not supported, you could use emoji or whatnot. I hadn’t thought of this before, but I could add to that a facility for optionally changing the background color as part of that Action. (There are various complex reasons for why we would do this via an Action rather than as a core part of the plugin, which I will explain in a future video about those features.)
Second, you will be able to set the selected date or date range via a “Set Selection” action.
Both of the above are designed for my own use case of providing an interface whereby users can manage nightly pricing… but they would have many other applications as well.
I’m still doing a little final polish and error checking on those new features, but I expect I’ll publish the updated version within the next week or so.
(Aside: Unfortunately, this is another huge update and, as a result, it will be a breaking change – the upgrade procedure will require users to note where they’ve used CG Pro and then do the tiresome “right click and replace with another element” nonsense.)
2 Likes
Hi @keith,
I’m running into an issue that I think might be a bug. When you set a timezone for a Calendar Grid element, the documentation text says Dates displayed in and generated by the Calendar Grid will be from this time zone ID.
However, when using the Util 4: Construct List of Dates to generate a list of dates, the time reverts to 00:00 in the browser’s time zone.
Based on the documentation, this is the not the results I would expect. Or is this intentional and I’m missing something?
EDIT: Nope, my mistake! The setting Snap Range to Interval was the culprit, and indeed this is described in the documentation. Leaving this here in case someone else runs into this.
Hi @petter: glad you got it working! BTW, there’s a big update to CG Pro coming soon that adds some cool new features, like allowing you to set annotations on given calendar days, set CG Pro’s selection via an action, etc. (Unfortunately, this will be one of those breaking changes that – if you want to use the new version - will require you to replace old instances with the new one.)
1 Like
Awesome, looking forward to it!
NEW (non-breaking) version 1.9.2 available!
FYI, I released a small but cool update for Calendar Grid Pro last night. In another thread, user @petter described needing a way to create a list of date ranges, based on a list of starting date and adding some amount of time to create the corresponding ending dates for the ranges.
While this is something that one could do with scripting (in Run JavaScript or List Expression), it’s something that can be made much easier in a plugin.
So, I created a new Utility Action (which will be available in the next major update to CG Pro) that can create such a list (either from matching lists of starts and ends or algorithmically by a start/end point plus some unit of time).
The new Action won’t be available until the next major update to CG Pro, so I built an element version of this plugin. If you update to CG Pro plugin to version 1.9.2, you’ll find it has a new plugin element called “Date Range Builder”. Drop it on your page and read the docs. It think it does exactly what you need to do.
Note that, as it is its own element plugin, it’s a bit different from the “Utility” functions currently built into CG Pro. No need to call it with an action… It’s output will will update whenever its inputs change. So you can do stuff like this:
Date Range Builder fields:
And then, as you advance the calendar, you’ll note that the output changes automatically (and of course, it’s fast)… Run mode:
Note: Date Range Builder is designed to work on the same page as a CG Pro element… However, you can use it by itself. If it detects that moment is not loaded (it only needs the simplest version of moment as it does not need locales or moment-timezone or moment-range), it adds moment to the page automagically.
I’m interested to know if CG Pro users would be interested in more elements like this – which give access to various utility functions without having to have CG Pro itself on the page…
Have a play around with this new element and do share your thoughts!
Regards,
Keith
2 Likes
Already said in another thread, but I’ll say it here too. THANK you Keith for helping out with the date range list challenge, and doing so at lightning speed too! It’s highly, highly appreciated!!
For everyone else; Calendar Grid Pro is not a Bubble calendar plugin. It’s the calendar plugin. The range of things you can do with this that is otherwise a complete nightmare to do in Bubble (basically everything that even remotely touches upon timezones) is a breeze with this.
Keith’s eagerness to keep developing, and listen/react to customer requests (even when he has no obligation to do so!) adds a second dimension to it; this plugin will keep on getting better.
Eagerly awaiting the next big release!
1 Like
Hey @petter, glad the Date Range Builder add-on element worked out for you! The basic idea was something I thought would be interesting to build, but I didn’t think anybody needed it. So I’m glad you asked for it!
(In related news, Date Range Builder has a nifty trick in how it loads moment if it finds that moment is not available. This got me thinking about script loading in general and how one might go about creating a generic script-loading plugin and so I made that. It’s just about done. This isn’t something anyone’s asked for, but it’s cool. ALSO, it has a cool preview… the number of shots coming out of the gun is the number of scripts you ask it to load…
)
1 Like
Haha, that is a cool preview indeed 
I’ve found using plugins in reusables and popups can be challenging, and I suspect it’s often related to script loading (for example, you might be “forced” to place a hidden plugin element on the page outside of the reusable in order for it to load properly. I say “forced” as this is the perspective of a non-coder…).
Would that be solved by what you’re showing here, or am I misunderstanding its use?
2 Likes
You’re essentially correct. The Bubble plugin builder is fairly primitive and poorly documented. There are two different places to define scripts that should load. One sets scripts that should load in all pages that use any actions or elements defined in a given plugin (there’s no need for that really).
The other controls script loading for an individual plugin element itself. The second is often overlooked by plugin builders.
It’s basically an architecture bug. It’s very easy to create a malformed plugin that doesn’t do the right thing with respect to script loading.
Script loading in general is a big problem in web development and things like Bubble complicate it even more.
(There’s no real way to solve the problem, for example, of one Bubble plugin squashing another plugin’s required scripts. Basically, that’s not the way things work in “real web development” — you load just the scripts that you need. But in Bubble you might use plugin X that loads script Z and plugin Y that loads a different version of script Z and, by doing so, cause both plugins to malfunction. I suppose this isn’t a problem unique to Bubble, but it’s exacerbated in Bubble as many users have no idea what it is they are doing and no understanding of how/why problems like this occur… much less what to do about them. It’s tricky.)
Do you think it would be possible for Bubble to introduce a “script register”? For example, forcing a plugin editor to register a script and its version to the plugin, so that Bubble knows if other installed plugins are relying on the same script/different version of it. I realize it’s probably wishful thinking that scripts are versioned that clearly, but just thinking out loud here. This seems to be a big headache for plugin users in general.
A CalendarGrid question; is there a way to clear a Util4 date list from range from a calendar element? I have an scenario where it generates a list of Sundays, Mondays, etc out of all the dates selected. The problem is if a user has selected 7 days from a Sunday (0), say, so I’ll have 7 lists of weekdays each containing one date. But if the user then selects a new range, this time only 6 days from Sunday, then the constructed list of Saturdays should be empty.
I’ve tried:
- Place the calendars inside a group and resetting
- Clear Dates on CalendarGrid (only clears user selected dates, not constructed lists)
- Generate a list with empty start/end date (results in error)
Any clever hack to get this done without reloading the page?
Hi @petter: I can see why you would want to clear the Util 4 output (and, indeed, why one might want to clear any/all of the Util outputs) explicitly. (Though I’m pretty sure all of them can be cleared using various settings.) I’ll add that in a future version.
In the meantime, here’s how you can clear the Util 4 Constructed Date List: Just call the Util 4 action with a date range composed of 2 identical dates and then exclude the final timeslice. Like this:
This might seem “hacky”, but it’s the correct answer if you think about it. 
1 Like
(Aside: I’m pretty sure I intended for Util 4 to return an empty list if no inputs are provided, but this is currently bugged — if you don’t specify any range it throws an error when it attempts to create a range from null… whoopsie!)
1 Like
Just a head’s up that the Jump to date action will crash the calendar if the value is empty, leaving all days with the label Invalid date. Easy to get around, but may be worth looking into.
Good catch, @petter! Still working on the next version of CG Pro and will add error handling for that issue in the next version!
(The next version has some crazy new stuff like custom labels and indicators for date ranges… No firm ETA yet, but “soon”…)
1 Like
Brilliant, looking forward to it!
Hey there @keith. Is there a way to disable the automatic blocking of dates before the first selection when in range mode? Apologies if I’ve missed the info in this deep forum thread! Or could this be implemented in the upcoming version?
I’m looking to imitate AirBnB’s calendar a bit more, where if the user clicks on a date, and then a previous date, it just clears the initial date and creates a new range start.
Their calendar also lets users proceed with just one date selected. I believe I can implement that in the current CGP version though.
Screenshot showing both features:
