Build an Appointment Booking System With Inertia
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
30. Showing slot count on the calendar

Episodes

0%
Your progress
  • Total: 5h 0m
  • Played: 0m
  • Remaining: 5h 0m
Join or sign in to track your progress
01. Introduction
01. Introduction and demo
5m 45s
0%
02. A fresh Inertia project with Pest
3m 4s
0%
02. Core functionality
03. How we build up availability
7m 55s
0%
04. Employees and services
7m 39s
0%
05. Employee schedules and exclusions
7m 53s
0%
06. Setting up appointments
5m 34s
0%
07. Working with date periods
10m 4s
0%
08. Iterating over requested days in a period
4m 51s
0%
09. Adding schedule availability
15m 38s
0%
10. Subtracting employee schedule exclusions
7m 53s
0%
11. Excluding time already passed
2m 57s
0%
12. Writing tests for schedule availability
19m 50s
0%
13. Generating slots
14m 47s
0%
14. Building the service availability generator
7m 5s
0%
15. Adding employees into slots
9m 44s
0%
16. Removing empty slots
4m 42s
0%
17. Removing slots with booked appointments
6m 44s
0%
18. Using a custom date collection
3m 34s
0%
19. Writing tests for service availablity
18m 42s
0%
03. Building the booking UI
20. Employee and service resources
9m 7s
0%
21. Listing employees and services
8m 58s
0%
22. Showing services for an employee
8m 7s
0%
23. Scaffolding the checkout
8m 37s
0%
24. Making an employee optional
3m 38s
0%
04. Building the availability calendar
25. Rendering the datepicker
6m 51s
0%
26. Fetching availability
9m 16s
0%
27. Disabling unavailable dates
6m 25s
0%
28. Showing the first available date
2m 4s
0%
29. Fetching future availability
10m 4s
0%
30. Showing slot count on the calendar
9m 1s
0%
31. Fixing up core availability in the past
2m 34s
0%
32. Showing available slots
5m 49s
0%
05. Booking appointments
33. Hooking everything up to a form
4m 42s
0%
34. Setting an employee for the service checkout
7m 30s
0%
35. Adding booking details
3m 55s
0%
36. Storing an appointment
8m 28s
0%
37. Handling appointment collisions
8m 37s
0%
38. Showing the confirmation page
8m 39s
0%
39. Cancelling an appointment
3m 49s
0%

Transcript

00:00
Another pretty tricky thing to get working is showing the slot count on the calendar itself. Now, before we discuss how we're going to do that, we want to apply some custom styles to
00:11
this calendar because we're just not going to have room to show these slots otherwise. So let's go over and create out a custom style sheet for this, import it, and then apply it to the style array that we already have. So over in resources in CSS, I'm going to create a vendor folder, just so it's clear that this isn't part of our code, and we'll just create
00:33
easepick.css in here. Okay, so let's look at how we import this first of all, and then I'll show you how to apply these styles. So we're just going to do pretty much the same thing as we did here, and let's call these custom styles, or custom style, and let's pull this in from, we need to go back into resources, css, vendor, and easepick.css, and again apply that url on the end.
01:02
So now we can just take these custom styles and we can apply them in here. Now the way that styles work within easepick is we scope them to the root so that they can be applied, and we can override css variables, that's pretty much how this works. Of course, you can target the individual class names yourself, but we have a lot of variables here that we can play with. So what we do in here
01:26
is we define our host as the scope here, and we can override any of the variables that we need. So for example, the day width, we probably want this to be around 60 pixels, and we want the day height to be around 60 pixels as well. So this will take this, apply it to the styles that we already have, and it will override them css variables, and as you can see they are now much
01:50
bigger, and we will have enough room to inject the slots in there that we need. Now there are a couple of other things that you can do to this, I'm just going to go ahead and copy and paste these over, these are just tailwind colors but in hex values, and this is just for the locked and the accent colors which I've just chosen from there, and you can go ahead and just copy and paste them in.
02:12
So we have something with our lock dates that looks a little bit nicer and a little bit more appropriate for the styles that we've created. Okay, so now that we've got the styles done and we know that we've got enough room to get the slots in, let's actually get the slots in here. So what we want to do with this is do this on setup. So we have this setup method that we can
02:35
use directly when we create our ease pick instance out. So let's grab our picker just out here, and we're going to say picker on view, and we're going to take the event that we get through into here. This is very similar to what we did before, so if we just console log here on e-detail, and we just give this a refresh with our console open, you can see that this will contain a bunch
03:03
of views. So we just want to target a specific view to inject in the slot count, and let's go ahead and do that now. So I'm going to just go ahead and unpack all of these things that we need. So we've got a view, date, and a target. So let's pull them out of e-detail. We can reference them individually, but it just makes it a little bit easier to unpack them, and if we just go and
03:27
create an if statement in here with the view, this needs to be calendar day. We only want to do something when we are working with the calendar day element as part of this picker. So let's go and console log out day, and we should end up with a lot less dumped out now. This is just going to be for every single day that we see on the calendar, which is great. Okay, so now what we want to do is
03:51
grab out the date string from this date. So that is going to be, if we have a date, we're going to format that to the format that we expect. So YYYY, MM, and DD. So if it actually exists, otherwise we'll just output null. So let's again just console log on that date string, just so we can see what that looks like, and we'll do that only within here, so we don't get a bunch out that we don't need.
04:17
And there we go, you can see that we go from the first, to the second, third, fourth, all the way up to the 29th. And we do have duplication there, but we'll deal with that in a second. Okay, so before we apply the actual slot count, let's look at how we can build up an element and then inject into this calendar day. So to do this, we want to create out some kind of span element or something
04:37
like that. So we are going to say document create element, and we're going to create out a span. Now this might already exist in here as this gets re-rendered, so what we want to do is say target, which references what we're working on, query selector, and then we want to choose a class name in here. So for example day slots, otherwise we want to create it, because if it
05:04
already exists, we don't want to create it again. So we're going to call this span just down here day slots, and then if it already exists, we already have that span. So now down here, let's start to set the class name. So we'll set the class name on that span to day slots, so we've done that. Then we want to set the inner html or the inner text to this to something. So
05:30
I'm just going to say three slots just as an example. Now what we can do is the target, which remember is this calendar day, we can append on that span and we should be good. So basically when we're dealing with a calendar day, either grab an existing day slots class if it exists, set the class name, set the inside html, the inner html, and append it onto that element.
05:57
So now when we give this a refresh, we should see all of them slots in there, which is great. Now we don't want to apply that to the days that are in the past and that don't exist, and we're actually going to have an issue with this later which we're going to fix up, because these shouldn't contain any slots at all. But we want to actually get the slot count,
06:16
so let's do that now and then we'll fix up that issue next. Okay, so how many slots do we have? Well the first thing we want to do is grab the availability. Let's go ahead and create out an availability variable up here from our availability and our props. Let's find it where the date matches, so pretty much what we've already done. So a date, a is for availability, and we want to
06:38
check where that matches the date string that we've formatted here to the date that we have inside of our availability. So we only want to do this if we have availability, so if that can't be found it will be undefined, so we only want to do this if we actually have something in there to work with. And then in here we can just grab out the slot count. So with this it's a little bit
07:00
tricky, let's just back tick this so we can use interpolation here, and let's go ahead and say availability slots and length. Now slots is an object, so this isn't quite going to work. If we just go over and give this a refresh we will see undefined. So what we want to do is take this and say object keys availability slots and then length, and that will give us the amount of
07:26
things inside of that object. So let's go over and give that a refresh and check this out, and there we go. We get all of the slot counts in there, how many slots we have available, which is perfect. Now if you want to pluralize this you can do, so we can go ahead and do an npm install on pluralize, which is a really simple package that will just take in a singular
07:47
variation of something and it will output this properly for you. So we'll go ahead and import this, this is completely optional, but let's pull in pluralize from pluralize. Let's go back down to where we're doing this, and we can either just use pluralize on the end, or we could take this entire thing here, cut it out, and use pluralize on its own, give in the singular version, give in
08:14
the count, and then choose true as the last argument which will output the actual text on the end for us. So we can either build this up manually or just let this package do it for us. So now if we give this a refresh you'll see it works in exactly the same way, but if we only had one slot in there it would just show one slot rather than one slot, which doesn't make sense,
08:36
and that's pretty much it. So we now have the slots being shown on the calendar, which is great. We can see this issue of the dates here that have passed, we have 16 slots, 16 slots, 16 slots, we don't want that, and that's a fundamental issue with the core functionality that we've already built, which has a very simple fix, and I'm going to explain to you and show in the next episode.

Episode summary

In this episode, we're tackling a pretty common request: displaying the slot count directly on each day in the calendar. This means when someone looks at the calendar, they immediately see how many slots are available for each date—super handy!

Before we jump into slot logic, we first need a bit more space to show the numbers. So, we start by customizing our calendar's styles. We add a new CSS file, tweak some variables (like making the days bigger), and ensure that visually, we've got plenty of room to inject those slot counts.

The next chunk is all about injecting that slot data. We listen for a specific calendar render event, and whenever a calendar day is shown, we check if it's the right type of view, grab the date, and either find or create a span element inside that day cell for showing the slot count.

To actually get the slot count, we match up the date in our availability data. Then, using a bit of JavaScript, we count how many slots are available for that date and display the count. We even make this a bit nicer by using the pluralize package so the text comes out as either "1 slot" or "2 slots," which just looks more professional.

We wrap up by noting a little caveat: right now, our logic also adds slot counts to past dates, which doesn't make sense. But don't worry—we'll deal with that in the next episode!

By the end of this lesson, you'll have a fully functional calendar view with slot counts displayed for each day, setting you up to refine things further next time.

Episode discussion

No comments, yet. Be the first!