Home arrow HTML arrow Creating a Web Page Calendar

Creating a Web Page Calendar

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.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
April 20, 2009
  1. · Creating a Web Page Calendar
  2. · The Date Object
  3. · The showCurrentMonth() Function
  4. · Skeleton of the showCurrentMonth() Function

print this article

Creating a Web Page Calendar
(Page 1 of 4 )

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>

<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>



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.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials