Hi @wfarrell73, it doesn’t support this exact use case just yet in the current version, sorry to say.
(Though your interface there is pretty interesting. Your “number of classes” indicator… how many dots does that grow to? Does it turn into a number or something at some point?)
Interesting question. Having worked a lot on calendars, i see this design a lot and I always think is a gimmick. In any practical application you’re going to have so many events that i don’t see how this works.
UX wise I think it’s just an indicator of how busy your day and week looks likr having a quick glance. It’s not supposed to give you other info than that.
In the end, you will need to check the details of that specific day either by clicking, hovering or tapping.
I don’t like very much this method because it just bloats the calendar with dots and colours and eventually you will become blind to it.
I prefer having a day with one dot when there are events. Maybe changing in intensity depending on how busy the day is.
Same here. @JonL’s observation that maybe one could do this like a heatmap is interesting.
Hi Keith, thank you for responding back. It just a design that I like and wanted to implement for one of my project.
Two quick things about Calendar Grid Pro: First, I published a bug fix update that fixes a bug with Day of Week blocking, removes a couple of unused exposed states, and allows minimum range pick length to be set to zero.
Second, here’s a new video about Calendar Grid Pro: An introduction to Day of Week (“DOW”) blocking and how it works. I show the various DOW blocking options, how you can select days that should be blocked and talk about different use cases:
The demo page I’m showing in this video is here (run mode):
The editor for this page (anyone can view) is here (and note that, the 3 key workflows this page is about are highlighted in blue:
https://bubble.io/page?type=page&name=dow-blocking-cg-pro&id=timezoner&tab=tabs-1
Happy Bubblin’!
Keith
Published another little update to Calendar Grid Pro. Version 1.0.2 fixes a bug with handling of certain “exotic” Locales and exposes 3 new states: Month Displayed (“Parallel Date” in User Zone), Timezone ID in Use, and Timezone ID from Browser.
Calendar Grid Pro v 1.0.4 is now available. I made a bonehead error (related to Bubble’s minification bug with certain plugins) and 1.02/1.03 were accidentally published in a way that breaks functionality.
Please upgrade to 1.0.4.
Cheers,
Keith
Previews of coming attractions… Hmm, what are we looking at here?:
That looks sick Keith! Very noice!
On a separate note. You need some Chrome tab management 
I MUST HAVE ALL OF THE WINDOWS OPEN!!!
Because information and stuff.
I just published update 1.1.3 to Calendar Grid Pro. This update includes a couple of minor bug fixes for features I introduced in 1.1. In the video below, I do show and tell about 3 new features:
Check it out!:
https://www.loom.com/share/289b97d00f214faf8a1cee98a57ed010
Hi everyone,
I just wanted to leave a comment on here to thank @keith for making this plugin and for all the help he has given me. Calendar Grid Pro (CGP) has completely transformed my app and allowed me give much more functionality to my app.
I use CGP as both a calendar and a date picker in my holiday app. I can show DOW, booked days and public holidays all in one view. Heres a few screenshots
Easily worth the $10 a month, so I encourage you to use keith’s demo and have a play for yourself.
Once again thanks Keith for all the hours you have put into the plugin
Sexy!
Hey @dudders9, how did you create “Book Time Off” feature?
Hi @wfarrell73, This can easily be done with a combination of JavaScript and Repeating groups. This way, you can fully customize the calendar to appear and function exactly as you want. See a sample of what I did HERE
The origin of my plugin is this type of thing, of course. But doing this with repeating groups is really bad, performance-wise (because they are just not optimized for this type of application). Also, you very nearly cannot build the dynamic range picking stuff (and there’s no way in bubble to do cute stuff like the hover-on-range picking stuff that CG Pro does).
Basically, I built a really cool SaaS that’s all about calendaring and date picking and stuff and built it in Bubble. But it’s just proof-of-concept (even though it has lots of paying customers). To get it to that next level, I’ve recoded all of the learnings from that into a plugin for performance and ease-of-maintenance.
And I’ve made that same plugin available commercially to others who have a similar need.
It’s definitely worth understanding how to do the custom calendar stuff with repeating groups in Bubble – it’s very instructive (in terms of upleveling your Bubble skills, understanding date/time objects… but it’s also very informative about the limits of built-in elements in Bubble).
When I first went to build my app, I was like, “Surely there is an element like this that can do this stuff without me having to bang my head against the desk for several months.” But this was not the case.
And, in actuality, at the time I started building GRUPZ (my app), there was in fact NO solution in ANY language that was anything like what is offered in Calendar Grid Pro.
Airbnb had not yet open sourced their calendar system (React Dates) and their calendars at that time were not very well thought out. React Dates came out while I was working on GRUPZ and did not have the single-pane range picking like I pioneered in GRUPZ. It was only after I’d been showing that around that someone working on React Dates was like, “Oh yeah, you don’t actually have to click two date inputs to select a range.”
So yes, what I’m saying is that I, in fact, invented this type of range picking. It was super duper hard to prototype in Bubble – almost not worth the effort, but I learned a bunch of other stuff that made it possible to build CG Pro. Sometime soon, I’ll be introducing the Time Grid companion for that that allows interactive single-pane picking of nearly any type of time interval. It’s good stuff.
Again, you can build it in Bubble, but it will not perform very well, especially on mobile devices (and also you have to get your head around timezone and locale-awareness – which shouldn’t be stuff that people should have to learn unless they are core to one’s app).
Hopefully won’t take too much longer. There’s actually a funky bug in plugin editor that made me have to take it out of my working environment. But I think that’ll get fixed fairly soon. There’s some pretty out-there interface stuff that’s possible with it (like completely arbitrary time intervals and steps, flow cells left to right or up and down, etc., etc.) and like CG Pro, it’s super-fast.
