Showing the slot count on the calendar: Build an Appointment Booking System With Livewire

00:13

of these squares that represent each day a little bit larger. That's pretty easy to do using EasePick. So the first thing that we're going to do is create our custom style sheet, which really just overwrites any of the variables within EasePick.

00:28

And then we import that and add it to our CSS array. So let's get started with that and go over to our CSS directory. Let's create out a new file in here. Let's just call this EasePick variable,

00:41

since it will just be used to hold out variables. OK, so we're going to take the root here. I'm going to start to change around some of the variables that we want to switch over.

00:51

So we're going to set the day width here to about 60 pixels. We can always adjust this. And of course, because this is a square, we'll do the same thing for the height as well.

01:00

You can also just colors and stuff as well here. We might do that a little bit later. OK, let's go ahead and import the EasePick. Variables from and let's go back a directory into our resources,

01:15

if we can find them, it should be just here. And in CSS into EasePick variables again, we'll put URL on the end since we're just pulling in a style sheet here. So let's go ahead and add that to here and we should be good.

01:29

Let's go over and check this out. And yeah, that's not updated. So let's just check our style sheet. Yeah, this should be host rather than root.

01:38

OK, let's head over and yeah, there we go. We've got much bigger squares now. OK, so the process of actually going ahead and filtering these out or going through each of the elements of this is within the setup hook.

01:52

So let's go ahead and add in our setup hook to our overall plugin and we'll get an instance of the picker in here. Now, just a bit of background. What we can do on here is start to set events.

02:05

So we're going to say on view that just comes into play when we have a view on our calendar. So if we just go ahead and console log out the event here, let's just see what we get when we try and open this calendar up.

02:18

So let's pull up our console. And yet you can already see that before we've even touched anything, we've got a bunch of events in here. Now, each of these events,

02:26

if we just look at the detail of this, have the date, have the target in here as well, so we don't really want to do anything with stuff like the calendar footer or the header or anything else. So we kind of want to narrow this down to just what we need.

02:41

We are going to add an if statement in here and we'll check the event. And why don't we just pull these out, actually? So let's destructure these. So we've got a view, a date and a target, which we just saw from the event detail.

02:55

So let's just pull each of these out. So if the view is the calendar day, that's one of the elements here, calendar day, then we want to do something. So if we just console log out day here,

03:08

that should narrow that down just to the days within that calendar view that we want to go ahead and modify. So basically we want to insert a little element under here to show how many slots we have.

03:19

OK, so let's go and just add in an element to these just to check that this is working. So we're going to go ahead and create our span element in here. Let's access the target, which is the element itself. And we're going to go ahead and first of all, see if we already have this element

03:36

in there, otherwise we're going to create one because we don't want to duplicate this over. So let's just give this a name. Let's call this day slots, for example. And then if that already exists, we will go ahead and create an element.

03:50

And of course, we want to create out a span. So that's going to represent the span. Now, what we want to do is just push it or append it onto the target. So just plain old JavaScript here.

04:01

Now, this isn't going to do anything at the moment because there's no inner HTML to it. So let's go ahead and set the inner HTML to two slots. We'll just sort of fiddle around with this and then we'll fill in how many slots there actually are.

04:12

So basically, if we're working with a day, one of them squares, create an element or if it already exists because this will be invoked twice occasionally, then just pull that out, set the inner HTML and append it onto the calendar day. That's pretty much what we're doing.

04:28

So let's go ahead and see what this looks like. And if we look at this, yeah, there we go. So we have got the element appended in there. Now it's showing twice simply because we

04:37

haven't added this day slots class to it. So we could just get around that by saying class name. And we'll set that to day slots. And if we have a look now,

04:49

that's only going to find that once and then not do it again if we already have it in there. OK, so we've got all the slots in there now. Now, of course, we want to only do this if there is availability. So we want to pull out our availability here from our options.

05:06

So let's say options availability. And we'll do exactly the same thing we did for our filter earlier, pull out the availability and compare the availability date to the date that we have here now, this day at the moment, if we just console log this out,

05:22

this is an object that comes directly from this package. So again, you can see that just dumping this out gives us the string. But we also have the ability to format this in any way that we want. So we need it in this format because that's how we're formatting it on the

05:36

backend. And you can see now we've got the correct format. So we can now take this date format so we can assign that to a variable. Let's just call that date string like this. And we also want to check if we actually

05:47

have a date, first of all, otherwise just give null. And then here we're going to go ahead and compare that to the date string. And that will bring back only the availability where the date actually exists. So if we have availability in here, then we only want to add in the slots.

06:05

And then we can take this value and replace it out. So now what we should have. Is only slots for the actual availability of the days that are not marked out, right?

06:17

OK, last thing to do, we obviously just want to output how many slots we actually have. We can do this pretty easily by using object keys on the availability and then just counting them. So availability dot slots, that's how many slots to actually

06:33

are. And we can go ahead and just concatenate on. Slots just after that, and we'll pluralize this in just a second as well. OK, we've got an error here, let's just have a look and slots. And we need length as well, of course,

06:50

because this will grab the keys just for the slots and then we'll get the length of them. OK, let's have a look. And yeah, there we go. We've got eight slots here, eight slots here and everything looks good.

07:00

OK, so we kind of want to pluralize this, so let's go ahead and just pull in the pluralize package. And we can go ahead and import this at the top really quickly. So import pluralize.

07:14

From pluralize and then we can just replace this out and that will pluralize it if there's only one slot, it will just say one slot rather than one slot, which doesn't make sense. So let's pull in pluralize here.

07:27

Now, what we can do with this is pass in the singular version and then we can pass in the length of this. And we don't even need to concatenate on slot slots. This will return to us the pluralize, but we can just use true on the end.

07:39

And what this will do is it will output however many we have and then it will add slots onto the end of this. So this is going to look exactly the same as we saw. But if there are only one slot for the day, it will just show one slot.

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

Episodes

Transcript

Episode summary

Episode discussion