Playing
01. Introduction and demo
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
In this course, we're going to build out
00:01
a fully functioning appointment booking system with Laravel and Livewire. So we're going to take this introduction episode just to go through pretty much everything
00:11
that we are going to build. And I'm also going to give you a behind the scenes into the database as well, so you can see how these kind of things are set up,
00:20
how we assign availability to each of these employees, and then how we give them things like lunch breaks or holidays. OK, so you can see here we've got two sections. Either choose a professional, which is just an employee,
00:34
or choose a service first. Now, this is really important, because sometimes when we book something, we might just want a haircut, for example, and we don't really
00:42
care who the particular service is with. So when we click through to this particular service, we go through to the checkout, but this lists for any employee.
00:53
Now, as soon as we go ahead and choose a date and a time slot here, it will automatically assign us the first available employee who's able to perform that service.
01:03
Now, let's go through the standard booking flow, where we click on a professional and then choose the service first of all. And let's just see how this looks,
01:11
and then we'll dive into the database. OK, so we've got this booking calendar here, which we can really heavily customize. If you wanted to change this around, you could.
01:19
And the first thing you'll notice is a lot of these days are grayed out. Now, the reason for this is obviously the ones in the past are grayed out,
01:26
because we can't book in the past, but also the weekends are booked out. So my schedule runs from Monday to Friday, and it runs from 9 till 5.
01:35
That is heavily customizable, and it's heavily customizable per day as well. So if I didn't want to work on Fridays, I could just set that to a null value in the database.
01:44
OK, let's go through with the booking. You can see that we've got four slots available from today, and I can go ahead and just choose any of these slots and just change this around if I need to.
01:54
So the booking details, again, heavily customizable. I've only included two fields here, but you can go ahead and add more in here if you want. And let's go ahead and enter some details
02:04
to quickly make a booking. OK, so I'm going to click Make Booking. And yeah, sure enough, we're booked in. Now, as we click that button, behind the scenes,
02:11
what actually happened was we checked availability again. Imagine if two people were on the checkout at the same time wanting to book the same time slot. Someone gets there first, and then someone else
02:21
clicks that Submit button. It will alert the user if that slot has been taken while they were in the checkout. That's a really important part of this.
02:30
Or, of course, we're going to end up with duplicate bookings. OK, so we can go ahead and cancel the appointment. We won't look at that yet. But let's go back again to here.
02:37
And you can see that the slot that I've just booked has, of course, disappeared. And as you can see on the calendar, the slot count here for this particular day
02:44
has changed as well. So we're displaying how many slots are for particular days so we can look into the future and see what's the best chance of getting an appointment.
02:52
OK, let's just really quickly preview the thing that I spoke about before, which was when we just want to choose a service. So if I just click on here, for example,
03:01
and I want to book this, say, for the 16th of May, quite a few time slots available here. When I click it, this switches over to the employee that can perform that service.
03:10
We enter our details. We make the booking. It works in exactly the same way. OK, let's jump over to the database
03:15
really quickly and just talk about schedules. Employees and stuff is pretty obvious. We just insert some records there with a profile photo URL.
03:23
But the schedules are interesting. So we've got this starts at and ends at date, which we'll be talking about this entire database schema in a lot of detail throughout the course.
03:33
Now, the starts at and ends at date runs from a long period. So you can see this runs from 2024 to 2025. So I've blocked in a year worth of availability for these specific days.
03:45
Now, this might look a little bit strange where we have Monday starts at, Monday ends at. It might seem a little bit over the top. But what this means is we can have fine-grained control
03:55
over which days we work and also the times on which days we work as well. So for example, if we didn't want to work Friday, we would just set these two values to null.
04:03
Same for any of these days. Now, this makes it really interesting because what we could do is we could set availability for, say, six months.
04:09
And then if we know in six months' time we're not going to be working some days, we can just create a new record. And this will all be taken into account.
04:17
So we'll be going through all of that throughout the course. It's a really important concept. But this makes it incredibly flexible. Now, we also have schedule exclusions.
04:25
I haven't inserted any. But what we would need to do here, let's say that we wanted to book a week off for a holiday. We could just add the employee, the starts at date
04:33
and the ends at date. And that would cut out any of the availability directly within the calendar. And we would not be able to book for that specific employee.
04:42
And of course, we've got the standard appointments table and all of that kind of stuff as well. But we're going to be speaking about all of this in incredible detail as we go through the course,
04:51
as we build up all of the core functionality for this. OK, I think we're just about done having a look at how this works. Let's go over to the next episode.
04:59
If you are new to Laravel, we'll set up a fresh project. And then we'll go on to get everything set up so we can start building out an entire appointment booking system for Livewire.
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.