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

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 / 2
April 27, 2009
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Constructing the Current Month of a Web Page Calendar - Third Code Segment continued
(Page 3 of 4 )


All of the statements inside the inner loop are in the if-statement, meaning that the inner loop is only executed if the if-test is true.

Remember, we received the start day of the week for the first of the month. We have it in the  startMonthDay variable (which will change) and in the realStartDay variable (which will not change). The first time the inner for-loop is executed, its counter starts from startMonthDay, which may be a Wednesday (4) for example. In this way, the number 1 will appear under a day like Wednesday (W) in the first of the six rows.

The first statement in the if-curly brackets inside the inner for-loop creates the ID of the table cell that will receive the number for the day of the month. The ID depends on row and column numbers. Of course, as the iteration of the loops carry on, the ID changes. The next line displays the number for the day of the month in the appropriate table cell using the ID developed.

The next statement inside our if-statement is also an if-statement. This if-statement determines if the number of the day of the month is that of the current date. If it is, it assigns the ID of the present table cell to the IDToday variable. We shall use this ID to give the table cell of the current day of the month a different background color in another code segment.

The last line inside our if-statement increments the monthDayNo variable. As the iteration of the two for-loops continues, this variable has to be incremented. It is the value of this variable that is written as the number of the day of the month in the table cells. So it has to be incremented. It is incremented at the end of the inner for-loop, preparing for the next iteration.

The following statement is outside the inner for-loop, but inside the outer for-loop:


startMonthDay = 0;


Recall that we said we would change the value of this variable. After the first iteration of the inner for-loop, where the first number of the month (1) may occur on a Wednesday (4) for example, the next number, say 5, will have to appear on a Sunday; that is, in the first cell of the second of the six rows. As I said above, the inner for-loop handles the columns (cells in a row). The startMonthDay variable has to be set to 0 to ensure that the five remaining rows are filled correctly, beginning from the first cell.


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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