The Nylas Scheduler is the fastest way to add full calendar scheduling functionality to your application, allowing your users to create highly-customizable scheduling pages. In this post, you’ll learn how to setup a fully-functional scheduler that provides customizable options for scheduling any type of meeting.

For this example, we’re going to setup an Express app: a web framework for Node.js applications. Express makes it easy to create web apps that interact with HTTP services, and since it’s built upon Node.js, we’re able to use the Nylas Node SDK. We’ll also use EJS for embedded JavaScript templating. All of this will be hosted on Glitch.

Want a PDF of this article?

Share it with a friend or save it for later reading.

Send me a PDF

The very first thing you’ll need to do is setup your developer account and get your API keys. Follow our guide, and take note of the client ID and client secret for your app, you’ll need these later. Go ahead and authenticate your email account to your Nylas app, just to make sure everything is connected properly to the third party provider. If you plan to authenticate a Google or Microsoft Office365 account to your scheduler app, you’ll prompted to setup OAuth for those providers. To do so, follow our guides for Google account integrations, and Office365 account integrations. All other calendar providers are supported without taking any additional steps.

Head over to the Glitch project for the Nylas Scheduler and remix the project by clicking the logo in the top left corner and selecting Remix Project; this will create a new project that is a copy of the Nylas Scheduler. 

Next, open the .env file and paste your Nylas app client ID and secret into the appropriate lines. You also need to set the redirect URI; this should be the url for your app followed by “/login_callback”

Next, head back to the Nylas dashboard, click on the name of your app in the left sidebar, and select View All Applications. On the applications page, click the Edit button for your Nylas app and select the Callbacks tab. Paste the URL you set to REDIRECT_URI in the .env file of your glitch project and click add callback.

Now, you should be able to visit the URL for your Glitch app by clicking Show in the header of your Glitch project page. You should see something that looks like this:

When you click log in, it will redirect you to Nylas Hosted Authentication, which will let you sign in with any email account. You’ll need to input your email and password, and accept any permission requests that are presented.

Once you’re signed in, you will see a page that lists any scheduling pages you have setup and allows you to manage your Nylas Scheduler pages.

Most of this Glitch app is well explained via comments in the code, but here are the primary components of the scheduler app.

• /views – This directory contains the two pages that are displayed as part of the app experience. The .ejs files are used by EJS for templating, which allows variables from other JavaScript files to be used in the rendered HTML.
• server.js – This is where all the backend magic happens. This script handles authenticating the user account and providing data about the scheduler pages the user has available.
• public/style.css – The styling for our Nylas Scheduler Glitch app.

The Nylas Scheduler offers a suite of customization features that allow you to white label the experience and control the functionality that is available to your users. You can update the Company Logo, Company Name, Event Duration, Event Title, and more.  For a complete list of all the customization options, take a look at the scheduler whitelabeling guide.

To customize the scheduler Glitch project, open scheduler.ejs and modify this section of code:

var btn = document.getElementById('show-pages');
  btn.addEventListener('click', function() {
    nylas.scheduler.show({
      auth: {
        // Nylas API token of the current user is provided to the modal
        accessToken: "<%= accessToken %>",
      }
      });
    });

The Nylas scheduler is extremely flexible tool that enables a wide range of scheduling possibilities, head over to the docs to learn more about the features it offers.