Playing
03. How we build up availability
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
So generally, I don't like covering theory, but because this is so complicated, it's super important that we understand exactly how we're going to build up these slots within that long time frame, taking into account employee availability. So I'm just going to go through and list out the basic process that we're going to use to do this. And then as you move through this section and we build this up together, you'll understand it a lot better. OK, so let's start with the employee schedules.
00:27
So they are really important, of course, and we've already seen that we have a from and a to. That's a really long time frame. So that could be from today. Let's say they join today and we expect them to work for the next 6 to 12 months or year.
00:42
So that's the first thing that we're going to insert, and that will give us their entire availability for that time frame. Also makes it really, really easy to add in their availability rather than having to do this week by week or day by day. So with that, we're also going to have the Monday days, the Tuesday days that we work and all of that kind of stuff. We already saw that from the introduction within the database.
01:03
So we're going to be able to specify when they work on Monday, when they work on Tuesday and so on all the way up to Sunday. And we can null this so we don't have to have a day that they work. We could set that they start on Monday at null and end on Monday at null. And that means they just don't work on Mondays overall.
01:22
So that's the next part about this. The second part about this is exclusions. So we're going to exclude specific days from their schedule. So with the employee schedule, we have an overall time that they work and the days that they work and the exclusions in there as well.
01:39
Now into this, what we also need to take into account are the already booked appointments that we have. That comes a little bit later. So we're going to have two main classes that deal with building up the employee availability and then building up the availability for that particular service and then generating the slots. So let's go ahead and talk about how we're going to generate out these slots.
02:00
Now we're going to have an overall date period. So that's just a concept within carbon or just general dates within PHP. So let's say I want to look for availability just for today. So I want to see what appointments are available for today for a specific employee.
02:16
So let's say that we want to check when Alex can do a haircut for 30 minutes today. Now we are going to allow this to run over a long period of time. So you could check Alex's availability for the next six months if you wanted to. But let's just take today for an example.
02:32
Okay, so what we're going to do with this is we're going to take that 30 minutes and we're going to build up a collection of dates with 30 minute slots. So the first one is going to start at 00, sort of like in the morning, midnight kind of thing. And it's going to end at 2359 at the end of the day. Or technically, if we think about it, it will end at midnight in that day.
02:57
So we're going to build up a ton of slots within a collection within that particular period. So we're going to have, I can't work it out, but multiple slots within that day. What we're then going to do is we're going to iterate over these slots, fill in only the availability that Alex can do. So if I work nine to five, the slots will fill in from nine to five with my employee data.
03:22
So I can do that particular service within that time. Into here, that's going to give us nine, 930, so on and so forth, 430. And then we're going to do things like, well, if the haircut is half an hour, we're not going to include five o'clock. Because if I finish work at five o'clock, we need to get rid of that one.
03:43
So we're going to end up with a bunch of slots inside of here. Now, this will still have, at this point of writing the code and building up these slots, it will still have things like 30 minutes past midnight or 0030 in the morning, but we'll exclude them a little bit later on. Now, the next thing that we'll do after we've worked out the availability for Alex,
04:06
taking into account the days of the week that I work and the hours that I work, we're then going to go through and get rid of any appointments that are already in booked in. So, for example, if I have a nine o'clock appointment for hair, we're going to get rid of that. And then we're going to be left with 930.
04:22
Now, we're still going to be left with all of these other dates. So we're still going to have, say, six o'clock in here. And let's just add that in really quickly. We'll end up with 630 still.
04:33
But what we can then do is go through and we can get rid of the ones that we can't do. And all of this happens at the same time, but you can change around the order of this. It doesn't really matter. But basically, what we end up with at the end of it is a list of slots, which is going to be a collection of objects.
04:49
And we're going to have a date object in there with a time object inside of that giving us the time. Now, this date object will also tell us which employees can do this service. So, for example, let's just kind of start again. We're going to say, I want to check today who can do hair, and we know that that's 30 minutes.
05:10
And I want to check if Alex or Mabel can do that. Well, what's going to happen is we're going to build up this same collection. But when we build up this collection of dates, we're also going to have employees inside of that as well. So, for example, this time might be 9 o'clock for Alex.
05:28
But if Mabel can't work that, she will not be within this employees list. So, we'll have a slot at 9 o'clock where Alex can do, but not for Mabel. Now, if Mabel and Alex can't do that slot, of course, we're just not going to have that slot in there altogether. So, this is incredibly complicated.
05:44
But basically what we want to do is build up a huge list of slots that are potential from midnight to midnight. And then we go through and step by step reduce this list down, add who can do that slot so we can see for a particular service whether multiple employees can do that service. And that's really just a UI thing. For example, if I'm booking something and I want to see, I want to haircut today, but I don't care who does it.
06:10
That's going to give us which employees can do that. It doesn't really matter. It will give us all of the available slots for all of the available employees for that particular day. Now, this is complex on its own in terms of doing this just for one day.
06:25
But, of course, what we're going to do is build up and iterate over multiple days. And that will give us a collection like this of multiple dates. So, we'll have a date in here, a date in here. This will be today.
06:40
And this will be tomorrow. I'm obviously oversimplifying this. So, for example, if I want to see who can do hair over the next two days, this will give me a collection of dates. So, today and tomorrow, because I want to see over a two-day period or a week period or a month.
06:56
It doesn't really matter. And I can see who can do this. So, I might have two employees that can do 9 o'clock. And I might have one employee that can do 9.30, in which case I can just choose whatever slot I want.
07:09
Or if I've chosen a specific employee, I can already see that that employee is doing that because we can choose an employee or a service at the same time. So, all of that kind of stuff will be included in what we're doing. It's really, really difficult to explain this. But as we go through the code, start to build it up step by step, and then we start testing this, all of this will start to come together.
07:29
But hopefully, that's given you a much better idea as to how this slot generation works. There are other ways to do this. We're not going to be doing a lot of database-heavy stuff here. We're really just going to be building that collection of slots up for the date that we choose.
07:43
And then we're going to be presenting them to the user. And this is actually very, very fast as well. So, now that we have covered that, hopefully that makes a little bit more sense. Let's start to build this out.
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!