Build an Appointment Booking System With Livewire

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

30. Setting a time slot

Episodes

0%

Your progress

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

Join or sign in to track your progress

01. Introduction and setting up

01. Introduction and demo

02. A fresh Laravel app

02. Database setup

04. Creating employees and services tables

05. Employee schedules and exclusions tables

06. Creating the appointments table

03. Displaying employees and services

07. Displaying employees and services

08. Showing all services by an employee

04. Core functionality

09. How we build up availability

10. Working with date periods

11. Iterating over requested days in a period

12. Adding schedule availability

13. Removing schedule exclusions

14. Excluding time already passed today

15. Generating slots

16. Using a custom date collection

17. Building the service availability generator

18. Adding employees into slots

19. Removing empty slots

20. Removing slots with booked appointments

05. Building the checkout

21. Scaffolding the checkout design

22. Making the employee optional

23. Loading availability

24. Building Alpine plugins

25. Showing the calendar

26. Locking unavailable dates

27. Showing the slot count on the calendar

28. Updating the selected date

29. Showing time slots

30. Setting a time slot

31. Finding an available employee

06. Booking appointments

32. Taking customer details

33. Re-checking availability

34. Creating the appointment record

07. Appointment confirmation

35. The appointment confirmation page

36. Cancelling appointments

Transcript

00:00

Now that we're listing through our times here,

00:01

we want to be able to click on this button and obviously set the time with our form. So we're going to do something like wire click, and we can just call another method.

00:10

We do this directly with LiveWire because we're not working with an Alpine here. And then in here, we can just output the time. So let's just dump the time in here,

00:18

make sure we put that into a string, and we're good. So let's implement this method, push this to our form, dump it to the page, and we know that the time is set. So when we get to the point where we create an appointment,

00:29

we'll have a date and a time. So over to our checkout, let's go and just around where we use set date, swap this over to set time.

00:40

And again, it's just going to be a string, that's all we need. And we'll set this form time to that time. Now we don't have that within our form at the moment,

00:49

so let's go over to our checkout form and we'll add a time in here as well. Okay, so let's go and dump these to the page. So if we head back over to our checkout,

01:00

we'll go up to the top, output our form date, and let's output our form time just next to this. Okay, let's see if this works. And yeah, form time must not be accessed

01:13

before initialization. We wouldn't normally be outputting this, but let's go ahead and just for the sake of clarity, set these to a default null value and make these nullable,

01:25

because of course they could be nullable. And head over, check this out. Okay, great. So we've got our date.

01:31

We know that when we change the date to another date, that changes. Now, when we choose a slot, that is also added to our checkout form.

01:41

Okay, so lastly, at the moment, when I click on one, you can see that it doesn't look like I've selected this. So we'll just do a little class binding in here to make this work.

01:50

So over in the checkout where we have our times, let's go and add in a class binding in here. So I'm gonna grab all of these classes out of here. I'm gonna use the class attribute inside of here

02:02

to output all of these classes, but then I'm conditionally gonna go ahead and add in a class on a condition. And that is that the current time

02:11

that we're iterating through equals the form time that we have set. And let's just set background to slate 100. And because we have a hover on here,

02:22

let's just reset the hover to slate 100 as well. So that should just stay slate 100 when we go ahead and access it. Okay, so we're on a date here.

02:30

I'm gonna click nine o'clock and yeah, sure enough, we have this set. We do have a hover here, but of course you can change around the styles

02:37

if you want to. Okay, so we know that that is set now. Let's just head up to the top here and get rid of these. Great.

36 episodes•3 hrs 4 mins•3 months 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 Livewire, 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 Livewire!

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.