Home arrow HTML arrow Constructing the Current Month of a Web Page Calendar

Constructing the Current Month of a Web Page Calendar

Welcome to the third part of an eight-part series on building a web page calendar. In this part, we take a close look at the showCurrentMonth() function of the calendar. It is composed of seven code segments; we'll cover the first four here. These help pull together various parts of the month for display, such as the current year.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
April 27, 2009
  1. · Constructing the Current Month of a Web Page Calendar
  2. · The Third Code Segment
  3. · Third Code Segment continued
  4. · The Fourth Code Segment

print this article

Constructing the Current Month of a Web Page Calendar
(Page 1 of 4 )

The First Code Segment

The first code segment is:

document.getElementById('Cal').style.display = "block";

There is only one line here. It displays the block. Recall that the calendar is actually an HTML table element in the DIV element. This DIV element has a z-index value of 2, above that of its surrounding elements. This line displays the DIV element.

The second Code Segment

This is the first part of the second code segment:

today = new Date();

currentMonth = today.getMonth();

document.getElementById('I1').value = monthArray[currentMonth];

currentYear = today.getFullYear();

document.getElementById('I2').value = currentYear;

The first line creates a new date object. The constructor does not have any argument, so it gives the current (today's) date. The second line gets the month number and assigns it to the currentMonth variable. The second line does two things: first, it gets the name of the month from the global scope monthArray array. Second, it displays the name of the month in the first Input Text Control of the calendar. Remember that this Input Text Control is read-only, so the user cannot change it.

The next line gets the year from the date object, and assigns it to the currentYear variable. The following line uses this variable to display the year in the second Input Text Control of the calendar.

This is the second half of the second code segment:

//we get the start day of the month

var startDate = new Date(currentYear, currentMonth, 1)

var startMonthDay = startDate.getDay();

var realStartDay = startMonthDay;

var monthDayNo = 1;

var tdID; //table ID

var IDToday;

var monthNoToday = today.getDate();

The start day of the month is the day having the day of the month number 1. It may be a Sunday, a Monday, Tuesday, or any day of the week, through Saturday. We need to know this day in order to know where to place the number 1 in the calendar.

The first line creates a new date object passing the current year, current month and the day of the month number 1, as arguments to the constructor function. The line assigns this date to the startDate variable. Any date object contains a year, and the corresponding month and month day number. Any date object has the capacity to return the day of the week based on these three parameters. The date object returns this day as a number (0-7).

The next line gets the day of the week and assigns it to the startMonthDay variable. We shall change the value of this variable to carry out some logical analysis down in the function. So the following line has another variable, called realStartDay. This one has the start day of the week, which does not change. It is a copy of the preceding variable.

The HTML element we use as the month calendar is a table. We have to fill its table cells with numbers for days of the month (1 - 31). The next line in our code segment is a declaration of the variable for this. This variable is monthDayNo. It is assigned the value of 1, the first day of the month.

We use the IDs of the table cells to fill in the numbers for the days of the month. The variable for these IDs is tdID.

Of particular interest is the number of the current date. We shall make the background color of the table cell for this current date different from the other days. The variable to be used for this purpose is IDToday.

We have just discussed the variable for the current day of the month table cell ID. We need a variable to hold this number of the day of the month. The variable for this purpose is monthNoToday. The getDate() method of the date object gets the number for the day of the month of the date object. This method is used to get the number for the current date and assigns it to our variable at declaration.

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