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

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Showing Any Month with a Web Page Calendar - The Buttons
(Page 3 of 5 )

For our project there are four buttons. The first one has the title "Show Current Month’s Calendar." The second button will have the title "Show any Month’s Calendar." The third button will have the title "Show Current Year’s Calendar." The fourth button will have the title "Show any Year’s Calendar."

We have the tag for the first button on our web page already. Add the following tags for the next three buttons:


<button type="button" onclick="CalJustClicked = true; showCurrentMonth()">Show Current Month's Calendar</button>

<br /><br />

<button type="button">Show any Month’s Calendar</button>

<br /><br />

<button type="button">Show Current Year’s Calendar</button>

<br /><br />

<button type="button">Show any Year’s Calendar</button>


We shall add the event attributes latter. Before and above each button added are two line break elements (<br /><br />). The first line break element ensures that the next button appears below it. The next one creates a space of one line before you see the next button.

The buttons do not have the same width. In your commercial project you can use CSS to make them have the same width, or position them differently.


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 5 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials