[Template] Top Shelf Calendar - Scheduling & Bookings like Calendly

[gf_wolfer]

Open to feedback on this part from users though as to what could be best, but I think this way works well but I should probably just communicate it better

[jared.gibb]

I like this feature. Crossing time zones is a B for scheduling!!

[egemzer]

Ah. Clever.

I agree with the decision. Thanks for explaining.

I wasn’t passing in the current user’s timezone, so it was rendering the list in UTC (?), yielding the behavior shown. When I add a browser timezone capture element and reference it in the getavailabletimeslots element, it correctly renders the times between the entered bounds correctly.

[gf_wolfer]

Got it. I will have to double check what my end decision was on the functionality then

I think I might have left the leeway for the Calendar/Monthly option and then it’s more strict for the ‘Between These Dates’ option.

If you leave the Time Zone blank, it should default to the current browsers time zone when using the Element. But for the Get Available Times workflow action that would default to UTC since it runs on the Bubble server

[gf_wolfer]

Update

When we are saving Specific Date Availability and Blocked Days for a Schedule, we did not have a way to automatically remove these Date Ranges and Dates from the Schedule unless the User went in and deleted them.

This was causing the Blocked Days and Specific Availability fields to ‘pile up’ with data that was not needed anymore. To fix this we have now added a weekly ‘Clean Up Loop’ that will remove any past dates to keep the Schedule data lightweight and ‘clean’. More info about the update and how to add it to your app can be found on our Updates & Bug Fixes Gitbook:

https://topshelftemplates.gitbook.io/top-shelf-templates/

[gf_wolfer]

Minor update from a customer request/inquiry. Added conditions on the Home Page header buttons for when a User is on the on home page and logged in. The Get Started button becomes a Dashboard navigation button and the Login button becomes a Logout button:

[josh27]

Hi @gf_wolfer,

Appreciate the template, really powerful.

Have an issue and was hoping you could help.

Looking at the screenshot above, I’ve installed the template and in preview mode, am unable to get past the blue loader. Appears to be stuck in that state, loading infinitely.

Any thoughts/ideas?

[gf_wolfer]

Hey Josh, thanks for purchasing!
Could be a few different things that I would check here:

1. Check that the TopCal Plugin is purchased or subscribed to from the editor’s Plugins tab

2. Check that all of the Value for the Plugin Element are being loaded correctly. To do this run that page with the Debugger turned on → debug_mode=true and use the Dropdown on the right to select the GetAvailableTimeSlots element. Then check to make sure the booking duration and time slot interval values are filled in (it can cause an endless loop if not)

3. On that page, use the your browser’s built in Console to see if there are any errors reported that might be causing this

4. Do you have any browser settings or extensions that disable javascript some how?

[josh27]

Hi @gf_wolfer,

Found the issue, had accidentally selected ‘the element is visible on page load’ checkbox, on one of the key elements, which is why the load was infinite.

All working now. Appreciate the response, love the template.

Kind regards,

[jasonturo]

Hi @gf_wolfer

Looks like a nice calendar tool you created. Great work. Couple questions. Does this template come with any of the below:

• 2-way sync with calendar
• Video conferencing integration
• Payment for booking

Thanks so much,
Cheers

[gf_wolfer]

Hey there, it does not have those 3 items in the template - although with any Bubble app they can be added on

[yorgio1024]

Hi @gf_wolfer thanks for this awesome plugin, a pre sales question here, I’m close to get this plugin but I need to know if help me in my use case.

My app need set bookings for services with durations by hours like a barbershop or spa, classes etc, but need bookings for rooms as well and this can setup a start time and a duration of 18 hours or days like airbnb. So I want to know how setup this with your plugin.

Thanks in advance.

[gf_wolfer]

This plugin can definitely help with the hourly booking and excels at those use cases. But I have not used or tested the plugin for multi day bookings, so unfortunately I cannot say what the best setup would be for this.

The trickiest part of trying to have a single booking system for all use cases is that I have not seen a one size fits all way to develop an hourly or multi day booking UX. The UX can vary greatly based on use case, and most ways are often different than what you would want for hourly bookings. The plugin may work well for some multi day hourly bookings where the schedule is continuously available from day to day such as a 24hour parking spot.

But then again it may be more efficient if the 24 hour parking spot is thought to be ‘default available’ instead of having an availability schedule that say a person’s schedule would need. So you may want to combine different logic for different types of ‘resources’ that can be booked

In the case of a meeting room being booked, it is really only booked for the hours the building is open for on those days. In this example, continuous time bookings would not work as the hours the building is closed are not technically a part of the booking. So the TopCal plugin cannot adjust for these closed hours and you would need to come up with your own way to know how many hours the room is truly booked / being used for. And for the AirBnB case if the rooms are booked by the Days and not Hours, then again you likely need to apply a different type of logic to optimize this.

Sidenote: if there are any developers that have used TopCal before and want to tackle any of the above use cases let me know and I will let you use the plugin for free to test things out!

[yorgio1024]

Thanks for reaching me I checked your demo and I have some ideas to make it by days, so can tackle this use case if you want give me access. Thanks in advance

[josh27]

Hi @gf_wolfer,

Love the template and appreciate all of the effort you have put into it.

Had one question - so out of the box, the user sets their availability by selecting each day & refining respective times, which works well.

However, we need the option to pre-set availability (e.g. available between 9am-5pm, Mon-Fri). In our case, it’s ideal that new users can see an already working demo when they sign-up, without having to specify their availability. Every time I’ve tried to execute this, I’ve always ended up completely bricking the system

So, is it possible to pre-set availability? Say work week (Mon-Fri, 9am - 5pm) using workflows upon registration?

Any guidance here would be greatly appreciated

[gf_wolfer]

Thanks!

This is definitely possible and makes a lot of sense. To do this in the current Template setup this can be done from the ‘manage’ page on the Workflow where we create the Weekly Pattern items for a Schedule. You will just need to add in the field for Minute Ranges and enter an expression like the one below for each day of the week that you want this schedule on. It should work but since I haven’t tested this out feel free to post back here if there are any issues.

[josh27]

Amazing @gf_wolfer - let me give this a try and I’ll come back to confirm how it went.

Appreciate the quick response!

[LA81638]

Just purchased this template and am super impressed. Thank you for making it!

[josh27]

Worked a charm @gf_wolfer - thank you!

Suppose a natural follow-on question to the one above is if we also wanted to show a demo booking that has been made, so they know what one looks like when they land in their account, how might we do that?

Again, have tried to create a fake demo booking with manual dates/times can’t seem to get it to work - I assume we need to actually run a follow-on workflow that selects a one of the actual available time slots for it to work correctly? Keen to get your thoughts.

Thanks again @gf_wolfer

[gf_wolfer]

You only need to create a Booking Item and then make sure you enter in a Start date/time, End date/time and the Booked Time Range (plus any other relevant fields for your app). Because people are not selecting a time to create this piece of data it can be made regardless of whether a user has any availability set yet