Round Robin Appointment Scheduling

Enable appointment bookings to be distributed among staff members in a weight-based round robin fashion.

Advanced Last updated: 06 May 2025

About

In this example, we create an appointment scheduling system using a multi-state box. Using a weight-based round robin implementation, we first identify the staff member with the fewest existing appointments to receive the next booking. We then query this staff member’s availability and display dates and times for visitors to choose from. Upon a successful booking, we change the state of the multi-state box to display the visitor’s appointment details.

Before you begin

To use this example:

  • You must install Wix Bookings on your site.
  • You must install Wix Stores on your site.
  • Your site must have at least one Bookings service.
  • Your site must have at least 2 staff members.
  • Your site must be connected to a premium account to see it work.

APIs

How we built it

We added the following to our site:

Page Elements

Home
  • A multi-state box to display:
    • Form with input fields for scheduling appointments.
    • Details of a scheduled appointment.
  • A date picker to select the date for an appointment.
  • A dropdown to select the time for an appointment.
  • Buttons to book an appointment and to return to the home page.

Frontend Code

Home

The code in this file initializes the page’s elements, validates input data for creating a booking, and retrieves the created booking data from the backend.

In this file, we:

  • Define the Wix Bookings App ID, which can be retrieved from your site’s dashboard.
  • Get the visitor’s time zone and define the time format for display.
  • Retrieve the staff member with the least number of bookings and their availability from the backend.
  • Set the date picker to display the available appointment dates.
  • Populate the dropdown to display the available appointment times based on the currently selected date.
  • Validate the input data in the booking form.
  • Define objects for booking creation and confirmation.
  • Retrieve the newly created and confirmed booking from the backend to display to the visitor.
  • Redirect to the home page when the Back to Home button is clicked.

Backend Code

WixBookings.web.js

We defined the following methods:

  • getResourcesWithMinimumWeight(): Calls getFirstService() to retrieve the staff member IDs of the booking service, defines a query filter to call queryExtendedBookings(), then uses the query results to find and return the staff member with the least number of booked appointments.
  • getFirstService(): Queries all services and returns the first service (under the assumption that your appointment scheduling system is that service).
  • queryExtendedBookings(): Retrieves the extended bookings that match the query filter criteria for the staff members.
  • queryAvailability(): Calls getFirstService() and extracts the service ID, calls queryAvailability() on the availability calendar with a query filter, and then returns a list of the staff member’s availability entries.
  • createBooking(): Creates an appointment booking with the provided booking object.
WixBookings.web.js

The code in this file uses the Wix Ecom Checkout API to create a checkout and order to successfully confirm the created appointment booking.

We defined the following methods:

  • createCheckout(): Creates a checkout that holds information about the booking that was created.
  • createOrder(): Creates an order from the checkout, which confirms the booking creation.

Code Snippets

WixBookings.web.js
Copy
WixEcom.web.js
Copy
Home
Copy

Get Help

Join the community

Join the Wix Studio community on Discord, where experienced developers and fellow creators come together to share tips, troubleshoot issues, and collaborate.

Hire a developer

Building a coded solution on your own can be challenging. Let an experienced Wix developer build it for you, so you can keep working on your site or business. Visit the Wix Marketplace to find a trusted developer.

Did this help?