Constructing the Current Month of a Web Page Calendar
Welcome to the third part of an eight-part series on building a web page calendar. In this part, we take a close look at the showCurrentMonth() function of the calendar. It is composed of seven code segments; we'll cover the first four here. These help pull together various parts of the month for display, such as the current year.
Constructing the Current Month of a Web Page Calendar - Third Code Segment continued (Page 3 of 4 )
All of the statements inside the inner loop are in the if-statement, meaning that the inner loop is only executed if the if-test is true.
Remember, we received the start day of the week for the first of the month. We have it in the startMonthDay variable (which will change) and in the realStartDay variable (which will not change). The first time the inner for-loop is executed, its counter starts from startMonthDay, which may be a Wednesday (4) for example. In this way, the number 1 will appear under a day like Wednesday (W) in the first of the six rows.
The first statement in the if-curly brackets inside the inner for-loop creates the ID of the table cell that will receive the number for the day of the month. The ID depends on row and column numbers. Of course, as the iteration of the loops carry on, the ID changes. The next line displays the number for the day of the month in the appropriate table cell using the ID developed.
The next statement inside our if-statement is also an if-statement. This if-statement determines if the number of the day of the month is that of the current date. If it is, it assigns the ID of the present table cell to the IDToday variable. We shall use this ID to give the table cell of the current day of the month a different background color in another code segment.
The last line inside our if-statement increments the monthDayNo variable. As the iteration of the two for-loops continues, this variable has to be incremented. It is the value of this variable that is written as the number of the day of the month in the table cells. So it has to be incremented. It is incremented at the end of the inner for-loop, preparing for the next iteration.
The following statement is outside the inner for-loop, but inside the outer for-loop:
startMonthDay = 0;
Recall that we said we would change the value of this variable. After the first iteration of the inner for-loop, where the first number of the month (1) may occur on a Wednesday (4) for example, the next number, say 5, will have to appear on a Sunday; that is, in the first cell of the second of the six rows. As I said above, the inner for-loop handles the columns (cells in a row). The startMonthDay variable has to be set to 0 to ensure that the five remaining rows are filled correctly, beginning from the first cell.