CALENDAR GRID PRO

Calendar Grid Pro

Published April 2019

    •    Updated this week

Plugin details

Now at version 1.9.5: New features described below:

Calendar Grid Pro is a high-performance, mobile-friendly, responsive custom calendar display element, date picker, multi-date picker, interactive date range picker, and much more.

Calendar Grid Pro was designed and built — from the ground up — specifically for Bubble and for the Bubble developer seeking advanced date picking and date range picking features.

Ideal for travel/lodging booking sites similar to Airbnb, VRBO, etc., or any application that requires selecting or displaying date ranges.

Calendar Grid Pro delivers advanced date picking features and performance that rival — and exceed — Airbnb's "React-Dates" library, in a Bubble-friendly format, written in well-optimized code.

Key features include...

Four dynamically-selectable modes:

* Create customized "view only" calendars
* Single date picking
* Interactive, "single pane" date range picking
* Multi-date picking

Highly-customizable look and feel:

* Use the integrated display/navigation header, or build your own for complete control.
* Customize blocked, available, picked date styles with flexible but tasteful options.
* Animated hover and picking effects.
* Customize fonts via Adobe Fonts/Typekit or Google Fonts.

Flexible date blocking options:

* Display single dates and/or date ranges as blocked.
* Supply date ranges as date range type or as a list of start and end dates.
* Show end date of ranges as blocked or unblocked, depending on your use case.
* Unblock start dates when picking ranges, depending on your use case.
* Block arbitrary weekdays with support for advanced functions like "changeover" days.

Timezone and Locale aware:

* Display, select and manipulate dates in any timezone
* Supports more than 100 languages and locale date preferences. Automatically detects browser language preferences, starting day of week, date display, and date formatting preferences based on the user's preferred locale/language.

Advanced date range picking features:

* Set minimum/maximum nights based on date.
* Returns selected ranges as date range AND as a list of individual dates within the range.
* Iterate over selected dates to quickly perform operations like summing daily/nightly rates for price estimates, looking up date-based info, etc.

Exposes LOTS of internal state information, including:

* Picking mode, pick status, timezone, locale, displayed dates, selected (picked) dates/date ranges/dates inside range, date hovered, dates blocked, ranges blocked, localized date formats, displayed month, localized weekday names, and more.

Highly-performant, modern, low-dependency code:

* Speedy performance even on lower-end mobile devices.
* Written in modern, well-optimized JavaScript with minimal dependencies on external libraries (leverages moment/moment-timezone for date manipulation, timezone handling and internationalization -- no dependencies on frameworks such as React or bloated libs like React-Dates).
* Created as a drop-in replacement for the Bubble "custom calendar" technique... but radically faster, more full-featured, and code-free.
* Developed for — and used by — Bubble-powered vacation rental app grupz.com. Designed for real-world use cases. No abandonware.

New in 1.9.5:

* New Range Picking option "Early Pick Restarts Picking" to emulate certain versions of Airbnb's Date Range Picker. (If user starts picking but then picks an earlier date, picking restarts from that date.) This is a variation on 1.9.4's "Allow Earlier Pick" option and is found just underneath that option in Advanced Options.

New in 1.9.4:

* Set Selected Action: Set the current date selection in CG Pro using this action.

* "Note Labels": Add a custom label to any date displayed in the calendar (useful for indicating prices, holidays, and whatnot.

* New Utility Function for building a list of Date Ranges.

* Enable bi-directional date range picking (allow selection of earlier dates when in Range Mode).

* Probably a bunch of other cool stuff I forgot about... :)

Other recent feature enhancements:

* Option to exclude "outside of month" dates with new formatting options.
* New Footer option with auto-legend and "status" label feature.
* Custom fonts feature: Customize any text component with Google Fonts or Adobe Fonts/TypeKit fonts.
* Four new ultra-powerful utility actions for creating/parsing dates and date lists, formatting dates and computing time differences. Mind-blowing date list creation features.
* Bug fixes that repair bugs that hardly anybody noticed. ;) (Fix for slashmode formatting problem.)
* New "iteration complete" and other notification events.
* New actions for updating legend/status area labels.
* Under-the-hood improvements and fixes.

The baddest-ass date picker just got even more bad-ass. BOOM GOES THE DYNAMITE. GET NOW.

$100

One time • Or $10/mo

3.8 stars   •   10 ratings

577 installs  

This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Keith from GRUPZ

Joined 2018   •   13 Plugins

View contributor profile

Instructions

Install plugin, drop a Calendar Grid Pro element in your project and start configuring. Each option is extensively documented inside the editor (click "show documentation"). See Service URL for tutorials, discussion and tips.

Types

This plugin can be found under the following types:

Element   •   Event   •   Action

Resources

Support contact

Documentation

Tutorial

Rating and reviews

Average rating (3.8)

Why can't I add an initial end date?

January 5th, 2025

Amazing!!

September 15th, 2024

This plugin does ALOT! I initially downloaded just for the calendar feature then found myself using many other features I didn't even know it had initially. I was able to delete a few other plugins doing specific jobs that this one could accomplish all in one. Bubble is very limited when it comes to date range calculations, sorting them, and very specific time zone operations. If you are making a scheduling app for timeslots (especially location based bookings) this plugin makes it all possible combining the need for multiple plugins into ONE. Amazing work and hats off to the developer!

Error since upgrade to 1.9.5 version

October 11th, 2022

Hello,

Since I update CGP to 1.9.5 version, I’ve this error message :

The plugin Calendar Grid Pro threw the following error: TypeError: Cannot read properties of undefined (reading ‘map’)
at a.data.funcClearDates (PLUGIN_1554923664903x211854095567290370/Calendar-Grid-Pro-initialize–Calendar-Grid-Pro-.js:3:77099)
at e.eval [as reset_fn] (PLUGIN_1554923664903x211854095567290370/Calendar-Grid-Pro-reset–Calendar-Grid-Pro-.js:4:19) (please report this to the plugin author)

Can you help me please ?

Very good

May 3rd, 2022

Very flexible calendar, great for marketplaces

Threw an error & broke my app

February 23rd, 2021

On every version of this plugin I've tried, here's what happens:

- the visual element doesn't display in preview
- the debugger throws an error (1614017667697x205442373868927940) which the Bubble Support Team has translated as:

"TypeError: a.data.funcClearDates is not a function
    at eval (PLUGIN_Calendar-Grid-Pro-reset--Calendar-Grid-Pro-.js:3:8)"

- The one workflow it interacts with (create a thing and display it in a container with the calendar in it) does not complete when this plugin is enabled.
- It has caused a "sync" issue after uninstalling it (I don't even have a plan that supports multiple versions of my app) which essentially forces me to keep it installed. Bubble team is still trying to figure it out.

I HIGHLY suggest AVOIDING this plugin at all cost.

CG Pro did not "break your app". If a plugin fails to load, there are several possible explanations, but the current version you will find will work fine for you if you drop it on an empty page. We can say that will nearly 100% surety.

That the plugin fails to load in your specific page is probably due to a conflict with another plugin that is also attempting to load moment and related libraries.

If you were to point me to an example page that exhibits this error, I could help. (But the solution is probably to get rid of other moment-loading plugins.)

That Bubble may have an error in their plugin management system that's keeping you from uninstalling CG Pro is possible, but not an issue I can control.

However, that's also no issue as CG Pro doesn't affect any pages on which it is not used, so there's really no harm in having it installed in a project. Just unsubscribe.

If you've thrown a similar tantrum about CG Pro in the forums and I haven't seen it yet, my apologies. I'm working on a different plugin project at the moment and haven't been closely keeping up with the forum. (plugin author)

February 23rd, 2021

•

Keith from GRUPZ

Oy, vey... couple of things...

1. I had already suspected the same about the moment.js library conflicts, so I deleted every one of my plugins but CG Pro. The issue wasn't resolved.
2. Bubble instructed me to reach out to the plugin developer.
3. Yes, it may end up being an issue on Bubble's side. In that case, it's possible I would gladly give this plugin another try and probably update my review. However, I will not be giving it another try, and unfortunately that means I won't be updating my review. I've also already subscribed to an alternative plugin.

If it turns out that the issue is on Bubble's side, you might be able to ask them to remove my review, or "tantrum" as you put it kindly.

Best of luck.