Calendar management
Embedded contextual email
Scheduling automation
Automated outreach
Telehealth
Marketplaces
Recruiting
Document management
Real estate
Communications software
Docs
SDKs
Tutorials
API status
Changelog
Support
Blog
Events
Guides
Newsroom
Partners
Build vs. buy
Customer stories
Trust & security
Why NylasHow to Build a Scheduling App in 3 Steps
In this blog post we explore building a fully functional calendar scheduler app. Understanding how…
In this blog post we explore building a fully functional calendar scheduler app. Understanding how…
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:
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.
Having a calendar scheduler functionality is important for any business that consists of the following interactions with their users:
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.
In this section, let’s go over features you need when building a Scheduler App.
Let’s look through the steps for creating a scheduling app step by step with code!
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:
To build this we will be using the Nylas Scheduler functionality to create a scheduling app. Here is an overview of the application flow:
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.
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:
So let’s create a inputs fields that allows them to input their service details and create a Nylas Scheduler to share publicly:
Clicking on the button `Setup/Modify Calendar` will initialize the Nylas Scheduler workflow:
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.
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:
Now anytime a user clicks on a service like `haircut`, they will be taken to the Nylas Scheduler for that specific service:
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.
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!
Please enter your email address and receive the latest updates.
Ram loves teaching, building and exploring technologies. He is passionate about empowering developers to ship amazing products to market as fast as possible ????. Ram is excited to share knowledge and help others. He’s a Relaxed Tomato ????.
