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
28. Updating the selected date
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
Let's go back to dumping out the form date at the top of the page, and we'll see one issue with what we've got at the moment. Remember, this form date is what we're eventually going to submit through to create an appointment.
00:12
But if I change the date, nothing happens here, of course, because we don't have any kind of hook on it to update our form. So what we're going to do here is we're going to add an event to this, pick this up on that input via that directive, and then we're going to push this to actually change the date within Livewire. So the way that we start doing this is we head over to our picker, first of all, and then just below where we instantiated this,
00:40
we can start to add events on here. So the event for selecting a date is just select, and we'll go ahead and get the event just through in here. Let's console log this to make sure that this is all coming through. And sure enough, if we head over, open up our console, and we choose a different day, there we go.
01:00
We get our custom event. In the detail of this, you can see that we've got the date, which we can format to how we want, and then we can push it directly back up to here. Okay, so to emit this from this directive so we can actually pick it up within that component, we're going to use the element that we're working on, which is the input, and we're going to dispatch an event on here.
01:22
So let's say dispatch event, and we're going to create a new custom event directly within JavaScript. This has nothing to do with Alpine, and we're just going to call this select. So we'll just keep it the same name. The detail is going to be the date itself.
01:36
So we're going to say edetailedDate, which we've just seen in the console. And again, we're going to format this to match what we have on the backend with Laravel. Okay, so now what we can do is head over to our checkout, go over to that input, and we can say X on select, and we can do something with this.
01:55
So let's just console log out the event data and see what happens. Okay, let's go over to the browser, open up our console, and let's change the date here and see what happens. So I'm going to click on one of these, and yeah, there we go. We get our custom event with that date in there, which we can now push back to our Livewire component.
02:15
So what we can do here is go over to our checkout. We can create out a new method in here, which is specifically to set the date. Now, the reason that we're going to do this is we might have other things we might need to do inside of here. What you can do is specifically from Alpine, using wire, update the form.
02:34
I'm going to do this just inside of a method just to keep things a bit more open. So in here, we're going to take in a date, and we're basically just going to set this form date to the date that we pass in, and we might need to do other things in here later. So now that we've got this inside of here, we can say instead of console logging this out, wire, set date,
02:58
and then we can just pass through the date that we want to set. So this is going to be event and detail, and that is all we need to do. So let's head over and see what this looks like. So I'm going to go ahead and choose a different date here, keep an eye on the date up here, and there we go.
03:16
Sure enough, it has changed. So that now becomes part of our form. So when we eventually get to select a slot, we'll set the time with that slot, and then we'll have everything in our form that we need to make a booking.
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.