Simon Jenner
Thursday, 22 December 2022
Guide on how to add scheduling functionality with TopCal plugin
Posted in:
No-Code
Lead Owner: Joseph
(Responsible for updating the document & helping out with any questions)
Bubble Editor Link: Click here
Step 1: Data architecture
Additional Notes
The “availability” is stored as a numeric range, rather than a “date/time”. This is because Bubble must always attach a date to a time and we just want to store the “time” that the user is available for. The stored numbers are the “minutes after midnight” - so 10am is stored as “600” and 10am-12pm would be stored as “600-720”.
You may require additional fields, especially on the booking, but this is dependent on the client’s needs. The Schedule itself isn’t likely to need many additional fields, if any.
Step 2: Create the schedule
Additional Notes
The TimeZone ID is only useful if your application will be dealing with multiple time zones. If your application is designed to target just a single area, such as the UK, you won’t need this.
Step 3: Weekly availability
Additional Notes
You may want to add “toggles” so that users can select only specific dates to customise, such as “check all days that you are available” then “set the times for each of these days” - This can be done with a simple conditional and saving only that field to the database.
The system does not require that all 7 days have availability, any number is fine.
Step 4: Specific availability
Additional Notes
Make sure to specify the selected date in the SetAvailability Element.
Ensure you use “add list” rather than “set list” for saving this.
Step 5: Multiple availability
Additional Notes
When setting multiple dates in this method, they will all have the same “time range.
Step 6: Blocking dates
Additional Notes
Remember, if you’re offering both the “Range” and the “List of dates” functions that you may want to merge the two lists together before saving them. It’s more performant than doing two save functions.
Step 7: Create a booking
Additional Notes
To calculate the end “date”, just use +minutes to the selected start time based on the duration of the booking
Launch Your Startup Fast and Affordably! Our no-code approach is perfect for non-tech founders. With a simple 3-step process: START, LAUNCH, GROW, join over 1400 startups we've successfully launched. Start your journey today!
Join