Modifying a Web Page Calendar

The showMonth() function now has three parameters instead of two. The added parameter is for the letters that represent the months. The function so far can produce only a single month calendar. This same function will now have to produce a calendar of twelve months for the whole year.

It needs to be modified, but not much. We shall modify what we modified before, and just a bit more.

The very first statement in this function removes any single month calendar that was opened. We shall add another, similar statement next to this (below). The statement will remove any yearly calendar that was opened. This is the statement:

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

The DIV element that holds the yearly calendar has "YR" as its ID. This ID is used by the above statement. Only one calendar has to be shown at any time. So any calendar that is displayed has to be removed first.

In the showMonth() function; the statement,

document.getElementById('I01').value = monthArray[month];

becomes

if (monthI == '0')

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

else

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

We have had to address the situation when dealing with a single month calendar and also the situation when dealing with a yearly calendar. That is why we have an if-statement. If the monthI variable is zero, the single month calendar is displayed. If it is not zero, the yearly calendar is displayed.

The statement to display the month in the first Input Text control was

document.getElementById('I01').value = monthArray[month];

It is now replaced by two statements, that is:

InputTextID1 = 'I'+ monthI + '1';

document.getElementById(InputTextID1).value = monthArray[month];

The first line constructs the ID, taking the particular month into consideration. The second line displays the value.

The statement to display the year in the second Input Text control was

document.getElementById('I02').value = year;

It is now replaced by two statements, that is:

InputTextID2 = 'I'+ monthI + '2';

document.getElementById(InputTextID2).value = year;

The explanation is similar to the above.

Each of the for-loops has to form the ID of a table cell in the table for each month (whether we are dealing with a single month calendar or a yearly calendar). The line for each of the for-loops was

tdID = "M0" + i + j;

This took into consideration the fact that we were dealing with a single month calendar. Now we have to deal with a single month and a yearly calendar. So this line is now

tdID = "M" + monthI + i + j;

The ID for the table cell still starts with the letter, M, followed by another letter, A or B or C --- L, which represents a month; then the row and column numbers, respectively.