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
32. Showing available slots
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
Okay, finally let's take a look at showing available slots and there's a couple of ways that we need to handle this. The first way is as soon as we land on the page we know that we populate this with the next available date which we know has slots so we want to show the slots straight away. The second thing we want to do is when we pick a date we then want to re-render
00:21
and grab the new slots. So let's take a look at the first one which is just as we land on the page. Okay, so we're going to need somewhere to store these slots. We could use a computed property for this which we might switch out for later but let's just keep things simple for now. So I'm going to go ahead and create out a ref within view with just an empty array and that's going
00:41
to contain all of them slots that we can iterate over and show just down here. Okay, so the next thing is when we land on the page e.g on mounted we then want to load in these slots for the current date. So let's go ahead and create out a method in here called set slots and that's just going to grab from the availability that we're already passing down even when we switch over to a
01:06
different month all of the slots within there. Now into this we want to take the date because we only want to load in slots for the date that we are chosen either the current date or the date that we click on and then in here we can just set the value of that ref from the availability from our props and we're just going to find the date so again we'll just call this a for
01:30
availability and the condition is that the date matches the date that we've passed into this function and then we just want to grab out the slots and remember the slots come from our availability resource under our slots here which are all rendered with this slot resource. So now that we've got that let's just dump them on the page and see what happens when we immediately
01:53
invoke set slots from here passing in the date the original date this remember comes from our props which is if we come over to our checkout controller our first available date so that should just fill with that value so let's go down to here and just dump the slots out in fact we'll dump them out where we expect to see them down here and we should see them in there great so we've got a
02:20
few slots in here and then obviously if the date was different we'd have a different amount of slots so that's the first thing that we want to do and we're going to iterate through these and show them in a minute but the second thing we want to do is when a date is changed so this has four slots so we've only got four here if we choose say this one we want this to re-render and show
02:39
the next slots so how do we do this well if we just come up to our unmounted hook that we have here where we're using on render we can also say picker on select so that's another event that this package gives us and if we just console log here on the event let's just see what happens so let's pull up our console let's go ahead and choose another date and there we go we get another
03:05
custom event the detail here contains the date which we're going to need to format in the format that we expect pass through to that function and then that slots them slots will get set in that way so let's say set slots and we know that we get a date as part of this the detail of this custom event so we're going to say date and remember we want to format this in the format that we expect
03:28
so it can be plucked out of our availability and we should be good so let's go over we'll get rid of this date in here start afresh and see what happens so now when i click on this you can see that that new day gets passed in as we select this and it's bringing back all of the other slots and yeah sure enough for every single date now we get all of the slots loaded in and let's just check
03:52
our console we are all good so there we go we're now loading in all of them slots that we expect so now we'll just go ahead and iterate through them style them up and we're good to go so let's go down to our slot section where we are outputting our slots and start to iterate so once again in here let's go ahead and create out a grid and we'll say grid calls three and on medium we'll
04:15
say grid calls five for responsive we'll set a gap of eight and a margin top of six we've already got so let's just yeah we'll just leave that as it is for now and in here we want to iterate through each of the slots so we're going to say v4 slot in slots which we should now have for the key let's just give that the key of slot and date time and then inside of here let's grab out the slot time
04:42
i think we called it that let's just check out on our slot resource and yeah so we've got the date time which tells us what date we're choosing and the time and then the time which is the label so now you can see that we get all of these times output which is great so let's just style this up quickly and we are good so let's set some padding on the y-axis let's set a border on here
05:07
and we'll change the border to slate 200 rounded large so pretty much like we had for everything else text center and we'll set a hover on here to say background gray and i think we chose 50 with a 75 opacity we'll set the cursor to a pointer so it looks like something we can click and we should be good we're going to get to selecting these in the next section where we
05:31
actually choose a slot so we've got a nice hover effect we can see the slots really clearly here and once we click on them they'll be set to our overall form which will be submitted through so there we go we are now loading slots as we hit the page but also when we choose each of the dates as well great
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!