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

31. Fixing up core availability in the past

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

Okay let's take a look at a fundamental issue with the core functionality which means that we still see availability for dates in the past even though the schedule doesn't allow for it.

00:10

So as an example if we just land on this checkout and we have a look here everything looks good now that's fine because we kind of expect that if we go back or forward to March and then back again remember what we're doing is we are looking at the start of the month so we're now looking from the 1st of February and it's currently the 19th so what's happening is these slots

00:33

are showing as available we can't select them which is fine but these are showing as available because we've set that minimum date within our picker but we could still technically book these now the reason that this is happening if we come over to our availability or schedule availability class under add availability from schedule let's think about what's happening

00:55

so if we look in the database my schedule starts on the 10th of February and ends within a year now that's fine because if our schedule isn't in between there we're not going to add availability but what's happening here is I'm technically available from the 10th even though it's currently the 19th so our schedule is from the 10th which is always going to be the case because

01:18

we always need to start an end day but I can technically look at say the 15th the 14th the 13th all the way down to the 10th so what we want to do is add another check in here just to make sure that we're returning if we are not past the current day so let's go ahead and say if the date is less than or equal to the current date and then sub a day so let's just remove a day from that

01:45

then we want to return so basically if say today is or if my schedule is on the 10th and today is the 19th I want to only show availability from the 19th onwards and we could say start of day here but let's just say sub a day it doesn't really matter too much so let's go ahead and try this out again let's go over give this a refresh go to the next month

02:08

back again which is technically from the first but now we've added that condition in it's only showing availability from today rather than the start of the schedule that I have in the database so something we missed and something that we just needed to very quickly add in to prevent that from happening for previous dates we never need availability for any day other than today onwards

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!