Creating a Web Page Calendar

(Page 1 of 4 )

Welcome to the second part of an eight-part series on building a web page calendar. In this part of the series, I will explain the function that is used to create the current calendar. When the Show Current Month's Calendar button is clicked, it should call a function that will display the calendar of the current month. We need to modify it; the showCal() function we saw in the previous part has only one line. We will change this function and use it as the showCurrentMonth() function.

The Current Month

Change the name of the showCal() function to showCurrentMonth(). Erase its one line content. We shall give it new content. Replace the HTML code for the calendar with the following, which now has IDs and no cell contents:

<div id="Cal" onclick="CalJustClicked = true;">

<input type="text"class="calHead" id="I1" readonly><input type="text" class="calHead" id="I2" readonly>

<table border="1">

<tr><td class="sun">S</td><td>M</td><td>T</td><td>W</td>
<td>T</td><td>F</td><td>S</td></tr>

<tr><td class="sun" id="M00"></td><td id="M01"></td>
<td id="M02"></td><td id="M03"></td><td id="M04"></td><td id="M05"></td><td id="M06"></td></tr>

<tr><td class="sun" id="M10"></td><td id="M11"></td>
<td id="M12"></td><td id="M13"></td><td id="M14"></td>
<td id="M15"></td><td id="M16"></td></tr>

<tr><td class="sun" id="M20"></td><td id="M21"></td>
<td id="M22"></td><td id="M23"></td><td id="M24"></td>
<td id="M25"></td><td id="M26"></td></tr>

<tr><td class="sun" id="M30"></td><td id="M31"></td>
<td id="M32"></td><td id="M33"></td><td id="M34"></td>
<td id="M35"></td><td id="M36"></td></tr>

<tr><td class="sun" id="M40"></td><td id="M41"></td>
<td id="M42"></td><td id="M43"></td><td id="M44"></td>
<td id="M45"></td><td id="M46"></td></tr>

<tr><td class="sun" id="M50"></td><td id="M51"></td>
<td id="M52"></td><td id="M53"></td><td id="M54"></td>
<td id="M55"></td><td id="M56"></td></tr>

</table>

</div>

The cells in the second row (not the first) have been given IDs, namely M00 and M01 through M06. Those in the third row have been given the IDs M10, M11, and so forth. The IDs have been given in this way, until in the seventh row, the IDs are M50 and M51 through M56.

Note that there are seven rows in the table and not six. The first row is taken up by the abbreviations of the days of the week. I have not given them IDs. Their contents do not need to be changed. Note the IDs and attributes I have given to the Input Text elements. The first one will have the name of the month and the second one will have the year.

Now, we have changed the name of the function that is called by the "Show Current Month Calendar" button. We have to modify the attribute of the button accordingly. The button tag should now be:

<button type="button" onclick="CalJustClicked = true; showCurrentMonth()">Show Current Month's Calendar</button>

Before we leave this section, note that the table cells currently hold no content; that is, they are all blank.

Next: The Date Object >>
 

More HTML Articles
More By Chrysanthus Forcha

Comments On: Creating a Web Page Calendar

>>> Be the FIRST to comment on this article!