Version:
Only show these results:

Scheduler v2 Quickstart guide

This page will walk you through how to quickly set up the Nylas v2 Scheduler and start using it.

Before you begin

To follow along with the samples on this page, you need the following prerequisites:

Create an HTML file

Save the code sample below in a new HTML file. Any file name works (for example, scheduler-example.html).

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Nylas Scheduler Simple Example</title>

    <!-- Import the Nylas Schedule Editor script --> 
    <script src="https://schedule.nylas.com/schedule-editor/v1.0/schedule-editor.js" type="text/javascript"></script>
  </head>

  <body>
    <!-- Create a button and give it an ID to reference later --> 
    <button type="button" id="schedule-editor">Open Schedule Editor</button>

    <script>
      var btn = document.getElementById('schedule-editor');
      btn.addEventListener('click', function() {
        // Prompt the Schedule Editor when a user clicks on the button
        nylas.scheduler.show({
          auth: {
            // Account <ACCESS_TOKEN> with active calendar scope
            accessToken: "<ACCESS_TOKEN>", 
          },
          style: {
            // Style the Schedule Editor
            tintColor: '#32325d',
            backgroundColor: 'white',
          },
          defaults: {
            event: {
              title: '30-min Coffee Meeting',
              duration: 30,
            },
          },
        });
      });
    </script>
  </body>
</html>

Authorization

Replace the <ACCESS_TOKEN> in the HTML file with the value you saved from the Before you begin section.

Open HTML file

Navigate to the new HTML file and open it in your web browser.

Open schedule editor

Click the Open Schedule Editor button to launch.

🎉 That's it! Now you have access to the Schedule Editor and can create your own Scheduling Page.