Build an Appointment Booking System With Laravel

Sign in Get started

This episode is for members only

Sign up to access "Build an Appointment Booking System With Laravel" right now.

Already a member? Sign in to continue

Playing

25. Installing and using easepick

Episodes

0%

Your progress

Total: 4h 49m
Played: 0m
Remaining: 4h 49m

Join or sign in to track your progress

01. Introduction

01. Introduction and demo

02. Fresh project with Pest

02. Core functionality

03. How we build up availability

04. Employees and services

05. Employee schedules and exclusions

06. Setting up appointments

07. Working with date periods

08. Iterating over requested days in a period

09. Adding schedule availability

10. Subtracting employee schedule exclusions

11. Excluding time already passed

12. Writing tests for schedule availability

13. Generating slots

14. Building the service availability generator

15. Adding employees into slots

16. Removing empty slots

17. Removing slots with booked appointments

18. Using a custom date collection

19. Writing tests for service availablity

03. Building the booking UI

20. Base layout and Tailwind setup

21. Listing employees

22. Listing services for an employee

23. Scaffolding the checkout

04. Building the availability calendar

24. Installing Alpine.js

25. Installing and using easepick

26. Disabling unavailable dates

27. Showing available slots on the calendar

28. Requesting available slots

29. Fetching available slots

30. Displaying and selecting a slot

05. Booking appointments

31. Hooking up customer appointment details

32. Disabling future steps

33. Storing an appointment

34. Handling appointment collisions

35. Redirecting to a confirmation page

36. Building the appointment confirmation page

37. Cancelling an appointment

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.

Episode summary

In this episode, we kick things off by discussing why EasePick is a solid choice for our booking needs—especially when we want to show things like slot availability and block off dates that can't be booked.

We start by tidying up our date input on the page, giving it some basic styling so it blends in nicely. After that, we dive into installing EasePick. Instead of pulling in each script separately, we just include the full bundle for now (it's quicker to get going this way). We make sure to grab the necessary CSS, too, so the calendar widget looks right.

We connect EasePick to our text input using a ref in Alpine.js, making it super simple and clean to work with (no messy DOM queries needed). Once wired up, we set the input to readonly, so users can only pick dates via the calendar picker.

Next, we tackle setting the initial date in the picker. We use the slot availability generator we've built earlier in the course to figure out the first available date, making sure the picker always defaults to the earliest open slot. We also talk through some performance considerations, like limiting how many days into the future we generate availability (otherwise things get slow fast!).

Finally, we wrap up by ensuring the selected date is filled in and discuss how you could tweak this for development purposes (like setting a specific default date/time). By the end of this episode, the calendar is set up, styled, shows the first available date, and is ready for us to tackle the next big feature: showing available time slots.

Episode discussion

No comments, yet. Be the first!