You are a rockstar! Thank you so much for all your help. My calendar function now works PERFECTLY for all the different combinations of DOW-blocks, minimum nights etc. Thank you!!
hi Keith,
is there a way to show in the calendar BLOCKED dates (red color) + another BLOCKED date with special status (another color)
I have this use case:
*I assign a status to appointments (pending, rejected, accepted)
- I show in CGP the booked dates (status <>rejected) for current user merged with booked dates from another user. Basically to show their merged calendars
- I want to highlight with a different color the date between the two users
I was thinking to use picked date for that purpose, but it’s dynamic and I cannot use it for a read only view. Thoughts?
ALSO, is there a way to disable CGP/make it not clickable? for my read only view. I don’t see it in the options.
Hello Keith,
Is there a way to have multiple people “checked in” on the same date(s)?
For example, if a hotel can handle 5 customers per day. When customers 1, 2, 3, and 4 books a date the date would still show it’s available. But once the 5th customer books, the date becomes blocked.
If this is an option, do all dates have to have the same “max” number of rooms, or can you set it up for an individual dates (“May 5, 2021 = 5 customers max”, “May 6, 2021 = 8 customers max”, “May 7, 2021 = 6 customers max”…)
Thank you
I think this plugin doesn’t let me run debug mode properly. I isolated the issue removing plugins, does anybody else has the same issue?
@natserrano it should run just fine in debug mode. Note that you may be using some other plugin that conflicts with Calendar Grid Pro. If you point me to the page in question, I can tell you more.
ah I think you’re right. it’s conflicting with the COUNTABLE plugin from zeroqode in the same reusable. But I Need BOTH, what can I do so they co-exist in peace like good brothers from a different mother?
Yes, see the “label dates” action, which I’m pretty sure lets you color a given date (and might also let you block it, but I can’t remember ATM).
Hey Keith, I am trying a particular use case with your plugin and I’m not sure if I can achieve what I want to do. I was wondering if you could let me know if this is possible?
Basically I want the user to be able to select ranges of dates, so monday to friday every week for 3 weeks.
I know this can’t be done solely by the plugin so what I have is a calendar to pick the day, a drop down holding the amount of weeks and a repeating group where days of the week can be selected.
The user selects for example 2 weeks
The user selects monday, tuesday, wednesday, thursday and friday.
and the user selects the 1st of January.
What i have been able to do is use the action to set the calendar to individual dates covering the above specificiations using the multi date mode. The only issue I have is that the user can unselect some of those dates.
What I think I need is a combination of single pick and multi pick or even an event “Calendar Date is unselected” to be able to accomplish what I would like.
Watch this loom to get a better idea if my explaining is rubbish 
Hi @keith , thanks for all your work on the plugin, I’ve watched a few of your videos and it looks great. Just signed up to see if it can help me solve my bubble challenges. Is there anything resembling a manual or structured help guide? I want to learn how to use it and it has many features… how do I start? Thanks
(FYI - I’m building an equipment rental app and am already hitting problems with users in different timezones not being able to search for items within two dates correctly)
Hi @madicav82 : This error will happen if you fire an action at Calendar Grid Pro, but Calendar Grid Pro is not yet initialized. You can’t (for example) fire an action at Calendar Grid Pro on Bubble’s “Page Loaded” event.
Calendar Grid Pro relies on a rather large library and loading of this library is done asynchronously and in a non-render-blocking way. So, by design, Calendar Grid Pro is never assuredly initialized until a short time after the Page Loaded event.
So, if you want to fire events at Calendar Grid Pro at the first possible moment when the plugin is initialized, you use the “Calendar Initialized” event.
Instead of doing such things on “Page Loaded”, do them instead on Calendar Grid Pro’s “Calendar Initialized” event.
For a discussion of why my plugins work this way, see my video here: Parallels: Date and Date Range Transformer (Now with Video Demos! 
) - #10 by keith
ASIDE: Note that there’s no need to fire Jump to Today at Calendar Grid Pro. If you don’t supply a starting date for the calendar, it displays the month containing “today” by default. Similarly, there’s no need to fire “Clear Dates” at CG Pro when it’s first initialized, as there’s no selection to clear.
Best Regards,
Keith
Hi @andrew18, for better or worse, the videos in this thread are the “User Guide” type documentation for CG Pro. I realize that there are some learners who are more written-documentation-based – and I would count myself amongst that crowd! – but since most folks won’t RTFM, I just do videos.
Note that there is a LOT of information conveyed in the documentation fields within the plugin, both in the main element interface and in the actions themselves. (Click the little “documentation” button below an option to expose this.)
But I’ve not created a written version of a document that covers things like, “to model X picking scenario, configure CG Pro as follows.”
A handy collection of video links:
Formatting your CG Pro element (1): Calendar Grid Pro: Calendar Generator, Date Picker, Date Range Picker Like Airbnb, GRUPZ.com | Now at Version 1.6.1 - Fixes a Safari Compatibility Issue, minor bugfix - #15 by keith
Timezone awareness and more formatting options (2): Calendar Grid Pro: Calendar Generator, Date Picker, Date Range Picker Like Airbnb, GRUPZ.com | Now at Version 1.6.1 - Fixes a Safari Compatibility Issue, minor bugfix - #17 by keith
Day of week blocking: Calendar Grid Pro: Calendar Generator, Date Picker, Date Range Picker Like Airbnb, GRUPZ.com | Now at Version 1.6.1 - Fixes a Safari Compatibility Issue, minor bugfix - #26 by keith
More styling options: Calendar Grid Pro: Calendar Generator, Date Picker, Date Range Picker Like Airbnb, GRUPZ.com | Now at Version 1.6.1 - Fixes a Safari Compatibility Issue, minor bugfix - #68 by keith
Styling “not in month” dates: Calendar Grid Pro: Calendar Generator, Date Picker, Date Range Picker Like Airbnb, GRUPZ.com | Now at Version 1.6.1 - Fixes a Safari Compatibility Issue, minor bugfix - #69 by keith
Legend and Status area options: Calendar Grid Pro: Calendar Generator, Date Picker, Date Range Picker Like Airbnb, GRUPZ.com | Now at Version 1.6.1 - Fixes a Safari Compatibility Issue, minor bugfix - #70 by keith
An overview of Dates in general, talk about timezone awareness, and an overview of CG Pro’s Utility function actions: https://vimeo.com/353461214
Best Regards,
Keith
1 Like
Thanks Keith - just bringing together all the video links really helps! Thank you.
1 Like
Hi @chad5, and sorry for the delay in responding. It took me a bit to understand what you’re trying to do and I had a bunch of suggestions for you, but if I understand your video correctly, you just want to use CG Pro to select this initial date, and you then once that is done, you don’t want the user to be able to interact with the calendar (in terms of picking dates).
Is that correct?
If so, this is what “View Only” mode if for. I assume that how you are turning your dates green is by using the Set Selection action (and you are sending a list of dates to the “Select Multiple Dates” field), correct?
Once your original date is picked, where you are then setting the selection, just use the Set Mode action to change CG Pro to “View Only” mode (you can do this either before or after the Set Selection action, it doesn’t really matter):
Of course, after doing that, your CG Pro element will not allow picking/editing of the selected dates. You can re-enable that whenever you need to by just changing the mode back to one of the other modes.
Now, it may be that what you’re trying to do here is let the user repeatedly define sets of dates that they want. You can do this of course, and you could indicate those (previously selected) dates by adding them to the list of blocked dates in CG Pro’s main interface.
This sort of interface starts to get a little not-so-clear-to-the-user, but you can do that. (In fact, “blocked dates” can also be used purely as an indicator. Note that there’s an “Allow Blocked Date Selection” option in the CG Pro main interface. It’s up to you what the “blocked date” coloration means.)
I hope this helps!
Best Regards,
Keith
@keith Whilst you are working through the forum posts, can you give me a pointer on this… I want to use CGP to support an equipment rental business. I’d like to enable users to select multiple items and to combine their blocked dates. What is the best way of storing multiple lists of blocked dates? (1) On the data object as a field or (2) a series of searches (3) something else?
Ideally if they deselect one it would be able to reverse the compilation of the blocked dates list (so I can’t really just populate a custom state and have it deduplicate the list of dates as it has no record of the history of how it was built). Any tips?
Hey @andrew18, the short answer is that:
-
Save the dates that your individual rental items are booked as date ranges. (Ideally, you would consider each range’s start to represent the date on which the item is checked out. Each range’s end will represent the date that the item is checked back in and is once again available for rental on that day.)
-
Save these ranges on a list of date range type that is either on your Rental Item itself or on some sub-thing of the item. (e.g., Personally, I’m partial to having a Thing called Calendar and a Calendar has Bookings [or Rentals or Blocked Dates or… you can call it whatever you want]), but it’s a list of date range type.
You could also just have the Bookings list directly on the Rental Item (the choices you make here affect the way you’d do various types of Searches).
Anyway, for the sake of simplicity, let’s say you wind up with a Rental Item that looks something like this… A Rental Item has fields including:
-
Type(a complex Thing with all the relevant specs for this particular class of item, which might also include the daily rental price) -
Inventory ID(some way to connect the virtual Rental Item in the database with the physical item in the warehouse) -
Bookings(a list of date ranges)
- Note that Calendar Grid Pro doesn’t care if the list of date ranges you send it via the Blocked Ranges field overlap, have duplicates, or whatnot. Internally, it just converts all of the ranges to the individual calendar days that make up the ranges and then that array of dates is de-duped. This becomes the array of blocked dates. (All of this happens incredibly fast and you need not be overly concerned with how big the list is that you are sending it!)
So now, your user comes along and you have an interface for selecting items they want to rent. That interface will assemble a list of Rental Items (representing, for example, a Tractor (Inventory ID: something), a Backhoe (Inventory ID: somethingelse) and a Personal Massager (Inventory ID: pleasuremaster2000). Let’s call that list of Rental Item type our Desired_Item_List.
Now the list of date ranges for which ANY of those items is already booked (and, hence, not available to the user) is just:
Desired_Item_List's Bookings
this will be a list of date ranges that is basically the concatenation of the booked date ranges for the Tractor, the Backhoe and the Personal Massager.
And if we put this into CG Pro as the value of the Booked Ranges field, CG Pro will show us all of the dates for which all three of those items are available for rent. (Those will show as available dates, and they will be pickable if we are in Single, Multi, or Range Pick mode.)
Similarly, the dates for which any of those three items is not available will appear as blocked (and will not be pickable).
So, easy peasy.
@keith Can we search listings in a marketplace by date with this plug in? Or is this only for selecting the listing within the marketplace, then picking the date?
Hey @keith, sorry about the delay.
We had our attention redirected for a bit.
Using the calendar and love it.
I have one request, could you add an option/checkbox that could turn on and off making a deselect a click.
My use case is that I have a bunch of dates I want to fill the calendar with which I can currently do with an On Click event. Let’s say in this case it is 14 non consecutive dates representing a schedule. When I click a date I want that schedule to populate out from the day I have clicked on, which I am currently doing fine and works whenever I click a day not in that schedule. If I do click a day in that schedule it simply removes it from the schedule, what I actually want it to do tho is treat it as an On Click event and populate the schedule as it would have if I clicked a free day.
Well I figured out how to do it in an isolated way, but not how to apply it to a whole Repeating Group.
for example, I have a Repeating Group of users who meet 2 criteria: one for a specific role of user and second that they are qualified on the aircraft type.
Then, within the actual cell of the repeating group I have a button with the User’s name on it which when you click it, auto-binds them to the booking as the Pilot. However, on that button I placed a visibility condition:
Current Cell’s User’s Bookings: filtered (date range overlaps with the bookings selected date range) first item is empty
Meaning, essentially, if that comes back with no items in the list, it means there are no overlapping bookings, so the button should be visible.
If it comes back with an item, the button will remain hidden.
So I was able to use that same condition on the buttons for the Aircraft availability as well. I have only done a brief test and it worked for the one booking I made. I went and created another booking with an overlapping timeslot and that user and aircraft did not appear on the page…so that’s progress.
I thought I would have been able to apply it to the repeating group as a whole, but apparently that doesn’t work with Lists or something, I don’t know. The “User Booking Range” (which is the list of date ranges) field literally does not even show up as an option when I do “search for Users” as the content source for the RG then set up the constraints.
Anyway, I don’t see a free version of Calendar Grid and I’m not going to pay $100 for something I don’t even know if it does what I want, so…yeah. Maybe later once/if I am actually being paid for this project because right now I am only working on it out of the kindness of my heart for the company I’m working at lol.