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
12. Adding schedule availability
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
By the end of this episode, we'll have built up a period
00:02
collection of only the dates and times that a given employee can work for a particular service. So let's get started by making sure that we can actually accept an employee into here.
00:15
So let's go and pull in an employee. And let's do the same for a service as well. So let's take in a service, because we're going to need that to work out the time length of a service
00:27
in order to see whether an employee can fulfill it. OK, so let's go over to our web routes, because we're going to need to pull in a bunch of just test employees here.
00:37
Let's just pull in the first employee. And we'll find mine. And we'll put in the first service here as well. So let's pull the service in here.
00:46
We'll do exactly the same thing and just grab the first service. OK, so we can now pass these directly through as an employee and a service.
00:55
And we can get started. So back over to our schedule availability class, what do we want to do in here? Let's defer this to another method.
01:03
So I'm going to go down here and create out a addAvailabilityFromSchedule method. And this is going to take in this for a specific date. So let's go ahead and take in that carbon date
01:16
that we eventually are going to pass through from here. So let's go ahead and call this this addAvailabilityFromSchedule. And we know that we want to pass that carbon date directly into here.
01:27
Now what we're going to do is go back to what we did a couple of episodes ago. And we are going to add in a period. But we're only going to add in the period
01:35
that this particular employee can work. So let's start by just grabbing a schedule here and dumping it out. So we're going to go and from the employee
01:45
that we've passed in, grab the schedules for that employee. We're not going to access the actual relationship itself. We'll just grab the collection so we're not performing too many queries.
01:55
And we'll say startsAt is less than or equal to the date that we've passed in. And then we'll say whereEndsAt is greater than or equal to the date that we've passed in.
02:08
And we'll grab the first schedule for that employee. OK, let's just die dump this just to make sure we're on track. And then we can start to pull everything together.
02:16
So if I give this a refresh, we get null. OK, that's just because we don't have any schedules defined in the database. So for my employee, let's go ahead
02:23
and add in a startsAt and endsAt date. I'm going to set this to the 1st of January, 2024. And I'm going to set this to the 1st of January, 2025. Now for Monday startsAt, let's go and just fill in a timestamp
02:39
in here and change that to 9 o'clock. And then we can just copy this over. And let's say I finish my working day at 5. Let's do this for every single one, so Tuesday, Wednesday.
02:52
And let's just say for Thursday. So we'll stop at Thursday and say that I've got Friday off. And there we go. Great.
02:59
So I work from this period, Mondays 9 to 5, same all the way up to Thursday. And I don't work Friday, Saturday, or Sunday. OK, so if we head back over and give that refresh,
03:10
there is our schedule. And you can see all of these dates in here. Now what we need to do is add this availability, but only between these hours for each of the days
03:21
that we've got. Now remember a little bit earlier, from this date, we formatted this using L, which will give us the day of the week.
03:29
And yeah, let's just make sure we define that properly. And we get Thursday. So what we can do is we can lowercase Thursday. And we can directly access the column
03:40
in the database of the date that we're requesting and then add the period for Thursday between Thursday startsAt and endsAt. So if we're iterating through and we end up on Thursday,
03:50
pluck 9 o'clock out, pluck 5 o'clock out, and use Spartc to add a period, that period package. OK, so the first thing that we want to do is make sure we just protect this.
04:00
So I'm going to wrap this entire thing in an if statement. And if we are not, if we don't get a schedule, if it's null, we're just going to return. So we're going to skip over that if there's
04:11
no schedule available. And we'll come down here back to the point where we die dump the schedule out and go over to the browser. And there we go.
04:20
There's our schedule. OK, great. So now we need to figure out how to get these days and the times that we work.
04:26
To do this, we'll head over to the schedule model. And we'll go ahead and create out a method in here which will return to us the data for this particular day. So we're going to call this getWorkingHoursForDay.
04:40
Let's just call this date, actually, because that kind of makes more sense. And we'll go ahead and accept in a carbon date into here. OK, so what do we want returned from here?
04:49
Well, if it's a Thursday, for example, so let's say this date we pass through is a Thursday, we want to retrieve out of here something like Thursday starts at and then actually get the time back.
05:01
So we can add that as part of our period. And we want the same thing for Thursday ends at as well. So let's figure out how we can do this. Let's first of all just go ahead and die dump on this,
05:11
which, of course, references that schedule. And then we'll go ahead and add in here the date format. So that's the L format, which will give us the day of the week.
05:23
And then onto this, we can go ahead and concatenate starts at. OK, let's fix this up to getWorkingHoursForDate. And let's head over to our schedule availability.
05:34
And from the schedule, we'll now go ahead and grab that and pass through the date. OK, let's head over and have a look. And yeah, we just need to make sure that over on the schedule
05:43
we pull in the carbon namespace. So let's pull in carbon and carbon. And yeah, let's check this out. OK, yeah, so we get null at the moment.
05:51
So let's just have a look at what we've got here. Yeah, so this needs to be lowercase. So we're going to do a string to lower, of course, because everything in the database is lowercase.
06:01
So this will be lowercase Thursday underscore starts at. Head over and give that a refresh. And there we go. We have got 9 o'clock.
06:07
Perfect. OK, so what we want to do from here is take this and then return this as an array. But we want to go ahead and filter this if it's null.
06:17
So we're going to set up a array here with the structure that we want to see. So we've got the starts at date. And then let's pull in the ends at date.
06:27
And let's die dump on them hours so we can see what we've got. And there we go. So we've got 9 and we've got 5. Let's just go ahead and tweak this around.
06:36
So I'm going to go over to web and we're going to use carbon here to set the test now date. And we could grab the current date. We could add a day on to this and we should be good.
06:48
So let's head over to the browser and have a look. And yeah, we've got two null values because we've now added a day on. That's Friday.
06:53
Today is Thursday. And of course, we don't have any dates here. So we kind of want to filter these out. So let's go back over to our schedule
07:00
here and use array filter on these. And that will give us back a completely empty array. And then what we can do is we can return this. But we only want to return this if it is filled.
07:16
So we could say not empty hours. We want to return hours. Otherwise, we just want to return a null value from this. And that's going to let us know that we
07:26
don't work on any of these days. OK, so let's go back over to our schedule availability and die dump this just to make sure everything's working. And yeah, we got a null value back from here.
07:35
So back over to web routes, let's get rid of this set test now. We are now on Thursday and I do work. So we've got these.
07:41
So we can now easily check if this value is null. It means we just don't work on that day. And obviously, if we get an array back with the times, we can add them as our slots.
07:50
So let's go ahead and take what we've got here. And let's wrap this in an if statement. And we'll destructure the starts at and ends at date that we get back.
07:59
So let's say if not, let's pull out the starts at date and the ends at date for the particular schedule for that user. Assign that here and destructure them to array items.
08:13
If we get a faulty value, we can just return and not do anything else. Otherwise, down here, we want to add these periods. OK, so let's go ahead and add these periods in here.
08:24
So let's say this periods. Again, this is immutable, so we have to overwrite it. And we're going to say this periods and add. So let's make out a period.
08:33
This is exactly what we went through before. And we want these starts at and the ends at date in here. So what we're going to do is do this from the day that we are currently on.
08:42
Remember, we can't do the just put the time in there. It's not going to work. We need to do this on the day that we're currently iterating through here.
08:49
So we're going to take the date that we are currently iterating through. We're going to copy it. That's really important so we don't
08:56
mutate the original value. And then we're going to say set time from time string. And the time string, yeah, sure enough, is the starts at date. So let's pass that in.
09:07
And we're going to do that until the ends at date that we work. So this is going to be the ends at date. Let's put that in there.
09:16
And again, we want the precision in here to be for a minute. Okay, so now that we have done this, let's just take a look at our periods, which we're returning here over on our web routes.
09:29
We should be dumping out the return value of that. So let's go over and check this out. Okay, so we've now got a period collection in here with one period.
09:38
Let's go to the start here. And you can see that this now starts at nine and this ends at five. Great.
09:43
Let's go and do this over a couple of days and see how this looks. Now, it does go over a couple of days, but I don't work on Fridays.
09:51
So I'm going to go ahead and say I do work on Fridays now. And now when we refresh this, we get two periods. So this is for today. Remember, we've requested two days.
10:00
So we start at nine to five today. And tomorrow, if we just take a look, we start at nine to five. Now, if I work different hours on a Friday,
10:09
let's say I started at 12 and finished at, let's just keep that five, then this is obviously going to change. So now for tomorrow, I start at 12 and finish at five.
10:21
And of course for today, my hours are the same. So we've now got per day, the times that we can fulfill within. That doesn't include stuff like appointments
10:30
that have already been booked. And it also doesn't include timing of the actual service that we've chosen. So I cannot fulfill a slot at five o'clock
10:40
because if we have an hour haircut and I finish at five, obviously we're going to roll over into six o'clock, which is not what we want. So what we're going to do is head back over
10:50
and very quickly update our schedule availability for the end date here to subtract off the amount of time the service takes. So we're going to sub out some minutes.
11:01
And all we want to do in here is pass in the service duration. So let's go ahead and add in the service duration, which is in minutes, and let's see what changes here.
11:10
So now, if I take a look at my working hours here, this availability now changes to four. I can do an hour haircut at four o'clock. And the same thing for this one as well.
11:23
Obviously, if we take a look at this second period, let's have a look. We start at 12 and we can fulfill that haircut, which is 60 minutes at four o'clock.
36 episodes•3 hrs 4 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 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!
Episode discussion
No comments, yet. Be the first!