Availability Element

Overview

The Availability Element is the most primarily consumed element by OnSched users. The objective of the Availability Element is to render a calendar module with available times to be selected by the user.

This element can be used to create both Booking and Reschedule flows.

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


Custom Events

  • bookingConfirmation
    Appointment object is returned when the booking status has been updated to "IN" (Initial), "BK" (Booked), or "RS" (Reserved).
  • rescheduleConfirmation
    Appointment object is returned when the appointment has been Rescheduled.
  • getAvailability
    Available times are returned once loaded using the parameters configured for the element.
  • clickTime
    Time object is returned when a time slot selection has been confirmed by the user.

Syntax

Below is a basic syntax for loading the Availability 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

serviceId
Integer($int32)
Required. Defines the type of appointment (Service) that will be booked.

resourceId
Integer($int32)
Defines the Resource who's availability should be displayed. This parameter is not required if resourceIds is used.

resourceIds
String/Comma Separated List
Optional. Defines the Resources who's combined availability should be displayed. This can be used instead of resourceId to define the Resource being booked.

locationId
String
Optional. Default: Primary Location. Defines the Location where the Resource is within your Company.

timezoneName
String
Optional. Defines the timezone that appointments should be displayed in. (Format: IANA). Default: Local time.

roundRobin
Integer($int32)
Optional. Randomly selects a Resource who is available for the time selected. 0 = none, 1 = Random, 2 = Balanced. This can be used instead of resourceId to define the Resource being booked.

startDate
String
Optional. Format: MM-DD-YYYY. Default: Today. Loads availability for a specific date in the future.

duration
Integer($int32)
Optional. Defines the duration of the appointment for which you are checking availability. In order to specify a duration the Service must have "durationSelect" set to TRUE, and the duration provided must match the rules you define for the Service with "durationMin" (Minimum duration), "durationMax" (Maximum duration), "durationInterval" (Time intervals between each slot). Example: durationMin: 30, durationMax: 120, durationInterval: 30, will enable duration options of; 30, 60, 90, 120. Default: Service duration setting.

interval
Integer($int32)
Optional. Defines the interval between each timeslot displayed. Default: Service duration.


Options

appointmentDetails
Boolean
Optional. Displays the details of the appointment being booked at the top of the booking form. Default: true.

availabilityDetails
Boolean
Optional. Displays the details of the appointment for which the availability being displayed. Displays above the timezone dropdown. Default: true.

calendarType
String
Optional. Changes the UI of the calendar view. The following values are accepted for calendarType: week, month, month-side. Default: 'month'

completeBooking
String
Optional. If specified the popup booking form will not display. Must provide a customerId parameter if using value "BK". "BK" = Booked, "RS" = Reserved, "IN" = Initial.

confirmationMessage
String
Optional. Text to replace message on the confirmation screen. May include parameters from the /appointments response referenced within curly braces { }, for example: "Hi {name}, your appointment is booked". See below for a complete list of parameters than may be used:

  • object
  • id
  • locationId
  • businessName
  • calendarId
  • serviceId
  • serviceName
  • serviceImageUrl
  • resourceId
  • resourceName
  • resourceGroupId
  • resourceGroupName
  • resourceImageUrl
  • resourceEmail
  • customerId
  • serviceAllocationId
  • rescheduledId
  • createDate
  • startDateTime
  • endDateTime
  • dateInternational
  • date
  • time
  • duration
  • timezone
  • timezoneId
  • timezoneIana
  • ipAddress
  • status
  • confirmationNumber
  • downloadIcsUrl
  • bookedBy
  • onlineBooking
  • confirmed
  • email
  • name
  • lastname
  • firstname
  • phone
  • phoneType
  • phoneExt
  • customerMessage
  • notes
  • groupSize
  • lastModifiedOn
  • lastModifiedBy
  • emailConfirmationSent
  • emailReminderSent
  • smsConfirmationSent
  • smsReminderSent
  • location
  • latitude
  • longitude
  • stripeChargeId
  • stripeRefundId
  • paymentStatus

customerId
Integer($int32)
Optional. Defines the Customer who should be booked. If provided and completeBooking is equal to "BK", the popup booking form will be skipped and the appointment will be booked immediately upon selection of the time slot.

customerSMS
Boolean
Optional. If true, the phone number will be used to send SMS notifications. Default: false.

fields
Object
Optional. Defines the pre-populated values for the booking form. If a Boolean value of "false" is given to any field it will be hidden. Please see a list of field names below:

  • firstname
  • lastname
  • email
  • phoneNumber
  • customerMessage
  • customFields: { field1, field2, field3... field10 } // Custom Fields must be pre-defined by OnSched Staff

rescheduleAppointmentId
Boolean
Optional. If true the appointment referenced by this ID will be rescheduled. Default: false.

showDuplicateResourceTimes
Boolean
Optional. If true and resourceIds parameter exists then all times will be returned for each Resource (therefore if both ResourceA and ResourceB are available at 9:00am, there will be two 9:00am slots returned). Default: false.

timezone
Boolean
Optional. If false the time zone dropdown will be hidden. timezoneName may still be specified in the availabilityParams object to default the time zone. Default: true

title
Boolean
Optional. If false the title of the element will be hidden. Default: true

bookAheadDate
String
Optional. Format: MM-DD-YYYY. Restricts availability from loading past a specific date in the future. This option is available as a setting in the API at both the Location and Service level. This option will override settings if the date is BEFORE the date in either the Service or Location settings.