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

16. Removing empty slots

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

OK, so we've added employees into slots based on each of these employees availability.

00:04

That is all done. Let's go ahead and just remove any empty slots just to clear things up before we start to remove any slots based on when appointments have already

00:15

been booked. OK, so down here, we're going to go ahead and just call another method just to, again, filter through everything.

00:22

And let's call this remove empty slots. And what we want to do is reassign the range. So this is going to take in, of course, the range itself. And then it's just going to return that range

00:34

and then reassign it back to that before we return it inside of here. And we don't want to do this within the loop because we only need to delete any empty slots once

00:44

after all of the employees have been added. OK, let's go ahead and create this method out just down here. So remove empty slots. And we know that that is going to take in a Laravel

00:53

collection. And that is going to be our range. OK, let's add in our function definition there. And we're done.

01:00

OK, so what we're going to do here is immediately return this range. But we're going to filter this out. So this shouldn't look any different.

01:07

We should see everything that we saw before. But now what we can do is go ahead and use filter. Because we're working with a collection, we can use this filter method, which

01:16

takes in a condition within here. So we can return false, for example. That's going to get rid of everything. Now, the good thing about this filter

01:26

is we're going to look inside of each of the slots. But this will also, if all of the slots within a date are removed, the date will be removed as well, which is really good.

01:34

We don't want to see any dates available if there are no slots for that particular day. So if Alex and Mabel both didn't work on Saturday and Sunday, that date would just be unavailable.

01:45

It wouldn't be in there, which is exactly what we need. OK, so now that we've done this, let's actually make this work. So each of the things that we get in here is a date. So let's go ahead and bring that in.

01:55

And inside of here, we're going to reassign the slots to a filtered version of the slots. Now, what that means is we're filtering the slots. But then out of here, we're also filtering the dates,

02:06

which is what I just mentioned. So let's go ahead and filter on the slots here. We'll go ahead and bring in each of them slots. And what is the condition?

02:15

Well, the condition for a slot being available is if there are employees within that slot. So what we could do is open up our slot class and just create our helper method in here called hasEmployees.

02:29

And we could return if this employees is empty. So if it's not empty, it does have employees. So in here, we're going to return slot hasEmployees. And we're done.

02:43

That will have filtered out all of them slots. So now in here, we're just going to return true. And we should be good. Now, yeah, so I think, actually, the best way to do this

02:53

is to keep the date in there, because we want that to be added to the calendar. But then we could just show a grayed out version of the calendar if that's not available.

03:03

So if I give that a refresh, both dates are available here. Now, that should have filtered that down massively. So today, for example, again, right now, it's just about coming up to 3 o'clock.

03:14

So we should have this slot available, which is 3 o'clock, of course. And the employees within here that can do that are Alex and Mabel, and then so on and so forth. So them slots are both available.

03:28

If we look at this date here, we've got 16 slots, because, of course, that's tomorrow. We don't have any bookings yet. We've not filtered bookings out.

03:36

So all of these slots are available from 9 o'clock. And of course, both employees can do this as well. Now, what we could do is just to test this out, add in a schedule exclusion for both of these employees.

03:49

So I'm going to go ahead and say that, let's say, tomorrow. So let's say the 31st from 9 in the morning till 5 for both employees. And we come over. We've got this date here.

04:10

And sure enough, we have no slots available. So we will keep the date in there. At least then we can add it to the calendar, but we can gray it out if there aren't any slots available.

04:19

I think that makes more sense. OK. So we've now got a much more filtered down version of all of our dates that we've requested and all of the slots in there that we can do.

04:29

So I'm just going to go ahead and get rid of these exclusions here. We can always add them back later. And next, let's look at filtering out dates or slots where appointments have already been booked.

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

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!