The first type of calendar you'll implement in this chapter is a perpetual calendar, which is most often used for scheduling events. This type of calendar is most closely related to the calendar in your e-mail client or the one hanging on your wall. There are three basic features of a good online calendar that you should consider while implementing yours. The first feature of a good online calendar is a user-friendly and efficient display. The second feature is the ability to change the displayed month, and the last important feature of an online calendar is allowing the calendar to interact with critical data, so that information can be retrieved and displayed. Each of these aspects will be explained in full in this section.
Displaying the Calendar
Probably the most difficult part of creating an online calendar is creating the user interface. Fortunately, JavaScript includes many functions that will aid you in this task, and HTML has all of the elements that will allow you to display your calendar. I'll walk you through creating a calendar that will display the days of the current month in an HTML table. First I'll present the code and then I'll explain it in detail. In order to experience the changes that I make to the calendar throughout the chapter, I encourage you to save each example as a separate file. This example, for instance, is named Static_Calendar.html.
<html>
<head>
<title>Calendar</title>
<script language="JavaScript">
<!--
var now = new Date();
var month = new Date( fixYear( now.getYear() ), now.getMonth(), 1 );
var months = new Array( "January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December" );
function fixYear( year )
{
return( year < 1000 ? year + 1900 : year );
}
function getNumberDays( d )
{
switch( d.getMonth() + 1 )
{
case 1: case 3: case 5: case 7:
case 8: case 10: case 12:
return( 31 );
case 4: case 6: case 9: case 11:
return( 30 );
case 2:
return( 28 + ( d.getYear % 4 == 0 ? 1 : 0 ) );
}
}
// -->
</script>
</head>
<body>
<table border="1" cellpadding="2" width="75%">
<tr>
<td colspan="7" align="center">
<font size="6"><b>
<script language="JavaScript">
<!--
document.write( months[month.getMonth()] + " " +
fixYear( month.getYear() ) );
// -->
</script>
</b></font>
</td>
</tr>
<tr>
<td width="14%"><b><i>Sunday</i></b></td>
<td width="14%"><b><i>Monday</i></b></td>
<td width="14%"><b><i>Tuesday</i></b></td>
<td width="14%"><b><i>Wednesday</i></b></td>
<td width="14%"><b><i>Thursday</i></b></td>
<td width="14%"><b><i>Friday</i></b></td>
<td width="14%"><b><i>Saturday</i></b></td>
</tr>
<tr>
<script language="JavaScript">
<!--
var startDay = month.getDay();
for( i = 0 ; i < startDay ; i++ )
{
document.write( "<td></td>" );
}
var numDays = getNumberDays( month );
for( i = 0 ; i < numDays ; i++ )
{
if( ( i + startDay + 1 ) % 7 == 1 )
{
document.write( "</tr><tr>" );
}
document.write( "<td height='75' valign='top'><b>" +
(i+1) + "</b></td>" );
}
// -->
</script>
</tr>
</table>
</body>
</html>
This example displays a very simple, very plain calendar, as shown in Figure 15.1. There are two basic parts to this example, the functions and the table.
The functions in this example may not seem absolutely necessary at first glance, but believe me, they are. Due to a lingering aspect of the Y2K bug, some browsers still only store the year of a JavaScript Date object as two digits. The fixYear() function,
</table>
</body>
</html>
This example displays a very simple, very plain calendar, as shown in Figure 15.1. There are two basic parts to this example, the functions and the table.
The functions in this example may not seem absolutely necessary at first glance, but believe me, they are. Due to a lingering aspect of the Y2K bug, some browsers still only store the year of a JavaScript Date object as two digits. The fixYear() function,
function fixYear( year )
{
return( year < 1000 ? year + 1900 : year );
}
corrects the bug and allows the calendar to display correctly.The second function, getNumberDays():
function getNumberDays( d )
{
switch( d.getMonth() + 1 )
{
case 1: case 3: case 5: case 7:
case 8: case 10: case 12:
return( 31 );
case 4: case 6: case 9: case 11:
return( 30 );
case 2:
return( 28 + ( d.getYear % 4 == 0 ? 1 : 0 ) );
}
}
performs some functionality that you may expect to be part of the JavaScript Date object, but is not. This function will take a Date object as a parameter and return the number of days that are in the month specified by the Date object's month field. This value is used later on, when you'll build the calendar display so that the correct number of days are displayed.
The second basic part of the calendar example is the table itself. I'll walk you through each logical step that must be taken in order to display the calendar correctly.
First of all, you need the two different header rows, one for the name of the month and one for the names of the days.
<table border="1" cellpadding="2" width="75%">
<tr>
<td colspan="7" align="center">
<font size="6"><b>
<script language="JavaScript">
<!--
document.write( months[month.getMonth()] + " " +
fixYear( month.getYear() ) );
// -->
</script>
</b></font>
</td>
</tr>
<tr>
<td width="14%"><b><i>Sunday</i></b></td>
<td width="14%"><b><i>Monday</i></b></td>
<td width="14%"><b><i>Tuesday</i></b></td>
<td width="14%"><b><i>Wednesday</i></b></td>
<td width="14%"><b><i>Thursday</i></b></td>
<td width="14%"><b><i>Friday</i></b></td>
<td width="14%"><b><i>Saturday</i></b></td>
</tr>
This part is fairly straightforward.The name of the month is generated from an array of month names that was declared earlier. The names of the days are simply hard-coded into the Web page. The next parts are trickier. Not every month starts with the first day as Sunday, so you'll have to find some way to pad the first week to make it line up with the previous month. Luckily, the JavaScript Date object will tell you what day of the week the date falls on, and if you set the Date object to be the first day of the month (as I did in the ninth line of the example), then you can easily find out how many days need to be padded in order for the calendar to display correctly.
<tr>
<script language="JavaScript">
<!--
var startDay = month.getDay();
for( i = 0 ; i < startDay ; i++ )
{
document.write( "<td></td>" );
}
Because there are never more than six days padded at the beginning of the month, you don't need to worry about starting and ending additional rows in the table. For each day that needs to be padded, simply write an empty table cell.
The final part of displaying the calendar is adding in the days of the month. Since you already know that you're starting on the correct day of the week, you need only add the days in.
var numDays = getNumberDays( month );
for( i = 0 ; i < numDays ; i++ )
{
if( ( i + startDay + 1 ) % 7 == 1 )
{
document.write( "</tr><tr>" );
}
document.write( "<td height='75' valign='top'><b>" +
(i+1) + "</b></td>" );
}
// -->
</script>
</tr>
</table>
The one thing that is different about this code snippet is that you do have to worry about starting and ending rows. Whenever your counter (in this case i) reaches 1, or Sunday, simply write a closing row tag and an opening row tag before adding the next day.
Rotating the Calendar
A calendar is not very useful if all it does is display one month—even if it is the current month. People often need to schedule events months or even years in advance. With the setup that I have presented thus far, it is a very simple matter to add functionality to rotate the calendar, or move to another month or year.
In the previous examples, the entire calendar was dependant on one variable, the month Date object. If you wanted to display a different month or different year, all you would have to do is modify that variable. Of course, that's an easy thing to do if you are writing the program, but what you really want to do is allow the user to change the display. There are two ways to add this functionality. The first, by using URL parameters, will be presented next; and the second, by using cookies, will be presented later in the chapter.
The code needs to be modified in two places in order to allow the calendar to be rotated. The first place is in the script tag, in order to get the new parameters out of the URL and modify the month variable. The second place in which the program needs to be modified is in the body, in order to add links that will add the parameters into the URL and allow the calendar to rotate. I will discuss the second part first so that you'll know what the first part is working with.
Adding the links to rotate the calendar is not a straightforward matter. You'll need four links, two for the month rotation and two for the year rotation. One link out of each group will rotate forward and the other will rotate backward. Here is the source code that will cause the proper link rotation:
<table cellpadding="2" width="75%">
<tr>
<td>
<script language="JavaScript">
<!--
var y = fixYear( month.getYear() );
var m = fixMonth( month.getMonth() 1 );
document.write( "<a href='" + getLocation() + "?year=" + y +
"&month=" + m + "'>" + months[m] + "</a>" );
// -->
</script>
</td>
<td rowspan="2">
<center><font size="6"><b>
<script language="JavaScript">
<!--
document.write( months[month.getMonth()] + " " +
fixYear( month.getYear() ) );
// -->
</script>
</center></b></font>
</td>
<td align="right">
<script language="JavaScript">
<!--
var y = fixYear( month.getYear() );
var m = fixMonth( month.getMonth() + 1 );
document.write( "<a href='" + getLocation() + "?year=" + y +
"&month=" + m + "'>" + months[m] + "</a>" );
// -->
</script>
</td>
</tr>
<tr>
<td>
<script language="JavaScript">
<!--
var y = fixYear( month.getYear() 1 );
var m = fixMonth( month.getMonth() );
document.write( "<a href='" + getLocation() + "?year=" + y +
"&month=" + m + "'>" + y + "</a>" );
// -->
</script>
</td>
<td align="right">
<script language="JavaScript">
<!--
var y = fixYear( month.getYear() + 1 );
var m = fixMonth( month.getMonth() );
document.write( "<a href='" + getLocation() + "?year=" + y +
"&month=" + m + "'>" + y + "</a>" );
// -->
</script>
</td>
</tr>
</table>
In order to prevent the table from getting too cluttered, I placed the rotation links, along with the month header, in a separate table without a border. Each of the four links follows the same basic pattern.
<script language="JavaScript">
<!--
var y = fixYear( month.getYear()+ <change> );
var m = fixMonth( month.getMonth() + <change> );
document.write( "<a href='" + getLocation() + "?year=" + y +
"&month=" + m + "'>" + months[m] + "</a>" );
// -->
</script>
Each link generates a year value and a month value based on the current year or month. Each value is modified depending on whether the rotation is for the year or month, or if the rotation is going forward or backward. After each new value is generated, an anchor tag with the desired parameters is written to the document. For clarity's sake, here is an actual example to rotate the month backward one month:
<script language="JavaScript">
<!--
var y = fixYear( month.getYear() );
var m = fixMonth( month.getMonth() 1 );
document.write( "<a href='" + getLocation() + "?year=" + y +
"&month=" + m + "'>" + months[m] + "</a>" );
// -->
</script>
You should notice that the year value is not modified in this example. That's because only one value should be rotated at time (in order to accurately track the current date). The <change> value of the month variable in this case is −1.
In order to display the changed calendar, you will need a way to get the parameters out of the URL string and modify the month variable. This change is short compared to the previous one.
var urlquery = location.href.split( "?" );
if( urlquery[1] )
{
var params = urlquery[1].split( "&" );
var y = ( params[0] ? params[0].split( "=" )[1] :
fixYear( now.getYear() ) );
var m = ( params[1] ? params[1].split( "=" )[1] :
fixMonth( now.getMonth() ) );
month = new Date( y, m, 1 );
}
This code snippet should come after the variable month is declared. Although the code seems complex, the function that it performs is rather simple. If a parameter for the month and date rotation is in the URL string, it gets applied to the month variable. If no parameters are present, the month variable is unaffected and the current month and year will be displayed.
Here is a complete working example of the rotating calendar; its file name is Rotating_Calendar.html (you can check it out in Figure 15.2):
<html>
<head>
<title>Calendar</title>
<script language="JavaScript">
<!--
var now = new Date();
var month = new Date( fixYear( now.getYear() ), now.getMonth(), 1 );
var months = new Array( "January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December" );
var urlquery = location.href.split( "?" );
if( urlquery[1] )
{
var params = urlquery[1].split( "&" );
var y = ( params[0] ? params[0].split( "=" )[1] :
fixYear( now.getYear() ) );
var m = ( params[1] ? params[1].split( "=" )[1] :
fixMonth( now.getMonth() ) );
month = new Date( y, m, 1 );
}
function getLocation()
{
return( location.href.split( "?" )[0] );
}
function fixYear( year )
{
return( year < 1000 ? year + 1900 : year );
}
function fixMonth( month )
{
return( month < 0 ? month + 12 : (month > 11 ? month 12 : month) );
}
function getNumberDays( d )
{
switch( d.getMonth() + 1 )
{
case 1: case 3: case 5: case 7:
case 8: case 10: case 12:
return( 31 );
case 4: case 6: case 9: case 11:
return( 30 );
case 2:
return( 28 + ( d.getYear % 4 == 0 ? 1 : 0 ) );
}
}
function getEnding( number )
{
if( number > 10 && number < 20 )
switch( number % 10 )
{
case 0: case 4: case 5:
case 6: case 7: case 8:
case 9:
return( "th" );
case 1:
return( "st" );
case 2:
return( "nd" );
case 3:
return( "rd" );
}
}
// -->
</script>
</head>
<body>
<table cellpadding="2" width="75%">
<tr>
<td>
<script language="JavaScript">
<!--
var y = fixYear( month.getYear() );
var m = fixMonth( month.getMonth() 1 );
document.write( "<a href='" + getLocation() + "?year=" + y +
"&month=" + m + "'>" + months[m] + "</a>" );
// -->
</script>
</td>
<td rowspan="2">
<center><font size="6"><b>
<script language="JavaScript">
<!--
document.write( months[month.getMonth()] + " " +
fixYear( month.getYear() ) );
// -->
</script>
</center></b></font>
</td>
<td align="right">
<script language="JavaScript">
<!--
var y = fixYear( month.getYear() );
var m = fixMonth( month.getMonth() + 1 );
document.write( "<a href='" + getLocation() + "?year=" + y +
"&month=" + m + "'>" + months[m] + "</a>" );
// -->
</script>
</td>
</tr>
<tr>
<td>
<script language="JavaScript">
<!--
var y = fixYear( month.getYear() 1 );
var m = fixMonth( month.getMonth() );
document.write( "<a href='" + getLocation() + "?year=" + y +
"&month=" + m + "'>" + y + "</a>" );
// -->
</script>
</td>
<td align="right">
<script language="JavaScript">
<!--
var y = fixYear( month.getYear() + 1 );
var m = fixMonth( month.getMonth() );
document.write( "<a href='" + getLocation() + "?year=" + y +
"&month=" + m + "'>" + y + "</a>" );
// -->
</script>
</td>
</tr>
</table>
<br><br>
<br><br>
<table border="1" cellpadding="2" width="75%">
<tr>
<td width="14%"><b><i>Sunday</i></b></td>
<td width="14%"><b><i>Monday</i></b></td>
<td width="14%"><b><i>Tuesday</i></b></td>
<td width="14%"><b><i>Wednesday</i></b></td>
<td width="14%"><b><i>Thursday</i></b></td>
<td width="14%"><b><i>Friday</i></b></td>
<td width="14%"><b><i>Saturday</i></b></td>
</tr>
<tr>
<script language="JavaScript">
<!--
var startDay = month.getDay();
for( i = 0 ; i < startDay ; i++ )
{
document.write( "<td></td>" );
}
var numDays = getNumberDays( month );
for( i = 0 ; i < numDays ; i++ )
{
if( ( i + startDay + 1 ) % 7 == 1 )
{
document.write( "</tr><tr>" );
}
document.write( "<td height='75' valign='top'b>" + (i+1) +
getEnding( i + 1 ) + "</b></td>" );
}
// -->
</script>
</tr>
</table>
</body>
</html>
One function that has not been presented yet, and that you may or may not find useful, is the getEnding() function. Here it is:
function getEnding( number )
{
if( number > 10 && number < 20 ) return( "th" );
switch( number % 10 )
{
case 0: case 4: case 5:
case 6: case 7: case 8:
case 9:
return( "th" );
case 1:
return( "st" );
case 2:
return( "nd" );
case 3: return( "rd" );
}
}
This is a very simple function that will return the number suffix. For example, this function would return st if passed 21 or rd if passed 53. That way, you'd have 21st or 53rd.
Getting and Setting Calendar Events
Due to JavaScript's lack of file I/O and its inability to talk to a server to request data from a database, the getting and setting of calendar events cannot be written using only JavaScript. A server-side language, such as ASP or ASP.NET, is required to query a database for the events of a given month. Here is a very simple example of loading data from a server-side database with ASP:
<%@ LANGUAGE=VBSCRIPT %>
<%
Dim Database_Connection
Set Database_Connection = Server.CreateObject( "ADODB.Connection" )
Database_Connection.Open( "DRIVER={SQL Server};" &
"SERVER=MyServer;DATABASE=MyDatabase" )
Dim SQL_Statement
Dim Record_Set
SQL_Statement = "Select * FROM Calendar_Events_Table"
Set Record_Set = Database_Connection.Execute( SQL_Statement )
%>
<html>
<head>
<title>Calendar Example</title>
<script language="JavaScript">
<!--
// Other JavaScript functions
var tasks = new Array( <% While NOT Record_Set.EOF %>
<%=Response.write( "'Record_Set("task")', ") %>
<% WEnd %> );
// -->
</script>
</head>
<body>
<!-Place calendar here --;>
</body>
</html>
What JavaScript can do is display the information that is given. For simplicity's sake, I will assume that the data generated by the server-side language is in the form of a JavaScript array, and that the array name is tasks. If this is the case, displaying the information is a simple matter.
<table border="1" cellpadding="2" width="75%">
<tr>
<td width="14%"><b><i>Sunday</i></b></td>
<td width="14%"><b><i>Monday</i></b></td>
<td width="14%"><b><i>Tuesday</i></b></td>
<td width="14%"><b><i>Wednesday</i></b></td>
<td width="14%"><b><i>Thursday</i></b></td>
<td width="14%"><b><i>Friday</i></b></td>
<td width="14%"><b><i>Saturday</i></b></td>
</tr>
<tr>
<script language="JavaScript">
<!--
var startDay = month.getDay();
for( i = 0 ; i < startDay ; i++ )
{
document.write( "<td></td>" );
}
var numDays = getNumberDays( month );
for( i = 0 ; i < numDays ; i++ )
{
if( ( i + startDay + 1 ) % 7 == 1 )
{
document.write( "</tr><tr>" );
}
document.write( "<td height="75" valign='top'" );
if( fixYear( now.getYear() ) == fixYear( month.getYear() ) &&
now.getMonth() == month.getMonth() && now.getDate() == i + 1 )
document.write( " bordercolor='red'" );
document.write( "><b>" + (i+1) + getEnding( i+1 ) + "</b><br>" );
if( tasks[i+1] )
document.write( tasks[i+1] );
document.write( "</td>" );
}
// -->
</script>
</tr>
</table>
This example fills in the calendar events as it is building the calendar itself. The line
if( tasks[i+1] ) document.write( tasks[i+1] );
looks in the array of tasks, and if a task exists, writes it into the current table cell. It's really as simple as that.
Depending on your specific use for your table, it may be a good idea to mark which cell in the table represents the current day. This is easily taken care of in a couple of lines of code:
document.write( "<td height='75' valign='top'" );
if( fixYear( now.getYear() ) == fixYear( month.getYear() ) &&
now.getMonth() == month.getMonth() && now.getDate() == i + 1 )
document.write( " bordercolor='red'" );
document.write( "><b>" + (i+1) + getEnding( i+1 ) + "</b><br>" );
if( tasks[i+1] ) document.write( tasks[i+1] );
document.write( "</td>" );
The if statements will make the border of the current cell red if the month and year that are being displayed are the current month and year. Here is a complete example that uses a rotating calendar and displays a couple of tasks in their corresponding days; its file name is Calendar.html:
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
var now = new Date();
var months = new Array( "January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December" );
var yString = getCookieValue( "year" );
var mString = getCookieValue( "month" );
var y = fixYear( yString ? parseInt( yString ) : now.getYear() );
var m = fixMonth( mString ? parseInt( mString ) : now.getMonth() );
var month = new Date( y, m, 1 );
function getCookieValue( name )
{
var c = document.cookie;
var begin = c.indexOf( name );
if( begin < 0 ) return( "" );
begin += name.length + 1;
var end = c.indexOf( ";", begin );
if( end == -1 ) end = c.length;
return( c.slice( begin, end ) );
}
function fixYear( year )
{
return( year < 1000 ? year + 1900 : year );
}
function fixMonth( month )
{
return( month < 0 ? month + 12 : (month > 11 ? month 12 : month) );
}
function getNumberDays( d )
{
switch( d.getMonth() + 1 )
{ case 1: case 3: case 5: case 7:
case 8: case 10: case 12:
return( 31 );
case 4: case 6: case 9: case 11:
return( 30 );
case 2:
return( 28 + ( d.getYear % 4 == 0 ? 1 : 0 ) );
}
}
function getEnding( number )
{
if( number > 10 && number < 20 ) return( "th" );
switch( number % 10 )
{
case 0: case 4: case 5:
case 6: case 7: case 8:
case 9:
return( "th" );
case 1:
return( "st" );
case 2:
return( "nd" );
case 3:
return( "rd" );
}
}
// These should be loaded from a server-side language such as ASP
var tasks = new Array( 30 );
tasks[5] = "<a href='Test.html'>Take CS Test</a>";
tasks[28] = "English Paper Due";
// -->
</script>
</head>
<body onLoad="JavaScript: document.cookie="loggedin=true";">
<i>Welcome</i><b>
<script language="JavaScript">
<!--
document.write( getCookieValue( "username" ) + "</b>!! " ); // -->
</script>
<i>Here are your tasks for</i>
<table width="75%">
<tr><td align="center">
<font size="6"><b>
<script language="JavaScript">
<!--
document.write( months[m] );
// -->
</script>
</b></font>
</td></tr>
</table>
<table border="1" cellpadding="2" width="75%">
<tr>
<td width="14%"><b><i>Sunday</i></b></td>
<td width="14%"><b><i>Monday</i></b></td>
<td width="14%"><b><i>Tuesday</i></b></td>
<td width="14%"><b><i>Wednesday</i></b></td>
<td width="14%"><b><i>Thursday</i></b></td>
<td width="14%"><b><i>Friday</i></b></td>
<td width="14%"><b><i>Saturday</i></b></td>
</tr>
<tr>
<script language="JavaScript">
<!--
var startDay = month.getDay();
for( i = 0 ; i < startDay ; i++ )
{
document.write( "<td></td>" );
}
var numDays = getNumberDays( month );
for( i = 0 ; i < numDays ; i++ )
{
if( ( i + startDay + 1 ) % 7 == 1 )
{
document.write( "</tr><tr>" );
}
document.write( "<td height='75' valign='top'" );
if( fixYear( now.getYear() ) == fixYear( month.getYear() ) &&
now.getMonth() == month.getMonth() && now.getDate() == i + 1 )
document.write( " bordercolor='red'" );
document.write( "><b>"+(i+1)+getEnding(i+1)+"</b><br>" );
if( tasks[i+1] ) document.write( tasks[i+1] );
document.write( "</td>" );
}
// -->
</script>
</tr>
</table>
<table width="75%">
<tr>
<td>
<script language="JavaScript">
<!-
document.write( "<a href=\"" + document.location + "\" " );
document.write( "onClick=\"JavaScript: document.cookie='month=" +
fixMonth(m-1) + "';\">" );
document.write( months[fixMonth(m-1)] + "</a>" );
// -->
</script>
</td>
<td align="right">
<script language="JavaScript">
<!-
document.write( "<a href=\"" + document.location + "\" " );
document.write( "onClick=\"JavaScript: document.cookie='month=" +
fixMonth(m+1) + "';\">" );
document.write( months[fixMonth(m+1)] + "</a>" );
// -->
</script>
</td>
</tr>
</table>
</body>
</html>
This example is part of the running Center Park Web site and is the screen a user will see just after logging in to the site (this will be explained fully in later chapters).
One noteworthy part of the previous example is the fact that it uses cookies instead of passing the month and year parameters through the URL string. Two links at the bottom of the page will allow the user to rotate the calendar. Here is the basic format for the two links:
<script language="JavaScript">
<!--
document.write( "<a href=\"" + document.location + "\" " );
document.write( "onClick=\"JavaScript: document.cookie='month=" +
fixMonth(m-1) + "';\">" );
document.write( months[fixMonth(m+<change>)] + "</a>" );
// -->
</script>
Although different from the previous method of passing the parameters through the URL string, the functionality is identical. The code needed to extract the parameters from the cookie file is as follows:
var yString = getCookieValue( "year" );
var mString = getCookieValue( "month" );
var y = fixYear( yString ? parseInt( yString ) : now.getYear() );
var m = fixMonth( mString ? parseInt( mString ) : now.getMonth() );
var month = new Date( y, m, 1 );
This method is nearly identical to the previous method of extracting the parameters from the URL string. Both methods work equally well; it is up to you to choose which one is best for your site.
See Figure 15.3 for an even more enhanced calendar.