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

18. Using a custom date collection

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

So our slot range generator gives us back a collection of these custom date objects.

00:05

And that's fine. But if we think about it, we want some general helper methods to determine things like the first available date. So we want to know when we show our calendar,

00:17

what date should we put in there as the first available date. We don't just want to put today. We want the UI to be convenient so we can help the user out when they're booking.

00:27

So what we're going to do is we're going to change this collection here, which is just a standard Laravel collection, over to a custom collection.

00:34

And I'm going to add one helper method in here to demonstrate how this works. What we'll then do is when we're building up the UI, we can add any more methods in here that we need.

00:43

OK, so to create a custom collection, we're just going to go ahead and create this out here. So I'm going to call this DateCollection. And we'll go ahead and just fill everything out

00:53

that we need inside of here. And this is just going to be a standard class, so DateCollection. And this is going to extend the base Laravel collection. That's pretty much all we need to do to get this working.

01:09

So now what we can do in here is just new up a new DateCollection. And that's all we need to do. So now the only difference is this is now a DateCollection.

01:18

It has all of the functionality of a collection. So it's going to work in exactly the same way. But we just have a custom one. So in here, we can now start to add some helpful methods.

01:28

For example, the really important part of this is, like I just said, the first available date. So for example, if you're booking today and there are no more slots available for today

01:37

or tomorrow or the next day, we want to show the first date that's available for bookings. So let's go ahead and implement this. Then we will go and just dump it out in our web routes.

01:47

And then, of course, we're going to write our tests in the next episode. OK, so we're going to go ahead and say this. And we're working within a collection still.

01:54

So we can use this really, really handy first helper on a collection. This will grab the first record, of course. But it can also be passed a closure.

02:03

So for example, I could add a condition of when I should grab the first one. So in here, we're going to go ahead and grab the date. And we're going to return DateSlotsCount

02:16

is greater than or equal to 1. So basically, iterate over all of the dates that we have and return the first one where we have slots. That's pretty much what we need to do there.

02:29

OK, let's go ahead and try this out over on our web routes just to get a feel for this. And then we're pretty much done. And we can add to this as we need.

02:37

So I'm going to say availability first available date. And let's see what we get. Give that a refresh. And here we go.

02:45

So this is today. We do have slots for today. Let's just take a look at them slots. And as you can see, we've got all of them slots.

02:54

Now, if we just go ahead and change this around, and I set this to, say, 5 o'clock today, obviously, we don't have any slots after 5 because our employees only work up until 5.

03:06

So if we now go over and give that a refresh, you'll see that this has switched over to tomorrow. So now when we render this on the UI, that is the date that's going to be available despite the fact

03:16

that today is the current date. So there we go. So that's just a really quick switch around of a collection so we can add any custom methods we

03:24

need into that collection to help us out when we're building the UI. OK, let's go ahead and write these tests. And then we can get on with building a basic UI in Laravel.

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

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!