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
25. Showing the calendar
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
By the end of this episode, we will have a date picker working.
00:03
So when we click on this input, it will show us that calendar. We can browse through. We can click and set the date. We can also listen for events then once we get through to that episode.
00:12
And then that will obviously update our overall form. How are we going to do this? We're going to use EasePick, which is a really customizable picker. Really, really nice to use.
00:23
So we're going to head over to the guide. And if we just go over to the Packages section, this contains a bunch of packages. So you can see that we've got things like this Lock plugin, which
00:34
will lock the dates that are unavailable. We've got Range plugin, Time plugins, pretty much everything that you need to create a really nice picker. Now, we're going to be a little bit lazy.
00:44
And we're just going to pull the bundle in. And that contains everything. So we can just import what we need. But you can go back and clear this up afterwards if you need to.
00:53
OK, so we're going to go ahead and install this with NPM. So let's head over to our terminal and just pull that in, wait for that to finish. And then we're going to go ahead and get this inside of our picker.js
01:05
directive just here. I'm going to register that on the element that we have registered this directive or used this directive. OK, so now that we've got this pulled in,
01:13
let's go and just import everything that we need. So let's import EasePick in here from EasePick bundle. What we also need to do is import the styles for this, because by the default, it's not going to work.
01:27
So we're going to import, and we'll just call this style from EasePick. We're going to go into bundle. We're going to go into the distribution folder. And we're going to pull in index.css.
01:38
We're going to pop URL on the end of here, because we are manually importing this. And now we can just start to create this picker out, apply the styles. And I'll show you everything you need to get this set up.
01:49
OK, so inside of here, let's create our picker constant, because we're going to need to read from this when we look at events. And we're going to create a EasePick instance in here and just pass a bunch of options in.
02:00
Now, the first and most important is the element that we want to register this on. So how do we get that? Well, when we register a directive like this,
02:07
the first argument we get through to here is the element that we have put this thing on. So as you can see here, that's going to be this input. So this, when we use it, will bring back this entire input as L.
02:21
So the input that we want, or the element that we want to use this on, is that element. Pretty straightforward. We're going to set read only to true, so we can't directly
02:30
modify the input value. And you can also do things like set the z-index. So obviously, this comes over any things you already have on the page. Let's just check out how this is looking.
02:42
And then we'll go ahead and fiddle around. So if I click on this, at the moment, nothing is happening. We check our console. Everything looks fine.
02:51
But that's just because we don't have our styles pulled in. So these are pulled in as an array. And we can add custom styles as well, which we are going to be doing. We've already imported that style sheet.
03:02
So we're just going to use it directly in there. OK, let's go over to the browser, give this a refresh. And yeah, there we go. Very, very simple to get our date picker working.
03:13
When we click on this, it's going to populate this date in here. We're not reading this data. So we're not looking for any events just yet. But we will eventually be doing that.
03:21
So there we go. Using a directive within Alpine, which we created previously, we've now attached our picker to this. And yeah, we can just browse through dates.
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.