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
10. Working with date periods
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
To start things off, let's talk about date periods and how these are going to build up the schedule availability for each of our employees.
00:07
Now, to do this, we're going to go ahead and use the Sparty period package, which allows us to take a period, chop it in half, cut bits out of it, do pretty much whatever we need to do with a date period.
00:20
And what this means is we can take a schedule, and then we can start to cut out any unavailability from that schedule. So that's really important.
00:27
We need to do that for a particular employee before we start to show their availability. So you can go ahead and read through the documentation for this.
00:35
It's an incredibly complex package, allows you to do a lot. We're just going to be using some of it to help us out. So let's go over and pull in the Sparty period package.
00:44
Okay, so we're going to go over to our root app directory, and we're going to create a new directory in here, which is going to be something like booking. And this will be for all of our classes
00:53
that we're going to build up here. Let's create out a new PHP class in here, and we're going to call this schedule availability. So this will be the specific schedule availability
01:02
for any of the employees that we have. Okay, so we're going to just do some experimentation here. And when we construct this, so let's create a constructor, we're going to go ahead and create out
01:12
a new period collection, and we're going to chop this up and experiment with it. So let's go and store this as a property just up here. So let's pull in the period collection object
01:23
from that package. And we're just going to call that periods. And then down here, we can initialize this. So let's initialize periods with a new period collection,
01:33
and we are done. Okay, so when we go ahead and request specific availability for an employee, we need this to be between a certain period.
01:44
So we need to say, well, we want to look at the next three months availability for an employee. So let's create out a public function in here
01:51
called for period. We won't pass any arguments through to this just yet. We'll just play around with this, but eventually we'll have a starts at
01:59
and an ends at date in here to get the availability for a specific timeframe. Okay, so let's go just over to our web routes, and we're just going to experiment
02:09
with dumping this down here. So let's create out a route in here just called periods, just to test this out. Let's go and new up this class.
02:18
So let's just call this availability, and we'll go ahead and new up a schedule availability class that we've just created. And of course we will say for period,
02:29
and we'll just go ahead and die dump on availability just to see what we've got. Okay, so if we come over to the browser, let's go over to that endpoint just to see what we've got.
02:38
And of course, at the moment we have null, so we don't have anything returned. Okay, so over to our schedule availability class, what do we need to do here?
02:47
Well, let's create a new period. So let's say this periods and reassign it because this is immutable by default. And we're going to say periods and add.
02:56
So we're going to add on a period to this empty period collection. That will be when we're looking for the employee's availability for.
03:05
So let's new up a period class from this package and make this. And then here we want a starts at date and an ends at date. So let's use the built-in now helper function,
03:16
which will give to us a carbon object. And let's say start of day, for example. So we're looking for availability from the start of this day.
03:26
Now we want to say add day, for example, and end of day. So essentially we want to build up a period that we want to look in from the start of today to the end of tomorrow.
03:39
So it will just be the entirety of today and the entirety of tomorrow. Now, really importantly, when we're doing this, we need to define a precision.
03:46
Now that is going to be in minutes always because we need to work on a minute period. All of our services are based on minutes. So the precision for this is always going to be per minute.
03:57
Okay, let's get rid of that. And let's go and just die dump or return this period just so we can see what we've got over here. Okay, great.
04:06
So we've now got a period collection and this has one period in it. Let's just check out the start date of this. And you can see that that is today
04:16
at the first thing in the morning. And then this end tomorrow, the last thing at night. So this is the starting point of checking my availability. So technically now I am available
04:28
from the first thing tomorrow, just after midnight till tomorrow, just as we get to midnight. But that's obviously not going to be the case for my availability.
04:38
We're going to need to take into account things like appointments we've already booked, my actual schedule. So I only start at nine and finish at five.
04:46
So what we need to do here is start to subtract some times out of this. Let's see how that looks and what we end up with. So again, we're going to go ahead and say this periods
04:56
and we are going to reassign this to this periods. But this time we're going to use subtract. So we're going to take out a period of this overall period that we've already added.
05:07
So let's go down here and fill this in. So again, we are going to go and use period make. We're going to pass in a date and a time or just a time within a specific day in here.
05:19
So for this, we're going to say, just use the carbon object itself. And we're going to say create from time string and let's just say 12 till 1230.
05:30
So let's just cut out 12 till 1230 and just imagine that we have an appointment between these times. In fact, we could do one o'clock.
05:37
Let's just assume it's at one hour. Now again, we need to pull in the precision here and that is going to be a minute precision. So now we've subtracted from the overall date period.
05:47
What do we think is going to happen here? Let's give this a refresh. Well, we end up with two periods now. So now what has happened is
05:54
if we look at the start time of this, this goes from midnight today or the start of today till 1159 and then the second period, you'll probably guess is from one o'clock.
06:09
So basically our schedule or our availability now goes up to 12 o'clock. We've got a booking or a fake booking in our case at 12 o'clock, which finishes at one
06:20
and then our schedule basically restarts after that appointment. So basically what we've done here is taken out an appointment.
06:28
Now this isn't perfect at the moment. It's just to demonstrate to you how the periods are going to work here. But what we can also do is start to subtract out times
06:37
that we don't work. So we can do lots of these subtractions and we'll be doing that throughout this class as we start to build it up and work with real data.
06:45
And eventually we're going to end up with a bunch of periods that we can fulfill and they are going to be where we generate the slots and show that to the user.
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!