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
08. Showing all services by an employee
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
When we click on one of these employees, we basically just want to see a list of services that they can perform. So we just need another route for this, another component,
00:07
and we just want to output this to the page in exactly the same way that we see here. OK, so to get started, let's go ahead and actually create a component for this.
00:15
So let's make out a Livewire component. And we're going to call this Employee Show. And again, we're going to register this directly in our routes.
00:24
So let's head over to our routes, grab this, and we'll go ahead and call this Employees. And then we will take the employee with route model binding, but we'll
00:33
grab them by their slug so this looks a little bit nicer. OK, so we can go ahead and hook that up to the Employee Show component that we've just created. And we'll say Employees.show, and we
00:44
can start to link through to this. OK, so let's go back over to our home page, and we'll link this up. So the href here is now going to be a route to Employees.show,
00:56
and we want to pass that employee through for route model binding. So we should now be able to click on each of these. Great.
01:04
OK, we just need this page created now. So we can basically just take the entire structure of this. Let's go over to our Employee Show component, paste this in, and then we can get rid of the first section just here
01:16
so we don't need this first section. And we're going to say choose a service from, and then we want the employee's name. We haven't pulled that in just yet,
01:28
but let's go ahead and just add that in there for now. And then this is going to be the employee services directly from that relationship, and we should see exactly the same thing.
01:38
OK, so obviously this isn't going to work at the moment because we're not passing this employee through or accepting it in. So if we open up the Employee Show component,
01:49
we basically just want to take this as a property, and that will be pulled in directly from model binding, and we should be able to see everything that we need. And there we go.
02:00
Great. So if we go back, when we click on Alex, we see two services. When we click on Mabel, of course, we just see one. And these components are going to operate
02:08
in exactly the same way. They're going to go through to the checkout, whether we have chosen an employee or whether we just want to choose a service first.
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!