Building the Current Year with a Web Page Calendar

After changing the IDs of the elements of the single month calendar, we have to modify the showMonth() Function to reflect the change. The change will affect many statements that make use of the IDs.

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

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

It should now be:

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

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

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

It should now be:

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

The change in the above statements is in the IDs. The change in the rest of the following statements is also in the IDs.

Each of the for-loops has to form the ID of table cell in the single month calendar. The line for this for each of the for-loops was:

tdID = "M" + i + j;

It should now be:

tdID = "M0" + i + j;

The line that extracted the row number from the ID was:

var rowNo = tdID.charAt(1);

It should now be:

var rowNo = tdID.charAt(2);

The line extracted the column number from the ID was:

var colNo = tdID.charAt(2);

It should now be:

var colNo = tdID.charAt(3);

This change is applicable for the single month calendar.

What We have done So Far

We started by creating the calendar for the current month. Next we had to create the calendar for any month. In order not to write too much code, we had to use the same function that was used to create the current month calendar. In order to achieve this we had to modify the showMonth() function.

In fact we have modified it twice: once to be able to create the calendar of any month, and now, to enable us to display twelve months at once. The change we have made here enables us to display the current calendar or calendar of any month, while having the code to display twelve months. I have not yet shown you the code to display twelve months. I have shown you the code for a single month that is compatible with the code for twelve months.

Before we end this part of the series, always remember that the responsibility of specifying the current month was given to the Show Current Month's Calendar button (attribute); this remains so. We shall next see the layout of the HTML elements for the year and continue.

See you in the next part of the series.