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
11. Excluding time already passed
Episodes
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
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
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.
39 episodes•5 hrs 0 mins•1 year ago
Overview
Building an availability calendar and booking system is a notoriously difficult problem to solve. That’s exactly what we’re going to cover in this course.
Step by step, we’ll build an appointment slot generator that calculates availability based on employee schedules, employee’s booked time off, the length of service chosen, existing appointments, and cancelled appointments.
For maximum flexibility, we’ll also allow multi-employee availability checks, so we’ll be able to see every employee who can perform a service (and their available slots).
To finish up, we’ll create an entire booking flow with Inertia (using Vue), including a beautiful booking calendar that shows detailed availability across multiple dates, the ability to choose a time slot — and finally the ability to book an appointment.
Phew. We’ve got a lot to learn — let’s build a booking system with Inertia!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!