Build an Appointment Booking System With Laravel

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

27. Showing available slots on the calendar

Episodes

0%

Your progress

Total: 4h 49m
Played: 0m
Remaining: 4h 49m

Join or sign in to track your progress

01. Introduction

01. Introduction and demo

02. Fresh 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. Base layout and Tailwind setup

21. Listing employees

22. Listing services for an employee

23. Scaffolding the checkout

04. Building the availability calendar

24. Installing Alpine.js

25. Installing and using easepick

26. Disabling unavailable dates

27. Showing available slots on the calendar

28. Requesting available slots

29. Fetching available slots

30. Displaying and selecting a slot

05. Booking appointments

31. Hooking up customer appointment details

32. Disabling future steps

33. Storing an appointment

34. Handling appointment collisions

35. Redirecting to a confirmation page

36. Building the appointment confirmation page

37. Cancelling an appointment

Transcript

00:00

so as well as using plugins we can also do pretty much anything we want to the calendar using events so let's go ahead and just start to roll with this i'm going to go and provide the setup option in ease pick when we instantiate this and we'll get an instance of the picker directly inside of here now picker has several events so we have the view event for example which is when this gets

00:24

shown so what we can do with this is we can hook into this and we can modify pretty much anything about the markup we want we can add things we can remove things uh inside of here so let's go ahead and just console log in here just the event itself and let's see what happens in the console when we do this so you can see here that we get this custom event when everything is

00:45

rendered and ready to go so what we can do with this is we can actually hook in to then insert an element and that's what we're going to be doing here we're going to be adding the slot count inside of here now just for the purposes of testing this out i'm going to go ahead and add a day to this and set the time to nine o'clock so we get in february just so we can see what we're

01:05

doing so basically i want to show the slot availability inside of each of these squares we are going to have to do a little bit of styling around this and customize the styles of the picker so we can make it bigger and actually see what we're doing okay so let's go ahead and get started with this so let's extract out from the detail of this event so we've got edot detail which contains

01:26

the view the current date and the target so the date will allow us to obviously work out what date we're currently on so we can match it up to the slots that we're passing down the target will be the actual uh element itself so we can insert more html elements into there if we need to let's go ahead and say if view which is the current view of this so in fact let's log this out just

01:49

so we can get a really good idea of what we are seeing here so let's give that a refresh and you can see that we've got several elements we've got calendar item calendar footer which we can hook into if we want to we've got main calendars we're interested in calendar day so calendar day represents each one of these little squares here that's pretty obvious so we only want to do something

02:10

if the view is the calendar day so let's go ahead and say calendar day and just make sure that that is correct and it is so we only want to add a slot to that calendar day element if we are working with a calendar day element okay so let's go and just format the date inside of here so let's call this date string let's make sure we've got a date first of all and if we have let's format that to

02:35

the format that we expect so that's yyymmdd we want to make sure we're working with the same format everywhere and otherwise we'll just return null so let's go and just console log out the date string here and make sure that that is good and there we go so all of the ones that we can see are in here and formatted how we need them okay so now what we want to do is only do something if

03:01

within the available date that they actually exist so we can actually add that onto this if statement so we'll say available dates which is that thing we're passing down in json encoding we want to make sure that the date string is inside of there we don't want to do this for any further dates there's no point okay so let's go ahead and create out a span in here so we're going to say document

03:22

create element we could probably do this with alpine in some way but i think it's easier to do it this way and then let's add some data to this so let's say span in html again this is just pure javascript let's just put one slot in there so we'll just test this out by adding some text in now what we can then do is remember this target which is the calendar date element itself we can

03:45

say target append again just pure javascript span so basically if we're working with the calendar date element and the date is the date that we want to add to create a span add some text or html in this case to that span and then append it onto that element so let's go over now and see what this looks like it's going to be a little bit messy because the items here are a bit small

04:09

but you can see that we've added this text to every one of these elements that we've got that are within that range and of course all the others are blanked out so now what we're going to do is go ahead and style this and then we can add the actual slot data to this now with styling this it's a little bit tricky because the css that we require needs to be passed into this array

04:30

so what we're going to have to do is come over to our public folder here we're going to have to create a vendor folder and we're just going to have to write pure css to do this you don't have to create a vendor folder but i find it easy to keep all of these vendor type styles in a vendor directory so we're going to create an easepick.css file inside of vendor easepick.css

04:54

and that will be available publicly within our app so inside of this easepick.css file we want to override some of the variables that are used within this package so for example one of the variables is day width so we can set that to 60 pixels for example i found that this is the best size so just by doing that and then including this in here so vendor easepick and then easepick.css

05:22

that's going to load that into the package and then it will overwrite the variable day width so now you can see that these are a lot wider which is great so as you probably guessed we've got a day height as well so we can change that over as well give that a refresh and there we go so we've already got all of these in here we've got a duplicate here but we'll fix that in just

05:42

a second okay so while we're here let's go and set some other colors so we'll set the background color locked to just a tailwind style that i've already put in my notes so we've got cdb5e1 and we'll set the color for the fg accent to 3b82f6 and let's just fix up these definitions for these variables give this a refresh and there we go so just change the color around very slightly

06:15

for each of these and that should be cbd i think so let's try that again there we go so we've got a nice gray color there and the accent colors changed as well okay so now that we've got the styling done let's go ahead and fix up the issue with this being duplicated and of course we will go and actually put the correct slot number in there so i think the problem with this is it's

06:34

running twice and it's already finding this element in here so what we might need to do is just add a class name to this so let's add a class name here to let's call this day slots and then in here we'll only create the element if this doesn't already exist so let's say target query selector or we'll create that so let's say day slots so basically if this already exists use this to put the inner html

07:04

otherwise create one and add it in so let's just try this out again and yeah there we go so we get one star so it's just duplicating over what we were adding in okay so now we want to actually grab the slots that are in there now to do this very very easy remember we've already got these available dates in here which are json coded and when we set this up in our checkout controller we went ahead

07:26

and mapped these with keys and output the slot count so what we can do with this is down here we can just say available dates and then we can pass the date string in that we have formatted to our own format so we can look it up properly and that should grab the number value out of that so let's give that a refresh and there we go you can see that we've actually got the slot numbers

07:48

in there and we've got 14 for today but we've got 16 for all of the other data and obviously that's going to reduce the amount of appointments that get booked based on availability so of course we want this to be a string so let's go ahead and just use interpolation here to put that in there and say slots and we should see the slot numbers in there and of course you can tweak the styles

08:09

if you want and all that other stuff the last thing that we're going to do is just pluralize this because if we only have one slot available for example if we come over here and set this to let's say 15 or 1600 we've got well let's change this because i think my dates are my availability dates we've got two slots let's change that to 30 and we'll change that to 40

08:34

and no let's go back up to 50 okay let's set that back to 16 because that should show us one slot and yeah this is showing two slots just because of the way that the start of the day gives us an hour in advance before we book but let's go ahead and just pluralize this anyway so let's come over to app layout and i'm going to pull in just from a cdn pluralize.min.js this is from js deliver so

08:56

you can copy it from there or grab it from the source code and what we're going to do is just use this on the checkout page to pluralize this so let's go ahead and get rid of what we've done here and let's say pluralize and the singular version of this is slot and then we're going to say available dates and then date string and what we can actually do is pass true to here which

09:16

is going to output the number plus the pluralized or singular version so this shouldn't change anything at all about what we are showing here but if we did just have one slot available then of course we would see one slot instead and we might see that a little bit later but it's always good to pluralize this when we're working with the ui okay quite a lot covered here but now we

09:36

are at least modifying our calendar so we can see how many slots are available in advance which is really helpful now what we're going to do is when this page loads show the slots for today and then when we click on another day show the slots and list them for that day so let's go over and do that in the next couple of episodes

Episode summary

In this episode, we dive into customizing our calendar to show how many appointment slots are available for each day — super useful for users wanting to book!

We start by hooking into the calendar's events, working directly with the event data when the calendar is rendered. After a quick walkthrough of what these events contain (like the date, view, and actual HTML target element), we use JavaScript to dynamically add slot information directly into each day's square.

Next, we improve the calendar's appearance by overriding default styles with custom CSS, making each day larger and tweaking colors to match our app's vibe. Then, we handle a little gotcha: the slot indicator was getting duplicated, so we guard against that by only creating the indicator if it doesn't exist yet.

We then wire things up so the number of slots for each day appears, using data we already fetch and format. For an extra finishing touch, we add pluralization (so it says ‘1 slot’ or ‘2 slots’ as appropriate) using a handy JS library.

By the end, our calendar not only looks better but now gives clear slot availability for each day. Coming up next, we’ll show available slots for today by default and update this as you click on other days, getting us closer to a fully interactive booking interface!

Episode discussion

No comments, yet. Be the first!