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
27. Showing the slot count on the calendar
Episodes
01. Introduction and setting up
02. Database setup
03. Displaying employees and services
04. Core functionality
09. How we build up availability
3m 40s
0%
10. Working with date periods
6m 54s
0%
11. Iterating over requested days in a period
3m 30s
0%
12. Adding schedule availability
11m 33s
0%
13. Removing schedule exclusions
3m 35s
0%
14. Excluding time already passed today
2m 17s
0%
15. Generating slots
11m 50s
0%
16. Using a custom date collection
1m 28s
0%
17. Building the service availability generator
6m 18s
0%
18. Adding employees into slots
8m 14s
0%
19. Removing empty slots
3m
0%
20. Removing slots with booked appointments
6m 17s
0%
05. Building the checkout
21. Scaffolding the checkout design
4m
0%
22. Making the employee optional
1m 54s
0%
23. Loading availability
8m 31s
0%
24. Building Alpine plugins
3m 18s
0%
25. Showing the calendar
3m 32s
0%
26. Locking unavailable dates
15m 1s
0%
27. Showing the slot count on the calendar
7m 52s
0%
28. Updating the selected date
3m 29s
0%
29. Showing time slots
5m 43s
0%
30. Setting a time slot
2m 43s
0%
31. Finding an available employee
3m 31s
0%
06. Booking appointments
07. Appointment confirmation
Transcript
00:00
So it's slightly more complicated to show available slots on our calendar, but we have all of our availability in the format that we need it in. So we just need to read that data and add it in. Now, before we do that, we need to make each
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.
36 episodes•3 hrs 4 mins•3 months 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 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
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.