Build an Appointment Booking System With Inertia

Sign in Get started

This episode is for members only

Sign up to access "Build an Appointment Booking System With Inertia" right now.

Already a member? Sign in to continue

Playing

27. Disabling unavailable dates

Episodes

0%

Your progress

Total: 5h 0m
Played: 0m
Remaining: 5h 0m

Join or sign in to track your progress

01. Introduction

01. Introduction and demo

02. A fresh Inertia project with Pest

02. Core functionality

03. How we build up availability

04. Employees and services

05. Employee schedules and exclusions

06. Setting up appointments

07. Working with date periods

08. Iterating over requested days in a period

09. Adding schedule availability

10. Subtracting employee schedule exclusions

11. Excluding time already passed

12. Writing tests for schedule availability

13. Generating slots

14. Building the service availability generator

15. Adding employees into slots

16. Removing empty slots

17. Removing slots with booked appointments

18. Using a custom date collection

19. Writing tests for service availablity

03. Building the booking UI

20. Employee and service resources

21. Listing employees and services

22. Showing services for an employee

23. Scaffolding the checkout

24. Making an employee optional

04. Building the availability calendar

25. Rendering the datepicker

26. Fetching availability

27. Disabling unavailable dates

28. Showing the first available date

29. Fetching future availability

30. Showing slot count on the calendar

31. Fixing up core availability in the past

32. Showing available slots

05. Booking appointments

33. Hooking everything up to a form

34. Setting an employee for the service checkout

35. Adding booking details

36. Storing an appointment

37. Handling appointment collisions

38. Showing the confirmation page

39. Cancelling an appointment

Transcript

00:00

So with the EasePick bundle that we pulled in,

00:02

we have a plug-in called Lock, which will basically disable any dates that we choose under a certain condition within our calendar. So let's go ahead and pull this in, disable all of the dates,

00:14

and then we'll use the availability that we're passing down that we've just done in the last episode to actually disable dates that aren't available. OK, so let's go up to the top here.

00:24

And as well as pulling in EasePick, we can pull in this Lock plug-in. And then when we create this picker, what we can do is define out the list of plug-ins

00:33

that we want to include in here. So we just pull that plug-in directly into there. Now, with that, that will have absolutely no effect whatsoever, but what we can now do

00:43

is specify out the conditions of our Lock plug-in. Now, the first thing we want to do is set a minimum date. Now, the minimum date is just going to be the date that we can pick from,

00:56

which is just going to be the current date and time, so if we give this a refresh now, you can see that all of these prior to today are disabled, which is what we want.

01:05

We don't want to be able to pick any kind of date in the past. So now what we can do is introduce the filter to this. So let's go ahead and bring in the filter. Now, what this will do is it will bring in a date

01:17

for every date that's visible on the calendar. So what we can do with this is return True just to test this out. Now, if we just go and give this a refresh,

01:26

you can now see that every single date on the calendar has been disabled. So what we want to do is we want to come up with a condition here based on the availability

01:35

that we've passed in to see whether this has any slots or not. So let's go ahead and say if the availability that we're pulling in from our props, that's why we define that props

01:45

out, we want to go ahead and find the date that we're currently iterating through. So let's just call this availability A, for example. We want to check if the date is equal to the date format.

02:01

And let's format that in the way that we expect, so YYYYMMDD. So let's take a look at what's happening here in more detail. So we're basically just checking with the list of availability

02:13

that we're passing down to our view. Is this date that we're iterating through on the calendar, so every single day of the month, included within our availability?

02:23

And find will just find that value within an array. And the condition is that the date that we have within our own availability matches this date in this format,

02:33

because we have our dates formatted in a specific way. Now, the reason that we have to format this is the date that we get through is an ease pick date object, which will, by default, not be in the format

02:44

that we expect. So we format that, compare it, and if it's missing, then we're going to return that value, and it should be cut out of the calendar.

02:53

So let's give this a refresh, have a look. And it looks like we do have availability on a Saturday and Sunday. And if we just check our availability,

03:01

it looks like that doesn't exist. Now, the reason for this is what we have completely forgotten to do is filter out the availability inside of here. So what we really want to do is take out only

03:15

the slots that are available. So let's just see what this might look like. Let's say availability and maybe has slots. Now, what we could do with that is pass that directly

03:27

into our availability. So these are technically the dates. So we could call these available dates or something a little bit more obvious.

03:36

And if we just take a look at our date collection, we don't have a method called has slots. So effectively, what we want to do is add in this has slots method, which will only give us

03:47

back the dates in here that have slots. So it's kind of like a filter that you'd find within Eloquent. So to do this is pretty straightforward.

03:55

Let's create out this has slots scope style thing. And we want to return on this, this date collection, which remember contains a list of our date objects. And we want to filter these.

04:07

So we'll go ahead and pull in our function here. For each of these, we will get a date. And then the condition that we return is just going to be that these slots within that date

04:17

are not empty. So let's say date that we're pulling in slots is empty. That is empty is just a collection method. So this just checks if the slots within our date

04:30

is empty, which we know is a Laravel collection. So we should be good now. So let's go over and just remind ourselves we're now filtering by only those that have availability.

04:40

There's no point even passing them down and then passing them through to here. So let's go over, give that a refresh, and check this out. And there we go.

04:49

So now Saturday and Sunday are not available for the next month. And we're good. Now, all of this unavailability is just

04:56

due to the fact that we're only looking a month in advance. But as I said in another episode, we're going to look at as we navigate through this continuously loading in availability

05:07

so we don't have to load in a huge period. OK, let's just test this out. I'm going to go ahead and set a schedule exclusion for, let's just say, the 21st on the Wednesday.

05:16

So let's go over to our schedule exclusions and add one in here for myself. We'll go ahead and set the starts at and ends at just to now.

05:25

And then we'll switch over the date in a second. OK, so we'll go ahead and set this to the 21st. Set this to the 21st. And let's say that I want to take from 9 o'clock

05:36

in the morning off all the way to the end of my working day. And if we head over and give that a refresh, we see this is available. Now this is the great thing about this

05:48

because this is available but not for me. So if we do go ahead and specify Alex, then we will see that off. But if we don't, Mabel can fulfill that appointment.

05:59

So when we click on that and then choose a slot, Mabel will be chosen as the employee. And this is why this is really helpful because it means that if we're just looking at a service

06:08

like we are in this view, then it doesn't matter who the employee is, when there is availability for another employee to carry that service out.

06:16

OK, so now that we've done this, we pretty much have disabled all of the dates on the calendar that are unavailable. And we're good to move on.

39 episodes•5 hrs 0 mins•1 year ago

Overview

Building an availability calendar and booking system is a notoriously difficult problem to solve. That’s exactly what we’re going to cover in this course.

Step by step, we’ll build an appointment slot generator that calculates availability based on employee schedules, employee’s booked time off, the length of service chosen, existing appointments, and cancelled appointments.

For maximum flexibility, we’ll also allow multi-employee availability checks, so we’ll be able to see every employee who can perform a service (and their available slots).

To finish up, we’ll create an entire booking flow with Inertia (using Vue), including a beautiful booking calendar that shows detailed availability across multiple dates, the ability to choose a time slot — and finally the ability to book an appointment.

Phew. We’ve got a lot to learn — let’s build a booking system with Inertia!

Alex Garrett-Smith

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!