Showing Any Month with a Web Page Calendar
(Page 1 of 5 )
Welcome to the fourth part of an eight-part series on constructing a web page calendar. In the previous part, we discussed the first four code segments for the ShowCurrentMonth function of this application. In this part, we will tackle the last three code segments, move on to the validateDate function, and make modifications that will let you accurately display any month of any year.
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 = " ";
}
//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.
Next: The validateDate() Function >>
More HTML Articles
More By Chrysanthus Forcha
