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
23. Loading availability
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
A little bit later, we're going to set up our availability calendar.
00:03
But the first thing we really want to do is figure out how we're going to get the first available date, which we're going to pass into this calendar to be the default. Now, what that also means is we're going to set up a form
00:16
with the date that the user wants to book for. And we're going to use a LiveWireForm class for that. So let's just do a little bit of figuring this out, dump this out on the page, and make sure
00:25
that we do get the first available date. And we can fiddle around with the database to change this around as well, based on all of our employees' availability.
00:33
OK, so the first thing that we'll do is head over to our checkout. And we're going to create out a form, which will be our overall booking form.
00:41
Now, there's a couple of ways that you could do this. You could either store each of the properties in here that we're eventually going to put into our appointments table.
00:49
Or you can go ahead and make a LiveWireForm using LiveWireForm. And of course, we're going to call this CheckoutForm. So don't worry too much if you've not
00:57
come across this before. It's going to work in exactly the same way as you're used to in LiveWire. We're just going to create this out in here, type into it,
01:05
and then call it Form. Now, wherever we reference the form in here, we're just going to reference this form. And then inside of the CheckoutForm, which
01:13
extends this form here, we're just going to have things like a public date in here, which we can store data to. We can also validate in here as well.
01:22
So let's just change this to a string, because it is going to end up as a string. And we can add some validation rules in here in a moment. OK, so when we land on this page,
01:32
the first thing we want to do is set the date, the date that the user wants to book for. Now, by default, we're going to have that for the first available date.
01:40
Let's just play around with this first of all. So I'm going to go ahead and create out a mount method in here, which is one of the lifecycle hooks within LiveWire.
01:47
And we're going to set this form date to just now. And let's grab the time string for this, which is really important, or the date string more appropriately.
01:57
So that's set the date that the calendar is going to be on by default. This is not what we're going to end up with, because we want to find the first available date.
02:06
If there are no appointments today, there's no point setting this to today's date, because there won't be any slots. OK, let's just try this out by heading over to our checkout
02:15
and just dumping it out at the top of the page, just so we can see what we've got. So we're going to say form date. We can just say form date now.
02:23
And if we head over to the browser, yeah, sure enough, there is the current date. So what I'm going to do is today is Friday. The day I'm recording is Friday.
02:32
I'm going to head over to the database. And I'm going to change around all of the availability for the schedules. Let's just, yeah, we'll do this for both of these.
02:42
So I'm going to get rid of all of the availability on Friday. Now, if a customer comes to this page, they do not want to see this date, because there are now no employees that can do today.
02:54
There won't be any slots. There's no point doing this. So we want this to adjust based on the next available date from our availability.
03:01
So the question is, how do we even get our availability? Well, what we're going to do in here is create out a computed property called availability, which is going to be the source of truth
03:11
for all of the availability for the date that we give. So this is going to be computed. And really importantly, just so we can keep things as fast as possible, we're going to set this to persist.
03:24
That means that this will be cached between live wire requests. We can go ahead and bust the cache a little bit later when we want to refresh this to check
03:34
if anyone else has booked. Let's just go ahead and do this for now and see what we get. So how do we grab availability? Well, we've already built all of this stuff
03:42
up in the core functionality section. We just want a new service slot availability class. Now, into this, we want to go ahead and pass in an employee. But if you remember, over on here,
03:52
we need a collection of employees. So we don't just want to pass an employee in. If we have an employee, so if someone has chosen who they want this service to be with,
04:02
we're just going to collect up that employee and put them in a collection. So it will just be one employee that's been chosen in a list of employees.
04:10
Now, otherwise, we want to use employee get. We want to grab all employees to pass them through to here. The next thing we want to pass into here is the service.
04:19
So let's pass in the service that's been chosen. And I'm just going to pull this down a little bit, just so we can kind of see what we're doing here. OK, so next, we want to say for period.
04:30
Now, the period that's been chosen that we want to check for can be anything. So for example, we could say now start of day. So we want to check from the start of today.
04:41
And we want to check this, say, in three months time. So let's say add three months and then say end of day. So we are always checking within a three-month period. And this will be always shown on the calendar.
04:54
There are ways that we can adjust this based on as we navigate through the calendar, always checking far into the future. The longer this is going to be, the slower
05:03
the page is going to be. But we can deal with that later when we get to it. So I'm going to give the page a refresh. And we're now loading in our availability.
05:10
Remember, that's cached, so it's still nice and fast. Okay, so now we've got our availability. So in now, we actually want to set this to the first available date from our availability.
05:23
So we're going to change this to this availability. Now, that's a computer property, so we can just access it like a property. And we're going to introduce something
05:31
like first available date. Remember, availability is our custom date collection. So we can add a method in here, a helper method in here to allow us to do that.
05:42
Okay, let's just die dump on first available date just to see what we get from this. And remember, technically, now that we've changed the database, the first available date
05:51
is actually tomorrow because we don't work Fridays. Also, awkwardly, because it is a Friday, the next available date is going to be next Monday. So I'm actually going to change this
06:01
to say that we both work on Saturdays. So let's just grab this in here just to make things a little bit easier. Let's say the next available date is tomorrow,
06:10
which is Saturday. Okay, so let's just head over to the browser and check what's going on here. And yeah, it looks like we need to just adjust this.
06:17
Yeah, this needs to be an array within a collection like this, and we should be good. And the next error we'll get is the first available date method on our date collection doesn't exist.
06:27
So let's go over to that date collection and let's create out a first available date helper to find the first available date within this collection. Now with this, because we're working within a collection,
06:41
this is super simple. We can say first, which will always grab the first record, but with the first method on Laravel collection, you can also pass through a scope and a closure in here.
06:51
So we'll say first, we'll grab the date out because we know that each of the items in here is our custom date object. And we can just say the date slots count is greater than one,
07:04
or we could say is not empty, whatever you want us to do. So let's actually do that, is not empty. Okay, so this now will return the first date to us within the state collection where the slots are not empty.
07:16
So where we actually have some slots. So let's now go over to the browser and check this out. And there we go. So this date now is the first available date,
07:27
which as you can see is tomorrow. So today is the 26th and now that has pulled out to the 27th. So that is working really nicely. So that now means that if we come up here
07:40
and don't die dump on this, we can take this and set it to the first available date. Now, remember, we might not have a first available date. So we're going to do a null safe check on here
07:50
to grab the date and then say to date string. Now, if that is not available for any reason, and there are instances where that's not going to be the case and we will get a null value back,
08:03
we're just going to say now to date string, and we're going to default back to today's date. If there's no availability into the future, we'll just default to today's date
08:13
because we need to default to something. Okay, let's go over and just check out what we've got. And yeah, there we go. Our new date is the 27th.
08:21
So we can put that into the calendar and that is now going to show slots immediately to that customer because it's the next date that has slots available.
36 episodes•3 hrs 4 mins•3 months 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!
Comments
No comments, yet. Be the first to leave a comment.