Embed Real-Time Scheduling in Your Applications with UI Elements

Author: Jérémy Bourhis

21st February 2019

Our Calendar and Scheduling APIs are helping hundreds of companies deliver better scheduling to hundreds of thousands of users. But not every product integrated with Cronofy has an existing calendar interface. We see a lot of our customers build user interface elements on top of the Cronofy APIs. These can take further hours of development time, increasing how long it takes before your customers can benefit from two-way calendar sync.

That’s why we’re excited to introduce the first three Cronofy UI Elements – the Slot Picker, the Availability Viewer, and the Agenda View.

They’re JavaScript components designed to be embedded within your web or SaaS application. They include customizable options, too. For instance, the Agenda Viewer will automatically pick up the website’s fonts.

UI Elements are free to use but aren’t stand-alone products. They’re powered by our Calendar and Scheduling APIs. Which UI Elements you can use will depend on the plan you’re on. For example, to use the Availability Viewer Element, you’ll need to be on a plan that gives you access to the Availability API.

The documentation for the UI Elements is available on our new – and improved – developer site.

Slot Picker

The Cronofy Slot Picker UI element is an embeddable version of our Real-Time Scheduling interface.

It’s built on top of our Availability API to query a calendar synced with Cronofy and allow people to self-book in a few clicks.

The user will start by picking the day they want before choosing a time slot and confirming their booking. They always have the option to go back to the previous step of the process. Once the time slot is booked it won’t appear as a bookable time slot for anyone else.

The Slot Picker can be used to present the availability of a recruiter or a service provider to streamline online booking.

Read the Slot Picker developer documentation.

Availability Viewer

The Availability Viewer UI element is an advanced slot picker tool that leverages our Availability API to present free time slots in an interactive, week-based, calendar interface.

The availabilities are presented as free/busy on a calendar view – a grid of days, Sunday to Saturday. Free time slots are left blank and busy time slots are indicated.

If the availability query spans more than one week the user can browse the Availability Viewer one week at a time.

The Availability Viewer can be embedded in an applicant tracking system to allow admin staff to view when members of an interview panel are free.

But it doesn’t stop there – freelancers could embed the Availability Viewer to let website visitors self-book appointments.

Read the Availability Viewer developer documentation .

Agenda View

The Agenda View UI element displays events for a single-day period. This UI Element leverages the Unified Calendar API to sync the UI with the connected calendar.


The Agenda View shows time slots for existing events. For example, if the calendar user has a meeting from 9am to 10am and no other meeting that day, the Agenda Viewer will only display that single event when this day is selected.

Clicking an event reveals the full details for that event.

The Agenda View can be used on internal tools to improve project management processes. Project managers could use it to see the workload of a team member and allocate work accordingly.

Read the Agenda View developer documentation.

We hope these UI Elements help you to deliver great real-time scheduling experiences to your users quicker.

If you have any questions on how you can use the UI Elements don’t hesitate to get in touch.

Avatar of Jérémy Bourhis

Jérémy Bourhis

Date: 21st February 2019 | Category: Announcements, Cronofy