Home arrow HTML arrow Modifying a Web Page Calendar

Modifying a Web Page Calendar

Welcome to the seventh part of an eight-part series that shows you how to construct a web page calendar that will display the current month, the current year, any specified month, or any specified year. In this part of the series, I explain how the user can display the calendar of any year. To avoid writing too much code, you will have to do some modification of the previous code.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
May 26, 2009
  1. · Modifying a Web Page Calendar
  2. · Modification of Some Code Segments
  3. · Another Modification of the showMonth() Function
  4. · Limitations of this Approach

print this article

Modifying a Web Page Calendar
(Page 1 of 4 )

The Show any Year's Calendar Button

When the Show any Year's Calendar Button is clicked, a prompt (dialog) box appears. You type in the year you want to display in the box. When you click the OK button of the prompt box, the calendar for the year you typed in should appear. When you click outside the calendar of the year, on the body element, the calendar disappears. The tag for this button is:

<button type="button" onclick="CalJustClicked = true; receiveYear()">Show any Year's Calendar</button>

The value (string) for the onclick attribute begins with

CalJustClicked = true;

This statement serves the same purpose as we saw before. The next statement in the value (string) is:


This calls a new function, receiveYear(), which I now describe.

The receiveYear() Function

The main aim of the function, receiveYear() is to display a prompt box in which you type in the year of your choice. The function will finally call the showYear(year) function, passing the year you type in the prompt box as the argument. You should then see the calendar for the year of your choice. This is the function:

function receiveYear()


var yourYear = false;

var year = prompt("Please enter the year.","")

//check if the year is valid

if ((year >= 1900)&&(year.length == 4))


yourYear = true;




alert('Year must be made up of 4 digits and greater than or equal to 1900')

yourYear = false;


if (yourYear == true)





The first line of the function declares a Boolean variable named yourYear and assigns the value of false to it. This variable will be used to check if the user has typed in a year that is realistic. The next statement prompts the user for the year and assigns the value typed to the year variable.

The next statement is an if-statement. It checks to see if the year typed is greater than or equal to 1900, and if it is made up of four digits. If it passes the test, it sets the yourYear variable to true; otherwise, it issues an error message and sets the yourYear variable to false.

The next statement is an if-statement. This one uses the value of the yourYear variable. If yourYear is true, it means the year the user typed in is realistic. It then calls the showYear(year) function, passing in the value of the year as an argument. Remember that the showYear(year) function calls the showMonth() function 12 times to display the twelve months of the year. If yourYear is false, the receiveYear() function does not call the showYear() function, which does not call the showMonth() function.

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials