Constructing the Current Month of a Web Page Calendar

This is the third code segment:

//fill in the date numbers.

for (i=0;i<=5;i++)

{

for (j=startMonthDay;j<=6;j++)

{

if (validateDate(currentYear, currentMonth, monthDayNo))

{

//create the ID for table cell of the start date

tdID = "M" + i + j;

document.getElementById(tdID).innerHTML = monthDayNo;

if (monthDayNo == monthDayNoToday)

IDToday = tdID;

//increment the monthDayNo

monthDayNo+=1;

}

}

//set the startMonthDay to 0 after first line

startMonthDay = 0;

}

The main purpose of this code segment is to fill the HTML table representing the calendar with the numbers for the days of the month. The TABLE element has six rows for the numbers. The number 1 is not necessarily placed in the first cell of the first row. The first cell is for Sunday, the second for Monday, third for Tuesday, etc. The number 1 does not fall on Sunday for every month. The corresponding day of the week has to be determined before the number is placed. Placing startMonthDay in the condition of the inner for-loop serves that purpose. This code segment also determines the ID for the table cell of the current day number of the month. We shall need to change its background color.

There are two for-loops here. The outer one is for the rows (six); the inner one is for the columns (seven). We count the rows from 0 to 5, giving six. We count the columns from 0 to 6, giving seven. The statements are inside the inner loop, except for one, which is outside the inner loop, but inside the outer loop.

The first statement is an if-statement. This if-test calls a function, validateDate(). This function is written by us; we shall see the details later. It receives as arguments the current year, the current month, and the number of the day of the month. If the combination of year, month and number for the day is correct, then the function returns true; otherwise, it returns false.