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.
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
Output
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("");
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("");
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("" + s);
// Check for end of week/row
if (++column == 7)
{
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 ifIf 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 ifIf 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.
Posts
