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
32. Showing available slots

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
Okay, finally let's take a look at showing available slots and there's a couple of ways that we need to handle this. The first way is as soon as we land on the page we know that we populate this with the next available date which we know has slots so we want to show the slots straight away. The second thing we want to do is when we pick a date we then want to re-render
00:21
and grab the new slots. So let's take a look at the first one which is just as we land on the page. Okay, so we're going to need somewhere to store these slots. We could use a computed property for this which we might switch out for later but let's just keep things simple for now. So I'm going to go ahead and create out a ref within view with just an empty array and that's going
00:41
to contain all of them slots that we can iterate over and show just down here. Okay, so the next thing is when we land on the page e.g on mounted we then want to load in these slots for the current date. So let's go ahead and create out a method in here called set slots and that's just going to grab from the availability that we're already passing down even when we switch over to a
01:06
different month all of the slots within there. Now into this we want to take the date because we only want to load in slots for the date that we are chosen either the current date or the date that we click on and then in here we can just set the value of that ref from the availability from our props and we're just going to find the date so again we'll just call this a for
01:30
availability and the condition is that the date matches the date that we've passed into this function and then we just want to grab out the slots and remember the slots come from our availability resource under our slots here which are all rendered with this slot resource. So now that we've got that let's just dump them on the page and see what happens when we immediately
01:53
invoke set slots from here passing in the date the original date this remember comes from our props which is if we come over to our checkout controller our first available date so that should just fill with that value so let's go down to here and just dump the slots out in fact we'll dump them out where we expect to see them down here and we should see them in there great so we've got a
02:20
few slots in here and then obviously if the date was different we'd have a different amount of slots so that's the first thing that we want to do and we're going to iterate through these and show them in a minute but the second thing we want to do is when a date is changed so this has four slots so we've only got four here if we choose say this one we want this to re-render and show
02:39
the next slots so how do we do this well if we just come up to our unmounted hook that we have here where we're using on render we can also say picker on select so that's another event that this package gives us and if we just console log here on the event let's just see what happens so let's pull up our console let's go ahead and choose another date and there we go we get another
03:05
custom event the detail here contains the date which we're going to need to format in the format that we expect pass through to that function and then that slots them slots will get set in that way so let's say set slots and we know that we get a date as part of this the detail of this custom event so we're going to say date and remember we want to format this in the format that we expect
03:28
so it can be plucked out of our availability and we should be good so let's go over we'll get rid of this date in here start afresh and see what happens so now when i click on this you can see that that new day gets passed in as we select this and it's bringing back all of the other slots and yeah sure enough for every single date now we get all of the slots loaded in and let's just check
03:52
our console we are all good so there we go we're now loading in all of them slots that we expect so now we'll just go ahead and iterate through them style them up and we're good to go so let's go down to our slot section where we are outputting our slots and start to iterate so once again in here let's go ahead and create out a grid and we'll say grid calls three and on medium we'll
04:15
say grid calls five for responsive we'll set a gap of eight and a margin top of six we've already got so let's just yeah we'll just leave that as it is for now and in here we want to iterate through each of the slots so we're going to say v4 slot in slots which we should now have for the key let's just give that the key of slot and date time and then inside of here let's grab out the slot time
04:42
i think we called it that let's just check out on our slot resource and yeah so we've got the date time which tells us what date we're choosing and the time and then the time which is the label so now you can see that we get all of these times output which is great so let's just style this up quickly and we are good so let's set some padding on the y-axis let's set a border on here
05:07
and we'll change the border to slate 200 rounded large so pretty much like we had for everything else text center and we'll set a hover on here to say background gray and i think we chose 50 with a 75 opacity we'll set the cursor to a pointer so it looks like something we can click and we should be good we're going to get to selecting these in the next section where we
05:31
actually choose a slot so we've got a nice hover effect we can see the slots really clearly here and once we click on them they'll be set to our overall form which will be submitted through so there we go we are now loading slots as we hit the page but also when we choose each of the dates as well great

Episode summary

In this episode, we tackle how to show available slots to users on our booking page. First, as soon as someone lands on the page, we automatically fetch and display the slots for the next available date, so there’s something to see right away without any interaction.

To achieve this, we set up a ref to hold the current slots, which we then fill by grabbing the right data from our availability. We also put together a method, setSlots, that updates this slots array based on the chosen date – either when the page is loaded initially, or when a user selects a different date from the date picker.

We hook into the date picker’s selection event to reload the slots any time the user picks a new date. This ensures what you’re seeing always matches the date you’ve chosen. Then, we loop through the slots and lay them out in a responsive grid—styling them so they look nice and are clearly clickable options, complete with a hover effect.

By the end of the episode, the user can see the available slots for any selected date, setting us up perfectly for the next step where you’ll be able to actually select a slot to book. Stay tuned!

Episode discussion

No comments, yet. Be the first!