Appointments Module – Scheduling Made Simple
Learn how to add appointment booking functionality to your app. Enable users to book time slots directly within your app — perfect for clinics, salons, trainers, or consultants.
Allow your app's users to book available time slots directly within your app — perfect for clinics, salons, trainers, or consultants.
Manage Bookings with Ease
The Appointment module enables your app users to book available time slots directly within your app. Perfect for service-based businesses that need scheduling functionality.
Illustration showing a calendar with selectable time slots inside a mobile phone
1. Option 1 – Add an Appointment Field to a Page
Use the Appointment component as a standalone field on any page. Perfect for single-service booking scenarios.
Pro Tip: If no slots appear in preview, check that at least one day and time range are enabled.
Steps
- 1Go to Design → Design Tools → Business Elements → Appointment
- 2Drag and drop the Appointment component into your page (e.g., Home or Details)
- 3Open the Settings tab and configure:
- 4 • Appointment Title – name shown above the field (e.g., "Book an Appointment")
- 5 • Duration – choose 15/30/45 min or Custom
- 6 • Earliest Booking (min) – how soon before a booking is allowed (e.g., 60 minutes)
- 7 • Latest Booking Window (days) – how far into the future bookings can be made
- 8 • Slot Gap (min) – buffer time between two appointments
- 9 • Daily Max Bookings – limit per day if needed
- 10 • Timezone – select the correct time zone (e.g., Europe/Istanbul)
- 11Switch to the Availability tab:
- 12 • Enable "Manual Edit"
- 13 • Activate days (Mon–Sun) and define time ranges (e.g., 09:00–12:00)
- 14 • Use "+" to add multiple time windows per day
- 15(Optional) In Integrations, connect Google or Outlook Calendar
Screenshot showing Appointment settings panel with duration and availability
2. Option 2 – Data-Driven Appointments (Dynamic Availability)
Create appointment fields in your data tables for multi-service or multi-professional scenarios. Each row can have its own availability.
Pro Tip: Each row in your table can have its own independent calendar and availability.
Steps
- 1Go to Data Source and create a new table (e.g., "Professionals")
- 2Add columns: Name (Text), Photo (Image), Description (Long Text), Appointment (Appointment type)
- 3For each row (e.g., Enes Solak, Faruk Özdemir):
- 4 • Click the "Appointment" cell to open its Availability Panel
- 5 • Enable selected days and define time ranges
- 6 • Click Apply to save
- 7Back in Design, drag a List component
- 8 • Bind it to the Professionals table
- 9 • Map fields: Title = @Name, Image = @Photo, Description = @Description
- 10 • Enable "Show Detail" action
- 11Open the Detail Page
- 12 • Drag and drop an Appointment component
- 13 • In the right panel, under Availability → Data Source, select the table's Appointment column
- 14 • The system now auto-populates available time slots for that specific row
Screenshot showing List → Detail flow with Appointment component bound to data
3. Integrations
Connect your appointment system to external calendars for seamless scheduling across platforms. Sync with Google Calendar or Outlook Calendar.
Available Integrations
Google Calendar
Sync appointments with your Google Calendar for seamless scheduling.
Outlook Calendar
Connect to Outlook Calendar to manage appointments across platforms.
Screenshot showing Google Calendar and Outlook Calendar integration cards
4. Preview and Test
Test your appointment booking flow before going live. Verify available slots, duration settings, and user experience.
Steps
- 1Click Live Preview to simulate bookings
- 2Change dates and times to verify available slots
- 3Adjust duration or gap values if overlapping occurs
- 4Save and republish your app when ready
Screenshot of a user selecting 09:00 AM slot in preview mode
5. Troubleshooting
Common issues and solutions when working with appointments. Follow these steps to resolve booking problems.
Common Issues & Solutions
- "No available slots" → Check if Availability is enabled for that day
- Wrong hours displayed → Verify the selected timezone
- Slots missing per record → Ensure the Appointment column is properly mapped in "Availability → Data Source"
- Overlapping slots → Increase slot gap or reduce duration
Visual guide showing common appointment issues and fixes
6. Best Practices
Follow these guidelines to create an effective appointment booking system that provides excellent user experience.
Best Practices
- Keep the duration and gap balanced (e.g., 30 min + 10 min gap)
- Use color coding or icons for booked/unavailable states (coming soon)
- Add clear success feedback after booking ("Your appointment is confirmed!")
- Combine with Forms for user details or payment integration
- Test with sample data before going live
Example of a clean appointment booking interface with success message
Ready to Add Appointments to Your App?
Start building your appointment booking system today. Choose between standalone or data-driven appointments and connect to external calendars.
Open Builder