James Thiele's Reminder Calendar

James Thiele's Reminder Calendar

James Thiele has designed a simple reminder calendar as an example using cookies in JavaScript. The calendar is available at

http://www.eskimo.com/~jet/javascript/calendar_js.html

Rather than being a full-fledged application, this page provides simple functionality yet is a compelling example of how cookies can extend the value of a script beyond time and session constraints.

The program displays a calendar of the current month, much the same as in Dave Eisenberg's calendar example. When the user clicks on any of the days in the calendar, they either can enter a reminder for that day or they are alerted of their previously entered reminder.

Your Ad Here

When the user reloads the page or returns to it later in the month, the days with reminders are displayed in a different color.

Input

Listing W4.1. Source code for James Thiele's Reminder Calendar.

Output

End of Output

Analysis

The first thing you will notice is that Thiele is using an early version of Bill Dortch's cookie function set. This version was written before JavaScript included the escape() and unescape() functions which forced Dortch to write his own functions, encode() and decode(), to perform the encoding of values.

In any case, the newer version of Dortch's functions are backward compatible and could replace the old version in this script without affecting its operation in newer browsers.

Thiele has written five functions to implement his calendar program: intro(), arrayOfDaysInMonth(), daysInMonth(), calendar(), and dayClick().

In addition, he builds most of the body of his HTML document using a JavaScript script:

This script is quite simple: it calls calendar() to display the calendar, it draws a horizontal line and then it calls intro() which displays most of the rest of the text of the script.

The intro() Function

This function needs little discussion. It is just a static collection of document.write() statements that output the introductory information about the application.

The arrayOfDaysInMonth() Function

The arrayOfDaysInMonth() function simply creates a 12-element array containing the number of days in each calendar month. It accepts one boolean variable as an argument. This enables it to correctly set the number of days in February based on whether or not it is a leap year.

The daysInMonth() Function

This function takes two arguments—the month and year—and uses these to determine if it is a leap year. It then creates an array of days in each month of the particular year and returns the number of days in the specified month.

The calendar() Function

The calendar() function is where some of the more complex processing occurs.

   var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec";



var today      = new Date();



var day        = today.getDate();



var month      = today.getMonth();



var year       = today.getYear() + 1900;



// figure out how many days this month will have...



var numDays    = daysInMonth(month, year);



// and go back to the first day of the month...



var firstDay   = today;



    firstDay.setDate(1);



// and figure out which day of the week it hits...



var startDay = firstDay.getDay();



var column = 0;

As would be expected, the function starts by setting up key variables for use throughout the function. These include a string of month names, the same technique you saw in Dave Eisenberg's calendar script.

The firstDay Date object is used to get the day of the week of the first day of the month and store it in startDay.

   // Start the calendar table



document.write("");



document.write("");


document.write("");


for (i=1; i <>");


   column++;


} 
After building the header of the table which holds the calendar for the  month, the for loop inserts blank cells for each of the unused days of the week  before the first day of the month.

   for (i=1; i <= numDays; i++)    {       // Write the day       var s = "" + i;       if ((GetCookie("d"+i) != null))         // s = s.fontcolor(document.vlinkColor);         s = s.fontcolor("#FF0000");         s = s.link("javascript:dayClick(" + i + ")")           document.write("
"); // start a new row


      column = 0;


   }


} 
Next, another for loop repeats for each day in the month. For each day, a  cell is created and the number is displayed with a hypertext link to the URL  javascript:dayClick(number). This is done by using the string's link method to  add the URL. As you will see in Chapter 10, "Strings, Math and the History  List," if the link method is used then the value of the string is surrounded by  an appropriate  HTML container tag.

 
 Notice the use of the javascript:  URL. This type of URL can be used to call a function in  the current document. When used in the HREF attribute of the  tag, this  is often an alternative to using the onClick event handler. It can also be used  in the open location dialog box of the Navigator browser to test what a line of  JavaScript code will evaluate to. In this case, the result of evaluating an  expression is displayed in the browser window.

  
Similarly, the fontcolor()  method adds the appropriate HTML tags to the value of the string. In this case,  the fontcolor() method is only called if the cookie for that day has been  previously set with a reminder.

The final if statement checks if you have reached the last column, and if so,  closes the row, opens a new row in the table, and resets the column counter.

The dayClick()  Function

This function handles both  prompting for a reminder and displaying existing reminders. It is invoked when  the user clicks on a date. It accepts the date as an argument.

        var expdate = new Date ();



         expdate.setTime (expdate.getTime() + (24 * 60 * 60 * 1000)); // 24 hrs from now



     var prefix                = "d";



     var theCookieName         = prefix + day;



     var theDayclickedReminder = GetCookie(theCookieName);
The function starts by setting up its variables, including an expiry date for  cookies and a value of the cookie for the selected date.

    if (theDayclickedReminder != null) {



     alert("The reminder for day " + day + " is:"  + theDayclickedReminder);



 } // end if
If the value of the cookie is not null, then the reminder is displayed in an  alert dialog box.

        if (confirm("Do you wish to enter a reminder for day " + day + " of this month?"))



     {



             x = prompt("Enter a reminder for day "+ day + " of this month", theDayclickedReminder);



     SetCookie (theCookieName, x, expdate);



 } // end if
If the value of the cookie is null, then users are asked if they wish to  enter a reminder for the current day and, if they do, they are further prompted  for the text of the reminder. The reminder is then stored in a cookie. Notice  the use of the confirm() call as the condition of the if statement—confirm()  returns a value of true or false based on the user's response.

");



document.write(monthNames.substring(3*month, 3*(month + 1)) + " " + year);



document.write("
Sun
Mon
Tue
Wed
Thu
Fri
Sat");



// put blank table entries for days of week before beginning of the month



document.write("



" + s);



// Check for end of week/row



if (++column == 7)



{



document.write("