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.
Creating a Web Page Calendar - Skeleton of the showCurrentMonth() Function (Page 4 of 4 )
The skeleton of the showCurrentMonth() function is:
function showCurrentMonth()
{
//display the block.
//declare function variables and assign them.
for (i=0;i<=5;i++)
{
for (j=startMonthDay;j<=6;j++)
{
//fill the dates (month no.) in the calendar appropriately.
}
}
for (j=0;j<realStartDay;j++)
{
//fill in the empty table cells with ' ' at the beginning of the calendar;
}
//Determine the row and column number to fill empty cells at the end of calendar
//with ' '.
for (i=rowNo;i<=5;i++)
{
for (j=colNo;j<=6;j++)
{
//fill the empty cells at the end of the calendar with single spaces.
}
}
//give special background color to today's date number.
}
Code Segments Explained
In the rest of this part of the series I will explain the code segments of the above function.
The First Code Segment
The first code segment displays the DIV element containing the table of the calendar.
The Second Code Segment
This segment creates the date object of today's date (the current date). It gets the current month and current year from the created date object, and displays them accordingly in the two Input Text controls. It goes on to declare (and initialize) other variables that will be used below in the function.
The Third Code Segment
This segment has two for-loops, one nested in the other. The segment writes the dates (month number) in the table cells in the calendar. It does not write the dates arbitrarily. It has to determine where to start (Sunday, Monday, Tuesday, etc) and then continue downwards. It begins from the row below the one that has the abbreviated week days. The cells that do not receive numbers will have to receive the space character ( ). Writing the space characters is done by the next segment and the one after.
The Fourth Code Segment
This segment fills in the space characters at the beginning of the calendar. It uses a for-loop. It does not do it arbitrarily. We shall see the details later.
The Fifth Code Segment
This segment determines the start row number and start column number of the cells at the end of the calendar that have not had month numbers (dates). The next segment uses these determined values to start filling the empty table cells at the end of the calendar.
The Six Code Segment
This segment fills the empty cells at the end of the calendar with the space character ( ). Filling empty table cells with the space character prevents the rows (cells) from collapsing. This code has two for-loops.
The Last Segment
The aim in this part of the series is to make the user see the calendar of the current month. People will always want to know the current (today's) date and see the calendar of the current month. The date object of the current date gives us today's date (month number), today's month and today's year. The third segment determines today's date (month number). This segment indicates it on the calendar. It does so by giving the table cell of the current date a different background color.
Well, we have come to the end of this part of the series. The next part of the series will start with the details of the showCurrentMonth() Function.
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
HTML 
Showing Any Month with a Web Page Calendar
