Hi @nicedwar – first, thanks for using CG Pro! CG Pro does not have the earlier date pick behavior that you’re seeing in Airbnb. I could add it for the next update.
One thing that’s already in the next version is similar: You can do bi-directional picking (e.g., allow user to click one date and then if next date is earlier, that defines the range).
I can refine that with an option that does what ABB does.
Cheers,
K
Hi @keith,
You mentioned earlier that the new version will allow to set the picked dates of a Calendar Grid element. When do you expect to release this version? 
Hey @petter, I don’t have a firm ETA for that. Still finishing and testing the “stripes” (date range indicators) feature that is also in that update.
(If the Bubble plugin editor wasn’t so stupid, it’d be easy for me to push an update for you, but the new “Set Selected Dates” action has a pretty elaborate interface and you can’t just copy-paste an Action.)
Totally understand!
I hope Bubble listens to your plugin editor woes, as they do seem to be a source of frustration 
Well, I’ve kind of gotten it sorted a bit: The integration with GitHub that was introduced a while ago helps a bit. I think, going forward from the current version, I’ll be able to prevent the plugin from breaking.
(For any other plugin devs who might be listening: All of the parts of a plugin are stored in a folder hierarchy where each folder has a 3-character ID. So, for example, under “elements” you’ll find a folder for each plugin Element. The name of those folders are the identifiers for the Elements.
So, if you manage your plugin development like I do, where you have one plugin for your private development version and then your public (either open source or commercial licensed) version in another plugin, you run into the following problem:
When it comes time to copy your private element, action or whatever to the public version, pasting the new element into the public version results in a NEAR-clone of that item. While all sub-folders of the copied element are the same and will have their “old” IDs (their folder names remain unchanged), the top-level folder gets a new name.
And so, this new copy of the plugin has a different top-level ID from the old one. If you then delete the old plugin and publish, apps that use that element cannot make the connection between the old version and the new version, resulting in “missing element”.
Of course, users can fix this by right clicking on those missing elements and “replace with another element”, but this is a real pain.
The solution seems to be to – before publishing – sync the updated plugin package to GitHub and change that top-level directory name back to the old identifier and commit the change. Back in the plugin package, synchronize from GitHub. Now the “new” version of the element can be seen by Bubble apps as the same one it was previously.
Bubble’s method of handling the identity of various plugin components makes certain things impossible (or at least very difficult to achieve) without breaking things. (One example of this is you can’t - in the same plugin package - copy and paste an element to create two variations on that plugin element. The new element will have a unique top-level ID, but all of its actions retain the original action IDs, causing them to be confused with the actions of the original plugin and leading to unexpected behavior. This would also seem to be the explanation for why the plugin editor doesn’t have copy-paste for individual actions of action fields. It’s all kind of poorly implemented.)
Just a note that Calendar Grid Pro version 1.9.4 is now available in your plugins tab! Version 1.9.4 adds several new Actions and capabilities including:
Set Selection Action: Allows you to programmatically set the “selected” dates displayed in CG Pro. You can indicate individual dates, date ranges or multiple non-contiguous dates, depending upon CG Pro’s pick mode. You can optionally trigger the “Date or Range Picked” event upon setting the selection.
Util 5: Construct Date Range List action: Create a list of date ranges from two lists of Start and End Dates, or from a designated time interval. (This is the built-in version of the feature previously enabled by the separate “Date Range Builder” element.)
"Note Labels": You can now set a text note within any given calendar date, date range, or by day-of-week, and optionally change the color of those labeled dates. This is useful for indicating nightly pricing, holidays, or other info. Use the “Set Note Label” action to create note labels. Note Label styling is controlled in the main CG Pro editor interface.
Bi-directional Date Range Picking: See “Allow Earlier Pick (Range Mode)” option under ADVANCED OPTIONS. When enabled, date range picking can be bi-directional (that is, the user can click a “start” date and then pick either an earlier or later date to select a range).
Video demos to come. (@petter, here’s the Set Selection and Date Range construction features you’ve been waiting for!)
Howdy, @nicedwar! I included your feature request in CG Pro 1.9.5. Under ADVANCED OPTIONS, see “Early Pick Restarts Picking”. Set it to “yes” to get the behavior you desire.
Hot on the heels of Calendar Grid Pro 1.9.4, I just pushed 1.9.5 which adds a new advanced date range picking mode, “Early Pick Restarts Picking”. When this option is turned on and CG Pro is in range mode, bi-directional picking is enabled… But dates earlier than the initial picked date force picking to restart (and don’t produce the hover state effect that would lead a user to think they are going to select the “backward” range). So, it’s a special case of the new “allow earlier pick” Advanced Option.
This is the same range picking behavior seen in certain recent versions of Airbnb’s range picker.
So now there are more options than ever to customize any sort of range picking scenario. Woot!
Awesome work @keith!
Being this excited for a plugin update is probably unhealthy. Is this a breaking change? I’m using the element all over the place, so it’s gonna take me some time to replace them all.
Will the Date Range Constructor element disappear with the update? I have a bunch of instances of that too.
Hey @petter: depends on what version you use in production. It’s a non-breaker from 1.6.1 and later, I think.
The plugin identity problem has been solved since around that time (as I described in another video for plugin builders).
Just upgraded from 1.9.2 with NO PROBLEMS WHATSOEVER, just to be clear
There may not be a great workaround depending on what you’re seeing, @petter. You shouldn’t be getting missing elements, but I’m wondering what things are showing up missing or “changed”. Can you screenshot issues to me?
Ah, haha, I just realized I wrote “with problems”, when it was supposed to say “with no problems”.
I’m sorry @keith, it’s been a long day, I guess I’m more tired than I thought if I had any issues, I would have described them better than that. Hope I didn’t waste your time with this
Oh, HA HA! Glad you were able to move with no issues! 
@keith Your plugin looks great and does one of things I need it to do (block multiple date ranges) But does your plugin support viewing & selecting a month & year view similar to ‘air date/time picker’ by @seanhoots? There are times when my users will need to select months or years regardless of the individual date.
Also on a UI/UX standpoint, it would be great if I could update all my date pickers to this rather than having multiple different pickers. Right now if I was to switch to your plugin, my users enter birth dates and it would take a while to have to scroll back month-by-month back to the 1960’s to select a date.
Thanks!
It’s not really designed for that, but you can make it do that as you can programmatically change the displayed month (via set displayed date).
CG Pro is mostly a (quite superior in most respects, mind you) alternative to Airbnb’s “react-dates” library.
Also, it’s not a “drop in” replacement for a certain date picker, but instead is a drop in replacement for this.
Just pushed Calendar Grid Pro version 1.9.6 which is a bug fix release. (Bug fixed is apparently nothing that was bothering anybody, but I came across it building a demo recently. It fixes an issue whereby CG Pro would not dynamically update under certain conditions.) Additionally, this version is about 10% smaller in terms of download size. (Not a huge breakthrough, but significant enough to warrant a note.)
As a reminder: Calendar Grid Pro is simply the most advanced date range picker you will find anywhere, for any platform or application framework – code, no-code, or otherwise. There’s no other tool that provides the depth of business process functionality vis-a-vis date/range picking available anywhere within our light-cone.
(Date range pickers are, of course, a rather esoteric thing. But, oddly, this is one of those situations where Bubble has an advantage over any other framework. 
)
does this allow for the creation of time slots??
Short answer: Sort of.
Longer answer, @sniphairmail: What you really want is probably a thing I’ve been calling “Time Grid Pro” which is all of the cool things that CG Pro does, but for any arbitrary time span. For lots of complex reasons, that plugin does not exist yet.
However, there is a utility function in CG Pro that generates time ranges from any arbitrary range and this can be used to generate any sort of arbitrary “time slot” you would like. At that point, you can design whatever interface Bubble enables you to build. (Though you can’t build something quite as sexy as CG Pro right inside of Bubble… though CG Pro was, in fact, prototyped in Bubble.)
