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

0%
Your progress
  • Total: 3h 4m
  • Played: 0m
  • Remaining: 3h 4m
Join or sign in to track your progress

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 episodes3 hrs 4 mins

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
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!