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
11. Iterating over requested days in a period
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
If we go back to what we were speaking about when we
00:02
demonstrated how we want the structure of all this availability to be, we know that we want this to be per day. So we want today and tomorrow to be completely separate.
00:11
And then within these, we want these slots to be generated. Now at the moment, the way that we're doing this, particularly if we uncomment the subtraction here, what we actually end up with is just one long period.
00:23
This runs from today until tomorrow. But we want to break this up so we can eventually extract these out into separate days. And that's what we're going to be doing here.
00:34
So we don't need any of this because this was just to demonstrate how everything is going to work. What we now want to do is take in a starts at date, an ends at date, and break these up into days.
00:45
So let's go ahead and pull in a starts at date, which is going to be using a carbon object. And we're going to have an ends at date as well. So we can start to pass these through now.
00:54
So let's go over to our web routes. And we'll just pass these in here. So we'll just say now start of day. And let's run this through now add day end of day.
01:06
So exactly what we had before, but now we're controlling these through what we're passing these in as. Now really quickly, the reason we want to break up these days is, of course, because we're going
01:16
to be working with a calendar. And we need to know that when a user selects tomorrow or the day after, we only want to grab the slots for that particular day.
01:25
OK, let's go over to our schedule availability class. Let's take what we've got here and start to figure out how we can grab these days. OK, so we're going to go ahead and collect up
01:36
a period collection, or a carbon period in this case. So a carbon period is nothing to do with this package. But this is going to allow us to create a period from the starts at date that we've provided until the ends at date
01:50
that we've provided. Now onto this, we can actually grab the days of this. So let's just go ahead and die dump this and just see what this gives us out in the browser.
02:00
OK, so let's go back over to our web routes. And yeah, so let's take this. You probably noticed that. That needs to go into for period.
02:08
OK, back over to our schedule availability. And let's check this out. OK, great. So now we've got two days.
02:13
So this represents one day, which is the 25th. And this represents the next day, which is the 26th. So now what we can do with this is take these and start to iterate through them.
02:25
That's why we put them into a collection. So we're going to come down here and we're going to say each. And let's create out a closure inside of here. This will give us a day for each of these, or a date,
02:36
more appropriately. So let's just go ahead and die dump the date for the first one and just see what we get. And yeah, we just got a carbon object in here.
02:44
So what we can do from this, let's just type in this to a carbon object so we know what it is. We can die dump, or in this case, let's just dump this out so we can see each of them,
02:54
date and format. And let's format this out using the specific day. We'll just use L to give us the day. And there we go.
03:02
We've got Thursday and Friday. So it doesn't matter that we have formatted this. That's just so we can see what we're working with. But what we can now do from this is we can start
03:11
to add each of these dates that we've broken up from the starts at and the ends at date into our own custom collection. And then we can start to fill in the slots
03:22
within them particular days. So now we know that we have an individual date for each of these iterations, we can start to build this up.
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.