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.

Episode summary

In this episode, we add functionality to let users pick a time slot when booking an appointment. We wire up our UI so that when a user clicks a time slot button, it records the chosen time in the form state using Livewire.

You’ll see how we set up a new method to handle the time selection, update the form state accordingly, and make sure both the date and time show up as you interact with the checkout form. To keep things smooth, we also update the way we’re displaying the currently chosen slot, adding a bit of styling so it’s visually clear which time is selected.

There’s a quick detour to fix a small error about initializing the time, which we handle by allowing null values in the form. By the end of this video, the UI both works and visually reflects the user’s selected slot, making the experience much more interactive and clear.

Episode discussion

No comments, yet. Be the first!