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
09. How we build up 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
Before we move on to actually building out all of our core functionality, let's just
00:04
take a minute to talk about the structure of this and why we're going to do what we're going to do. Then when we work through the rest of the episodes for the core functionality,
00:13
hopefully this will make more sense. OK, so let's go ahead and imagine that we have a customer who wants to book a service with a particular employee.
00:22
The first thing that we're going to need is a list of all of that employee's availability. So let's say this is kind of an array. We're going to end up with an actual collection of this.
00:33
Each of these items are going to be a date. So let's say we've got today and we've got tomorrow. Now, obviously, they'll be represented as actual dates, but let's go with today and tomorrow.
00:44
Now, inside of these date objects that we're going to have within this availability collection will be all of the slots that the user can have or the employee can fulfill.
00:57
So for example, we're going to have a 9 o'clock slot. We might have a 10 o'clock slot. And these slots will be based off the duration of the service. So if this is a one-hour service, then, of course,
01:10
9 and 10 make sense. If it's a half an hour one, we're going to end up with 9 and 9.30, something like that. Now, we're going to take this a little step further.
01:21
What we're going to do is instead of actually just giving a list of slots, inside of here, each of these slots will have a time. So this is going to be a slot which has a time.
01:33
And let's just do this really roughly. That's going to be, say, 9 o'clock. But then inside of that, we're going to have the employees who can fulfill that slot.
01:42
So we might have an ID of 1 and 2. And the reason that we're doing things this way is that when we request a specific date, let's just say today, we might have the scenario where
01:53
we don't care which employee can fulfill this slot. We just want to see, can any employee fulfill this slot? So for example, we might have another slot in here with a time of 10 o'clock with no employees that
02:08
can fulfill this. Maybe they have time off, or they've already got bookings. In which case, we're going to then get rid of this from that list.
02:15
But the whole point of this is we're going to build up this entire list of slots. We're going to do this from midnight to midnight the next day.
02:23
Then we're going to go through and insert the employees who can do them slots, clear up all of the slots that we can't fulfill, and then we're going to end up with a list of slots like this.
02:33
So 10 o'clock, we might just have the employee of the ID of 1 who can do that. And we might have another slot in here for another time that only employee 2 can fulfill.
02:47
So we're going to go through this. The first step is going to be to generate up an entire slot from midnight to midnight. We're then going to go through each of them slots
02:57
and insert each of the times that are appropriate based on which time the employees actually work. And then we're going to insert the employees.
03:05
When you're building up an availability system, it makes sense to do it this way. Generate all the possible slots for a service first. Fill in who can perform them, and then
03:15
do a little clear up later. So for example, if 10 o'clock, no one can perform, we just get rid of that slot. As we go through the rest of the episodes
03:23
of the core functionality, I'll explain more about what is going on. And actually, in the next episode, we're going to take a look at a very basic introduction
03:30
to time periods using a package to actually generate out all of these time periods. And then eventually, we'll get to the point where we fill these slots in.
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.