This episode is for members only
Sign up to access "Build an Appointment Booking System With Laravel" right now.
Get started
Already a member? Sign in to continue
Playing
27. Showing available slots on the calendar
Episodes
01. Introduction
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
05. Booking appointments
31. Hooking up customer appointment details
5m 17s
0%
32. Disabling future steps
2m 43s
0%
33. Storing an appointment
14m 43s
0%
34. Handling appointment collisions
8m 1s
0%
35. Redirecting to a confirmation page
2m 55s
0%
36. Building the appointment confirmation page
5m 40s
0%
37. Cancelling an appointment
5m 30s
0%
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
37 episodes•4 hrs 49 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 build a simple UI with Alpine.js, with 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 Laravel!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!