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
07. Working with date periods
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, let's take this episode to talk about date periods
00:02
and how they're really, really going to help when we're building up our availability. Now, the first thing that we're going to focus on is the availability for an employee.
00:11
That includes their schedule, their schedule exclusions, and also any appointments that have been booked as well. So what we're going to do is talk about a package from Sparsely, which is period.
00:22
Now, this allows us to work with complex period, date periods, and do really cool stuff like have a long period, like when an employee starts and ends, and then cut out bits in the middle.
00:36
We're not going to be using this package to its full potential, but it is really going to help with that kind of stuff. Imagine that we work from now to a year later. We want to cut out all of them exclusions.
00:48
Then we want to cut out all of them appointments within that. And then we're left with the available time slots that that employee can do. So let's go ahead and get this package installed.
00:58
And we're going to look in this episode at just a very basic usage of this, just so we can warm ourselves up to how this works. So let's go ahead and pull the package in first of all.
01:06
And let's just, while that's installing, take a look. So you can see here that we can make a period. So what this will do is it will give us an object back that we can do things like subtract from.
01:16
So we can just take parts of these dates out. Now, let's not go too much into that. But let's go and look at our Subtract section here. So you can see that we've got an entire period
01:27
and we can just subtract parts out of this period collection. So rather than dive too much into this, I'm going to go straight in with a practical example. Now, let's start to build up some of the classes
01:38
that we're going to use. Like I said, we're going to have two main classes. And we're going to put these inside of a bookings directory. And we're going to have, first of all,
01:46
is the schedule availability, which will calculate the availability for a particular employee. So let's go ahead and create this schedule availability
01:54
class in here. Go ahead and define this out really quickly. So let's add the bookings namespace to this and schedule availability.
02:05
And before we do anything else in here, let's go over to our web routes to see how we might use this. So I'm going to go ahead and create out an availability variable in here.
02:14
I'm going to new up that schedule availability class. And then we're going to go ahead and do something like for period. So basically, eventually we're going to get to the point
02:26
where we pass an employee and a service into this because we need to know their availability for a specific service. And the for period will be the calendar days
02:36
that we want to see. So for example, we might have from now, and we might want to look a month into the future to see their availability for a particular service.
02:46
So let's go ahead and just get rid of that for now because we're just going to start to play around with this. And let's go over and just define out that for period method.
02:54
And we'll just play around inside of here. Okay, so I'm going to create out a constructor in here. We're going to use this package in a slightly different way and create our own period collection initially.
03:06
And we're going to add and subtract from it. So in here, let's create out a period collection, which is a class of periods or a collection of periods from that package that we've just seen.
03:18
And then we're going to initialize it within the constructor. So we can finally add and remove from it as we need. So we're going to set the periods
03:25
to a new period collection and we're done. Okay, so inside of for period, let's just die dump on this periods just to see what we need to do.
03:35
So we assess it as a property, initialize it, and then just dump it out on the page. And as you would expect, we have an empty period collection.
03:42
There's nothing in here. So let's take a look at adding a specific period to this period collection. So I'm going to go and just overwrite periods
03:52
with adding on a period to this collection. So this takes in several arguments. We've got the start date, we've got the end date, we've got the precision,
04:01
which we're always going to set to minutes because we want this to be within minute precision based on our service minutes duration. And then we're going to have a boundary as well,
04:11
whether it goes and excludes the start of the boundary, the end of the boundary excludes both or whether it overlaps. So let's just take this really basically.
04:20
So we're going to go ahead and make out a period inside of here. So periods, which again from that package, get added into a period collection.
04:28
Think of it like models within a Laravel collection. It's kind of the same thing, although we have a lot more control. Okay, so we're going to make out a period inside of here.
04:37
We are going to set the date from now, and then we're going to say add a day. So that's just going to add a single day period from now into that period collection.
04:48
And that's pretty much what we need to do for now to demonstrate this working. So let's again, go ahead and die dump on our periods, give that a refresh, and there we go.
04:56
We've got a period object inside of here. So let's do something a little bit more interesting now. Let's go and add in a period from the start of today. So kind of like what we'd look at
05:08
when we're booking an appointment, we want to see the entire day's availability. And let's add on, let's say, yeah, we'll just add on another day.
05:17
So add day, and we're going to say end of day. So that's going to look from the start of today to the end of tomorrow. Okay, so let's go ahead and look at this period,
05:29
and you can see that this pretty much just contains everything that you would expect. We've got the start date in here, which is the start of today,
05:37
and the end is the end of tomorrow. Great. Okay, so now what we're going to do underneath this is we're going to chop out
05:46
from this period collection an appointment. It's not actually going to be an appointment, but you'll get the idea of what we're going to do as we go through this.
05:54
So we're going to go ahead and again, overwrite periods because everything is mutable here, and we're going to say this periods subtract. So I'm going to now subtract either employee unavailability
06:08
or an appointment from the start of today to the end of today. So let's go ahead and again, add in a period in here, and for this, what we're going to do
06:18
is just use the carbon object on its own, and we're going to say create from time string. Let's come down to there, and I'm going to say, well,
06:26
there's an appointment booked from midday today because carbon create from time string will always assume you're working with the current day, and we're going to go ahead and do this till say 1230.
06:39
So what we're doing now is we're subtracting 12 o'clock today to 1230 today. Now we're not going to worry about the exclusion, like the boundaries and stuff like that just yet.
06:51
We're just going to see what this does to our period collection first of all. So if we head over and give this a refresh and just take a look,
06:57
you can see that we've got that period in there with the start and the end, and it doesn't seem to have done anything. So let's just take a look at why that would be.
07:06
Maybe if we include the precision in here, so we're going to say precision minute, and let's just have a look, and we'll fill in the other precision as well
07:17
because they will need to match, and there we go, perfect. So we needed the precision in there to make that obviously on a minute level.
07:25
So what has changed now is we have now got two periods, and the reason for that is we've got the start of today up until 12, and let's just confirm that by looking at the start,
07:37
start of today up until, well, 11.59, but we'll talk about boundaries in a second. So that is a free period because remember, we have created that appointment at 12 o'clock,
07:48
so we're free now up until 11.59, and then if we look at the second period, now that we've subtracted that appointment from that period, this starts at 12.31.
07:59
So effectively now we have got a collection of dates, and we know that the free time is within this period or within this period. So that's pretty much how that works.
08:09
Hopefully that makes sense. Now let's talk a little bit about the boundaries here. So I'm gonna go ahead and add in a boundary on this, and we're gonna say exclude either end,
08:21
exclude start, or exclude all. Now most of the time when we're working with this, we're gonna exclude all of the boundaries because we want the appointments
08:29
to sit right next to each other and the slots to sit right next to each other. What we don't wanna end up with is when we're generating out the time slots
08:37
for appointments, we don't wanna see an appointment slot for 12.31. It doesn't make sense. It's gonna be 12.30.
08:44
So if we exclude all on both of these boundaries, and then we just give this a refresh, let's take a look at what that has done. So you can see that the end of this now is 12.01,
08:56
and that's probably because we want to exclude the end. Let's just try that and have a look. There we go. So we've got the start,
09:08
free period is from the start of today till 12, and then if we look at this period, this starts at 12.29. Again, we can change this around,
09:19
and we've got the end of the day. Now I'm not gonna go too much into this because once we actually get into this from writing tests, we can confirm that this is all working,
09:27
but that's pretty much how that is all working. So we've created our custom period collection here. We have added some availability. So this is where we would add the employee availability,
09:38
and this is where we would subtract any availability based on any holidays the employee has or any appointments they have booked. So I'm gonna leave it there
09:46
because that should be enough to give you a good idea as to how these periods are working, and now we can start to integrate this into actually building up that availability
09:55
over a period of time and seeing when an employee is available. So now we've done this, let's head over and start to do that.
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!