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
29. Showing time slots
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
So let's go ahead and output all of the slots for the date that we have selected. So we are going to go over to our checkout component,
00:10
and we're going to create two computed properties. The first one is going to be responsible for getting the slots themselves so we can use them. But then the other computed property
00:19
is going to grab just the times in a sort of formatted way. So let's start with our slots. We basically just want to extract all of our slots out. And let's go ahead and make this a computed property.
00:32
And let's return what we need. So we know that the slots come from the availability, and that's another computed property. We want to grab the first result.
00:42
Again, we're going to filter this by first. We're going to use first just to grab the first date that relates to the date that we have currently selected.
00:50
So let's create out a closure in here. And this closure is, of course, going to give us a date for each of them. So let's return in here where the date to date string
01:03
is equal to the forms date that we have set. So remember, we set that as a string in this format. So now this should pull out the slots or the date that we have selected in the form.
01:17
Now what we want to do is just do a null safe on this and grab out all of our slots. OK, let's dump this out on the page and just see that we've got everything that we need.
01:28
So let's go back over to our checkout, and we'll just dump this at the top. So let's say this slots and see what this gives us. OK, yeah, so we type into that.
01:38
Let's go back over to our checkout and just make sure that we pull that in. And that is app booking and date. And yeah, so again, to date string doesn't work on date.
01:50
It needs to be the date within that date object. And yeah, there we go. So this is the date that we have chosen with all of the slots in.
01:57
Now we're not going to output all of this stuff, so don't worry that we haven't transformed this. It doesn't really matter. Now what we can do is grab a new computed property,
02:06
and we're going to call this times. So now from our slots that we've just grabbed, we want to pluck out just the times. So with this, again, slots might not be available.
02:17
So we're going to map through these and create a new structure, kind of like we did with our transformer. But I'm not going to bother creating out
02:23
the entire transformer for this. So let's go and put out our slot here. And then we want to map through and just return the times. We don't need anything else here.
02:33
So let's go and grab the slot, grab the time, cast that to a time string. And again, we want that in minutes. We don't want the extra seconds on the end.
02:44
And we should be good. So we're just going to grab the whole values out of here. We're going to cast that to an array so we can iterate over them really easily.
02:53
And otherwise, we're just going to use an empty array. So we don't really need, actually, we don't really need to cast this to an array. It doesn't really matter too much,
03:00
because we're going to be working within Blade. OK, so now let's go ahead and look at what the times looks like over here. And let's go over to the browser.
03:11
And yeah, so let's have a look inside of here what we did. Time, not times. And yeah, there we go. So we've got a perfectly usable array
03:20
to just iterate through and show all of the slots for that date. And again, if any of these were slightly different, so at the moment, we've got eight slots
03:28
on pretty much every single day, then these are going to change. Once we've got this working, we'll go into the database and we'll create some fake appointments or something to reduce these slots.
03:37
OK, but let's go ahead and just start to output these now. So over in our checkout, let's find out where we have our slots. I'm going to get rid of these.
03:45
So let's go over to our slot. And we just want to iterate over each of these buttons. So let's do a for each. And we might also want an if statement around this.
03:58
So let's add an if. And in that if here, and also add an else. And we'll just say no slots available for that date. Now, I know we're never showing slots for that particular date.
04:12
But if there's nothing available at all, no slots on any days, we're going to have to default to one day. So we're going to put all of that stuff that we just took out inside of there.
04:23
Say for each slots as, oh no, it's this times, isn't it? This times as time. And here we're going to say if this times empty or is not empty, then we want to iterate over them times.
04:40
And of course here, that's just a string because that's how we transformed it over here. Just cast it to a string when we map through. And there we go.
04:49
Great. We've got all of our time slots. OK, so these are the same for every day. So we can't really see them change.
04:55
So if we head over to the database and maybe just change around the times for some of these employees. So let me just set my working hours on a Monday from 12. And we'll do Tuesday on 12 as well, just
05:08
to sort of play around with this. So when we open up the calendar now, you can see there's only five slots here and only three slots on here.
05:17
And same for each of these as well. Let's just check where that is for Tuesday. So Tuesday starts at 9. OK, so I've done it ended at 12.
05:25
So we'll just keep that as it is. So you can see now that it accurately reflects the slots. If I choose one of these, sure enough, the new slots get loaded in.
05:34
I've chosen a new date. That's been set on the overall form. Now we just need to click on one of these slots to actually set that within our form.
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!