HTML and CSS Reference
In-Depth Information
To create the writeCalTitle() function:
◗
1.
Return to the
calendar.js
file in your text editor.
◗
2.
At the bottom of the file, insert the following code, as shown in Figure 12-7, being
sure that each array item value is enclosed within a set of double quotation marks
and that the line does not wrap within a quoted text string:
function writeCalTitle(calendarDay) {
/* The calendarDay parameter contains a Date object
that the calendar is based upon */
// monthName contains an array of month names
var monthName = [“January”, “February”, “March”,
“April”, “May”, “June”, “July”, “August”, “September”,
“October”, “November”, “December”];
}
Figure 12-7
creating an array of month names
an array literal
Next, the function needs to extract the month value and year value from the
calendar‑
Day
parameter using the
getMonth()
and
getFullYear()
Date
object methods. You'll
store the values in variables named
thisMonth
and
thisYear
, as follows:
var thisMonth = calendarDay.getMonth();
var thisYear = calendarDay.getFullYear();
Finally, the function will write the HTML code for the first table row of the monthly
calendar. The table for the monthly calendar will have seven columns, so the header cell
containing the calendar title has to span seven columns. Recall that the heading row also
will have the
id
attribute value
calendar_head
. Thus, the HTML code for the heading row is
<tr>
<th id='calendar_head' colspan='7'>
Month
Year
</th>
</tr>
where
Month
is the month name and
Year
is the four-digit year value. The year value
is simply the value of the
thisYear
variable. The
thisMonth
variable tells you the month
value and ranges from 0 (for January) to 11 (for December). Note that the
thisMonth
values match the index numbers from the
monthName
array. For example, the first item
in the
monthName
array is January, which has an index value of 0. Thus, to retrieve the
name of the month, you can use the following expression:
monthName[thisMonth]
