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

0%
Your progress
  • Total: 3h 4m
  • Played: 0m
  • Remaining: 3h 4m
Join or sign in to track your progress

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 episodes3 hrs 4 mins

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
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!