This episode is for members only
Sign up to access "Build an Appointment Booking System With Inertia" right now.
Get started
Already a member? Sign in to continue
Playing
08. Iterating over requested days in a period
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
OK, so hopefully we've got to grips with the concept of a date period and adding and subtracting. So for our four period method, let's get rid of the examples that we added in there. We'll also get rid of this die dump as well.
00:15
And let's go back to our web routes here and actually add in a period in here. So I'm going to do this very explicitly because when we work with calendars, of course, we're going to look from a certain day to, you know, the end of a certain period. So we could use the now helper actually and just say start of day.
00:33
Let's go ahead and do that. And then let's bump this up a little bit and go a little bit further into the future. So we're going to say add month and we're always going to say end of day because we always want to look at the end of the last date that we requested.
00:47
Otherwise, it's going to be the current date and time. If it was 12 o'clock today and we added a month, it would only look up to 12 o'clock in a month's time, which is not what we want. OK, so we've got this period in here.
00:59
Let's go ahead and accept these two periods into what we have here. So these are both going to be just carbon instances. So we're going to call this starts at and we're going to have another carbon instance for ends at.
01:13
Now, the way that this is going to work is we're going to build up eventually a collection of dates within a custom collection. So we're going to have, in this case, today, tomorrow, the next day, all the way up to a month's time.
01:26
But what we want to do when we're checking employee availability is we want to look on a day-by-day basis. We don't just want to grab that entire period and see when that employee is available. Now, the reason for that, if we look at our schedules table, we could do if we just had
01:43
a starts at and ends at date. But that assumes that the employee works every single day. We know that's not the case. We know that they might have certain days off in the week.
01:53
So what we want to do, first of all, is with the starts at and ends at date, break these up into days. Now, we don't need to use the period collection or anything from that package to do this. We can just use a standard date period.
02:07
So I'll just go ahead and show you what that looks like. We're going to go ahead and use a carbon period object, which, of course, comes from the carbon library. And we're going to go ahead and create out a carbon period.
02:18
And we're going to say starts at and ends at. Let's take a look at what this looks like in the browser. And you can see, sure enough, the start date here is the start of today. And the end date here is the end of the day in one month's time.
02:32
Great. Now, what we can do with the carbon period is we can grab the days from this. And we can iterate over this. So let's just go and use this days method.
02:41
And we'll die dump on this. So let's just have a look. We've got our start date and our end date. This is now iterable.
02:48
So let's go ahead and collect these up and iterate over them. We could just iterate over them normally. But I'm going to go ahead and use a Laravel collection here. So I'm going to say collect these up and then go over each of the days.
03:00
So let's create out a function in here, a closure in here. And we'll grab each of the days. In this case, though, I'm going to call it a date just so we can keep the terminology the same.
03:09
OK. So in here, we're just now going to dump, not die dump, on that date. And we'll see what we get. So give that a refresh.
03:16
And sure enough, we get every single day now within that period. And all of these days, of course, you can see that they match up exactly to what we want, the 10th, the 11th, the 12th, all the way up to the end date that we've requested. Now from these days, what we can do is extract out which day it is.
03:34
So I can find out if one of these dates is a Monday, a Tuesday, Wednesday, so on. And then we can use that to check the availability for an employee within that particular range. So for example, we could say something like format and L. And that will give us the day.
03:51
So you can see here, we've got Tuesday, Wednesday, Thursday, Friday, Saturday. It is currently Tuesday. So I'm recording on a Tuesday. Obviously, that's going to be the first day.
04:00
And then that goes all the way up to the last day that we have. So now we have a representation of each of the days. And that means that using that, we can check whether that specific employee in the database works on that day.
04:12
Then we can gather the hours that they work and use that to work out when they're available on that particular day. So hopefully, that makes sense. That's just the really basics of iterating over the days that we want and why we're doing
04:24
that. And again, that is why we included these Monday starts at Tuesday starts at columns. Because this makes it really, really easy and fast to check whether we're available on that particular day.
04:36
So that's pretty much it for now. Now that we've understood that, let's move over to the next episode where we're actually going to add the available periods for an employee based on this date that we've extracted out from when we're requesting our appointments for.
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!