Scheduling with TopCal

Scheduling with TopCal

Simon Jenner

Thursday, 22 December 2022

Guide on how to add scheduling functionality with TopCal plugin

Posted in:


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!