Playing
01. Introduction and demo
Episodes
02. Core functionality
03. How we build up availability
7m 55s
0%
04. Employees and services
7m 39s
0%
05. Employee schedules and exclusions
7m 53s
0%
06. Setting up appointments
5m 34s
0%
07. Working with date periods
10m 4s
0%
08. Iterating over requested days in a period
4m 51s
0%
09. Adding schedule availability
15m 38s
0%
10. Subtracting employee schedule exclusions
7m 53s
0%
11. Excluding time already passed
2m 57s
0%
12. Writing tests for schedule availability
19m 50s
0%
13. Generating slots
14m 47s
0%
14. Building the service availability generator
7m 5s
0%
15. Adding employees into slots
9m 44s
0%
16. Removing empty slots
4m 42s
0%
17. Removing slots with booked appointments
6m 44s
0%
18. Using a custom date collection
3m 34s
0%
19. Writing tests for service availablity
18m 42s
0%
03. Building the booking UI
04. Building the availability calendar
25. Rendering the datepicker
6m 51s
0%
26. Fetching availability
9m 16s
0%
27. Disabling unavailable dates
6m 25s
0%
28. Showing the first available date
2m 4s
0%
29. Fetching future availability
10m 4s
0%
30. Showing slot count on the calendar
9m 1s
0%
31. Fixing up core availability in the past
2m 34s
0%
32. Showing available slots
5m 49s
0%
05. Booking appointments
Transcript
00:00
In this course, we're going to be building out a full booking system with Inertia using Laravel and Vue.
00:06
This includes a really nice availability calendar, the ability to choose slots, and of course, make a booking and cancel it and stuff like that. There's a little bit more to it than that,
00:16
and I'm going to show you how this works now. Now, we're going to take this course in several sections. The main big section is going to be the core functionality of what we're building.
00:26
What this is going to allow us to do is take a bunch of employees and services, have certain employees only allowed to perform certain services,
00:36
calculate their availability, and of course, build in stuff like checking if appointments are already in the database and not showing them slots.
00:44
It's much easier to show you how this works, so let's go ahead and do that now. Okay, so you can see on the main screen here, it's just very basic.
00:51
We've got the ability to either choose an employee or a professional or choose a service first. Let's go ahead and click on a professional first and we'll look at how this works.
01:01
So obviously, when we go over to here, we now choose any of these services and these all have different durations. So I'm going to go ahead and choose here.
01:09
Okay, so the time right now is 1041, so the next available slot here is 1115, and we can either choose for today or of course, we can open up our availability calendar
01:19
to see more, and you can see that not only does this blank out any of the unavailable days like weekends that the employee doesn't work, it also shows us how many slots are available for that day,
01:29
and of course, that will go down as people make bookings. So I'm going to choose for tomorrow and let's choose nine o'clock tomorrow, and you can see that this just gives us a really basic form
01:39
where we can enter our details, and you can add more to this later if you need to. So I'm going to go ahead and just quickly make a booking here with my name and email address,
01:47
and as soon as we've done that, before we actually create the booking, we're going to check that this slot hasn't been taken. So for example, if someone has just booked this
01:57
a minute before we have chosen this and we're still on this page, if I click make a booking now, this is also going to check the availability
02:03
so that you're never going to end up with an appointment collision. So let's click make booking and you can see that it's booked and it gives us who it's booked with, when,
02:12
and of course, we can go ahead and cancel the appointment as well as if we want to. So let's go back to the main page that we were on and just take a look at the services.
02:23
Now, the beauty of the core functionality that we're building up is we don't need to specify an employee that we want to perform a service. For example, if I just want a haircut,
02:33
I can click on this and it will register this with any employee once we choose a date. So all of the availability calculations are done with all of the employees in mind
02:43
and we'll get these returned in this custom collection that we're going to be building up. So for example, if I want to book this for tomorrow at 945, this is just going to pick the next available employee
02:53
for that particular slot and then it's going to switch it over to show you who it's with. So this is really helpful
02:59
because sometimes customers don't care who they are actually with, they just want to know the next available appointment slot for a service type.
03:07
So again, we can go ahead and book that as well and you'll have noticed as well that the nine o'clock slot has disappeared because I booked that previously for this day
03:15
and of course, we can only book the slot after that. Now, aside from this, when we're putting together the booking UI, we're going to do stuff like look at the availability
03:24
into the future within this calendar. Now, the system that we're going to be building is incredibly fast when we refresh the page, it doesn't take long to calculate all of this availability
03:34
regardless of how many employees you have but what we don't want to do is load a date on this calendar way into the future. So if we just took a quick look at the database,
03:43
you can see the appointment here that I've just booked. If we look at the schedules over here, this is the schedule for myself. So I have got this running from the 8th of January
03:54
all the way up to a year in advance. So that is my schedule, my just overall schedule and then what I can do is I can set individual days that I do work and times that I work as well.
04:05
So I can set, I start on Monday, Tuesday at certain different times and if you have a look here, you can see that Saturday and Sunday just don't work at all so we can do that.
04:14
Now, as well as that, what we're also going to be doing is adding in the ability to add schedule exclusions. So we can add in holidays,
04:21
we can add in certain days or times that we're not going to be working and that will cancel out all of the slots for that particular employee.
04:29
So for example, if Alex isn't working on a certain day and we choose that service first option, that would just give the next available employee which would be Mabel.
04:38
We've just got another one in here as an example. So back to the availability calendar, this is very, very quick but if we just navigate next, what this is doing is it's continuously loading
04:49
in more dates. So what we can do is we can go really far into the future without slowing this down by making one request for all of these dates.
04:57
So this is just making an AJAX request all the way in and you can see that as we get to past the overall schedule that I've defined, there isn't any availability and of course you can change that,
05:07
it just depends on what you want to do. So the entire database is set up so it's very easy to go in and add these records either manually or within some sort of admin panel
05:17
and yeah, you can just bring the entire system together and this is just gonna be the basic UI that we're building for this that you can expand on if you need to.
05:25
Okay, so now that we've looked at this, we're pretty much comfortable with how this works. Let's go over to the next episode, set up a really basic project with Inertia
05:34
and really importantly, get PEST up and running so we can write some tests for the core functionality that we're gonna cover in the next section. So let's go over and set everything up.
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
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!