Constructing the Current Month of a Web Page Calendar

The First Code Segment

The first code segment is:

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

There is only one line here. It displays the block. Recall that the calendar is actually an HTML table element in the DIV element. This DIV element has a z-index value of 2, above that of its surrounding elements. This line displays the DIV element.

The second Code Segment

This is the first part of the second code segment:

today = new Date();

currentMonth = today.getMonth();

document.getElementById('I1').value = monthArray[currentMonth];

currentYear = today.getFullYear();

document.getElementById('I2').value = currentYear;

The first line creates a new date object. The constructor does not have any argument, so it gives the current (today's) date. The second line gets the month number and assigns it to the currentMonth variable. The second line does two things: first, it gets the name of the month from the global scope monthArray array. Second, it displays the name of the month in the first Input Text Control of the calendar. Remember that this Input Text Control is read-only, so the user cannot change it.

The next line gets the year from the date object, and assigns it to the currentYear variable. The following line uses this variable to display the year in the second Input Text Control of the calendar.

This is the second half of the second code segment:

//we get the start day of the month

var startDate = new Date(currentYear, currentMonth, 1)

var startMonthDay = startDate.getDay();

var realStartDay = startMonthDay;

var monthDayNo = 1;

var tdID; //table ID

var IDToday;

var monthNoToday = today.getDate();

The start day of the month is the day having the day of the month number 1. It may be a Sunday, a Monday, Tuesday, or any day of the week, through Saturday. We need to know this day in order to know where to place the number 1 in the calendar.

The first line creates a new date object passing the current year, current month and the day of the month number 1, as arguments to the constructor function. The line assigns this date to the startDate variable. Any date object contains a year, and the corresponding month and month day number. Any date object has the capacity to return the day of the week based on these three parameters. The date object returns this day as a number (0-7).

The next line gets the day of the week and assigns it to the startMonthDay variable. We shall change the value of this variable to carry out some logical analysis down in the function. So the following line has another variable, called realStartDay. This one has the start day of the week, which does not change. It is a copy of the preceding variable.

The HTML element we use as the month calendar is a table. We have to fill its table cells with numbers for days of the month (1 - 31). The next line in our code segment is a declaration of the variable for this. This variable is monthDayNo. It is assigned the value of 1, the first day of the month.

We use the IDs of the table cells to fill in the numbers for the days of the month. The variable for these IDs is tdID.

Of particular interest is the number of the current date. We shall make the background color of the table cell for this current date different from the other days. The variable to be used for this purpose is IDToday.

We have just discussed the variable for the current day of the month table cell ID. We need a variable to hold this number of the day of the month. The variable for this purpose is monthNoToday. The getDate() method of the date object gets the number for the day of the month of the date object. This method is used to get the number for the current date and assigns it to our variable at declaration.