An Object Lesson In JavaScript - A Hot Date (
Page 9 of 9 )
And finally, here's another example of
just how useful JavaScript objects can be. I've put together a Calendar object,
which displays a neat monthly calendar for any month you care to name - simply
specify the month and year as object properties, and let the constructor take
care of the rest.
<script language="JavaScript">
/* Calendar object, calendar.js
Usage:
obj = new Calendar(mm, yyyy);
created 15.Mar.2001
copyright Melonfire, 2001. all rights reserved.
http://www.melonfire.com/community/columns/trog/
demonstration only - not meant for production enviroments!!
*/
// constructor
function Calendar(month, year)
{
// array of day names
this.days = new Array("Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday");
// array of month names
this.months = new Array("January", "February", "March", "April", "May",
"June", "July", "August", "September", "October", "November", "December");
// array of total days in each month
this.totalDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
// object properties - month and year
// correction for zero-based array index
this.month = month-1;
this.year = year;
// leap year correction
if (this.year % 4 == 0)
{
this.totalDays[1] = 29;
}
// temporary variable - used later
this.rowCount = 0;
// object method
this.display = display;
// automatically run method display() once object is initialized
this.display();
}
// function to display calendar
function display()
{
// create a Date object
// required to obtain basic date information
// get the first and last day of the month - boundary values for calendar
obj = new Date(this.year, this.month, 1);
this.firstDayOfMonth = obj.getDay();
obj.setDate(31);
this.lastDayOfMonth = obj.getDay();
// start table
document.write("<table border=0 cellpadding=2 cellspacing=5>");
// month display
document.write("<tr><td colspan=7 align=center><font face=Arial
size=-1><b>" + this.months[this.month] + " " + this.year +
"</b></font></td></tr>");
// day names
document.write("<tr>");
for (x=0; x<7; x++)
{
document.write("<td><font face=Arial size=-2>" +
this.days[x].substring(0,3) + "</font></td>") ;
}
document.write("</tr>");
// start displaying dates
// display blank spaces until the first day of the month
document.write("<tr>");
for (x=1; x<=this.firstDayOfMonth; x++)
{
// this comes in handy to find the end of each 7-day block
this.rowCount++;
document.write("<td><font face=Arial size=-2> </font></td>");
}
// counter to track the current date
this.dayCount=1;
while (this.dayCount <= this.totalDays[this.month])
{
// use this to find out when the 7-day block is complete and display a new
row
if (this.rowCount % 7 == 0)
{
document.write("</tr>\n<tr>");
}
// print date
document.write("<td align=center><font face=Arial size=-1>" + this.dayCount
+ "</font></td>");
this.dayCount++;
this.rowCount++;
}
// end table
document.write("</tr></table>");
}
// eof
</script>
Here's a brief explanation of what this does, and how it
does it.
The first few lines set up the arrays containing month and day
names, and the total number of days in each month. A simple equation is used to
find out whether the year in question is a leap year, and appropriate
modification made to the total number of days for February if so. Control then
passes to the object method display(), which is responsible for actually writing
the calendar to the page.
With a little help from the Date object and a
couple of temporary variables, a table is created and filled with the days of
the month. The document.write() method takes care of setting up the
<table>, <tr> and <td> tags, and printing date information
into the table cells.
Here's an example of how you could use this
object.
<html>
<head>
<script language="JavaScript" src="calendar.js"></script>
</head>
<body bgcolor="white">
<script> obj1 = new Calendar(2, 2005); </script>
<script> obj2 = new Calendar(7, 2001); </script>
</body>
</html>
And here's what you'd see:
And that's about it. I hope the examples in this
article gave you a better appreciation for the usefulness of JavaScript objects,
and perhaps even sparked a few ideas on how you can use them in your development
activities. If you have questions, comments or large amounts of money for me,
send me some email - and come back next time for more!
/ 22 
