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
35. Adding booking details
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, so let's go ahead and add in some very basic booking details and get these hooked up to our form. Okay, so I'm currently on the checkout for hair, I'm going to choose a date and time and it's only at this point that we choose a slot that we want this to appear, so we
00:13
can just add a very simple if statement to this entire container to make that work, I'm not going to do that just yet because we're going to design the form out first but then we'll add that in at the end. Okay so let's create out a really simple form group here and we're going to have a name,
00:29
we'll set the label to screen reader only so we don't see that but screen readers do so we'll say your name, let's go ahead and add in a input type of text in here and this will be name and name, so let's apply some styles to this and then we'll go ahead and duplicate this over.
00:45
Okay, so we'll set a margin type of one to keep that away from the label, we'll set the text here to small, background to slate 100 so it matches everything else, get rid of the border, make this rounded large and set some padding on the x-axis and some padding on the y-axis and then we'll just make this width full, so we end up with something that
01:05
looks like this and then we can just add in a placeholder in here and say your name and there we go, we should be good, okay so let's duplicate this down to here then for this one let's go ahead and set a margin on the top of three and this is going to be your email so let's just change everything over here to email and switch that back to name
01:29
and we should be good, we can change the type to email as well if we want this to be validated on the client side as well as the back end and there we go, we have our two form fields, really basic stuff but of course you can add more to this if you need to, okay let's finish up with a button in here and this will have a type of submit, so this is going to submit
01:47
the entire form that we are wrapping everything in and I'm going to add some styles to this but I'm just going to copy and paste them over so we don't waste too much time, you can grab these from the github repository if you want to copy them over, so let's say make booking and we're just going to have a really basic button down there, it says
02:06
make booking so when we click on this that is going to submit that form, at the moment it does a full page submit but of course we want to catch this and not do anything, okay so let's finish up by just hooking these up so vmodel is going to become form and name and then the vmodel for this is going to become the form and email and you can dump them out
02:27
to verify that they're getting set but we're pretty sure they are, okay so let's go ahead and hide this entire thing unless a date and time has been selected and really all that means is vif form date time, that's pretty much all we need to do because unless a date time is set we don't want to show this form, so at the moment it's gone but only when we
02:49
select a slot will this be shown, so really really basic stuff, okay so finally let's go ahead and just hook up this entire form so when we submit it, it calls a method, in the next episode we'll look at making the booking, so here is our form and what we can do is either do this all in line within our template or we could just create out another
03:08
method in here, so let's just do this underneath where we've defined our form and let's just say submit and this will go ahead and submit the form but now we can hook this up to our actual form, so let's go down to where we've defined our form out and we'll say v on submit prevent the default behavior and just call that submit method, so now let's go back to
03:33
the start and get rid of these in the query string, let's choose this type in a name and an email address, hit make booking and nothing happens but of course in our console we see that submitted, so now that we've got that hooked up let's go over to the next episode and actually get this appointment stored in the database.
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!