Scheduler Quickstart

Prerequisites

Sign up for your Nylas developer account, and follow our guide to get your API keys and authorize your first account. When you complete this guide, save your <ACCESS_TOKEN> for later.

Scheduler Set Up

Step 1 Create an HTML file

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

HTML Code Sample

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

Step 2 Authorization

Replace the <ACCESS_TOKEN> in the HTML file with the value you saved from prerequisites.

Step 3 Open HTML File

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

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