Modifying a Web Page Calendar

To avoid having a lot of code, we shall modify some of our code segments so that the same segment can be used by different features of the calendars.

Modifying the removeCal() function

The aim of the removeCal() function, as we saw, was to remove the single month calendar. Well, we have to extend this to remove the yearly calendar as well. The statement that removes the single month calendar is:

document.getElementById('Cal').style.display = "none";

In the above statement, the ID of the DIV for the single month calendar is Cal. The ID for the main DIV element for the yearly calendar is YR. If you remove the main DIV element from the web page, you remove the yearly calendar.

The statement to remove the yearly calendar is placed just below the one above. The event which triggers the removal of the yearly calendar is the same as for the monthly calendar -- namely, clicking outside on the BODY element. The statement to remove the yearly calendar is:

document.getElementById('YR').style.display = "none";

Everything else in the removeCal() function remains the same. So, when you click outside on the BODY element, if the single month calendar was displayed, it would disappear; if the yearly calendar was displayed, it would disappear.

Modification of the First Button's Attribute

The call in the onclick attribute of the Show Current Month's Calendar button is now

showMonth(new Date(),'current','0')

instead of

showMonth(new Date(),'current')

This is because the showMonth(date, theMonth, monthI) now has three parameters instead of two. The parameter added is monthI. The first parameter receives the date object; the second one receives a value that indicates whether or not we are dealing with the current month. The third parameter, monthI, receives a letter that represents the month of the year.

For the onclick attribute above, the arguments for the three parameters are "new Date()", "'current'" and "'0'" respectively. The first argument is "new Date()"; the button creates the current date before sending. The second argument is "current" because we want the current month. The value 0 (that is zero) is sent here, because we want a single month calendar. I will explain how this is used in the showMonth() function shortly.

A similar modification is done for the receiveYearMonth() function, called when you click the Show any Month's Calendar button. The last statement in the receiveYearMonth() function is now

showMonth(date, "", '0');

and no longer,

showMonth(date, "");