Build an Appointment Booking System With Laravel

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

11. Excluding time already passed

Episodes

0%

Your progress

Total: 4h 49m
Played: 0m
Remaining: 4h 49m

Join or sign in to track your progress

01. Introduction

01. Introduction and demo

02. Fresh 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. Base layout and Tailwind setup

21. Listing employees

22. Listing services for an employee

23. Scaffolding the checkout

04. Building the availability calendar

24. Installing Alpine.js

25. Installing and using easepick

26. Disabling unavailable dates

27. Showing available slots on the calendar

28. Requesting available slots

29. Fetching available slots

30. Displaying and selecting a slot

05. Booking appointments

31. Hooking up customer appointment details

32. Disabling future steps

33. Storing an appointment

34. Handling appointment collisions

35. Redirecting to a confirmation page

36. Building the appointment confirmation page

37. 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 common usability issue with our scheduling app: showing time slots that have already gone by doesn't make sense! For example, if it's currently 12:40pm, there’s no point in allowing users to book a 9am slot on the same day.

We walk through how to programmatically exclude all the times earlier than the current time for today's date. You’ll see how we add a method called excludeTimePastToday, and make some tweaks so that the earliest available slot is always in the future. For a bit of extra safety, we pad by rounding to the end of the current hour—so if it’s 12:40pm, we won’t let anyone book an appointment starting at 1pm or later, giving us a small buffer between the current time and the next available slot.

The steps are pretty straightforward: we update our periods, adjust the start times accordingly, and set the precision on our times to match the rest of our setup. You'll also see how to set a test time, so we can reliably check that bookings only start from the correct cutoff.

By the end, our availability only shows future slots for today, and we finish up by prepping for the next episode, where we'll write some tests to verify all this logic works as intended.

Episode discussion

No comments, yet. Be the first!