How to Build a Scheduling App in 3 Steps

In this blog post we explore building a fully functional calendar scheduler app. Understanding how…

hero banner

In this blog post we explore building a fully functional calendar scheduler app. Understanding how to build a scheduling app for small businesses and companies is a great opportunity that can benefit from having an appointment scheduling app to boost their business.

You can find all the code in this blog on our Nylas Samples repository. We recently discussed how to build a scheduling app on our LiveStream Coding with Nylas:

What is a Calendar Scheduler?

Calendar scheduler is the ability to create a common calendar that others can use for scheduling an appointment or scheduling some time. As an example, take a small business looking to boost their online exposure by creating a scheduling app for users to book and pay for a service ahead of arrival.

Who needs a Calendar Scheduler?

Having a calendar scheduler functionality is important for any business that consists of the following interactions with their users:

  • Your users required booking an appointment so appointment scheduling
  • Your employees are required to have a work schedule so employee scheduling

Small businesses can benefit from adding a calendar scheduler functionality to their workflows. 

As we will see shortly, Nylas’ communication platform enables you to create a scheduling app using the Nylas Scheduler, a powerful out of the box user interface to build a scheduling app. We recently blogged about creating a scheduling calendar to organize events.

Features you need when building a Scheduler App

In this section, let’s go over features you need when building a Scheduler App.

  • Customizable Pre-Build Scheduling UI: Being able to use a ready built scheduling UI is a quick and easy way to get started to create a scheduling app that is ready to use.
  • Automate Manual Tasks: Having the ability to send out reminder emails or request information for each booking is a great way to learn more about your users and ensure they get friendly reminders before an upcoming event or appointment.
  • Embeddable Scheduling UI: Being able to add scheduling functionality to an existing workflow or application is a great add-on that creates robust functionality with minimal effort.
  • Instant Booking: Ensuring you book events in your users calendar instantly is a great approach to providing feedback and blocking off time in your users’ calendar.
  • Time Zone and Localization Support: Being able to connect with your user’s across time zones and languages is important for making your service or business accessible.
  • Group Scheduling: Being able to book appointments across multiple individuals is a powerful feature for creating group events and ensuring accountability.
  • Availability Synchronization: Enabling your users to book events when it fits into their schedule is important. So having the functionality to synchronize their calendar with your service or business will make booking more seamless.

How to Create a Scheduling App Step by Step

Let’s look through the steps for creating a scheduling app step by step with code!

Overview

Let’s discuss the scenario before we jump into coding. We are building an application for a small business that both their employees and customers can use. So the core features will consist of:

  • Employees being able to list out their services and create public calendars
  • Users being able to access the different services available and book them using the public calendars

To build this we will be using the Nylas Scheduler functionality to create a scheduling app. Here is an overview of the application flow:

schedule app overview

Step 1: Sign up to try out the Nylas Scheduler for Free!

Sign up here if you need to create a Nylas account for free! You can try out the Scheduler functionality by following the Nylas Scheduler Docs or checking out our post on creating a scheduling calendar.​​

Step 2: Employees – Creating and Sharing Available Services

Let’s go over the functionality and flow before looking at code. We need to create a view for Employees to create and manage their services and respective schedules:

scheduling app service provider view

So let’s create a inputs fields that allows them to input their service details and create a Nylas Scheduler to share publicly:

create a new service modal

Clicking on the button `Setup/Modify Calendar` will initialize the Nylas Scheduler workflow:

include a Nylas scheduler for the new service

Here is a code sample setting up the above workflow with additional comments inline:

import { useCallback, useEffect,  } from 'react'
import Head from 'next/head'
import { Input, Button, Textarea, Modal, useModal } from '@geist-ui/core'


import { Inter } from '@next/font/google'
import styles from '@/styles/Home.module.css'

const inter = Inter({ subsets: ['latin'] })

export default function EmployeeView() {
 const { visible, setVisible, bindings } = useModal()

 /* we are loading the Nylas scheduler via useEffect */
 useEffect(() => {
   const script = document.createElement('script');
    script.src = "https://schedule.nylas.com/schedule-editor/v1.0/schedule-editor.js";
   script.async = true;
    document.body.appendChild(script);
    return () => {
     document.body.removeChild(script);
   }
 }, []);


 const showNylas = useCallback(() => {
   nylas.scheduler.show({
     auth: {
       /* ensure to provide the Employee's account credential */
       accessToken,
     },
     style: {
       tintColor: '#32325d',
       backgroundColor: 'white',
     },
     defaults: {
       event: {
         title: serviceName,
         duration: 30,
       },
     },
   });
 })

 return (
   <>
     <Head>
       <title>Service Scheduling App</title>
     </Head>
     <main className={styles.main}>
       <Modal {...bindings}>
         <Modal.Title>New Service</Modal.Title>
         <Modal.Subtitle>Add your new Service!</Modal.Subtitle>
         <Modal.Content>
           <p>Some content contained within the modal.</p>
           <Input placeholder="Enter Service" onInput={(e) => {/* store service name */}}/><br/><br/>
           <Textarea placeholder="Please enter a description." onInput={(e) => {/* store service description */}}/><br/><br/>
           <Button onClick={showNylas}>Manage Booking Calendar</Button>
         </Modal.Content>
         <Modal.Action passive onClick={() => setVisible(false)}>Cancel</Modal.Action>
         <Modal.Action passive onClick={() => {
           setVisible(false)
         }}>Add Service</Modal.Action>
       </Modal>
         <a
           className={styles.card}
           target="_blank"
           rel="noopener noreferrer"
           onClick={() => setVisible(true)}
         >
           <h2 className={inter.className}>
             Add <span>➕</span>
           </h2>
           <p className={inter.className}>
             Add a new service and create a public calendar with Nylas.
           </p>
         </a>
       </div>
     </main>
   </>
 )
}

In this section we created the functionality to allow employees to create services and a corresponding calendar for customers to book appointments.

Step 3: Customer – Exploring and Booking Services

Let’s go over the functionality and flow before looking at code. Let’s look at the experience for a customer exploring and booking services:

user booking view

Now anytime a user clicks on a service like `haircut`, they will be taken to the Nylas Scheduler for that specific service:

user booking flow loading Nylas Scheduler

Here is a code sample setting up the above workflow with additional comments inline:

import { useState } from 'react'
import Head from 'next/head'
import { createClient } from '@supabase/supabase-js'

// We are using supabase to store all available services and scheduler URLs
const supabaseUrl = process.env.NEXT_PUBLIC_SCHEDULE_APP_SUPABASE_URL || "";
const supabaseKey = process.env.NEXT_PUBLIC_SCHEDULE_APP_SUPABASE_ANON_KEY || "";
const supabase = createClient(supabaseUrl, supabaseKey);


import { Inter } from '@next/font/google'
import styles from '@/styles/Home.module.css'

const inter = Inter({ subsets: ['latin'] })

export default function CustomerView() {
  const [availableServices, setAvailableServices] = useState([])
  const getAvailableServices = async() => {
    // we are storing and retrieving all available services on supabase 
    const { data } = await supabase.from('service').select(`*, scheduler(*)`)
    
    setAvailableServices(data);
  }

  return (
    <>
      <Head>
        <title>Service Scheduling App</title>
      </Head>
      <main className={styles.main}>
        <div className={styles.grid}>
          <a
            className={styles.card}
            target="_blank"
            rel="noopener noreferrer"
          >
            <h2 className={inter.className}>
              Book <span>✋</span>
            </h2>
            <p className={inter.className}>
              Books a stylists based on your availability.
            </p>
          </a>

          {
            availableServices.map(({ description, service, scheduler}) => (
              <a
                href={scheduler.length > 0 ? scheduler[0].nylas_scheduler_url : ""}
                className={styles.card}
                target="_blank"
                rel="noopener noreferrer"
              >
                <h2 className={inter.className}>
                  { service }
                </h2>
                <p className={inter.className}>
                  { description }
                </p>
              </a>
            ))
          }
        </div>
      </main>
    </>
  )
}

So now we’ve created the customer view where they can select a service and book an appointment.

Now we have a complete scheduler app that can be used to create services and enable booking appointments using the Nylas Scheduler.

Build Time

In this blog post, we created a scheduling app using Nylas. Continue building with Nylas and learn more by visiting the documentation on the Nylas Scheduler. Sign up here if you need to create a Nylas account for free!

You May Also Like

hero banner
How to Build an Email Responder with Generative AI
How to create and read Google Webhooks using Kotlin
AI solutions
Unleashing intelligence: How Nylas APIs power AI-driven solutions

Subscribe for our updates

Please enter your email address and receive the latest updates.