Only show these results:

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, you will get an access token that you need later.

Scheduler Set Up

  1. Save the code below as an HTML file, for example: scheduler-example.html.
  2. Replace ACCESS_TOKEN in the HTML file with the access token you retrieved in step 1.
  3. Open the HTML file in your web browser.
  4. Click the button "Open Schedule Editor".

That's it! Now you have access to the schedule editor and can create your own scheduling page.

Here is the HTML you need to implement the Nylas Scheduler.

Simple Scheduler Example

<!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 that we'll reference later -->
<button type="button" id="schedule-editor">Open Schedule Editor</button>

<script>
var btn = document.getElementById('schedule-editor');
btn.addEventListener('click', function() {
// Invoke 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>