Build an Appointment Booking System With Inertia

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

28. Showing the first available date

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

02. A fresh Inertia project with Pest

02. Core functionality

03. How we build up availability

04. Employees and services

05. Employee schedules and exclusions

06. Setting up appointments

07. Working with date periods

08. Iterating over requested days in a period

09. Adding schedule availability

10. Subtracting employee schedule exclusions

11. Excluding time already passed

12. Writing tests for schedule availability

13. Generating slots

14. Building the service availability generator

15. Adding employees into slots

16. Removing empty slots

17. Removing slots with booked appointments

18. Using a custom date collection

19. Writing tests for service availablity

03. Building the booking UI

20. Employee and service resources

21. Listing employees and services

22. Showing services for an employee

23. Scaffolding the checkout

24. Making an employee optional

04. Building the availability calendar

25. Rendering the datepicker

26. Fetching availability

27. Disabling unavailable dates

28. Showing the first available date

29. Fetching future availability

30. Showing slot count on the calendar

31. Fixing up core availability in the past

32. Showing available slots

05. Booking appointments

33. Hooking everything up to a form

34. Setting an employee for the service checkout

35. Adding booking details

36. Storing an appointment

37. Handling appointment collisions

38. Showing the confirmation page

39. Cancelling an appointment

Transcript

00:00

Before we move on to something a little bit more tricky, let's look at just populating this with the first available date.

00:07

Now, we know if we just look at our code and under our date collection, we've already got this first available date, which used first to grab out where we have

00:16

a slot count for a certain date. That basically just gives us the first date that has slots. So what we want to do is pass this down in our checkout controller and then attach it to our picker

00:25

when we instantiate this so it's already in there and selected. So let's go ahead and just call this date. We could call it first available date, but let's just keep this simple.

00:35

We're going to go ahead and say availability first available date, which we already know. And then we're going to say grab the date and cast it to a date string, which

00:47

will give this to us in that format that we expect, YY, MM, and DD. Now, let's go over to our checkout. Let's go ahead and pull this in as a prop.

00:59

So date, and that's going to be pulled through as a string. And then down here, what we can do is attach this directly into our picker. So all we want to say in here is date and props.date.

01:10

And we should be good. So now when we come over and give this a refresh, that gives us the first available date. Now, if we go over to the database

01:18

under our schedule exclusions and we're specifically looking at Alex, of course I'm available today. But if I wasn't available today, so let's change this over to the 19th, then what's going to happen

01:33

is that's going to send me directly over to the 20th. And then when we get to generate our slots and calculate our slots, that will only load in slots for the 20th, which, of course, is tomorrow.

01:45

So there we go, a really easy change to that where we just populate this with the first available date. I'm going to go ahead and get rid of this schedule exclusion.

01:53

And in the next episode, we're going to work on the ability to navigate between this and load in more dates as we navigate, which is a lot more difficult than it sounds.

Episode summary

In this episode, we focus on making our date picker a bit smarter by automatically selecting the first available date that actually has open slots. We start by using some existing logic in our code to find that first available date, and then pass it from our backend through to the frontend as a prop.

You'll see how we briefly tweak our checkout code so that the date picker is pre-populated with this first available slot—meaning users won't have to hunt for it themselves. We also demo what happens if there aren't any slots for today: our picker will jump straight to the next available date.

Finally, we test this out by playing with the schedule exclusions in the database and watching how the picker responds. In the next episode, things get a bit trickier as we start building out navigation to move between dates and dynamically load more slots.

Episode discussion

No comments, yet. Be the first!