Build an Appointment Booking System With Livewire

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

25. Showing the calendar

Episodes

0%

Your progress

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

Join or sign in to track your progress

01. Introduction and setting up

01. Introduction and demo

02. A fresh Laravel app

02. Database setup

04. Creating employees and services tables

05. Employee schedules and exclusions tables

06. Creating the appointments table

03. Displaying employees and services

07. Displaying employees and services

08. Showing all services by an employee

04. Core functionality

09. How we build up availability

10. Working with date periods

11. Iterating over requested days in a period

12. Adding schedule availability

13. Removing schedule exclusions

14. Excluding time already passed today

15. Generating slots

16. Using a custom date collection

17. Building the service availability generator

18. Adding employees into slots

19. Removing empty slots

20. Removing slots with booked appointments

05. Building the checkout

21. Scaffolding the checkout design

22. Making the employee optional

23. Loading availability

24. Building Alpine plugins

25. Showing the calendar

26. Locking unavailable dates

27. Showing the slot count on the calendar

28. Updating the selected date

29. Showing time slots

30. Setting a time slot

31. Finding an available employee

06. Booking appointments

32. Taking customer details

33. Re-checking availability

34. Creating the appointment record

07. Appointment confirmation

35. The appointment confirmation page

36. Cancelling appointments

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.

Episode summary

In this episode, we dive straight into adding a working date picker to our form. The goal is simple: when you click on the input field, a calendar should pop up, letting you browse and select dates—super handy for any date-related input in your app. We're using the EasePick library here because it's both powerful and easy to customize, covering things like date locking, ranges, and even time picking if you need it.

We start by installing EasePick with NPM, then importing both the JS functionality and the all-important CSS for styling. After that, you’ll see how to wire it up to our Alpine directive, so the date picker knows which input to latch onto. Along the way, we tweak a few basic config options and make sure the input becomes read-only (so users aren't typing random stuff in).

By the end, we have a slick calendar popping up on click. It updates the input when you pick a date, fitting right into our existing form. We’re not reading events from it or handling changes just yet—that's coming up—but for now, you get a fully functional, great-looking date picker plugged into Alpine with minimal setup.

Episode discussion

No comments, yet. Be the first!