Calendar Sync ALPHA

The Calendar Sync element is an interactive display of your profile synchronization status.

If you have not yet connected any profiles, it will show you authorization links for supported providers (Google, iCloud, Office 365, Outlook, and Exchange). If you have already connected one or more profiles, it will show you a list of those profiles along with the synchronization status for each profile (“active”, “pending” or “disconnected”). If the status is “disconnected” (meaning that a relink is required) then the element will also display a relink button. You can also add new accounts and disconnect existing ones within the element’s UI.

The Calendar Sync element will fill the width of its parent DOM element. The height of the element depends on the number of synchronized profiles.


account_management is required when generating the Element Token.

Adding profiles

The Calendar Sync element includes the ability to add new calendar accounts. Users start the authorization flow by clicking one of the authorization links (exposed by clicking the “Add calendar account” button). When the process is complete, the user is returned to the redirect_uri with a code included as a URL parameter. This code should then be used to request an access token.

CalendarSync options

token optional  #
Auth token for API connection. While this parameter is required for all other elements, it is optional for the Calendar Sync element. This is because users may not have connected any profiles when they first see this element, so will be unable to authenticate with a normal token. When the element is initialized without a token, users will see the authorization links for supported providers.

target required  #
ID of mounting element (e.g. “cronofy-calendar-sync”).

authorization required  #
An object containing the params needed to create an authorization link (used when connecting new profiles). redirect_uri, client_id, and scope are required, but every param you add here will be added to the query string of the generated authorization URL. Full details can be found in the Authorization section.

authorization.redirect_uri required  #
The HTTP or HTTPS URI you wish the user’s authorization request decision to be redirected to. Full details can be found here: redirect_uri.

authorization.client_id required  #
The client_id issued to you by Cronofy to authenticate your OAuth Client. Authenticates you as a trusted client.

authorization.scope required  #
The scope of the privileges you want the eventual access_token to grant. Full details can be found here: redirect_uri.

data_center optional  #
Not needed if you are using the US data center, but required if using another (e.g. de for the EU data center).

api_domain optional  #
Override the default Default value is "".

locale optional  #
The Calendar Sync element supports localization (e.g. locale: "fr" to load in French). Defaults to browser language setting.

tzid optional  #
The Calendar Sync element can set to any timezone using a tzid. (e.g. tzid: "America/Chicago"). Defaults to Etc/UTC.

demo optional  #
Boolean to activate demo-mode. Defaults to false. If demo is set to true the element will return mock data (and not make any API calls).

styles optional  #
An object that controls the pre-packaged element styles.

styles.colors optional  #
Use these options to set the colors for various parts of the Element without the need to add your own custom CSS. Each color option accepts either a valid HEX code (e.g. available: "#FF0000") or a browser-safe color name (e.g. available: "tomato")

  • hairline - horizontal rules and link borders. Defaults to "#D8D8D8"
  • primary - button background color. Defaults to "#15B3D6"

styles.prefix optional  #
Customizable elements are given a prefixed class name using this value. For example, if the prefix was set as “Foo”, the class name on a slot element would be Foo__slot. Defaults to the name of the element (e.g. "CalendarSync").


Cronofy UI Elements come with built-in CSS that control their layout (as well as adding a generic “theme” with placeholder colors and spacing). You can amend/append/override any style rule you like in your own stylesheet.

To be sure to avoid specificity issues with CSS, make sure any custom selectors you add are preceded by .${PREFIX}. For example, if your prefix is “ABC”, you would target the button styles with this selector:

.ABC .ABC__button{
    /* your button styles go here */

CalendarSync classes:

PREFIX default is CalendarSync

  • {PREFIX}__title
  • {PREFIX}__profiles
  • {PREFIX}__profile
  • {PREFIX}__profile-name
  • {PREFIX}__providers
  • {PREFIX}__provider-icon
  • {PREFIX}__provider-auth
  • {PREFIX}__provider-auth-text
  • {PREFIX}__provider-icon--google
  • {PREFIX}__provider-icon--apple
  • {PREFIX}__provider-icon--outlook
  • {PREFIX}__provider-icon--office365
  • {PREFIX}__provider-status
  • {PREFIX}__status--active
  • {PREFIX}__status--inactive
  • {PREFIX}__status-label
  • {PREFIX}__status-icon
  • {PREFIX}__status-icon--tick
  • {PREFIX}__status-icon--reload
  • {PREFIX}__status-icon--pending
  • {PREFIX}__loading-wrapper
  • {PREFIX}__footer
  • {PREFIX}__edit-toggle
  • {PREFIX}__edit-toggle-button
  • {PREFIX}__edit-toggle-icon
  • {PREFIX}__edit-toggle-text
  • {PREFIX}__add-toggle
  • {PREFIX}__add-toggle-button
  • {PREFIX}__add-toggle-icon
  • {PREFIX}__add-toggle-text
  • {PREFIX}__remove
  • {PREFIX}__remove-icon

Example CalendarSync init:

<div id="cronofy-calendar-sync"></div>
<script src=""></script>
        target: 'cronofy-calendar-sync',
        data_center: "us",
        authorization: {
            redirect_uri: "/",
            client_id: "XXX",
            scope: "read_only"
        styles: {
            prefix: "CalendarSync"
        demo: true