This episode is for members only
Sign up to access "Build an Appointment Booking System With Laravel" right now.
Get started
Already a member? Sign in to continue
Playing
28. Requesting available slots
Episodes
01. Introduction
02. Core functionality
03. How we build up availability
7m 55s
0%
04. Employees and services
7m 39s
0%
05. Employee schedules and exclusions
7m 53s
0%
06. Setting up appointments
5m 34s
0%
07. Working with date periods
10m 4s
0%
08. Iterating over requested days in a period
4m 51s
0%
09. Adding schedule availability
15m 38s
0%
10. Subtracting employee schedule exclusions
7m 53s
0%
11. Excluding time already passed
2m 57s
0%
12. Writing tests for schedule availability
19m 50s
0%
13. Generating slots
14m 47s
0%
14. Building the service availability generator
7m 5s
0%
15. Adding employees into slots
9m 44s
0%
16. Removing empty slots
4m 42s
0%
17. Removing slots with booked appointments
6m 44s
0%
18. Using a custom date collection
3m 34s
0%
19. Writing tests for service availablity
18m 42s
0%
03. Building the booking UI
04. Building the availability calendar
05. Booking appointments
31. Hooking up customer appointment details
5m 17s
0%
32. Disabling future steps
2m 43s
0%
33. Storing an appointment
14m 43s
0%
34. Handling appointment collisions
8m 1s
0%
35. Redirecting to a confirmation page
2m 55s
0%
36. Building the appointment confirmation page
5m 40s
0%
37. Cancelling an appointment
5m 30s
0%
Transcript
00:00
OK, so now we can choose a date on the calendar.
00:02
We need to work on the mechanism for fetching slots. So we're basically going to take this whole section here, duplicate it down, and this will become its own Alpine component. So let's go ahead and do that now without
00:15
copying everything we've done with this calendar stuff. So we'll just grab the header here and we'll change this to and we will say choose a time slot and of course, we'll have some kind of content down here with just a margin on the top.
00:31
So this is where our slots are going to be listed out. So this is going to become our Alpine component. So if we head over, this is what it looks like. The first thing we need to do is trigger this as soon as we land on the page.
00:44
So we've got an initial date in here. We want to immediately fetch these slots. But behind the scenes, how is this component going to work? Well, let's go ahead and just turn this
00:53
into an Alpine component with our X data. And we know that with this, we're going to store the slots in here. And that's just going to be an array of slots. And this will be like nine o'clock, nine thirty, so on and so forth.
01:06
So that's what's going to go in here. But then in here, within this Alpine component, we can also create a method to actually fetch the slots. Now, we're not going to be filling this in just yet.
01:16
I'm just going to console log out, fetch slots, and that will make a request through to our back end with the date that we've requested. And it will fetch all them slots for us. So what we're going to do with this is we're going to attach an event handler.
01:30
So when we get a slots requested event sent on our window object, so this will be like a global event that we can dispatch from our other Alpine components, then we're going to go ahead and call fetch slots. And we'll pass the event in now.
01:45
So we've got that so we can actually grab the data from that. But we won't dump that out. So basically, from somewhere in our app, we need to fire this slots requested event. You can call this anything.
01:58
You don't need a hyphen between it. But that's what we're going to name it here. OK, so when do we want to do this? Well, we want to do this on page load,
02:05
but we more importantly want to do this when the calendar is available and booted. So again, what we can do is close off this one and we can come up to our picker component and we can add an event to this. So if we think about this, we're initializing this picker just here.
02:21
Underneath this, we can just start to attach events to it. So we're going to say this picker on. Select, so that is when we have selected a date. We are going to console log selected.
02:35
Let's check this works, first of all. So let's come over and pull up our console and we will click a date. There we go. So we get that event actually fired. But from here, what we can now do is we can dispatch that slots requested event.
02:49
So when a date is chosen, dispatch this over on the other component. That's going to go ahead and pick that up and it's going to fetch slots. So let's go over and try this out. So keep an eye on the console.
03:00
Let's go ahead and choose this. And there we go. We get fetch slots. So we dispatched from the calendar component and that comes over to the time slot component, which will then fetch the slots for us.
03:10
OK, so now that we've done this, the problem is this works for when we click on a day. But when we land on the page and we refresh it, nothing happens. What we want to do is we want to trigger
03:20
a select as soon as this component loads. So to do this, we're going to go and we're going to use next tick, which is an Alpine piece of functionality, which means when the next render happens. So when the next render happens,
03:34
everything has sort of landed on the page and everything is working. We're then going to go ahead and say this is pick a trigger and we're explicitly going to go ahead and trigger a select. Now, when we trigger a select,
03:47
we need to pass through the date that's been selected, which would just be the current day. So we're going to pass through into this the data date. And then in here, we're just going to grab out the first available date. So basically, when the page loads, we wait for the next tick.
04:04
So the next render, we trigger a select with the first available date, which will then fire this event, which will dispatch this slot requested through to our slots component. So let's go over and give this a refresh now.
04:15
And you can see immediately in the console we get fetch slots. And when we choose another date, we get fetch slots again. So now the only job we have to do now is down here in our actual slots component is fill in the fetch slots functionality to actually make a request to our backend
04:31
to grab these slots out. So let's head over and build the kind of API endpoint, which will take in a date, the employee, the service and actually give us back a list of them slots.
37 episodes•4 hrs 49 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 build a simple UI with Alpine.js, with 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 Laravel!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!