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
28. Showing the first available date
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
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.
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!