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
30. Displaying and selecting a slot
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 we're successfully fetching all of our slots for the date that's chosen.
00:03
Now we just need to iterate over them. This is slightly different, because we are working within an Alpine component, and iterating these over is slightly different.
00:12
OK, so we're going to do this, obviously, inside of this container here, where our slots are. And we only want to show this if we have any slots. So we don't want to show this if there are no slots available,
00:22
which shouldn't ever be the case, because our calendar won't let us choose any dates that don't have slots. So let's say slots.length, because it's an array.
00:30
We can use length, and that's good. So if we just go over to the browser, when we refresh that, we get a slight flicker, because we don't have any slots yet. OK, so inside of here, let's again go ahead
00:42
and use a grid for this. So let's say grid, and we'll say grid cols 5. And we'll set a gap of 8, and margin top of 6. And actually, let's do that on a medium viewport.
00:53
And on a small viewport, let's say cols 3. Now, they're going to be quite small anyway. So now to iterate over within Alpine, we're going to use a template tag instead
01:03
of just any other element. So let's build out a template tag in here, and that's going to represent the slot. Now, on here, what we can do is we can just use an x4.
01:12
So it's the same as a for loop, and we're going to say slot in slots. And that's pretty much all we need to do. So let's go over now and just give this a refresh.
01:21
Looks like we might have an error here, so let's just check. Yeah, I think we need to have some sort of container in here, or it's not going to work.
01:29
So let's just set that to slot. And yeah, there we go. So we've got all of our slots coming through nicely. Brilliant.
01:35
OK, so for each of these slots then, we can go ahead and style these up. But we might as well just output the slot text now. So to do this, we can use xtext, and we just
01:44
give the value in here. What Alpine is going to do is take that value and put it directly within this div. So what we're now going to end up with
01:51
is an actual list of our slots, which is pretty cool. And obviously, if we change the date, we get a different set of slots, because we're making another request through.
01:58
OK, so really, all that's left to do now is just style this up. So let's go ahead and apply some styles to this. OK, so we'll set some padding on this on the x and y-axis. And this is going to be very similar to what
02:09
we've already done. Again, you can copy and paste the styles if you want. We'll set a border, a border slate 200. We'll set this to rounded.
02:19
And we'll go ahead and we'll leave it at that for now. Just check it out. And yeah, that looks good. We'll make this flex, just so we can set the flex col again,
02:28
item center. And we don't even need to do a flex colon here. We can just say item center and justify between. And they should go in the middle, although they don't.
02:39
So let's get rid of that. And we'll just say text center. Yeah, it's just because we don't have an inner element to this, but that's absolutely fine.
02:46
And once again, when we hover over this, let's just set the background to a 50 gray with a 75 opacity like we did with the others. And since we're not working with buttons here,
02:55
we'll set a cursor to pointer. Although these could technically be buttons, I'm just going to leave them as a div for now. OK, so now we have the ability to see these slots, which
03:06
is great. So everything is looking good. We can choose another date. New slots come through super fast
03:11
because we're just pushing down one date to check. And we want to get to the point where we can click on these and set that as a time slot. So let's just really quickly do that now
03:21
because we're going to dive in the next section into all of the other form stuff. We might as well go ahead and get this working. So at the top, remember we stored
03:28
this date, which is going to be eventually submitted down when we actually make a booking. We want to store the time in here as well. So basically, when we click on one of these slots,
03:37
we want to set this time in our overall form to the time that we've chosen. So basically, what we can do is we can add an x on click to here.
03:45
And we can go ahead and set the form time to the time that we get in here. Or in this case, we've called it slot. So now what's going to happen is when I click on one of these,
03:53
we can't see anything happening just yet. But our overall booking component will now have that time set into it. If you need to check this stuff, you can just very easily
04:02
go ahead and create out some sort of span. And you could say x text. And you could say form.time. And that will show you the time that
04:10
has been selected at the top. So you can actually see your data. But we don't need to do that just now. OK, so now that we've done that, it's a little bit confusing.
04:17
Because if I choose 10 o'clock and I move away, that background, that gray background, is gone. We want to show that this has been selected. So another thing that we can do in Alpine
04:26
is we can use an x bind to bind a specific class in on a condition. So for example, we might want to change the background color here if a form time has been selected.
04:38
So we can just match the form time to the slot. And then when these are rendered, it will change the background color if the form time matches the one that we're currently
04:46
iterating over. So if we just have a look at this and I click 10, you can see that, sure enough, that is now selected as 10. I can choose a different one.
04:54
And it's been selected. The only issue is we've still got the hover in here, which we don't want. So what we can do is we can go ahead and get rid of the hover
05:02
by just resetting the hover to the current value that we want. And we can even change the border color to slate 100 here to make it stand out a bit. So when I click on one now, you can
05:14
see that's clearly been selected. And we can choose any of these slots now. We know the time is being stored in our overall form or the date is being stored in our overall form.
05:23
And now the time is as well. I'm actually going to get rid of that border because I think it looks a little bit better without it. And there we go.
05:30
So now we've got our slots. We've listed through them. We're clicking on them. And we're setting them as part of our overall form.
05:36
So in the next section, we are going to start with the booking details, mapping all of this stuff up to our overall form, and then eventually submitting it through to make a booking.
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!