This episode is for members only
Sign up to access "Build an Appointment Booking System With Livewire" right now.
Get started
Already a member? Sign in to continue
Playing
20. Removing slots with booked appointments
Episodes
01. Introduction and setting up
02. Database setup
03. Displaying employees and services
04. Core functionality
09. How we build up availability
3m 40s
0%
10. Working with date periods
6m 54s
0%
11. Iterating over requested days in a period
3m 30s
0%
12. Adding schedule availability
11m 33s
0%
13. Removing schedule exclusions
3m 35s
0%
14. Excluding time already passed today
2m 17s
0%
15. Generating slots
11m 50s
0%
16. Using a custom date collection
1m 28s
0%
17. Building the service availability generator
6m 18s
0%
18. Adding employees into slots
8m 14s
0%
19. Removing empty slots
3m
0%
20. Removing slots with booked appointments
6m 17s
0%
05. Building the checkout
21. Scaffolding the checkout design
4m
0%
22. Making the employee optional
1m 54s
0%
23. Loading availability
8m 31s
0%
24. Building Alpine plugins
3m 18s
0%
25. Showing the calendar
3m 32s
0%
26. Locking unavailable dates
15m 1s
0%
27. Showing the slot count on the calendar
7m 52s
0%
28. Updating the selected date
3m 29s
0%
29. Showing time slots
5m 43s
0%
30. Setting a time slot
2m 43s
0%
31. Finding an available employee
3m 31s
0%
06. Booking appointments
07. Appointment confirmation
Transcript
00:00
So looking at a specific time on here, let's say 1 o'clock today. At the moment, we have got two employees who can fulfill this.
00:07
Let's go ahead and add an appointment to the database. And then before we get to the point where we check the employee's availability and push them into this slot, let's
00:16
subtract any appointments that have already been booked from their availability so they don't get put into that slot. So before we do anything, let's head over to the database
00:25
and let's create out an appointment. So we'll go ahead and generate out a UUID here, paste it in, and let's say service one. That's a haircut.
00:34
Let's do this for my employee. And we'll set a start sat and an end date. Let's go and just fill in some of the details that we need to fill inside of here,
00:43
which will eventually become our booked appointments when we get to that. And let's save this out and then set this up to 1 o'clock today.
00:52
So let's change this over and we'll do the ends at time as 2 o'clock, of course. OK, great. Let's save this out.
00:59
Now, obviously, there's not going to be any difference at the moment because we're not taking it into account. But what we want to do is here, go ahead and remove
01:06
any appointments that this particular employee has been booked for before we go through and add them to that period. So let's go ahead and overwrite periods
01:17
and do a subtract on this. And we'll just go and call maybe a remove appointments method. Let's take in all of the periods here and we'll take in the employee that we're
01:26
iterating over as well. Now, there is a case where we could do this inside of the schedule availability. I kind of want the schedule availability just
01:34
to be when their overall schedule is. I just want this to relate to their schedule, not necessarily to anything additionally to that, like when they have been booked in for.
01:45
I think this service slot availability more works for any appointments that have already been booked. OK, so let's create this method and see what we can do. So let's go and create out the remove appointments method.
01:58
We're going to take a period collection into this, which is our periods. And we'll take in the employee as well. So we can access their appointments
02:07
and remove them from that period collection, which we've already done loads of times before. So let's go and access the employee appointments. And I don't actually think we set this up.
02:17
So let's go and hop over to our employee. And yeah, we don't have any appointments relationship in here. So let's just grab any of these.
02:27
Let's change this over to appointments. And let's come down here and change this to an appointment. OK, great. So let's go and access the appointments.
02:38
Now, we're not scoping this by date. That would be a good idea. But we'll just leave this for now. And really importantly, we're going
02:44
to say where null canceled at. If it's canceled, then of course, it's going to be free. So now we can iterate over each of these appointments. And of course, we already know that for an appointment,
02:55
we have a starts at and an ends at date. So we can take that starts at and ends at date and subtract it from these periods now. So let's bring in our periods just in here
03:05
and make sure we can mutate these. And we're going to say periods reassign this, remember, because it's immutable by default. And we're going to subtract out the period of the appointment.
03:18
So we're going to do exactly what we did before, make out a period in here. We're going to grab the appointment starts at date. So let's pull in the starts at date here.
03:29
Let's copy this just to be sure that we're not mutating anything we don't need to. And let's sub out some minutes from this. So this is going to be the service duration.
03:38
The reason for this is if we have an appointment at 1 o'clock, we want to make sure that we're available in enough time before that to then match up to the next appointment.
03:49
So let's say this service duration. And then we'll do the same thing for the ends at date, which is literally just going to be the ends at date. We don't need to do anything else with that.
04:01
OK, so let's go ahead and include our precision here, which is going to be, of course, a minute, because we're working with minutes here. And let's see what happens.
04:10
So we are reassigning this. We need to return it. So let's go ahead and pull that down here and return that adjusted period for any of the appointments
04:20
that we already have. We'll go over this again in just a second. So if we go to the browser and give this a refresh, let's just remind ourselves we booked this for 1 o'clock.
04:30
So if we have a look at the 1 o'clock slot today, let's have a look. It should be this one here. Yep.
04:39
Let's take a look at our employees. And sure enough, there's only one employee who can do that, which is Mabel, because I am booked from 1 till 2. And let's just check the next one as well,
04:54
because obviously we want to make sure that the next appointment, which is here at 2 o'clock, can be fulfilled by me. So let's open up the employees. And yeah, sure enough, we've only got one.
05:06
So what is happening here? Well, another concept within the periods when we subtract them is also a boundary. So what we want to do is we want to exclude the boundaries,
05:17
because we want this to match up minute by minute. You can adjust this later if you wanted breaks in between appointments. But generally, we're going to go ahead and set this to completely match up. So we're going to say the sparsely period boundaries,
05:30
we're going to exclude all. That will exclude the start and the end boundaries so everything matches up nicely. Just to give you an example of that, let's
05:39
imagine that you had a 1 o'clock availability or an appointment. And that was booked until 2 o'clock. Now, you want to be available from 2 o'clock. And you want to be available from 12 till 1.
05:52
So the boundaries are going to change that. Let's go ahead and check this out again really quickly. And then we are done. So let's look at our slots here.
06:00
Check this slot here, which is that 2 o'clock one. Let's just double check that 1 o'clock one. And let's check the next one, which is 2 o'clock. And yeah, sure enough, I can now do that 2 o'clock appointment.
36 episodes•3 hrs 4 mins•3 months 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 Livewire, 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 Livewire!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.