{Plugin} - Full Calendar Scheduler Suite

I think @boston85719 would be able to share some insights with you about this - he’s worked out the google calendar API refresh token thingomy :slight_smile:

HOORAY!

Screen Shot 2021-05-13 at 10.10.15 PM
@equibodyapp @yorgio1024

The TimeSlot Generator is live!

This element allows you to create time slots based on a saved availability schedule on the fly


Display these in any time zone for your user and watch their times shift appropriately.

This element also works to block out time slots that are already booked based on a set of events you feed it.

check it out here

https://jaredgibb.bubbleapps.io/timeslottester

soon to be able to create any type of recurring event using RRules! This rrule would be saved to the dB on the event and when fed to the calendar would auto populate the events on the calendar where they should be. Save a list of existes and block out desired future events. Based on this library.
http://jakubroztocil.github.io/rrule/

You’ll also be able to set your time slots with an rrule string

Things should be more flexible and powerful than before!

Timezone aware FullCalendar + Timeslot/Repeating events generator + Timeslot cleaner

Create your time slots in America/Detroit and display them in America/San_Francisco. Think parallel dates

The next thing to do is update the damn documentation!

@lantzgould resource view is live

2 Likes

:eyes:

Great work, @jared.gibb!

1 Like

Thank you!! I have a feeling if I can grind it out, I can cut down from 2 libraries to 1 library for the time slots.

Rrule is powerful but a little tricky to get used to!

Amazing! Looking forward to giving this a good test out next week :smiley:

1 Like
  • Dynamic intelligent timezones
  • Recurring events (nearly ready!)
  • Dynamic event colors

Be on the lookout for the addition of recurring events on the calendar and a souped up recurring events creator!

This way instead of creating Timeslot on the fly you can save a recurring event to your database and just load the recurring event into the calendar. You save a string that looks something like this
DTSTART;TZID=America/New_York:20210515T202139 RRULE:FREQ=WEEKLY;COUNT=30;INTERVAL=1;WKST=MO;BYDAY=MO,WE,FR;BYHOUR=6;BYMINUTE=0
EXRULE:FREQ=WEEKLY;COUNT=1
EXDATE:20210601T202139Z

and it creates the following type of events

An event will appear on the calendar every week on Monday, Wednesday, Friday for 30 times starting on may 15th 2021 @ 8:21:29 except for the instance on June 1st

And if an event is booked or needs to be blocked off you add this and create events in your dB accordingly

Next up would be iCal parsing I guess to bring in recurring events from other sources. Then tying in the google calendar directly instead of with the current workaround elements!!!

Get it while the price is low!!!

Sneak peak on updates in progress

Btw… the dynamic timezone refers to how events are displayed. Input events in your timezone and be sure they show up in the right spot in any timezone!

Well the first two are live but the last on, that’s the kicker

Now with dynamic colors instead of saving a color to the database you just save an event with an identifier and then set the identifier color in the element input fields.

This way you can dynamically update event colors on the fly!

[update]
After the realization that I havent explained the delimiter setup for this plugin in the docs yet, thanks to @marksrunge here, i decided to make this quick video to demonstrate how to use/setup the delimiter

and here’s my rationale.
It’s tricky at first but once you do it twice, you’ll find it to be super simple. the idea here is that i wanted to allow for several data sources to input data. your DB plus the scheduler. In this journey i found that sometimes a title (or other fields) have a comma in them and when joining data sources this way it presnts issues.

so
for any field that may have a comma (be aware event colors always require this trick) use this trick

1 Like

Can’t wait for next update! :slight_smile:

Also just letting you know I’m getting these in the issue checker even those I haven’t checked the boxes to use these sections :slight_smile:

image

I’ll fix that ASAP. Sorry.

@equibodyapp , i have checked these settings. if you update the plugin and refresh the browser it should be fine now !

Screen Shot 2021-05-17 at 6.23.15 AM
Screen Shot 2021-05-17 at 6.23.04 AM

All good! Thanks @jared.gibb :slight_smile:

1 Like

Today’s updates!

so much action here ^^^^

a new action was added to support languages not quite displaying correctly, such as certain dialects of Bosnian. I added a new action called “set column header” to address this. Now you can name the days of your week anything!

if there is enough request i can add the option to change all the buttons and calendar month formatting too!

check it out. i used silly names for an example here

you can also use any moment.js day formatting string

most of the heavy lifting was completed today (for recurring events) with this new element and the previous. The RRule generator and the timeslot generator. today’s piece is on the RRule generator though.

this element will output a RRule for your calendar events to easily create flexible recurring events on the calendar. its as easy as setting your recurrence rules, saving the string to on the eevent, and loading this event type into the calendar.

recurring events will be loaded in their own field area most likely
if someone was interested this could also be used to output the list of dates for your event!

last thing to do will be to make RRule events an option for the calendar events!

3 Likes

I thought a video showing how to set things up would be helpful. Here is the first of the collection.

3 Likes

So the previous video wasn’t as helpful as i wanted. here’s the first in a series. I will just continue to evolve this example and will branch off for a new one when needed

I can’t wait to get to the videos showing off the scheduler / time slot generator!

@nathan.colin53 @zhadz @marksrunge
The most basic example of displaying events and creating events.

custom calendar header and controls

add events and display event info

1 Like

Hi Jared
Thanks for the videos. I’ll watch them and follow your examples.
BTW, I have multiple collapsible groups and each one is visible based on a state.
So the floating menu to the left sets the states.
Unfortunately the Schedule group also uses Bubble’s Full Menu, so that would mess up your calendar even if I remove the duplicate Full Menu for the Appointments (see screenshots below).
What I will do is have a separate page for the Appointments using your plugin and have the same floating menu but the menu on the Appointments page will go to the original page and set the states accordingly.
So that means your plugin will be on it’s own page but that will be transparent to the user.
Please let me know your thoughts.
Thanks, Mark.

Thanks Jared. Great plugin. Highly recommend this plugin. Jared was really nice and even helped me to set it up. All recommendations!!

2 Likes

an exciting update just pushed out today. the recurring event generator

see how it works to create a list of events

here

@marksrunge I’m glad to hear the videos are helpful. I’ll keep making them. I think we should keep working together to get you down to using only 1 calendar plugn if you’re interested. keep things simple and get your money’s worth!

@zhadz Thank you for the kind words! I added some more settings today based on your needs!

Dynamically you can set
timeslot format plus adding your own custom am/pm if needed due to language difficulties.

dynamically show/hide the allday time slot in time grid view

dynamically show/hide weekends

dynamically switch between custom day names and standard.
for dynamic day names you can choose to include the date .

users should update their plugin!

1 Like

Video Guides

As of today there are 15 videos (13 dedicated to the calendar so far!) available to help you get up and running with this incredibly flexible and powerful Full Calendar Plugin

There are more in the works for each included element!!

This plugin comes with

  • all relevant Google calendar API calls
  • a super flexible and customizable multilingual & timezone aware calendar element with timeline and resource views
    ^^ @muneer.hameer I’m sure you’re not interested in buying another calendar plugin, but I have made this work in my example (timezone aware calendar). see Demo 1. I’ve seen you request this in other forum posts. Fortunately, I am not stretched in too many directions and take time to implement all requests like this that I see! I want to be the all-in-1 calendar package, ya know!
  • A timezone aware Time Slot generator (2nd best on the market IMO)
  • an availability range generator
  • A timezone aware recurring event generator (this one is dope and better than the others I’ve seen)emphasized text

Demo Pages

Editor 1
Demo 1
this one is a little complex

Editor 2
Demo 2
Advanced Example

Editor 3
Demo 3
Simple Example

[updated styling]

[Google Calendar API news]
So, previously plugin users were able to easily login and get their calendars into their apps. but that’s not enough. users need to see others calendars. so i have pushd out a new update that replaces all the old auth calls and replaces them with new ones. I will have outa video by the end of the week showing how to set this up and use this feature (very nice to have btw)

Also, this week be on the lookout for videos on setup and use of the free-time timeslot generator, recurring event generator, and hopefully other little things related to the plugin!

Check it out today

Make YOUR Calendly clone

6 Likes
A long video showing how to set this feature up

Creating time slots on Vimeo

this shows how fast the plugin can create time slots

fast timeslot generration on Vimeo

but of course, when you create time slots, you need to filter out bookings. see how easy it is

quickly filter out your bookings on Vimeo

@peter11

See all the videos

Thx Jared!

Great stuff - is there away the timeslots can be shown in a dropdown instead of a RP Group?

Absolute! You would

set a drop down choices type to dynamic

Set the data type to text

Set the data source to the Timeslot generator’s Timeslot’s start: format as H:MM

Ok, so i found some major flaws and issues with the previous version of the timeslot generator. plut it was slow. so slow + major flaws == :poop:

It’s here!!! Go play around with it!

i went to work and recoded the whole deal. now it is operating without any issue! Please check it out here and let me know what you think.

Tine Slot Generator Element Features

create recurring events

  • minutely, hourly, daily, monthly, yearly

set the days you want to create events on

  • maybe you don’t want your event to repeat every day but you want to to repeat Sunday Monday Tuesday Thursday Friday Saturday. Typically that would be difficult but with this plug-in it’s a simple as choosing the day of the week you want the repetition to occur

set explicit start hour/minutes for events

create timeslots

  • set your timeslot beginning and offset and repeat!

choose the number of events to create

  • this makes sure you dont have to create too many. play with the settings and figure out what works best for you. if you wanted 40000 events, you could get it but it will hold up your browser for a few seconds. you likely could run with 500 and be ok ost of the time

Filter time slots

  • do this based on availability slots for each day of the week if you want

Filter busy times

  • once you have your timeslots setup the way you need, filter out any blocked times based on an input list of event date/time ranges.

And because setting up a calendar + DB + scheduler can be a pain in the ass