Implement scheduling in Bubble using Date and Time fields, visual calendar UIs, availability management, and notification triggers. This tutorial covers building scheduling interfaces with date pickers, managing availability slots, preventing double-bookings, and connecting schedules to email and in-app notifications for reminders.
Overview: Scheduling in Bubble
Scheduling is fundamental to appointment booking, event management, task planning, and shift management. This tutorial covers Bubble's date handling, building scheduling interfaces, managing availability, and automating reminders.
Prerequisites
- A Bubble account with an app
- Basic understanding of Date fields in Bubble
- Familiarity with workflows and Repeating Groups
Step-by-step guide
Design the scheduling data model
Design the scheduling data model
Create a Data Type called Schedule_Event with fields: Title (text), Start_Time (date — stores both date and time), End_Time (date), Description (text), Organizer (User), Attendees (list of Users), Status (Option Set: Scheduled/Completed/Cancelled), Location (text). Create an Availability Data Type with: User (User), Day_Of_Week (number 0-6), Start_Hour (number), End_Hour (number), Is_Available (yes/no). This separates events from recurring availability.
Expected result: Data Types for events and availability that support scheduling logic.
Build the scheduling interface
Build the scheduling interface
Create a scheduling page with a Date Picker for selecting the date and a Repeating Group showing available time slots. Generate time slots by creating records or using a list of times. For each slot, check availability: search Availability where User = selected user AND Day_Of_Week = selected date's day. Then check for conflicts: search Schedule_Events where Start_Time < slot end AND End_Time > slot start. Display available slots in green and booked slots in gray using conditional formatting.
Expected result: A visual scheduling UI showing available and booked time slots for a selected date.
Create the booking workflow with conflict prevention
Create the booking workflow with conflict prevention
When a user selects an available slot and clicks Book, the workflow first checks for conflicts: Search Schedule_Events where Start_Time < new End_Time AND End_Time > new Start_Time AND Status is not Cancelled. Only when this search count is 0, create the Schedule_Event. If a conflict is found, show an alert: 'This time slot was just booked. Please select another.' This prevents double-bookings even with simultaneous users.
Pro tip: For mission-critical scheduling (medical appointments, legal consultations), add a backend workflow that performs a second conflict check server-side before confirming.
Expected result: Bookings are created only when no conflicts exist, preventing double-bookings.
Set up automated reminders
Set up automated reminders
Create a backend workflow called send-reminder with a Schedule_Event parameter. In the workflow, send an email to each Attendee with the event details. Schedule this workflow when the event is created: Schedule API Workflow → send-reminder, scheduled for Start_Time minus 24 hours (for a day-before reminder). Add a second schedule for Start_Time minus 1 hour. If the event is cancelled, use the Cancel scheduled workflow action to prevent reminder emails from sending. For complex scheduling needs with recurring events, multi-timezone support, or calendar sync, RapidDev can help architect a robust scheduling system.
Expected result: Automated email reminders fire 24 hours and 1 hour before each scheduled event.
Add a calendar view for scheduled events
Add a calendar view for scheduled events
Install a calendar plugin from the Plugins tab (search for Full Calendar or Calendar). Configure it with Type: Schedule_Event, Data source: Search Schedule_Events for the displayed month. Map Start_Time to the event start and End_Time to the event end. Clicking an event shows its details in a popup. The calendar provides a visual overview of all scheduled events for the month, week, or day view.
Expected result: A visual calendar displays all scheduled events with day, week, and month views.
Complete working example
1SCHEDULING — WORKFLOW SUMMARY2==============================34DATA TYPES:5 Schedule_Event: Title, Start_Time (date), End_Time (date),6 Description, Organizer (User), Attendees (list), Status, Location7 Availability: User, Day_Of_Week (0-6), Start_Hour, End_Hour, Is_Available89AVAILABILITY CHECK:10 1. Search Availability for user + day of week11 2. Search Schedule_Events for time overlap12 3. Slot available when: within availability hours AND no conflicts1314CONFLICT CHECK:15 Search: Start_Time < new_end AND End_Time > new_start16 AND Status is not Cancelled17 Create event only when conflict count = 01819BOOKING WORKFLOW:20 1. Verify no conflicts (search)21 2. Create Schedule_Event22 3. Schedule reminder: Start_Time - 24 hours23 4. Schedule reminder: Start_Time - 1 hour24 5. Send confirmation email to attendees2526CANCELLATION:27 1. Set Status = Cancelled28 2. Cancel scheduled reminder workflows29 3. Notify attendees of cancellationCommon mistakes when building scheduling in Bubble
Why it's a problem: Not checking for conflicts before creating a booking
How to avoid: Always search for overlapping events before creating a new one. Use the overlap formula: existing Start < new End AND existing End > new Start.
Why it's a problem: Storing date and time in separate fields
How to avoid: Use a single date field for Start_Time and End_Time — they store the complete datetime.
Why it's a problem: Not cancelling scheduled reminders when events are cancelled
How to avoid: Use the Cancel scheduled workflow action when an event is cancelled.
Best practices
- Always check for time conflicts before creating bookings
- Use Bubble's date field (stores date + time) instead of separate fields
- Schedule reminders at event creation time, not at reminder time
- Cancel scheduled workflows when events are cancelled or rescheduled
- Use Availability records for recurring weekly schedules
- Add buffer time between appointments to prevent back-to-back bookings
- Display times in the user's timezone using Bubble's timezone handling
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to add scheduling to my Bubble.io app with time slots, availability management, conflict prevention, and automated reminders. Help me design the data model and booking workflow.
Create a scheduling page where users pick a date, see available time slots, and book an appointment. Each slot should show green if available and gray if booked. Prevent double-bookings.
Frequently asked questions
How does Bubble handle timezones?
Bubble stores all dates in UTC and displays them in the user's browser timezone by default. You can override display timezone per element.
Can I create recurring events?
Bubble does not have native recurring events. Create a backend workflow that generates individual Schedule_Event records for each occurrence based on a recurrence pattern.
How do I show a weekly calendar view?
Install the Full Calendar plugin and configure it with week view. It displays events across the week with drag-and-drop support.
Can users reschedule events?
Yes. Add a Reschedule button that cancels the old event (and its reminders) and creates a new one for the updated time.
How many scheduled workflows can Bubble handle?
Bubble can handle thousands of scheduled workflows. They count toward your Workload Units when they execute.
Can RapidDev help with complex scheduling?
Yes. RapidDev can build scheduling systems with recurring events, multi-timezone support, resource allocation, and calendar sync integration.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation