Appointments Element

Overview

The Appointments Element is a list element that will display all Appointments within a Location. List elements are used for the purposes of a user selection. When a user selects a Appointment, the clickAppointment event listener will trigger returning all of the Appointment details.

The clickAppointment event listener can be used to mount the Appointment Setup Element and display an edit form for internal purposes, or to capture the ID of the Appointment selected to use when mounting the Availability Element in a booking flow.

Please see below for the optional parameters that are to be provided to this element, custom events included with the element, a code sample for the element, and screenshot before any additional style sheet is provided.

---

Custom Events

• getAppointments
  The Get Appointments custom event returns when the API request to GET /appointments has returned with a response. The response in its entirety is then accessible within the event object in a nested object named detail.
• clickAppointment
  The Click Appointment custom event returns immediately with the details of the Appointment selected. The ID of this Appointment can then be stored and used in other elements in order to reference the user selection.

---

Syntax

Below is a basic syntax for loading the Appointments Element. This example uses IDs from our public sandbox profile, to integrate this example into your own booking page copy the IDs from your Dashboard profile and replace with the IDs in the example below.

---

Parameters

locationId
String
id of business location

email
String
Filter by email address

lastname
String
Filter by lastname or part of it

phone
String
Filter by phone number or part of it

serviceId
String
Filter by service

calendarId
String
Filter by calendar

resourceId
String
Filter by resource

customerId
String
Filter by customer

serviceAllocationId
String
Filter by service allocation

startDate
String($date-time)
Format YYYY-MM-DD. Filter by on/after startDate

endDate
String($date-time)
Format YYYY-MM-DD. Filter on/before endDate

status
String
Filter by status: IN, BK, CN, RE, RS

bookedBy
String
Filter by the email of who booked

offset
Integer($int32)
Starting row of page, default 0

limit
Integer($int32)
Page limit, default 20, max 100

---

Options

search
Boolean
Displays a search bar for the user to search Locations

searchBy
String
Defines the query parameter that will by included in the Rest API GET request when an Appointment is searched. Default: name. See below for a list of all possible query parameters for the GET Locations endpoint:

• locationId
  String
  id of business location
• email
  String
  Filter by email address
• lastname
  String
  Filter by lastname or part of it
• phone
  String
  Filter by phone number or part of it
• serviceId
  String
  Filter by service
• resourceId
  String
  Filter by resource
• customerId
  String
  Filter by customer
• serviceAllocationId
  String
  Filter by service allocation
• startDate
  String($date-time)
  Format YYYY-MM-DD. Filter by on/after startDate
• endDate
  String($date-time)
  Format YYYY-MM-DD. Filter on/before endDate
• status
  String
  Filter by status: IN, BK, CN, RE, RS
• bookedBy
  String
  Filter by the email of who booked
• offset
  Integer($int32)
  Starting row of page, default 0
• limit
  Integer($int32)
  Page limit, default 20, max 100