Showing Any Month with a Web Page Calendar

We had finished with the showCurrentMonth() Function.

The showCurrentMonth() function has almost all that you need to display the calendar of any month. Should we write a separate function for Any Month’s Calendar? No; this will make the code too long. So, we shall modify the showCurrentMonth() function and any associated feature in the corresponding button’s tag.

Change the name showCurrentMonth() to showMonth(date, theMonth) at the start of the showCurrentMonth() function. The showCurrentMonth() function did not have any parameters. The new showMonth(date, theMonth), which will be the modification of the showCurrentMonth() function, needs two parameters, which are the date and theMonth. The date parameter is for the date object. The theMonth parameter is to indicate whether we are dealing with the current month or any month.

Add the following attributes to the button with the Show any Month’s Calendar title.

onclick="CalJustClicked = true; receiveYearMonth()"

The “CalJustClicked = true” portion has the same function as for the Show Current Month's Calendar button. The “receiveYearMonth()” portion calls an entirely new function whose name is, of course, receiveYearMonth(). The aim of the function is to get the year and month from the user for the particular month whose calendar he wants.

This function will issue two prompt dialog boxes. The first one will ask the user for the year whose month he is looking for, and the next one will ask the user for the month (January, February, --- December). This function, receiveYearMonth(), calls the showMonth(date, theMonth) function, which produces the calendar of the month of the user’s choice. The calendar of your (the user’s) choice is what we have been referring to as Any Month’s Calendar.

Now the onclick attribute of the first button, Show Current Month's Calendar, has to be modified, from

onclick="CalJustClicked = true; showCurrentMonth()"

to

<button type="button" onclick="CalJustClicked = true; showMonth(new Date(),'current')"

We replace the “showCurrentMonth()” portion of the onclick attribute with “showMonth(new Date(),'current')”. Note that our “showMonth(new Date(),'current')” here, calls the showMonth(date, theMonth) function.

The date argument in our attribute is “new Date().” This expression creates the current date object. The resulting current date object is sent as an argument.

The second argument is the word “current.” The showMonth(date, theMonth) function will use this to decide whether or not to create the calendar of the current month.