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

11. Excluding time already passed

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

OK, so one issue we've got at the moment with our schedule

00:03

is that for the current date, we are showing 9 o'clock. Now, it's currently 12.40. But of course, what we don't want to do is allow availability to be before what

00:15

the current time is. It doesn't make any sense at all. So what we're going to do is we're going to go and just exclude the start of the day up until now.

00:23

That's pretty much what we're going to do. And it's nothing different to what we've already done. OK, so let's go over and have a look at this. And I'm just going to go and call a method in here

00:33

called exclude time past today. And let's go ahead and add this method in just down here. And this is going to work in exactly the same way by subtracting the date that we want.

00:48

Now, if we go over to our web route, it's probably a good time to pull back in this line of code that I showed you earlier to set the current time and date and time.

00:57

All we're doing here is just setting the test now value. We're grabbing today just so we can test it for today. And we're just setting the time to 12 o'clock. So by the end of this, this should only

01:06

be from 12 till 4.30. OK, so back over to our schedule availability. And we want to do exactly the same thing by overriding the periods and going ahead

01:17

and subtracting from the period. So let's make out a period here. And what is the start of this going to be? Well, it's just going to be the start of the day.

01:26

It doesn't need to be the start of that schedule because it just does the same thing. So we're just going to say now and start of day. So we start the start of the day.

01:38

And we want to exclude this up till now. But we kind of want to add on a little bit of extra time. So I'm just going to say end of hour. So this will be if, for example, it's 12 o'clock currently,

01:49

which within our application it is because we've set that test now value. This will only allow bookings from 1 o'clock onwards. So we're just giving that extra buffer time in between booking

01:59

and actually doing the appointment. And of course, you can adjust this if you wanted to. You could subtract some additional minutes off of this, whatever you wanted to do.

02:07

OK, so we need to go ahead and set the precision in here. So let's set that to minute so it matches up with everything else. And for our boundaries, let's go ahead and exclude

02:17

the start of this. And we should be good. So let's just check this out. I'm going to give that a refresh.

02:24

And there we go. We've set the test time within our application to 12 o'clock. That adds up the end of the hour, which is, of course, 1 o'clock.

02:32

So we can make a booking from 1 till the end of the day. Great. OK, so now that we've done this, we've pretty much wrapped up with all of our availability stuff.

02:41

So I'm going to go ahead and just comment this line out. And we're going to use that in our tests, which we're going to cover in the next episode. Because we've done quite a lot here,

02:48

we want to go through several scenarios just to make sure that everything is working. And if we change anything later, we know if we've broken something.

Episode summary

In this episode, we tackle a pretty practical issue: making sure users can't book times that have already passed for today. Right now, our schedule is showing timeslots from 9 AM onward, even if someone's looking at it at 12:40 PM. That doesn't make much sense!

We walk through a quick change to our availability logic: we create a new method called excludeTimePastToday (or similar depending on your code) and update our system so it only allows booking from the current hour (plus a little buffer) onward. This means if it's currently 12 o'clock, bookings can only be made starting at 1 PM, giving us a handy bit of breathing room between when someone books and when the slot starts.

We also show you how to tweak this logic if you want a shorter or longer buffer—it's pretty flexible. At the end of the video, we set up our application to test this new behavior, and everything looks good: only future times are bookable.

That's a wrap for the availability logic! Next up, we'll start testing these changes to make sure they work in all sorts of scenarios, so stay tuned for that.

Episode discussion

No comments, yet. Be the first!