Showing Any Month with a Web Page Calendar

Showing Any Month with a Web Page Calendar
(Page 1 of 5 )

The Fifth Code Segment

This is the fifth code segment:

//fill in the empty table cells with ' ' at the end of the month

//first obtain the start row and column number

var rowNo = tdID.charAt(1);

var colNo = tdID.charAt(2);

//convert these to integer

rowNo = parseInt(rowNo);

colNo = parseInt(colNo);

//increment the column number

colNo+=1;

We need to have all the empty cells after the last day number of the month (e.g. 31) filled with the space character. These empty cells may be part of the last row but one and/or the last row of the calendar. The variable, tdID, after the iteration of the third code segment, holds the ID of the last table cell that has a month day number (e.g. 31). The first character of the ID is "M." The second character is the row number (0 to 5 from the six rows) and the third character is the column number.

We extract the last row and column number from this ID. We need them to know from where we shall be filling in the table cells with space characters. The first two statements of this segment code perform the extraction. The next two statements make sure they are integers by using the parseInt() functions.

The first cell that has to receive the space character must be one column number higher than the one that has the last month number (e.g. 31). So the next statement increments the column number. After this you have the next code segment, which fills the empty cells.

The Sixth Code Segment

This is the sixth code segment:

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

{

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

{

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

tdID = "M" + i + j;

document.getElementById(tdID).innerHTML = "&nbsp;";

}

//set the colNo to 0 after start line

colNo = 0;

}

This segment fills in the empty cells after the last number for the day of the month. There are two for-loops, one inside the other. The explanation of these for-loops is similar to the nested for-loop we saw above.

You may ask, “Why did we not increment the row number in the previous code segment as we did for the column number?” That is taken care of in the iteration conditions of the for-loops.

The Last Code Segment

The seventh and last code segment is:

//give special background color to today's date number.

document.getElementById(IDToday).style.backgroundColor = "BurlyWood";

In the first nested for-loops above, we obtained the ID for the table cell of the current number of the day of the month and assigned it to the IDToday variable. In this code segment, the variable is used to give the table cell a background color of BurlyWood. This segment has only one code line.

Wow, we finally finished the details of the showCurrentMonth() Function! The next function to consider is the validateDate() function. After this you will be able to design the calendar for the current month.

blog comments powered by Disqus