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
25. Rendering the datepicker
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
In this section we're going to work on our availability calendar that's going to be here, this date picker and we're going to allow this to be clicked and show our slots of course, we're also going to allow this to be navigated and then fetch additional availability plus we're also going to show the slot count on the calendar so it's really easy to see what availability we
00:22
have for each day without having to click on each date, now the first thing that we're going to do is just get the picker on the page so we can click it and see the calendar, now for this we want something that is incredibly easy to customize and EasePick works really nicely for this, so I'm going to get this installed, get our input on the page and click and see this calendar, okay so if
00:45
we come over to the guide here what we want to pull in is the bundle, now we can pull in the base plugin and then any additional plugins we want but I'm just going to pull the bundle in which contains everything and then you can always switch this up later and specifically pull in just what you need, so if we head over to the bundle section we're going to go ahead and use
01:04
npm to install this rather than pull this in with the cdn, so let's pull that into our editor and just go ahead and wait for that to finish and we're pretty much done, so the first thing that we want in place of this picker text is an input, that's pretty much all we need, the type of this we don't need to specify, we just want this to be an input so we can target it with EasePick,
01:26
now with this let's just go ahead and style this up really quickly, so I'm going to go and in fact we could probably just get rid of this wrapper entirely and just have this input underneath this header, so let's go ahead and set a margin top back there of six, we'll go ahead and set the text to small here, set a background of slate 100, disable the border, make this rounded large,
01:51
set some padding on the x and the y axis and we'll set this to be a width of full, pretty much so it just looks like a standard input on the page, now let's go ahead and add a placeholder text to this, we don't necessarily need this because we're always going to show the first date that is available on this picker, so we automatically load the slots in, but just in
02:14
case we'll make it clear, okay so for this input then we want to add a ref to this within view, so we can reference it when we create our EasePick instance and we can reference this element, so I'm going to go ahead and call this picker ref, now the way that we define a ref in view 3 is first of all go ahead and import ref, which has really nothing to do with refs on the page,
02:37
ref is just a reactive object and we're going to pull that in directly from view and then just down here let's go ahead and create out a picker ref value for ref and we'll just set that to null, now what this will do is once the page is mounted this will then contain that element, now just to show you an example of that let's go up here and pull in the unmounted lifecycle hook,
03:02
we'll go down here and define out the unmounted lifecycle hook and then we'll go ahead and console log what we get with this picker ref, so if we come over to the page here give this a refresh you can see that we've got this ref, the value of this is the input itself, so when we go ahead and pull EasePick in and start to use this we can just target this picker ref and that will
03:26
turn that input into that calendar for us, okay so let's go ahead and get EasePick set up, so let's go up to the top here and go ahead and import it, so we're going to go ahead and pull EasePick in from EasePick and bundle and then we're going to create out a method called create picker and that's going to do everything that we need,
03:53
now what we want to do is only create this once the component here or the page is mounted, so we're just going to call create picker directly inside our unmounted lifecycle hook, that means that this ref is available and then we can just inject that into the page, okay so we're going to go ahead and also create a variable out here called picker,
04:12
that's not going to be a ref it's just going to be a null value and then we're going to assign picker to that new picker just in case we need to reference it elsewhere in this script, so we're going to say new EasePick and create, now in here we're just going to pass a bunch of options and then we're going to have a setup function a little bit later which is going to
04:31
allow us to control how this looks, the most important is the element itself which we know is that picker ref because we're dealing with a ref and view we need to specify value which will actually give us back the input itself and that will be bound to that, okay some other options we can add to this are things like read only so we can't modify the
04:52
input once it's in there, we're also going to set the z index to 50 so it goes over the other elements that we have on the page and to be honest we should be good with everything that we've done here, let's go and just preview this and just see what we have and just make sure that we don't have any errors and yeah okay so we just need to make that let because we can't override a constant
05:15
value and it looks like this is still not working so I have a feeling we're going to have to pull the styles in for this for this to work, now to do this we can go ahead and define out an array of styles that we want to pull directly into here, now these if we look at the easy EasePick documentation come from the cdn but they are also available when we download this as a package,
05:37
so we're going to go ahead and import them styles and we're just going to call this style, we're going to go into EasePick, we're going to go into the bundle, the dist folder and then we're going to pull in index.css, now because this is just a direct file that we're working with we're going to go ahead and add url onto the end here and then we can basically just inject this
05:59
directly into this css array and that is going to give us these styles to render this, so let's just double check if this has worked and when I click on this yeah sure enough we have a calendar rendered, we can click on a date and that inserts that directly into that input, now we've got a lot of work to do here because we want this to always have the current date and time or the current date
06:25
which has availability, so for example if we don't have availability today this calendar I want to automatically default to tomorrow or whenever the next availability is and we want to style this up add the slot count, disable the dates that can't be done like Saturdays and Sundays if no one's working and all that kind of stuff, but for now that is pretty much our picker set up on the page and ready to go.
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!