Event Listeners

The objective of OnSched.js custom event listeners is to return responses provided by the API once loaded. In the Syntax section of each event listener below the identifier Element is used to represent the HTML DOM element that is associated with each OnSched.js Element. For example, the Element variable in the the event listeners associated to the Availability Element would be:

const Element = document.getElementById('availability');

OnSched.js custom event listeners can be used to combine actions between multiple OnSched.js Elements, allowing them to interact together.

For example, in order to create a complete booking flow where a user selects the Service, then Resource, then is taken to Availability will require the use of event listeners on both the Services Element click event, and the Resources Element click event. Both events are used to include the Service ID and Resource ID to the Availability Parameters object before mounting the Availability Element with all of the required configurations (serviceId and resourceId).

Check out this Complete Booking Flow Javascript Recipe below for more details:

🦉

Complete Booking Flow

Open Recipe

Element Resize

Element: Works with all OnSched.js Elements

The Element Resize event is used to help resize an iFrame if the OnSched.js script is not within the same document. OnSched.js uses the postMessage Javascript function to send data to the parent document if used within an iFrame. This allows you to use the syntax below to capture the height of the OnSched.js element within your iFrame and adjust it accordingly.

Syntax

<iframe id="onschedjs-iframe" src="https://my-onsched-js-code.com"></iframe>

<script type="text/javascript">
  // Locate the iFrame HTML DOM element.
  const iframe = document.getElementById('onschedjs-iframe');

  // The "message" listener is used to send data from iFrame to parent.
  window.addEventListener('message', event => {
    // Check if message is relaying the Onsched.js Element Resize event.
    if (event.data.onschedElementResize) {
      // Set the height of the iFrame equal to the height of the OnSched.js Element. 
      // Tip: If your iFrame has padding and/or borders, add that additional height to the OnSched Element height or you will still have scrolling.
      iframe.style.height = Math.ceil(event.data.elementDimensions.height) + 'px';
    }
  })
</script>

Event Model

"event": {
	"data": {
    "onschedElementResize": Boolean,
    "element": String,
    "elementDimensions": {
      "width": Float,
      "height": Float,
      "top": Integer,
      "left": Integer
    }
  }
}

Booking Confirmation

Element: Availability

The bookingConfirmation event is fired when an appointment is completed in a status of "IN" (Initial), "BK" (Booked), or "RS" (Reserved). The details in this event listener are the direct result of the Create Appointment request.

Syntax

Element.addEventListener('bookingConfirmation', event => {})

Event Model

"event": {
  "detail": {
    "locationId": String,
    "serviceId": String,
    "calendarId": String,
    "serviceAllocationId": String,
    "resourceId": String,
    "resourceIds": String,
    "resourceGroupId": String,
    "customerId": String,
    "email": String,
    "name": String,
    "phone": String,
    "phoneType": String,
    "bookingWindowId": String,
    "bookedBy": String,
    "location": String,
    "timezoneName": String,
    "startDateTime": String, Format: ISO,
    "endDateTime": String, Format: ISO,
    "travelTimeMins": 0,
    "travelAppointmentId": String,
    "customerMessage": String,
    "notes": String,
    "groupSize": Integer,
    "customFields": {
      "field1": String, Maximum: 10,
      ...
    },
    "appointmentBookingFields": [
      {
        "name": String,
        "value": String
      }
    ],
    "customerBookingFields": [
      {
        "name": String,
        "value": String
      }
    ]
  }
}

Get Availability

Element: Availability

The getAvailability event is fired when all times from the Availability Element have been loaded.

Syntax

Element.addEventListener('getAvailability', event => {})

Event Model

"event": {
	"detail": {
    "data": [
      {
        "startDateTime": String,
        "endDateTime": String,
        "date": String,
        "time": Integer,
        "displayTime": String,
        "duration": Integer,
        "allowableBookings": Integer,
        "availableBookings": Integer,
        "allowableCapacity": Integer,
        "availableCapacity": Integer,
        "resourceId": String,
        "travelTimeMins": Integer,
        "travelAppointmentId": String
      },
      ...
    ]
  }
}

Click Time

Element: Availability

The clickTime event is fired when an timeslot is selected from the user interface loaded.

Syntax

Element.addEventListener("clickTime", event => {})

Event Model

"event" {
  "detail": {
    "customerid": String,
    "date": String, Format: "MM-DD-YYYY",
    "duration": String,
    "enddatetime": String, Format: ISO,
    "locationid": String,
    "resourceid": String,
    "serviceId": Integer,
    "slots": String,
    "startdatetime": String, Format: ISO,
    "time": String
  }
}

Get Customer

Element: Customer

The getCustomer event is fired when a Customer is found using the email provided in the customerParams object.

Syntax

Element.addEventListener("selectAppointment", event => {})

Event Model

"event": {
  "detail": {
    "object": String,
    "id": String,
    "locationId": String,
    "businessName": String,
    "email": String,
    "name": String,
    "lastname": String,
    "firstname": String,
    "companyName": String,
    "gender": String,
    "birthdate": String,
    "lastVisitDate": String,
    "groupId": String,
    "resourceId": String,
    "createdOn": String,
    "createdBy": String,
    "registeredBy": String,
    "verifiedBy": String,
    "modifiedBy": String,
    "modifiedOn": String,
    "verificationDate": String,
    "registrationDate": String,
    "emailInfo": Boolean,
    "emailPromotion": Boolean,
    "disabled": Boolean,
    "inviteEmailSent": String,
    "welcomeEmailSent": String,
    "deletedStatus": Boolean,
    "deletedTime": String,
    "notificationType": String,
    "subscriptionId": String,
    "latitude": String,
    "longitude": String,
    "stripeCustomerId": String,
    "contact": {
      "phoneType": String,
      "homePhone": String,
      "mobilePhone": String,
      "businessPhone": String,
      "businessPhoneExt": String,
      "skypeUsername": String,
      "conferenceInfo": String
    },
    "address": {
      "addressLine1": String,
      "addressLine2": String,
      "city": String,
      "state": String,
      "country": String,
      "postalCode": String
    },
    "customFields": {
      "additionalProp1": {
        "name": String,
        "value": String
      },
      ...
    }
  }
}

Post Customer

Element: Customer

When a Customer is not found using the email provided in the customerParams object, a new Customer is created with the values from the customerParams.customerIM object. This event is then fired when the Customer is created.

Syntax

Element.addEventListener("postCustomer", event => {})

Event Model

"event": {
  "detail": {
    "object": String,
    "id": String,
    "locationId": String,
    "businessName": String,
    "email": String,
    "name": String,
    "lastname": String,
    "firstname": String,
    "companyName": String,
    "gender": String,
    "birthdate": String,
    "lastVisitDate": String,
    "groupId": String,
    "resourceId": String,
    "createdOn": String,
    "createdBy": String,
    "registeredBy": String,
    "verifiedBy": String,
    "modifiedBy": String,
    "modifiedOn": String,
    "verificationDate": String,
    "registrationDate": String,
    "emailInfo": Boolean,
    "emailPromotion": Boolean,
    "disabled": Boolean,
    "inviteEmailSent": String,
    "welcomeEmailSent": String,
    "deletedStatus": Boolean,
    "deletedTime": String,
    "notificationType": String,
    "subscriptionId": String,
    "latitude": String,
    "longitude": String,
    "stripeCustomerId": String,
    "contact": {
      "phoneType": String,
      "homePhone": String,
      "mobilePhone": String,
      "businessPhone": String,
      "businessPhoneExt": String,
      "skypeUsername": String,
      "conferenceInfo": String
    },
    "address": {
      "addressLine1": String,
      "addressLine2": String,
      "city": String,
      "state": String,
      "country": String,
      "postalCode": String
    },
    "customFields": {
      "additionalProp1": {
        "name": String,
        "value": String
      },
      ...
    }
  }
}

Select Appointment

Element: Calendar

The selectAppointment event is fired when a Calendar event is selected. External calendar events (i.e. Google/Outlook Calendar) and Resource Blocks are not selectable, only OnSched Appointments may be used for this event listener.

Syntax

Element.addEventListener("selectAppointment", event => {})

Event Model

"event": {
  "detail": {
    "object": String,
    "id": String,
    "locationId": String,
    "businessName": String,
    "calendarId": String,
    "serviceId": String,
    "serviceName": String,
    "serviceImageUrl": String,
    "resourceId": String,
    "resourceName": String,
    "resourceGroupId": String,
    "resourceGroupName": String,
    "resourceImageUrl": String,
    "resourceEmail": String,
    "customerId": String,
    "serviceAllocationId": String,
    "rescheduledId": String,
    "createDate": String,
    "startDateTime": String, Format: ISO,
    "endDateTime": String, Format: ISO,
    "dateInternational": String,
    "date": String,
    "time": Integer, Format: Military (i.e. 900 = 9:00 am),
    "duration": Integer,
    "timezone": Integer,
    "timezoneId": String,
    "timezoneIana": String,
    "ipAddress": String,
    "status": String,
    "confirmationNumber": String,
    "downloadIcsUrl": String,
    "bookedBy": String,
    "onlineBooking": true,
    "confirmed": true,
    "email": String,
    "name": String,
    "lastname": String,
    "firstname": String,
    "phone": String,
    "phoneType": String,
    "phoneExt": String,
    "customerMessage": String,
    "notes": String,
    "groupSize": Integer,
    "lastModifiedOn": String,
    "lastModifiedBy": String,
    "emailConfirmationSent": String,
    "emailReminderSent": String,
    "smsConfirmationSent": String,
    "smsReminderSent": String,
    "location": String,
    "latitude": String,
    "longitude": String,
    "stripeChargeId": String,
    "stripeRefundId": String,
    "paymentStatus": Integer,
    "resources": [
      {
        "appointmentId": String,
        "resourceId": String,
        "resourceName": String,
        "resourceGroupId": String,
        "resourceEmail": String,
        "resourceImageUrl": String
      }
    ],
    "customers": [
      {
        "appointmentId": String,
        "customerId": String
      }
    ],
    "customFields": {
      "additionalProp1": {
        "name": String,
        "value": String
      },
      "additionalProp2": {
        "name": String,
        "value": String
      },
      "additionalProp3": {
        "name": String,
        "value": String
      }
    },
    "auditTrail": [
      {
        "id": String,
        "appointmentId": String,
        "modifiedOn": String,
        "modifiedBy": String,
        "modificationType": String,
        "statusBefore": String,
        "statusAfter": String,
        "notesBefore": String,
        "notesAfter": String
      }
    ]
  }
}

Create Appointment

Element: Calendar

The createAppointment event is fired when an empty Calendar timeslot is clicked.

Syntax

Element.addEventListener("selectAppointment", event => {})

Event Model

"event": {
	"detail": {
  	"date": HTMLDateObject,
    "locationId": String,
    "resourceId": String,
    "startDateTime": String, Format: ISO
  }
}

Calendar View Change

Element: Calendar

The calendarViewChange event is fired when the Calendar view changes.

Views: Day, Week, Month

Syntax

Element.addEventListener("calendarViewChange", event => {})

Event Model

"event": {
  "detail": {
    "start": Date,
    "end": Date,
    "view": String, Options: "day, week, month"
  }
}

Calendar Date Change

Element: Calendar

The calendarDateChange event is fired when the date range of the Calendar changes. Depending on the current view, the range will be 1 day (Day view), 7 days (Week view), or 30 days (Month view).

Syntax

Element.addEventListener("calendarDateChange", event => {})

Event Model

"event": {
  "detail": {
    "start": Date,
    "end": Date,
    "startStr": String, Format: ISO,
    "endStr": String, Format: ISO,
    "timeZone": String, Format: IANA,
    "view": {
        "type": String,
        "dateEnv": {
            "timeZone": String, Format: IANA,,
            "canComputeOffset": Boolean,
            "calendarSystem": Object,
            "locale": {
                "codeArg": String,
                "codes": [],
                "week": {
                    "dow": Integer,
                    "doy": Integer
                },
                "simpleNumberFormat": Object,
                "options": {
                    "direction": String,
                    "buttonText": {
                        "prev": String,
                        "next": String,
                        "prevYear": String,
                        "nextYear": String,
                        "year": String,
                        "today": String,
                        "month": String,
                        "week": String,
                        "day": String,
                        "list": String
                    },
                    "weekText": String,
                    "weekTextLong": String,
                    "closeHint": String,
                    "timeHint": String,
                    "eventHint": String,
                    "allDayText": String,
                    "moreLinkText": String,
                    "noEventsText": String,
                    "buttonHints": {
                        "prev": String,
                        "next": String
                    },
                    "viewHint": String,
                    "navLinkHint": String
                }
            },
            "weekDow": Integer,
            "weekDoy": Integer,
            "weekText": String,
            "weekTextLong": String,
            "defaultSeparator": String
        }
    }
  }
}

Calendar Events

Element: Calendar

The calendarEvents event is fired when new events are loaded. This happens when the date range of the Calendar changes or the Calendar is refreshed.

Events are pulled from the Get Unavailable endpoint in order to display OnSched appointments, external calendar events, and resource blocks. Not all appointment information is available from the events array in this event listener.

Syntax

Element.addEventListener("calendarDateChange", event => {})

Event Model

"event": {
  "detail": {
    "date": {
      "start": Date,
      "end": Date,
      "startStr": String, Format: ISO,
      "endStr": String, Format: ISO,
      "timeZone": String, Format: IANA
    }
    "events": [
      {
        "title": String,
        "id": String,
        "object": String,
        "start": String, Format: ISO,
        "resourceId": String,
        "end": String, Format: ISO,
        "extendedProps": {
            "objectName": String,
            "locationId": String,
            "calendarId": String,
            "resourceId": String,
            "serviceId": String,
            "date": String,
            "fromTime": Integer, Format: Military (i.e. 900 = 9:00 am),
            "toTime": Integer, Format: Military (i.e. 900 = 9:00 am),
            "tzOffset": Integer,
            "startDateTime": String, Format: ISO,
            "endDateTime": String, Format: ISO,
            "reasonCode": String,
            "reason": String,
            "entityId": Integer,
            "resourceName": String,
            "serviceName": String
        },
        "editable": Boolean,
        "calendar": String, Options: "Google, Outlook, OnSched"
    	}
    ]
  }
}