For that exact UI I think what @jared.gibb has with his Full Calendar plugin is meant for this use case.
For the Time Zone stuff, you can fully set Time Zones through TopCal which you can cehckout in the Linked editor documentation, the time zone for TopCal uses IANA time zone IDs, so it is not written in the exact format that you are showing but there are ways to connect it with a Time Zone data type or using a geographic search box to pull in the time zone id or you can ‘hardcode’ it for the different country sections
1 Like
@warformstudios I think that @gf_wolfer Hit the nail on the head there. I think my plug-in would be perfect use case for what you need. Would you be interested in sending me a private message with your AppID and I can add you as a tester to the app. I have 6 lifetime slots left that I’m giving away to the first 10 adopters!
Thanks for the invite! Our team would send you a PM as soon as possible as our team wants to first purchase the booky template and use it as a basis for our app.
but the payment somehow failed so hopefully it would be resolved soon, when we bought the template we will drop you a PM to see if there are still slots available, thanks!
Hi @gf_wolfer , great looking plugin and just what I need for my app! One question… I’m quite new to Bubble so please bear with…
When you say…
Plugins Needed: TopCal - Availability & Time Slots
Does this mean there’s another plugin I need to buy too?
Thanks!
Welcome to Bubble!
There is just the one single Plugin needed for this functionality.
That notice about needing the plugin is for people that find that page by looking through the Top Shelf Elements template app and try to copy and paste it into their own app. Since you found it though this forum thread I’m guessing you already know that you first need to buy the plugin 
2 Likes
Hey there, that is exactly what this plugin was made for 
Here is a Calendly like Template I also made that uses the plugin.
top-calendar.bubbleapps.io
1 Like
PLUGIN UPDATE 2.2.0
Changes made specifically to the Set Availability Element.
This is seen as a Bug Fix and recommended you update your plugin, but you may have already adjusted for this in your app so please review carefully to know if you want to make the update to this version or if you need to make any changes in your app when you make this update.
Why the update?
I found a bug that I am surprised I or no one else noticed before (almost certain it wasn’t there before, but oh well). Essentially when you use the Set Availability Element to set a Date in a Time Zone that is behind you, such as setting a time in Pacific time when I am in Eastern time, the Dates returned from the Plugin were actually the incorrect day.
Example (I am in Eastern time zone):
notice above here that the Availability should be on the 24th, not the 23rd. Time of days for availability are correct though, this error is off by one day.
The new update handles this time zone discrepancy correctly so that the Set Availability element returns the correct day:
Also updated: The Set Availability element also lets you input a List of Dates and it will return the List of Dates in the desired time zone.
Meaning you can input June 1, 2021 at 12pm (Pastern) and have it return June 1, 2021 12pm (Pacific). It will maintain the original Hours and Minutes values in the desired time zone, which others have referred to as Parallel Dates
2 Likes
Hey @gf_wolfer,
Thank you for great plugin, I was wondering if you can help me to with below scenario:
- Business offers different type of consultancy services that can be booked.
- Different individuals working for business (consultants) offer services based on their own schedule. For example, Consultant 1 creates its own schedule, select available dates, block certain dates etc., and offer service to clients while other consultants have their own schedule.
- Consultants shares their link with possible clients and get bookings.
- So far we can provide available slots for each consultant by using your plugin.
- However, if business wants to provide available slots for the service itself, we somehow need to merge schedules, consider each consultant’s specific date availabilities, blocked dates and booked slots.
At this point, I can’t figure out how to merge schedules so I can feed into plugin element - GetAvailableTimeSlots . Is there a way you can suggest that will help in this scenario ?
There could be a few ways to do this, how many consultants would the business have? If it is a small number loading the availability of all the consultants might work for an Availability calendar of 3 days or a week (don’t do a month). But if there are a lot of consultants than might need to come up with something else
@gf_wolfer there will be more than 30 consultant 
I thought about having a master schedule for the service and editing this schedule as consultants change their schedules.
This way I can do the calculation on the server and benefit from bubble’s as data changes feature.
Do you think is there an easy way to do this on the server side? As far as I understand there is four data points needs to be considered:
- Daily availability that comes from patterns for each day - list of numeric ranges
- Specific date availabilities
- Blocked days
- Booked slots
Should I try to figure out how to merge two schedules mainly on these four data points? Any ideas?
Appreciate your help.
Yes, moving the Availability to the Server might help things out. Maintaining a Master schedule may get difficult but there is probably a way to do it.
Or if you save each consultants Available Date/Times (time slots) schedule on the backend and then on the Calendar/Booking page load all the consultants data/schedules into a repeating group or state, you can show which days are available on the calendar with that info, and then when the day is clicked use an advanced filter to show the consultant schedules with available times that day - no master schedule needed.
I don’t think 40 consultant’s schedules would be too much to load if it’s a Data type with not too many fields
1 Like
Hello everyone,
I finally decided to use the TopCal plug in for my clients’ appointments. But I have a problem even if I followed the tutorials and templates.
When I’m on the client profile the calendar doesn’t show any available date. I don’t know if it’s a problem due to the link between “TopCal Schedule” or “Availability” and User
Thanks in advance for your help
Thanks for your purchase!
It’s hard for me to say for sure what the issue is without more info. The first thing you will want to check is that the Get Available Times element is returning Dates.
To do this
Run the page in debug mode. Using the Inspect functionality, lookup the GetAvailableTimes element and check that the ‘Available Date Times’ value has date times.
If it is empty, then scroll down in the inspector and check that the Properties are properly receiving data (below is an example, your app referencing will be different, but just make sure not all the values are empty, this can be a common issue caused by many things such as privacy rules or referencing data incorrectly)
If the Date Times are being produced by the GetAvailable element, then we will need to check the Calendar element to make sure Conditions are setup correctly to show which days are available
Thank you very much for your answer I managed to solve this problem but I still can’t display the calendar with availability on the profile of my users
You will need to setup the expressions specific to your page/app and data structure. I can’t say for sure how you have it setup, but something along the lines of ‘Current Page’s Schedule…’ or ‘Current Page User’s Schedule…’ or instead of the page the Schedule data type could be loaded into a Group and referenced there
Thank you very much I did it but the calendar style not visible in the profil page and i don’t understand why ?
Thank you very much for your help I managed to solve the problem thanks to you.
I have a new little technical problem so I’ll ask you again if you don’t mind.
I can’t register their display on the button clicked in TopCal Booking as a booked appointment
Thanks again for your attention
Not 100% sure what you are doing there. But for the Booking you can simply save a field as Booked Start Time (field type = date). That way you will save the exact Date and Time for the start time of the booking.
You will likely also want to save the End Time of the booking and the Booked Time Range (date range field type)
And then be sure to pass the Booked Time Range into the TopCal GetAvailableTimes element on the booking page to block that time so it can’t be double booked
Thanks!
I am not sure about what you are trying to do here. To keep this thread more specific to the plugin you can send me a direct message with some more details about what is being logged in the future and what exactly should be blocked? (Time Slots vs just showing on a Calendar, etc).
