Build an Appointment Booking System With Inertia

Sign in Get started

This episode is for members only

Sign up to access "Build an Appointment Booking System With Inertia" right now.

Already a member? Sign in to continue

Playing

25. Rendering the datepicker

Episodes

0%

Your progress

Total: 5h 0m
Played: 0m
Remaining: 5h 0m

Join or sign in to track your progress

01. Introduction

01. Introduction and demo

02. A fresh Inertia project with Pest

02. Core functionality

03. How we build up availability

04. Employees and services

05. Employee schedules and exclusions

06. Setting up appointments

07. Working with date periods

08. Iterating over requested days in a period

09. Adding schedule availability

10. Subtracting employee schedule exclusions

11. Excluding time already passed

12. Writing tests for schedule availability

13. Generating slots

14. Building the service availability generator

15. Adding employees into slots

16. Removing empty slots

17. Removing slots with booked appointments

18. Using a custom date collection

19. Writing tests for service availablity

03. Building the booking UI

20. Employee and service resources

21. Listing employees and services

22. Showing services for an employee

23. Scaffolding the checkout

24. Making an employee optional

04. Building the availability calendar

25. Rendering the datepicker

26. Fetching availability

27. Disabling unavailable dates

28. Showing the first available date

29. Fetching future availability

30. Showing slot count on the calendar

31. Fixing up core availability in the past

32. Showing available slots

05. Booking appointments

33. Hooking everything up to a form

34. Setting an employee for the service checkout

35. Adding booking details

36. Storing an appointment

37. Handling appointment collisions

38. Showing the confirmation page

39. Cancelling an appointment

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.

Episode summary

In this episode, we kick off building our availability calendar by starting with a datepicker component. The goal is to create a super user-friendly calendar where users can easily see when available slots are open—without needing to click through each individual date.

We walk through the process of installing and setting up the EasePick datepicker, which is both easy to use and highly customizable. You’ll see how to swap out placeholder text for an actual input field, make it look good with some quick styles, and hook it up using Vue refs so we can interact with it programmatically.

The episode covers how to ensure the datepicker displays on click, imports its required styles so it looks smooth, and makes the input read-only to prevent accidental edits. We also talk a bit about future plans: like automatically selecting the nearest available date, showing slot counts right on the calendar, and disabling days with no availability.

By the end of this video, you’ll have a working datepicker in your app, looking clean and ready for more advanced features!

Episode discussion

No comments, yet. Be the first!