OnSched.js Overview

Welcome to OnSched.js. OnSched.js provides for rapid UI implementation with the OnSched API. We do all the heavy lifting for you so you can quickly go live and start accepting bookings.

OnSched.js is built on the foundation of UI elements. You simply assemble the elements to support your own booking flows.

📘

Version 3.0.0

The following documentation references our most recent version of OnSched.js. For previous versions of the JavaScript SDK please see earlier versions of the documentation (use the version dropdown in the menu to change versions of the documentation).

Setup and Installation

Add the following script tag within the HEAD of your document:

<!--Include OnSched.js CDN-->
<script type="text/javascript" src="https://js.onsched.com/3.0.0/"></script>

Elements

Elements are created with parameters and options. Parameters specify the id's that the API endpoints take in. Not all elements have options yet. In the future, you will be able to specify options for such things as color schemes.

When an element is mounted, the API calls are fired and the UI is rendered. Elements can be updated if you change the parameters and options. e.g. availability.update(params, options); You may wish to defer the mounting of an element until you receive required data from events.

Elements receive events that allow you to create booking flows. Events pass relevant detail for you to consume. For example, when a list element is clicked on, or data from the API is loaded, an event will be sent to the element.

Consumer VS Setup

OnSched.js Elements are broken into 2 categories, Consumer, and Setup. Consumer Elements include all actions that are required by the consumer who is booking, Setup Elements include all actions that are required for initial setup and ongoing calendar management.

Any elements that require the use of the Rest APIs Setup Interface will be considered a Setup Element. Setup Elements in Onsched.js version 2.0.0 require an access_token to first be generated, then included in the initialization options object. We recommend that you decode the JWT to determine the expiration before generating a new token with each mount. For more information on generating an access token for the Rest API please see Authentication.

Custom Events

Custom events are triggered when the API returns a response for each element. Custom events can be leveraged to utilize the API responses in your own elements rather than the OnSched.js defaults. API responses for all custom events will be accessible from e.detail.

For example, the following are custom events for the Locations Element:

• getLocations: triggered when existing locations are found
• clickLocation: triggered when a location is clicked in the Locations Element list

First we create a div in HTML to be used for mounting...

<div id="locations"></div>

Next we add our logic to initialize OnSched.js...

<div id="locations"></div>

<script>
  // Initialization
  const clientId = 'DemoUser';
  const environment = 'stage'
  
  const onsched = OnSched({clientId: clientId, environment: environment});
  const elements = onsched.elements();
</script>

Then, we add our Locations Element OnSched.js logic...

<div id="locations"></div>

<script>
  // Initialization
  const client_id = 'DemoUser';
  const initialization_options = {};
  
  const onsched = OnSched(client_id, initialization_options);
  const elements = onsched.elements();

  // Location Element Logic
	const locationsParams = {};
  const locationsOptions = {};
  const locations = elements.create('locations', locationsParams, locationsOptions);
</script>

Lastly we add our event listener, and any logic that we wish to do with the data obtained...

<div id="locations"></div>

<script>
  // Initialization
  const client_id = 'DemoUser';
  const initialization_options = {};
  
  const onsched = OnSched(client_id, initialization_options);
  const elements = onsched.elements();

  // Location Element Logic
	const locationsParams = {};
  const locationsOptions = {};
  const locations = elements.create('locations', locationsParams, locationsOptions);
  
  // Custom Event Listener
  const locations_element = document.getElementById('locations');
  
  locations_element.addEventListener('getLocations', e => {
    console.log('Locations Response: ', e.detail);
  });
  
  // Mount Element
  locations.mount('locations');
</script>