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
32. Disabling future steps
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
So since our slots automatically get loaded in, we don't really need to disable this if a date isn't chosen,
00:06
because a date is always going to be in there. But we do want to disable this section if we haven't chosen a slot. It doesn't make sense to have this in here.
00:14
What we're also going to do is fix up this flicker that you can just see here, where when we refresh the page, the date is not available just yet. So we'll fix that up as well in this episode.
00:25
OK, so let's work on the form first of all. We want to get rid of this if we don't have a time slot selected. That's really the only condition.
00:34
So what we can do is we can disable this here. We can keep this, but we just want to disable this. So we can say x show if we have a time slot available. That's really as simple as that gets.
00:46
So when I choose a time slot, we then see our booking details. Otherwise, we don't. Now, we've still got that flicker in there, and you can just about see the button flickering.
00:55
We'll fix that up in a second. Let's go ahead and do that now, because I think we are pretty much done here apart from this. OK, so let's go and apply an x cloak to this within Alpine.
01:08
Now, what this will do is it will allow you to apply a style to this cloak element to hide it completely until it's available, and then that will be removed.
01:17
So basically, if we always hide a cloak element, it will never be shown on the page with CSS. But then as soon as this cloak gets removed when Alpine initializes, then we
01:26
will see that content. So let's go ahead over to app.css, and we'll add this in here now. So we're going to say x cloak, and we
01:34
are going to set this just with pure CSS to have a display of none, and we're going to make that important. We could do that with Tailwind, but let's just
01:43
keep things simple. So now what's going to happen is when we refresh the page, that element is going to have x cloak on it, so it's never going to be shown.
01:51
And it will only be shown when Alpine initializes, but after Alpine is initialized, our x show will kick in. Therefore, we won't see that flicker,
02:00
and you can see that we just don't see the button at all. Now, we could do the same thing with the slots as well. So let's go and set x cloak on our slots. So we do see a little bit of flicker here,
02:12
but that's kind of natural because we don't have any content in there, and then we're making an AJAX request and showing this. But we could add some if statements around that,
02:20
increase the height of it, add some sort of loading place holder if you wanted to. But I think the most important part of this is done. We land on here, we see the current day, we choose a time,
02:31
and we can enter our details and book. So now that we have just tidied that up a little bit, let's go and have the ability to enter our booking details and actually create an appointment in the database.
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!