This episode is for members only
Sign up to access "Build an Appointment Booking System With Livewire" right now.
Get started
Already a member? Sign in to continue
Playing
34. Creating the appointment record
Episodes
01. Introduction and setting up
02. Database setup
03. Displaying employees and services
04. Core functionality
09. How we build up availability
3m 40s
0%
10. Working with date periods
6m 54s
0%
11. Iterating over requested days in a period
3m 30s
0%
12. Adding schedule availability
11m 33s
0%
13. Removing schedule exclusions
3m 35s
0%
14. Excluding time already passed today
2m 17s
0%
15. Generating slots
11m 50s
0%
16. Using a custom date collection
1m 28s
0%
17. Building the service availability generator
6m 18s
0%
18. Adding employees into slots
8m 14s
0%
19. Removing empty slots
3m
0%
20. Removing slots with booked appointments
6m 17s
0%
05. Building the checkout
21. Scaffolding the checkout design
4m
0%
22. Making the employee optional
1m 54s
0%
23. Loading availability
8m 31s
0%
24. Building Alpine plugins
3m 18s
0%
25. Showing the calendar
3m 32s
0%
26. Locking unavailable dates
15m 1s
0%
27. Showing the slot count on the calendar
7m 52s
0%
28. Updating the selected date
3m 29s
0%
29. Showing time slots
5m 43s
0%
30. Setting a time slot
2m 43s
0%
31. Finding an available employee
3m 31s
0%
06. Booking appointments
07. Appointment confirmation
Transcript
00:00
All that's left to do now is actually create the appointment. So let's go ahead and do that and just defer this
00:04
to another method. And I want this returned so we can eventually redirect. So I'll do that now. Let's call a createAppointment method.
00:12
And let's go down and create this out here. So createAppointment. So we're going to start out by creating a temporary appointment variable.
00:22
We're not going to create this, first of all. Instead, we're going to go and grab our appointment model and make this. So then down here, we can attach
00:30
the service and the employee. And we're going to make this by taking the form and only the name and the email address. And then what we're going to do is just pull this down
00:45
so it's a little bit easier to see. We're going to append on the start sag and ends at dates separately. Because remember, we're storing the date and the time slot,
00:56
but we don't necessarily know when this appointment ends. We'll do that based on the service duration. So we've got a startsAtDate. We have got an endsAtDate.
01:06
And let's figure this out. So the startsAtDate, let's assign it here because we're going to need to use that to work out the endsAtDate.
01:14
And we'll use Carbon just to manually build this up. Now, we've already validated these, so we know that they're in the correct format. So let's grab the form date.
01:23
So that's the base of our start time of our appointment. And then with Carbon, let's go ahead and use set time from time string. We know that our form time is a string.
01:36
And there we go. So that's going to set up the start date and the time and assign it to startsAt. Now, for the endsAt, this is pretty straightforward.
01:44
We're going to take the startsAtDate. Really importantly, we're going to copy it because we don't want to modify the original date by adding any minutes onto it.
01:53
And then we're just going to add on some minutes. And you guessed it. The minutes are going to be the service duration. Perfect.
02:01
Let's just die dump this just to make sure everything is looking good. And then we will attach the employee and the service to this as we create it.
02:10
OK, let's choose 11 o'clock here. Go ahead and make a booking. And let's see what we get. Make booking.
02:16
Great. So under Attributes, we have got my name and email address. Pretty obvious. Starts at 11, ends at 12.
02:24
Great. Both on the same day, the day that we've chosen. So that's working nicely. Now we just need to attach the relationship.
02:31
So I'm just going to hop over to our appointment model just to make sure these are on there, service and employee are. So let's take the appointment.
02:39
Let's access the employee relationship. And let's go ahead and associate the employee that we have within this component. So associate that employee.
02:49
And we'll do exactly the same thing for the service as well and associate that service. Again, let's just go ahead and die dump on this just to make sure that everything looks good.
02:59
OK, let's go and enter my details. Hit Make Booking. And yeah, sure enough, we've got one and one in there. And we've got them relationships set up.
03:11
So now all that's left to do is save this out. So we can just use Appointment Save because it's not persisted yet. And then we're going to go ahead and return the appointment.
03:20
And that will be returned back to us up here so we can go ahead and redirect. For now, though, let's just die dump on this so we know we've got it.
03:29
OK, let's head over and try another one. So I'm actually going to choose a different service just to make sure that this is all good. So let's choose 12 o'clock.
03:36
Remember, these dates have now shifted because we've got an hour and a half appointment type. Let's enter this. And there we go.
03:44
So now if we head over to the database, yeah, sure enough, we're actually creating the appointment now with all the details. And also, yeah, that slot has now disappeared.
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.