So now we need to work on our reservation calendar and this is going to take a few steps, none of it
is terribly difficult, but some of it will be things you haven't seen before.
And that's OK, because none of it's difficult.
And we'll go through each step one at a time.
So the first thing I want to do is I want to have the current month for my calendar and the current
year for my calendar appear here somewhere.
And I don't want to have a button here that allows me to go to the previous month and maybe a button
over here that allows me to go to the next month.
So let's get started with that and then we'll move on as to the next step.
So over in my idee, let's find the handler that shows the reservation's calendar right here.
And right now it just renders a template.
And that's that's a good start.
But we have some more work to do.
So, first of all, let's make some assumptions.
Let's assume back here that if I have just this for the early admin reservations dash calendar, it's
going to show the current month in the current year.
And if I want to go to a previous month or the next month, I'm going to put something like this in
the early questionmark to say there's somewhere else.
Are you were all parameters coming?
Y equals twenty twenty one ampersand M equals one or something like that.
So if I, if you are looks like that then I want to show the year 2021 and the month of January.
And if I want to go to 2022 this would be a 20 22.
But if these don't exist then just show the current month.
So let's assume that's our logic.
So what I'm going to do in my handler, the very first thing I'm going to do is assume that the there
is no month, that there is no month or year specified.
And if there is, we'll change it later on.
But right now, let's just go with now is equal to time now.
And we're going to use this to calculate which calendar month and year we show.
So that's defaults to the current time, which by default will give me the current year and the current
month.
And then we check to see if there are some query parameters, if our euro query doget.
And my key would be why I just have to get one of them, because if is there, I can assume the other
one is going to be there.
If that's not equal to nothing.
And if they don't exist, if they're not in the euro, then this will be empty.
So but if they're not empty, then I know that the year specified and I can assume the month is specified.
So what I'll do is grab the year and month year and I won't bother checking for an error right now because
you know how to handle that.
Sturgeons Atai and then I just get the year parameter argu url query get y that will give me the year
and let's duplicate this and change that to month and change this to M.
So those will be the parameters that I specify and those will come by from clicking on the buttons on
that page which we'll get to shortly.
So now I've got the year in the month which exist only within this if block because they're being assigned
to a variable in that if block.
What am I going to do with them?
I'm just going to reset the value of now instead of now being the current date and time that will be
equal to let's manually reset the time to what we want time, date.
And that takes a lot of parameters.
It takes the year which has to be in the form of year end and then it takes the month, which, for
reasons I've never understood, has to be converted to a time month, which is easy to do, fortunately,
time, not month.
And then we just put a month in there and the next parameter is, well, the rest of them are going
to the next one is the day I'll just set any day in the month.
I know that every day has at least the first and then hours, minutes, seconds, nanoseconds, which
I'll just leave at zero because I don't care what they are.
And then any location, which I'll just set two time UTC.
What we've done here is to say if the the variable or the euro parameter y exists, then get the URL
parameter Y converted to an and get the euro parameter M for month, convert it to an end and reset
now to be equal to the year specified here, the month specified here and then the first day and everything
else is just set to zero.
So I don't care about the time and that resets my now and that works quite well.
OK, what do we want to do next?
Well, let's think about this.
When you have the page displayed, you want to put the next month and next year values on one button
and the next the previous month and the previous year values on another button.
So let's get started.
Next is going to be a variable.
And it's going to be based on the value of now, but it will be equal to now and add one month and date
and the parameters for that particular function that are built into the time package are the number
of years you want to add none.
The number of months you want to add one and the number of days you want to add zero.
That gives me next month and obviously I need a last month as well.
So I'll call that last is equal to now.
Add date again.
It's not.
Subtract it.
You'd think it would be, but it's not.
Instead you add a negative number and that gives me last month.
So now I have those variables.
What am I going to do with them?
Well, I need to format them correctly.
So let's say next month, which is a time sorry, next month is not a time.
Next month is based upon next, which is a time and that's going to be formatted.
I just want to get the month zero one.
So all that's going to do is print next the time using this format.
And remember from our our date format string that Gore uses zero one will give me a two digit month
and that's all I want.
So then I want next month, year, the year for next month, because you can't just add one to it.
You might be going from twelve to one, for example.
That's going to be NextG format.
And here I want the year 2006 and all that will do is create a string that is formatted as a four digit
year and this will create a string that's a format.
It is a two month and we do the same thing for last month and that will be equal to last format zero
one.
And I'll just duplicate this and add year to it and make this twenty six.
So now I have those strings, which is pretty simple.
Let's create a string map.
And put those values in it, so I will put in a string map and I'll call it next.
Underscore month will be equal to next month.
And I've got to put a G in string map there.
String map next, I'll call it next month, year, because it's not necessarily next year, but it is
for the year, for the next month that will be equal to next month, year and then string map last month.
Will be equal to last month.
And last month, year.
Will be equal to last month here and will pass that string map in our template data.
There so I have that information that will give me the information necessary to build those previous
month and next month buttons.
That's enough information for that.
But what else do I want in there?
Well, if you remember, what I wanted on this page was the current month and the current year displayed
up here and the buttons below them, one over here and one over here maybe.
Well, let's do that.
We already know what now is now is either the current date and time or the current year and month that
we specified when passing query parameters so we can calculate that easily enough.
String map this month.
Try that again.
This month will be equal to now that format.
And I'll put two zero on there for now just to put the numeric month and this month year.
And we're going to need it in this format, as you'll see a little while, 2006.
OK, so that's a good start.
I have all of this information.
What am I going to do with it?
Do it, do with it on this page?
Well, first of all, let's just stop our application to make sure everything compiles.
It does good, so let's go back to our Idy and find the calendar page, which is right here, and get
rid of this dummy content and put some information in there.
So to start with, I will say div class equals text center just to center something and I'll put in
index dot string map and I'll put in the current month, which is this month.
And then after that, I'll do exactly the same thing that put the air in their index dot string map.
This year, this month here, I think I called it.
OK, so let's save that and reload the page and just make sure that stuff shows up and it does.
So I want that actually to say something else.
I don't want it to be 12.
I want it to be December, but I'll take care of that later.
In the meantime, let's wrap this whole thing in an H3 tag just to make it look a little bit bigger.
Reload this.
OK, that's better.
And then I want to button over here and a button over here.
So let's create those buttons.
Obviously, I need to float.
So I will say div class equals float left for the left button and then I'll have div class equals float.
Right.
For the right button and then, as I said, last lecture, you need to put in div.
Class equals clear fix any time you're floating things around that make sure that everything shows up
properly.
So let's put a couple of buttons in.
This will be an A class equals and I'll make it a button.
I'll make it a small button.
I don't want it to be too big and I'll make it button outline secondary, which will look pretty nice.
And the ref for that will be equal to exactly the page we're on right now, which is slash admin, slash
reservations dash calendar.
But this time we're going to pass some query parameters y equals and that's going to come from index
dot string map.
And I'm sorry, but this is going to be along the line index string map.
And the key for that that I'm looking it up with is last month, year that will give me part of it.
And then I need an ampersand and the next one is M equals for the month for last the last month, which
will be index dot from string map.
And the key is last month.
And then I need to put something inside of those so I can make this a little bit shorter by putting
this here, there, I need to put some text in there.
So I don't want to put a whole lot of words in there, I'll just put those in I'll put in a you could
type it like this, but it will confuse your HTML.
So instead, I'll say ampersand less than Lety and then another ampersand less than Lety.
So that's just a way of rendering a less than sine, which is, of course, how you close the tag so
you don't want to have those showing up and just messing up your e-mail.
So instead you render them this way.
Let's save that and make sure that this actually renders the way we want it to.
There it is.
And you are l should be.
It is 2020 is the year and 11 is the month.
And I'm doing this in December of twenty twenty.
So that's perfect.
So now let's copy this entire HSF and just change the values.
For the right and the first thing I'm going to change is the index string string that last month is
actually next month, year and last month becomes next month.
And I don't want less than signs.
I want greater than signs.
I'll just delete those and go ampersand G.T. for greater then and then another one ampersand for greater
than save that and reload.
And there is one that should go to January of twenty twenty one and it does.
So if I click on that it actually takes me the correct year.
And if I click to this one, everything seems to be working just exactly the way that I want.
OK, that's enough for this time around.
In the next one we'll do a couple of things.
We'll start writing our actual calendars and we might get around to changing that to the current year
as a current month as a textual value instead.
And we'll take care of that in the next lecture or two.