Disabling unavailable dates: Build an Appointment Booking System With Laravel

00:05

And let's lock out dates that are not available. Because at the moment, I am not available on a Saturday and Sunday, as we see from the database. And I'm just going to double check my schedule.

00:14

And I'm going to get rid of Saturdays here. And I'm going to get rid of Sundays for both of these employees, because we do not want to work on a Saturday and a Sunday.

00:25

Great. So what we should end up with by the end of this episode is these pretty much just blanked out. That's exactly what we want.

00:32

We don't want to be able to select a Saturday and a Sunday, because they're not available. And of course, if we're all booked up for a day, we're not going to be available then as well.

00:40

OK, so how do we do this? Well, like I said, we've pulled in within our app layout the ease pick bundle, which means we get all of the plugins already.

00:48

So what we want to do is in here define out the plugins that we want to use. So let's go ahead and create out a plugins array in here. And we're going to choose the lock plugin, which

00:57

as you'd imagine, locks the dates that we cannot use. Now, what we can do once we've installed this plugin, we can define the options for this under the lock plugin key. And we first of all want to set a minimum date.

01:10

So the minimum date for this is just going to be the current date and time. So let's go ahead and just check this out. And you can see that all of these are now empty.

01:20

And we can't go back into the future. So let's go back into January. We're on the 31st. I cannot pick any of these.

01:26

So if we were to get rid of that, we can pick dates in the past. But the minimum date needs to be today. We cannot go back into the past to book an appointment.

01:34

Makes sense. Now what we need to do is we need to filter this. So what we can do is we can go through each of the dates that are available on the calendar.

01:42

And this will give us a date and a picked value, which we'll look at in just a second. And here we can basically just return a true or false value depending on whether we want to lock that date or not.

01:54

So for example, if I just return false in here, so if we head over and just give this a refresh, you can see I think, yeah, we need to return true to lock it. You can see that all of these dates are unavailable.

02:04

So every single date is unavailable because we've just returned true. So how are we going to work out and how are we going to do this within JavaScript

02:12

since over in our checkout controller, the availability comes from here? What we need to do is pass through a list of all available dates or unavailable dates

02:21

through to our template. So let's go over to here and create out a new available dates value. And let's grab our availability.

02:33

And let's scope this by whether we have slots. Now, we can't do that just yet. But we can go ahead and create one over on our date collection.

02:43

So let's go ahead and build that out now. So we only have dates that have slots. So let's go ahead and create this kind of scope type thing and say has slots.

02:53

And we're going to go ahead and return and filter this data by whether we have slots or not. So let's create a closure out in here. We know we get a date here for each one.

03:04

So basically, what we're doing is only returning days that have slots. That's really what we're doing here. So we're going to say, if the date doesn't have slots

03:13

or the slots is empty, remember, that is a collection in itself. So we can use is empty on this. That's going to only return dates that have slots. So now, we can say has slots.

03:24

And let's just die dump on those available dates. And let's just take a look at what we get. So we've got 23 items. None of them will be Saturday or Sunday

03:33

or any of the dates that are already booked up. So now that we've got this, what we can do in our checkout controller is we can just map through these and build out an array that we want to see.

03:43

So what we're going to do is map through this with keys. And we don't need to do this just yet. But let's go ahead and do this anyway and create out an inline function in here.

03:54

We'll get back a date for each of these. And what we basically want to return is a list of data where we have each of the dates, so today, tomorrow, and so on, all the way up to the period

04:06

that we've chosen. And we want to show how many slots are available within them dates. We're not using this slot data at the moment.

04:12

But if we just return a list of these at the moment, we're going to end up in trouble. So let's go ahead and just return this. I'm going to return an array in here, which

04:20

is why we're mapping with keys. And let's grab the date, grab the date object from within that, and let's cast that to a date string. And then for the value of this, let's grab the slot count,

04:32

so slots and count. And let's go ahead and cast this to an array. So finally, we'll go ahead and die dump on these available dates.

04:40

And then we'll just run over this in case it didn't make sense. OK, so here we go. We can see now that for each of these dates,

04:47

we'll be missing the weekends, which is exactly what we want. And they're the ones that we'll get rid of. We can see a list of the slot count inside of each of these dates.

04:55

So we've pretty much got everything that we need to put onto our calendar now. And we can use these values to find any missing values and then cancel them out of the calendar view.

05:04

OK, so now that we've got this, we can just pass this directly down to our blade template, JSON encode it within JavaScript, and then we can use that inside of our calendar.

05:13

So let's go ahead and say available dates. And we'll just grab them available dates. Great. OK, so inside of here, what we're then going to do

05:23

is inside of our data, set in the available dates in here. And let's go and output this by JSON encoding this PHP array. So we'll JSON encode the available dates. And then what I'll do inside of x init

05:40

is just console log out this available dates just so we can see what this gives us. So if we come over and refresh the page now, open up our console.

05:49

And we just need to log available dates, not this available dates. You can see here, we have now got under our target, let's pull this up a little bit, a JavaScript object

06:00

with these as the keys and these as the value. So now what we can do with this is we can take these available dates and check them inside of this filter.

06:10

And then if the date is not in there, we'll return true. So to go ahead and grab the keys specifically for this object, we're going to say object keys.

06:19

That will just give us out pretty much just like a list of the date, date, date like this, just exactly what we want. And we'll pull in available dates.

06:28

And we're going to check that it doesn't include. So we can use this native JavaScript include method to grab the date here. Now, the date here, if we just take a look at this really

06:41

if we just console log the date here and we open up our console, you can see that it gives it in this format here. Now, the package that we're using, EasePick,

06:51

allows you to format these dates. So what we can do is we can date, say something like format. And then we can format that to the value

06:58

that we expect from our Laravel application. So this will be the year, then the month, then the day. So let's console log that out and see what we get. And it matches the exact date format

07:10

that we're using within that object we're passing down and JSON encoding. So now that we've got that formatted date, we can check in here that this doesn't include this date.

07:23

OK, so let's open this up. And we're in January at the moment. Obviously, these are all blanked out because that's in the past. But let's go to the next month.

07:30

And that is February. And sure enough, you can see that Thursday and Friday are available, which is tomorrow and Friday, Saturday and Sunday are not, Monday, Tuesday, Wednesday, Thursday,

07:41

Friday. So let's just test this out really quickly by adding to the database a load of appointments. Or we'll just put one big appointment in here

07:48

for tomorrow and see that that gets blanked out as well. So let's add in an appointment here for the 1st of February. We'll start the appointment at 9 o'clock. And we will end the appointment at 5 o'clock

08:06

just to see that this blanks out. And if we go into February, you can see now we don't have availability for Thursday either.

08:13

OK, so we'll get rid of that appointment because we know that that is in there and it's working. And we now have our availability cut out. So even if we added a holiday in there for tomorrow or Friday

08:24

or any other of these days, they would then be completely wiped out, which is great. OK, so there we go. We have blanked out all of the dates

08:33

that we cannot fulfill on the calendar. Let's go over now and include the slots that are available directly within this calendar. And we'll do some styling to it as well.

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

Episodes

Transcript

Episode summary

Episode discussion