Showing Any Month with a Web Page Calendar

The showMonth(date, theMonth) function is a modification of the showCurrentMonth() function. We have not yet modified the function. Let us do it now.

When the showMonth(date, theMonth) function is called, it is possible that it had been called before, meaning that there is already a monthly calendar on the screen. The calendar should be removed before the new one is displayed. So, the very first line of the showMonth() function should be

document.getElementById('Cal').style.display = "none";

followed by

document.getElementById('Cal').style.display = "block";

which was already there.

Change the line

today = new Date();

to

theDay = date;

So theDay is now the date object that will be used to develop the calendar of any month, including the current month. As you may recall, today in the previous showCurrentMonth() function was meant for the current date; theDay is meant for any date.

The attribute of the Show Current Month's Calendar button takes care of the current month creation. So we do not need to worry about that too much in the showMonth() function. So change all the "currentMonth" variables to "month" and all the "currentYear" variables to "year."

Change the last code segment from

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

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

to

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

if (theMonth == "current")

{

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

oldIDToday = IDToday;

}

else

document.getElementById(oldIDToday).style.backgroundColor = "LemonChiffon";

Before I explain what is going on here, add the following global variable to your script:

//for removing the special background color of today's month number

var oldIDToday;

Now, let me explain the above code segment. Remember that the second parameter of the showMonth() function is theMonth. When you click the Show Current Month's Calendar button, its value is “current.” When you click the Show any Month’s Calendar button, this value is “”; that is an, empty string.

The first line above tests if the value is “current” (for the current month). If it is “current,” the if-statement gives the table cell of the current day number of the month a background color of "BurlyWood." Under this condition, it goes on to give the oldIDToday global variable the value of the IDToday variable. Remember that the value for IDToday is assigned when the function is filling the table cells with month day numbers. This value can change each time you call the showMonth() function.

Now, if the theMonth parameter does not have the “current” value, meaning it has the “” value, then the special background color for the table cell has to be removed. Remember that this background color is set by giving a CSS style to the table cell.

When you open the web page and display the current month, the special background color would be set. When next you show the calendar of any month, the color remains at the same cell, everything else being equal. So if the value of theMonth is not “current,” we use the ID of the cell that was stored in oldIDToday to give the color that other cells have.

At the end of the series, I will give you the complete code in zip file format. So do not worry about the modifications we make as we go along. Let us take a break here. We continue in the next part of the series.