There are a few things with ‘Between These Dates’ that I should probably document more clearly.
- If you specify Specific Date Ranges, they will still get generated by the Element and added in despite the Between these Dates. If you prefer not to have them here we recommend not loading them into the Get Available Times Element in the first place (add a Date filter when you look them up), since it will make the app and code quicker. In general with Bubble, always try to only load the Data from the server that you need since excess is just slowing things down and adding Workflow Unit costs
- The between these dates may be generous on each end by about a day to make sure they build out Date/Time availability across time zones correctly, you can always add a filter on the end results if you want exact filtering in the Current User’s time zone
1 Like
Hi,
Does anyone have any insight on how to go about linking the TopCal calendar (which I have linked to a bubble calendar element) with Google Calendar such that Google calendar events show up on the bubble TopCal Calendar and the TopCal bookings show up on google calendar? Also updating with cancellations and reschedulings. Thanks.
@gf_wolfer why are the month dates showing empty for me unlike your app?
I do know others have been doing this, but there is for sure some work that needs to go into this. Hopefully we find someone on here.
And if we do find anyone has done this using TopCal please let me know, I would be open to paying to bring this into TopCal as an offering or providing the dev with work for people who want this (I am too busy with other projects to build this in myself)
Really hard to say just based on those screenshots…
Is your App subscribed to the Plugin, or have you bought the Plugin?
Is the ‘Calendar Dates’ element visible on the page?
Are there any Errors in your Browser Console?
Got the issue, the dates weren’t visible because the I made the element invisible on my page.
Also need a guidance/suggestion that after building this which tool should i use for bring video conferencing facility , where after booking one can meet over video conference?
Secondly, how can I integrate this with one’s google calendar, such that booking made can be shown up in one’s google calendar and also according to one’s availability in Google calendr time slots are shown.
Would be really helpful if you could answer this @gf_wolfer .
Thanks in advance.
I have not built this functionality before but I know that others have done it on Bubble. I would recommend searching the forums
For Google Calendar, I think there are also other in depth forum posts and also plugins to help do this. But then the big thing with relating it to Top Cal is either creating a Booking for every Booking someone has in the Google Calendar, or a different piece of Bubble data that holds a list of Date Ranges (booked Google Calendar times) that you can then enter into the Top Cal element in the Booked Ranges field when querying for available times
1 Like
Hi,
I’m building an app on Bubble using this Plugin, and so far, it’s been working great! I’d like to add a feature that allows users to set breaks at specific times during the day on a week-by-week basis—such as lunch breaks or snack times. These breaks should repeat for the same day each week.
I explored the “Blocking Days” feature in your plugin, but I need a similar option for blocking specific time slots instead of entire days. Could you let me know if this is possible with TopCal, or suggest any workarounds?
No problem, You have two solid options here and the first might be slightly more performant.
- Using the Weekly Availability to account for a break by using multiple time ranges
- In this example below you would be saving 2 time ranges for the Monday, which would give a lunch break from 12pm until 1pm
- Use the ‘Booked Date Ranges’ field in the Get Available Times element to load ‘breaks’ in the same way a Booking would get loaded
- More ideal if the breaks are not always at a consistent weekly time, but slightly (not much) less performant because you need to load an extra piece of data on the page
Hey, I am using your plugin for setting availability time for specific dates and blocking specific dates. How can I delete those dates when they have passed? I probably need to use backend workflows, but I am not really accustomed to them, so I would really need some help. Thank you!
Yes I would recommend a Backend Workflow.
An example workflow would be something like this, where you can trigger the Workflow once somewhere in the app (like when the schedule is first created) and then have the Workflow schedule itself on any cadence you wish, once a month, once a week, once a year, etc.
You can also trigger this using a Recurring Event in the same manner
This was really helpful, thank you! Now I have another problem, right now it’s 1:26 AM in my local time, and what I want is to prevent users from booking any time slot within the next 2 hours from the current time — essentially, bookings should only be allowed from 3:30 AM onward, in this exampple.
Is there a built-in way or recommended method to dynamically block or hide time slots that fall within that 2-hour window from “current time”?
Appreciate your help!
Thank you!
You can hard code it to the start date time on the Get Available Timeslot element. To set it dynamically just create a new field and set it to # in your database and reference that field as a conditional on the Get Available Timeslot element. When this field is not empty start date is current date time+hour “Database Field”
or you can set it on the Timeslots elements themselves as a conditional. If this date < current date time+hours “2” set to invisible.
1 Like
Thanks @jwilsonpdx1 - those will work.
You can also add the :filter wherever you really need it. In this case you can add it to
- The Date on the repeating group, the 0 represents the number of hours you need as a buffer between now and when they can schedule. You could also use Days, Minutes, etc
- The ‘Action’ when clicking the repeating group (if you are using the Display list action to show the Time Slots)
1 Like
In Get Available time slots element I am not getting available times.
@gf_wolfer
Thanks!
@Devansh_21 It looks line in the last screenshot there that the Booking Duration field is empty - this needs to have a value to generate time slots
the problem was something else solved it.
Another query - as you can see in the ss I have attached I am trying to achieve a differnent UI.
Two of the elements of this plugin Calendar dates A & Get Available time slots I am using to show dates available.
Calendar dates A is used as data source for repeating group date.
and Group date as cell of this repeating group to show dates with conditions also attached an image for it.
Now as you can in the first image that dates which are not meeting the conditions are invisible, so now what should I do in order to only show dates which are meeting the condition and omit those that dont. @gf_wolfer
Thanks
So in the horizontal Repeating Group, you just want the list of Dates that have at least one Available Time slot, correct?
One way to do this is you can simply change the Repeating Group data source to the below:
*make sure the formatted as TimeZone is in your desired time zone here to avoid any issues
Optionally:
A simple UI here could be to show Dates that have no times but ‘grey out’ the text instead of hide it and have the gap that you have, then logically when they see the dates they are still in order and don’t ‘jump’ dates. This is only good if there are often small gaps between available days, if however there are regularly large gaps between available days then it would be easier for the user to ‘jump’ days
@gf_wolfer
Both are great options actually, but I think to avoid timezone issues I should make the cells with no time slots to be shown as grey, going with the second option.
Thanks buddy!
There’s also an issue I am facing with monthly offset of certain months
There are some month that carry dates from previous month as well and due to conditioning its not visible.
How to omit them?
You can use the List of Dates instead of the Calendar dates if you don’t want to include those, as the Calendar Dates works well when using a Grid Repeating Group so it looks like a Calendar
Or you can add a Filter to the horizontal repeating group - which could be something similar to the last filter I screen-shotted but just using a Month formatting instead of the full date format
