The User Interface Elements provide you with the customizable UI you need to offer great and consistent scheduling experiences to your users
The Slot Picker UI Element shares the real-time availability of connected calendars through a simple booking interface. The Slot Picker can be embedded on websites or in SaaS applications to allow people to self-schedule in a few clicks.
The website visitor or software 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.
Read our developer documentation for more details on how to use and customize the Slot Picker.
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. 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 – one without a calendar interface – to allow admin staff to view when members of an interview panel are free before adding an interview to their schedules. It can also be used to let employees self-book mentorship sessions or by freelancers who want their clients to book online.
Check our developer site for more info about how to set up the Availability Viewer and customize it.
Share a real-time view of a user’s schedule with the Agenda View. It uses our Unified Calendar API to sync the UI with the connected calendar.
The Agenda View displays a single-day period and only 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 View will only display that single event when this day is selected.
The primary view is a column of event summaries, with the ability to navigate to the next or previous day. Clicking an event reveals the full details for that event.
The Agenda View can be used on companies’ internal tools to improve project management processes or to share staff workload.
Explore our developer docs to learn how you can add the Agenda View to your website or application.
Global brands deliver better scheduling with Cronofy
See the UI Elements in action. Let’s discuss how you can embed real-time scheduling on your websites and applications.