Home arrow HTML arrow Showing Any Month with a Web Page Calendar

Showing Any Month with a Web Page Calendar

Welcome to the fourth part of an eight-part series on constructing a web page calendar. In the previous part, we discussed the first four code segments for the ShowCurrentMonth function of this application. In this part, we will tackle the last three code segments, move on to the validateDate function, and make modifications that will let you accurately display any month of any year.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
May 04, 2009
  1. · Showing Any Month with a Web Page Calendar
  2. · The validateDate() Function
  3. · The Buttons
  4. · Need to modify the showCurrentMonth() Function
  5. · Modifying Statements in the showMonth() function

print this article

Showing Any Month with a Web Page Calendar
(Page 1 of 5 )

The Fifth Code Segment

This is the fifth code segment:

//fill in the empty table cells with ' ' at the end of the month

//first obtain the start row and column number

var rowNo = tdID.charAt(1);

var colNo = tdID.charAt(2);

//convert these to integer

rowNo = parseInt(rowNo);

colNo = parseInt(colNo);

//increment the column number


We need to have all the empty cells after the last day number of the month (e.g. 31) filled with the space character. These empty cells may be part of the last row but one and/or the last row of the calendar. The variable, tdID, after the iteration of the third code segment, holds the ID of the last table cell that has a month day number (e.g. 31). The first character of the ID is "M." The second character is the row number (0 to 5 from the six rows) and the third character is the column number.

We extract the last row and column number from this ID. We need them to know from where we shall be filling in the table cells with space characters. The first two statements of this segment code perform the extraction. The next two statements make sure they are integers by using the parseInt() functions.

The first cell that has to receive the space character must be one column number higher than the one that has the last month number (e.g. 31). So the next statement increments the column number. After this you have the next code segment, which fills the empty cells.

The Sixth Code Segment

This is the sixth code segment:

for (i=rowNo;i<=5;i++)


for (j=colNo;j<=6;j++)


//create the ID for table cell of the start date

tdID = "M" + i + j;

document.getElementById(tdID).innerHTML = "&nbsp;";


//set the colNo to 0 after start line

colNo = 0;


This segment fills in the empty cells after the last number for the day of the month. There are two for-loops, one inside the other. The explanation of these for-loops is similar to the nested for-loop we saw above.

You may ask, “Why did we not increment the row number in the previous code segment as we did for the column number?” That is taken care of in the iteration conditions of the for-loops.

The Last Code Segment

The seventh and last code segment is:

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

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

In the first nested for-loops above, we obtained the ID for the table cell of the current number of the day of the month and assigned it to the IDToday variable. In this code segment, the variable is used to give the table cell a background color of BurlyWood. This segment has only one code line.

Wow, we finally finished the details of the showCurrentMonth() Function! The next function to consider is the validateDate() function. After this you will be able to design the calendar for the current month.

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