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
26. Fetching availability

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
Now, obviously, our entire calendar is driven by the availability that we actually have. So what we need to do is grab our availability inside
00:08
of our checkout controller. And then we need to pass this down to this page. What we can do from that is work out which days are unavailable. We can also work out how many slots
00:19
are available for which day. And we can also work out the first available day as well. Now, let's focus on that and just dump this out to the page just so we know that we've got the structure right.
00:30
And then we can start to tweak our calendar by adding all of that good stuff in. So we're going to come over to our checkout controller. And we're pretty much just going to new up and output
00:41
our availability stuff. So let's get started with what we did in our core functionality section. And we're going to go ahead and new up a service slot
00:51
availability here. We know that we need to pass in the employee if that exists. Otherwise, we want to grab all employees. So let's go and just add a ternary directly in here.
01:02
So we're going to say, if the employee exists, much like we did with the ternary just here, then we want to just grab an empty collection and then put that single employee in there.
01:14
Otherwise, we want to grab all employees. Remember that the service slot availability generator can take in multiple employees. So the next thing we want to pass in
01:26
is the service, which we know we're always going to have. And let's just make sure we are putting this in the right place and we're not. There we go.
01:34
And then we want to grab this for the period that we want. So the period, for now at least, is going to be the start of the current day. And it's going to end in, let's say, a month time.
01:48
So let's add on a month to our availability. And then we'll say end of day. So this will basically give us, from today, the start of today, a month's period that we're checking in.
01:59
Now, later on, what we're going to do is have the ability to control this. When we flick through the calendar, we want to change these values around to only the month
02:09
that we're currently seeing. So we'll do that a little bit later. But for now, we pretty much have all of our availability. So let's just die dump on our availability
02:18
and remind ourselves. We have got a date collection, which is our custom date collection. We've got each of the dates that are available,
02:25
the slots that are available inside of each of these, and the employees that are available to fill them slots. Great. Now, here you can see that we're not passing the employee in.
02:35
So this means it will give us all of the available employees for that service. And if we chose that, change that over to hair, for example, we will have multiple employees available for these.
02:48
So there we go. We've got Mabel and Alex, because their schedules are both the same. And of course, adjust the data in your database
02:55
if you're following along and you want to change this up. OK, so now that we've got this availability, we don't just want to pass this down to the view. We want to do exactly the same thing
03:05
that we've done with our API resources and create out an availability resource, which will structure this data properly for us. So let's go ahead and do that now.
03:15
So we're going to go ahead and make out a resource in here. And we're going to call this availability resource. So let's go ahead and create that. And then we're just going to pass this availability down.
03:29
So let's say availability, grab our availability resource, make this out. And in fact, that's going to be a collection of available dates. And we'll just pass our availability directly
03:42
into there. Over in our checkout, we'll go ahead and accept this in as our props. So availability, and that's going
03:49
to be an array of availability. OK, great. Let's go over and just give this a refresh. And yeah, sure enough, we get an error here
03:56
because the data is slightly differently structured. We're using our own custom collection. And the things inside of it can't easily be transformed. They're not models where resources are typically
04:07
passed through to. So if we come over to our availability resource, let's go and figure out how we can get this working so we have a nice structure of all of our availability.
04:18
So the first thing is going to be the date. So we want to know the date. So let's say this date and to date string. And let's check this out.
04:27
That should help because we have not just accessed all the data in there, which have nested items. And we should be good. So let's go over to our checkout and dump this availability out
04:38
on the page just so we can see what we're working with. So let's dump that out. And there we go. So we've basically now just got an array of objects
04:47
which contain a date in the format that we want to see them in, which is going to match up to our calendar. OK, so the next thing, if we head over
04:55
to our availability resource, are going to be all of these slots. So for these, we can't just dump them down. What we want to do is map through them
05:03
and return a slot to resource as part of these. So let's go ahead and get started on this. We're going to say this slots because that's our custom thing inside of each of them,
05:13
which is a collection in itself. We're going to map through each of these slots, which we'll type in just here. And then we'll go ahead and return a slot resource
05:24
in here, which we don't have at the moment. But we'll go ahead and build this out. So we're going to make out a slot resource passing in each of them slots.
05:32
So let's go ahead and make this out, slot resource. Let's pull that in. And then over in our slot resource, let's just return an empty array for now
05:42
so we don't get into trouble. So if you give that a refresh, you have a date now. Now we have a nested object of all of the slots in here, which we can use to count how many slots
05:54
are available for a certain date and show them on a calendar. We can show unavailability as well if they're not in there and all of that good stuff. So inside of our slot resource then,
06:04
we want to go and output stuff like the employees for each of these. So for example, our employees, we don't really need anything in here aside from their ID
06:16
so we can re-request that information. So we're just going to say employees as part of that. And we're going to go ahead and pluck out the ID. So let's go over and give that a refresh and have a look.
06:27
And yeah, at the moment, we're using an array for our employees. So it might be best to change that over in our slot that we had before.
06:36
So if we open up our slot here, you can see that we've got this employees array. Let's change this over to be a collection. I don't know why we did that before,
06:44
but it's going to make a lot more sense to have this as a collection. It's going to work a lot better. So we can go ahead and initialize this collection
06:52
in here. So we can set the employees to an empty collection like this. And then when we add an employee to this, all we need to do now is just say push employee rather than
07:03
do that in the standard way. Now for the has employees, we can do this and say count. And we should be good.
07:12
So let's go over, give this a refresh, and yeah, let's just take a look here. And yeah, I've pulled in two different things. So let's just make sure we put in the support collection.
07:23
So here, that's just a standard empty collection. And there we go. So we now are just working with a collection, and it's a lot easier.
07:31
So just going to go ahead and run our test just to make sure that everything is working. We've not broken anything with that small change. And it looks good.
07:39
It works in exactly the same way. OK, so we've got our employees, our list of employees that can fulfill that slot. Let's go ahead and grab the date time for this.
07:48
So we're going to say this time to date time string. And let's just take a look at what that gives us. And you can see that we've got this. Now, the reason that we're outputting a date time here
08:00
is when this is chosen, this particular slot is chosen, we want to set the whole date time into the form. We don't necessarily want to set a separate date and a time just because we have the date and the time
08:13
within a time, a date time. So if we book this slot at 2 o'clock, for example, we know what the date is, and we know what the time is. So it just saves having to pass two different things down.
08:24
So the next thing is just going to be the time label itself. So let's say this time and format this in h for hours and minutes, or i for minutes. And we have the following.
08:37
So we can display this on our slot when we grab our slots. And this is what we're going to send through with our form when we make the booking. OK, great.
08:45
So we've got all of that information in there now. And now from this, we can work out quite a bit of data. So for example, we can work out which slots are unavailable, which days are unavailable.
08:57
When we click on these, we can fetch the slot count, and we can iterate over the slots for each of them. And then when we click on that, we can set the date time to this overall form
09:08
so we know what we're booking. So in the next episode, let's go over and look at excluding the days that are unavailable within our calendar.

Episode summary

In this episode, we focus on fetching and organizing your service's availability data so we can feed it into our booking calendar!

We start by working inside the checkout controller to grab all the availability information that we need—from available employees to the days and time slots you can book. We walk through setting up the code to fetch availability based on employee and service, for a set date range (like the next month), with a few tricks to make it dynamic later (e.g., changing when the user flips through the calendar).

Next, we dive into structuring this data nicely for the front end by creating custom API resources—first an AvailabilityResource for the days, and then a nested SlotResource for specific time slots within each day. We make sure these resources only return the necessary info, keeping things clean and ready for our calendar UI.

We also refactor how slots track available employees to use collections (which is just a bit neater in Laravel!), and check everything still works by running the tests. Finally, we ensure we include the right info—like the number of slots per date, which employees are free for a slot, and formatting the times correctly so they're easy to display in the calendar and easy to use when making a booking.

Now with all your structured availability ready to go, we're set up to make the calendar show available and unavailable days, display the correct slots, and handle bookings on the right date/time. Next episode, we'll start hiding those unavailable dates in the calendar!

Episode discussion

No comments, yet. Be the first!