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
15. Generating slots
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
If you cast your mind back to when
00:01
we spoke about how we want this structured slot data to look, it was kind of like this. So we had this today, and that contained a bunch of slots in there.
00:11
We had the date for tomorrow. That contained a bunch of slots. And that can be for any number of days. Inside of that, we want all of the times that
00:19
are available for that day. And we want the employees inside of them times or slots that can fulfill them particular slots. So we have our availability for our employees working.
00:33
Now what we're going to do is just go through and create out this slot generator. So our slot generator is kind of the core of everything. We generate out based on the dates that we want.
00:44
So let's say from today until tomorrow. And then we go ahead and go into our slots. And we fill them using the employee availability class, checking if that employee can fill that date and that time.
00:59
And we already know that we have all the information that we need with them date periods. So how do we want this to look? Let's go ahead and just scaffold this out really quickly.
01:08
So let's go ahead and just call this generator. We'll probably want something like a new slot generator, which of course we don't have at the moment. And then into this, we want to give the dates and times.
01:18
So this will be something like now start of day. That will be what comes through from the calendar. And then we could say now and say add a day. So just go into tomorrow and say end of day.
01:31
Now remember what this slot generator is going to do is it's going to generate all the available slots from the very start of the day. So midnight today or previously, and then tomorrow midnight.
01:42
So let's go and just figure out how this is going to look again. So probably say something like generate. And then the most important part of this is the period.
01:52
So let's say we're getting our hair cut, and this is a 60 minute appointment. What do we want the slot times to have? Well, we want them to have a period of 60 minutes,
02:01
and so on and so forth. So let's go ahead and just leave this as it is. I think we've figured out the API for this now. And let's build out this slot generator and see what we get.
02:11
So let's go into our app directory again and into booking, and let's create out a new class inside of here. And let's call this slot generator. So we know that inside of here, we
02:24
are going to take in the start date and end date. And again, they're going to be carbon objects. So let's put in the starts at date and put in the ends at date.
02:34
And we'll assign them directly in here with protected, because we don't need to access them. And that's pretty much it. So let's get rid of that, pull that up to there.
02:43
That's all we need. OK, so now we just want that method in here, which is the generate method. And that's going to take in, of course, the period.
02:53
What do we want to call this? I think interval makes sense here. So let's say interval. And we're done.
02:59
OK, so let's start playing around with this. The first thing I want to do is just create out an empty collection. I think we'll change this over a little bit later
03:06
to use a custom collection so we can access some methods on it. But for now, just a plain empty collection will do. So the first thing we want to do is create out a carbon period, kind of like what we did before if we head over
03:19
to our schedule availability up here, where we created a carbon period and got the days for the dates that are being requested. We want to do pretty much the same thing
03:28
and make sure these have an interval of one day, so each of all the dates that we return is grouped by the day that we're working with. So let's just try this out now.
03:38
So let's go ahead and pull in a carbon period. And let's create one of those starts at, or this starts at, in this case. And we're going to say a period of one day.
03:49
And this ends up. And then we'll just start to iterate through these. So let's do a for each on days as day. And let's just dump them out so we
03:58
can kind of get a good idea of what we're doing once again. OK, great. So let's head back over to our web routes. We'll uncomment this.
04:05
And let's go over to the browser and see what we've got. OK, yeah, we just need to pull this in. Let's import that. And we'll head back over and have a look.
04:13
OK, great. So we've got two days. That's to be expected because we want this to run from the start of today, which is here,
04:19
at the end of tomorrow. And let's just make sure, yeah, that's fine. OK, so we are now generating out two days. Now, inside of them days within this slot generator,
04:30
we now want to do pretty much the same thing and then generate out all of them slots within them days so we can start to add these to the collection. So inside of here, let's go ahead and create out
04:40
a new variable. And I think we'll use a custom class here. So let me show you what I mean. So we're going to new up a custom date class.
04:49
Now, this date class is going to take in the day that we're currently iterating through. Let's go ahead and build this out now. And I'll show you what I mean.
04:57
Because essentially, what we want is to push this to this collection. And this new date will then contain slots. So eventually, we'll get to the point where,
05:05
as we're iterating over these, we're going to build up down here a bunch of slots, add them to that date, and then we're going to have a nice nested structure of the days that
05:14
are available and the slots within them. OK, so bear with me, and we'll go ahead and figure this out. OK, so let's go and create out a class in here. And we'll just call this date.
05:24
And let's go ahead and accept that day into the constructor. So that's a carbon date. And let's actually make this public, because we will need to be able to access this.
05:35
That's pretty important. And then inside of this date, which is our overall thing, we're going to have a collection of slots that we can push to.
05:44
So let's initialize this directly from the constructor. So let's set the slots to a new collection. And that's just collect, isn't it? And then down here, we'll have a method
05:54
which will have the ability to add a slot to this particular date. OK, so let's leave that at that for now. Just make sure we've got everything imported here.
06:01
And yeah, I think we do. No, we don't. Let's pull that in from illuminate support collection and make sure we pull carbon in here as well, which
06:09
we didn't do. OK, cool. So we should be good. Let's go and just dump out that new date class
06:16
that we've just created. Let's go over to the browser and check it out. Great. So we've now got this overall date class
06:21
that can contain slots. So this is today. This is tomorrow. And we want to know what slots are available today
06:28
and what slots are available tomorrow or even three months into the future. It doesn't matter what we do here. So now, inside of this for each loop,
06:36
we want to do pretty much what we've done here. But we want to do this for times instead. So let's swap this to times and generate out a carbon period for all of the available times here.
06:47
So we're going to say not this starts out. We want to do this for an individual day now. So we're going to say for day, start of day. So we're going to do this from the start of this day.
06:58
Then we're going to have an interval in here, which is going to come from the interval that we have passed in here. Let's just kind of mock this out for now
07:05
and say 60 minutes just to test this out. And then, of course, here is going to be day, end of day. So only for this particular day that we're now iterating through, generate out a bunch of times.
07:18
Once again, we're going to go ahead and do a for each on these times as time. And let's go ahead and just dump out each of them times. Now, we should now see for every single hour of the day,
07:31
something dumped out. And yeah, that doesn't look like it's working. OK, so I think we need to do a copy on this date. So yeah, because we were modifying the original day.
07:42
So we were just getting a no period in there. OK, let's hop over to the browser and give that a refresh. And yeah, sure enough, we've got a bunch of these now. So let's take a look at this.
07:51
We've got from midnight today to 1 o'clock to 2 o'clock in the morning, 3 o'clock, all the way through. So we've now got a slot, technically, which we can push to that date class
08:03
that we've just created with each of these available slots. OK, so now that we've done that, let's just start to push that. And then we'll dump this out and get some sort of structure
08:12
going. So like I said, on this date object that we've created, which represents that day, we're going to have an add slot function, which
08:19
is going to take in something to add to that. Now, again, what we're going to do is create another custom class to hold that slot and have any other methods on there,
08:28
like being able to push an employee to that particular slot as well. So let's go ahead and new up a slot class, which we don't have yet.
08:36
And let's do exactly the same thing as we did with the day here, but this time push the time. OK, let's go ahead and create out a new class in here. And we'll call this slot.
08:45
And once again, this is going to look pretty much exactly the same way. We're going to take in a carbon object in here, which is going to represent the time.
08:53
We can make that public so we can access it wherever we need to. And let's just leave it at that for now. We'll eventually have a collection of employees
09:00
in here that we can push to. OK, so now that we've gone through this for each loop, grabbed the overall date, gone through this for each loop, grabbed each of the available slots,
09:08
let's just die dump at the bottom on whatever we're holding here, which is this overall collection. And then we'll start to push stuff to it.
09:16
So at the moment, of course, this is completely empty. And yeah, we didn't even introduce this add slot method on our date class. So let's do that now.
09:24
Very, very simple to do this. So let's go and say add slot. And that's going to take in, of course, that slot that we have just created.
09:34
Slot, and we are just going to say this slots push, because that's a collection now, and we're going to push that slot to them. Slots, OK.
09:45
Right, let's have a look. So we're not pushing this all to the collection just yet. So we can go ahead and do that just down here. So let's do collection and push.
09:54
And let's push the overall date. So once again, grab the date, which is our custom object, push a load of times to that date, and then push that date for each iteration to that collection.
10:05
And obviously, we're just dumping it out. OK, great. So now we've got some more structured data. So we've got two dates, today and tomorrow.
10:12
Imagine this like a calendar. So I've got a day and the next day, and I can see exactly what slots are available on that day. Think back to the introduction where
10:19
we saw the amount of slots that we could actually see. So for today, we've now got a bunch of slots. We've got 24 slots, which obviously isn't right. We're going to need to filter these at some point.
10:30
And now, inside of each of these, we've got a slot with each of these times. So we can easily take this data now. And when we request access to our calendar
10:37
and look at the dates on the calendar, we can now use this data to show what slots are available. And when we click on them, we can again read what slots are available.
10:47
OK, so now that we've done this, let's instead of die dumping on the collection, go ahead and return this. And if we head back out over to our web routes,
10:54
we should get exactly the same result here when we go ahead and generate this. And there we go. Now, the beauty of this now is if the service is
11:02
a slightly different duration. So for example, let's go ahead and pull in a service here. Let's find service 2, which I believe is 90 minutes. We can just directly pass the service duration into there.
11:16
And that's going to calculate the correct number of available slots over a particular day. Of course, it's going to be less than 24 now. So let's just check the database.
11:26
And oh, yeah. So what we didn't do, let's go back over to our slot generator is we didn't actually change this around. So very easy to do.
11:37
Let's just grab the interval and then add on minutes. OK, so now what we should see is for each day, the slots reduced because the requested service is, of course, longer.
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.