Only show these results:

Customizing the v2 Schedule Editor

Implement a variety of customized options for your users when working with your application and the Schedule Editor.

Backgrounds and Theme Colors

Use your own background as well as theme colors for users in the Schedule Editor.

Theme Colors Example

This dark-mode version of the Schedule Editor works by passing certain colors during configuration. These color options are set in the style object. In addition, you can initialize and then set the tintColor and backgroundColor.

The Nylas Schedule Editor showing the event details for a coffee chat. The event details are filled in with demo information. The Editor is using the Dark Mode color scheme.

The code below shows how to include the changes to tintColor and backgroundColor.

style: {
  tintcolor: '#FF0000',
  backgroundColor: '111111',
}

Custom Title

Modify the title of your Schedule Editor page with the modalTitle option in the style configuration.

Specific Title Example

The example shows the code sample for the modified title of the Schedule Editor.

style: {
  tintColor: '#FF0000',
  backgroundColor: '#111111',
  modalTitle: "Select an Event"
}

The Nylas Schedule Editor. The page title is set to "Select an Event". One event is shown. The Editor is using the Dark Mode color scheme.

Displaying Tabs

Control the tabs that are displayed in the Schedule Editor for your users with the option config.behavior.displayOnly. Pass this option while opening the Schedule Editor modal in your client-side application to limit certain tabs.

The Nylas Schedule Editor showing the "Reminders" settings for a one-on-one coffee chat. The "Send me a confirmation email" and "Send guests a confirmation email" options are selected.

Toggling tab visibility is helpful for contexts such as when your application uses config.defaults to pass initial values. This prevents users from editing your default configuration.

Tab Details

Seven valid tabs are available within the Schedule Editor by default. The order of tab IDs doesn't affect the configuration. In addition, unknown tab IDs aren't included. One valid value must be included and passed, however.

  • reminders
  • event-info
  • calendars
  • opening-hours
  • booking-flow
  • custom-fields
  • page-styles

Tabs displayOnly Example

This configuration example displays only three tabs, event-info, opening-hours, and calendars.

btn.addEventListener('click', function() {
  nylas.scheduler.show({
    auth: {
      pageEditToken: '<EDIT_TOKEN>',
    },
    behavior: {
      displayOnly: ['event-info', 'opening-hours', 'calendars'],
    },
    defaults: {
      event: {
        title: 'Introductions',
        duration: 45,
      },
      reminders: [
        {
          delivery_method: 'webhook',
          delivery_recipient: 'both',
          time_before_event: 60,
          webhook_url: 'https://test.com/callback',
        },
      ],
    },
  });
});

Default Values

In your application, you can set default values within the Schedule Editor for your users. Populate certain fields with stored information for convenience and consistency.

Default Values Example

In this example, the options within tintColor, backgroundColor, displayOnly, and additional_fields determine what a user sees when on the Schedule Editor.

nylas.schedule.show({
  auth: {
    accessToken: "<ACCESS_TOKEN>"
  },
  style: {
    tintColor: "#FF0000",
    backgroundColor: "#111111"
  },
  behavior: {
    displayOnly: ['event-info', 'opening-hours', 'calendars'],
  },
  defaults: {
    event: {
      title: "30-min Coffee Meeting",
      duration: 30
    },
    appearance: {
      company_name: "BigCompany",
      logo: "https://assets.site.com/logos/big-company.png"
    },
    booking: {
      additional_fields: [
        {
          label: "Existing Customer",
          name: "Marie Curie",
          required: true,
          type: "text"
        }
      ]
    }
  }
});