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
25. Installing and using easepick
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 EasePick is probably the best solution I've found that deals with exactly what we need. As you saw from the introduction, we need to show things like the slot availability. We need to cancel out individual dates that are not available, including employee availability and booking availability.
00:16
And this does everything we need. So what we're going to do is go ahead and style up the input where our initial date is going to be. That's going to be the first available date for these bookings. And then we're going to get this installed.
00:30
And when we click, we'll be able to select. And as we go, we'll just add the things that we need to make this work. OK, so we'll kind of ignore this for now. Let's go ahead and just very roughly style up what we want to see on the page here.
00:42
OK, so this now just says calendar, but we're going to have this as an input. So we have a type here of text, but we're going to get rid of this. And we're going to go ahead and just start this up very, very quickly. So we'll set a margin top of six.
00:56
So it sits away from that. We'll set the text to small. We'll set a background slate of 100. We'll get rid of the border entirely.
01:04
Make this rounded large. Give it some padding on the x-axis. Give it some padding on the y-axis. And we'll set the width to full.
01:12
So it looks like this. So this is an input now that we can enter into. But once we get to applying the picker to it, it's not going to work. So here we're going to say choose a date.
01:23
This is not going to be shown, because we are going to insert the current date and time into this. So then we can automatically see the slots that are available for today. That's really important.
01:34
But then, of course, we can click this to change this over. OK, so I think that's just about it for now. Let's get rid of this picker ABC thing that we created. And let's get EasePick initialized and working.
01:45
So if we head over to the guide, the way that this package works is we have this sort of bundle which contains everything. We've got the base plugin. And then we've got all of these plugins in here.
01:56
We are going to be using a few of these to get this working how we need. Now what I'm going to do is just go ahead and put in the bundle so we don't have to keep pulling in individual scripts for each of the plugins that we're going to be using. But you might want to go ahead and separate this out a little bit later, just because
02:14
you don't want to be pulling too much in. So let's go ahead and grab the script for this. I'm sure there's an NPM way to install this. But let's go and just pull this into our app layout just so we can get things working.
02:25
So we've got this now on the page ready to go. So as you can see, you can initialize an EasePick instance like this, EasePick.create. And we want to choose the element. Now we're going to change that around because we're working with Alpine.
02:38
But we do want to copy this CSS. So I'm going to grab this line here. And we can introduce that as we go. OK, so let's go over to our Alpine component that we've got here.
02:49
And let's just start to set this picker to what we need. So let's reference this picker instead. That's more appropriate. And let's say new EasePick and create, like we saw in the documentation.
03:01
And then in here, there's a couple of options that we can provide. But let's just get the CSS in there now that we just saw from the documentation. OK, so if we come over, nothing's happening at the moment because we haven't targeted an element.
03:13
Now with the element, what we don't want to do, since we're using Alpine, we don't just want to say document.getElementById like we just saw. What we can actually do is set this as a ref. So I can set this as a ref like date, for example.
03:28
And then I can target this from in here using refs.date. It just means that this hooks up now to this element. And it saves us having to write pure JavaScript. So let's go over and see the difference that this has made.
03:41
When I click on this, there we go. We have got our picker in there. We can click on it. We can choose a date.
03:47
And that will get filled with the date in there. It really is as easy as that to get this working. OK, so what we do want to do is set this to read only. So it can't be changed.
03:57
So let's make sure that this is set to read only. Really important. There's a couple of other things we can do as well. Like set the z-index of this so it sits above other elements.
04:08
And that's really important. And the really important thing about this is at the moment, the date is empty. We want this to be the first available date for appointments. So this is where we're going to start to use the availability slot generator that we created
04:23
to grab the first available date. And from that, we can also then generate out all of the list of the dates as well. So let's go ahead and do everything that we've already done already throughout the course. And let's new up a service slot availability class.
04:40
And then we'll invoke the for period. And then we'll add the period in there that we want. So we're only dealing with one employee at the moment. In the Inertia and LiveWire versions, we'll be changing this.
04:50
So let's just collect up that individual employee. And then also pass that service in as well. And then the period can be anything you want. But what I would do is I'd recommend making this as small as possible.
05:02
Don't add a year in here because it's going to slow the page down. Let's just see that. So let's say now start of day. And let's say now add a year end of day.
05:12
And let's see how slow this is. So you can see that it's taking a while to load because it is checking every single day in the upcoming year. Now later on when we look at the LiveWire and Inertia versions, this won't be a problem
05:24
because we can hook into the calendar. And we can dynamically grab the next date or the next month and then the month after that. But for now, let's just make this add a month. And we'll get around that later on if you want to.
05:37
And even, to be honest, having adding two months shouldn't be too slow. So you can just bump this up and get a feel for how you want this to be. But I'm just going to set this to a month's time. So we'll see a month into the future in this availability calendar.
05:51
OK, so now that we've got this, what we can actually do is we can grab from the availability the first available date. So let's go over to our date collection. And remember, we introduced this first available date method on that.
06:04
And remember, availability returns to our stack collection. So we can say first available date. And we can set this to the first available date from our availability. We can grab the date directly from that because remember, we store the date within it.
06:22
And then we can say to date string. And now that will be available on our blade template. So let's go over to our checkout. And in here, what we can do with our picker is we can set the first available date directly
06:37
within here. And what that's going to do is fill it in for us. So today is the 31st. And that shows us the 31st.
06:45
Now, it's at this point what you might want to do is start playing around with the setting of the time and date from here. So we could say add a day, for example, and then set the time to 9 o'clock. And it's useful to do this while we're building the UI because we can see exactly what we
07:02
want. So when I give that a refresh, you can see we see the date in one day's time, which is great. So I'm just going to comment this out for now, give this a refresh, and we're back to
07:10
the day that we're on. And also, if we do do this, it will pick that date for us on the calendar, which is really helpful. OK, so we're back to today.
07:19
That is pretty much our calendar set up and ready to go. What we now want to do is something that's going to be much more difficult. And that is showing the available slots on the calendar. So let's head over and do that next.
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!