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

0%
Your progress
  • Total: 3h 4m
  • Played: 0m
  • Remaining: 3h 4m
Join or sign in to track your progress

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 episodes3 hrs 4 mins

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
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!