Embedded scheduling with UI Elements

Slot Picker

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.

The Cronofy Slot Picker UI Element is an embeddable version of our Real-Time Scheduling interface. It uses our Availability API to query a calendar synced with Cronofy.

Read our developer documentation for more details on how to use and customize the Slot Picker.

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. 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.

Availability Rules

The Availability Rules UI Element lets calendar users choose when they want to appear as available and periods when they want to appear as busy. It’s often used to indicate work hours, lunch breaks or commute.

This UI Elements presents time periods as 30 minutes available or unavailable slots on an interactive calendar view. Available periods are indicated in green and unavailable periods are left blank.

Like other elements, it comes with built-in CSS that control its layout and theme, including color and spacing. Cronofy customers can amend or override any style rule they want in their own stylesheets to make the element fit seamlessly with their design.

Head to our developer site for more information and a list of the Availability Rules UI Element options.

Agenda View

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.

Calendar Sync

The Calendar Sync UI Element is an interactive display of a user’s profile – a list of their calendar accounts’ synchronization status.

This display is interactive as it allows the user to manage their calendar accounts in one centralized place. They can reconnect calendar accounts that are disconnected or sync additional calendars, as well as remove calendar accounts altogether.

As with other UI Elements the Calendar Sync element can be customized by the user to match the style of their applications.

For more information visit our developer site.