This episode is for members only
Sign up to access "Build an Appointment Booking System With Laravel" right now.
Get started
Already a member? Sign in to continue
Playing
26. Disabling unavailable dates
Episodes
01. Introduction
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
05. Booking appointments
31. Hooking up customer appointment details
5m 17s
0%
32. Disabling future steps
2m 43s
0%
33. Storing an appointment
14m 43s
0%
34. Handling appointment collisions
8m 1s
0%
35. Redirecting to a confirmation page
2m 55s
0%
36. Building the appointment confirmation page
5m 40s
0%
37. Cancelling an appointment
5m 30s
0%
Transcript
00:00
OK, I did say that we were going to show available slots on the calendar. But let's start with something a little bit easier.
00:05
And let's lock out dates that are not available. Because at the moment, I am not available on a Saturday and Sunday, as we see from the database. And I'm just going to double check my schedule.
00:14
And I'm going to get rid of Saturdays here. And I'm going to get rid of Sundays for both of these employees, because we do not want to work on a Saturday and a Sunday.
00:25
Great. So what we should end up with by the end of this episode is these pretty much just blanked out. That's exactly what we want.
00:32
We don't want to be able to select a Saturday and a Sunday, because they're not available. And of course, if we're all booked up for a day, we're not going to be available then as well.
00:40
OK, so how do we do this? Well, like I said, we've pulled in within our app layout the ease pick bundle, which means we get all of the plugins already.
00:48
So what we want to do is in here define out the plugins that we want to use. So let's go ahead and create out a plugins array in here. And we're going to choose the lock plugin, which
00:57
as you'd imagine, locks the dates that we cannot use. Now, what we can do once we've installed this plugin, we can define the options for this under the lock plugin key. And we first of all want to set a minimum date.
01:10
So the minimum date for this is just going to be the current date and time. So let's go ahead and just check this out. And you can see that all of these are now empty.
01:20
And we can't go back into the future. So let's go back into January. We're on the 31st. I cannot pick any of these.
01:26
So if we were to get rid of that, we can pick dates in the past. But the minimum date needs to be today. We cannot go back into the past to book an appointment.
01:34
Makes sense. Now what we need to do is we need to filter this. So what we can do is we can go through each of the dates that are available on the calendar.
01:42
And this will give us a date and a picked value, which we'll look at in just a second. And here we can basically just return a true or false value depending on whether we want to lock that date or not.
01:54
So for example, if I just return false in here, so if we head over and just give this a refresh, you can see I think, yeah, we need to return true to lock it. You can see that all of these dates are unavailable.
02:04
So every single date is unavailable because we've just returned true. So how are we going to work out and how are we going to do this within JavaScript
02:12
since over in our checkout controller, the availability comes from here? What we need to do is pass through a list of all available dates or unavailable dates
02:21
through to our template. So let's go over to here and create out a new available dates value. And let's grab our availability.
02:33
And let's scope this by whether we have slots. Now, we can't do that just yet. But we can go ahead and create one over on our date collection.
02:43
So let's go ahead and build that out now. So we only have dates that have slots. So let's go ahead and create this kind of scope type thing and say has slots.
02:53
And we're going to go ahead and return and filter this data by whether we have slots or not. So let's create a closure out in here. We know we get a date here for each one.
03:04
So basically, what we're doing is only returning days that have slots. That's really what we're doing here. So we're going to say, if the date doesn't have slots
03:13
or the slots is empty, remember, that is a collection in itself. So we can use is empty on this. That's going to only return dates that have slots. So now, we can say has slots.
03:24
And let's just die dump on those available dates. And let's just take a look at what we get. So we've got 23 items. None of them will be Saturday or Sunday
03:33
or any of the dates that are already booked up. So now that we've got this, what we can do in our checkout controller is we can just map through these and build out an array that we want to see.
03:43
So what we're going to do is map through this with keys. And we don't need to do this just yet. But let's go ahead and do this anyway and create out an inline function in here.
03:54
We'll get back a date for each of these. And what we basically want to return is a list of data where we have each of the dates, so today, tomorrow, and so on, all the way up to the period
04:06
that we've chosen. And we want to show how many slots are available within them dates. We're not using this slot data at the moment.
04:12
But if we just return a list of these at the moment, we're going to end up in trouble. So let's go ahead and just return this. I'm going to return an array in here, which
04:20
is why we're mapping with keys. And let's grab the date, grab the date object from within that, and let's cast that to a date string. And then for the value of this, let's grab the slot count,
04:32
so slots and count. And let's go ahead and cast this to an array. So finally, we'll go ahead and die dump on these available dates.
04:40
And then we'll just run over this in case it didn't make sense. OK, so here we go. We can see now that for each of these dates,
04:47
we'll be missing the weekends, which is exactly what we want. And they're the ones that we'll get rid of. We can see a list of the slot count inside of each of these dates.
04:55
So we've pretty much got everything that we need to put onto our calendar now. And we can use these values to find any missing values and then cancel them out of the calendar view.
05:04
OK, so now that we've got this, we can just pass this directly down to our blade template, JSON encode it within JavaScript, and then we can use that inside of our calendar.
05:13
So let's go ahead and say available dates. And we'll just grab them available dates. Great. OK, so inside of here, what we're then going to do
05:23
is inside of our data, set in the available dates in here. And let's go and output this by JSON encoding this PHP array. So we'll JSON encode the available dates. And then what I'll do inside of x init
05:40
is just console log out this available dates just so we can see what this gives us. So if we come over and refresh the page now, open up our console.
05:49
And we just need to log available dates, not this available dates. You can see here, we have now got under our target, let's pull this up a little bit, a JavaScript object
06:00
with these as the keys and these as the value. So now what we can do with this is we can take these available dates and check them inside of this filter.
06:10
And then if the date is not in there, we'll return true. So to go ahead and grab the keys specifically for this object, we're going to say object keys.
06:19
That will just give us out pretty much just like a list of the date, date, date like this, just exactly what we want. And we'll pull in available dates.
06:28
And we're going to check that it doesn't include. So we can use this native JavaScript include method to grab the date here. Now, the date here, if we just take a look at this really
06:41
if we just console log the date here and we open up our console, you can see that it gives it in this format here. Now, the package that we're using, EasePick,
06:51
allows you to format these dates. So what we can do is we can date, say something like format. And then we can format that to the value
06:58
that we expect from our Laravel application. So this will be the year, then the month, then the day. So let's console log that out and see what we get. And it matches the exact date format
07:10
that we're using within that object we're passing down and JSON encoding. So now that we've got that formatted date, we can check in here that this doesn't include this date.
07:23
OK, so let's open this up. And we're in January at the moment. Obviously, these are all blanked out because that's in the past. But let's go to the next month.
07:30
And that is February. And sure enough, you can see that Thursday and Friday are available, which is tomorrow and Friday, Saturday and Sunday are not, Monday, Tuesday, Wednesday, Thursday,
07:41
Friday. So let's just test this out really quickly by adding to the database a load of appointments. Or we'll just put one big appointment in here
07:48
for tomorrow and see that that gets blanked out as well. So let's add in an appointment here for the 1st of February. We'll start the appointment at 9 o'clock. And we will end the appointment at 5 o'clock
08:06
just to see that this blanks out. And if we go into February, you can see now we don't have availability for Thursday either.
08:13
OK, so we'll get rid of that appointment because we know that that is in there and it's working. And we now have our availability cut out. So even if we added a holiday in there for tomorrow or Friday
08:24
or any other of these days, they would then be completely wiped out, which is great. OK, so there we go. We have blanked out all of the dates
08:33
that we cannot fulfill on the calendar. Let's go over now and include the slots that are available directly within this calendar. And we'll do some styling to it as well.
37 episodes•4 hrs 49 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 build a simple UI with Alpine.js, with 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 Laravel!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!