JavaScript Clocks and Calendars, Part III, World Times

JavaScript Clocks and Calendars, Part III, World Times
by
Mari Bontrager

Permission is granted to reprint this article in its entirety, provided no reprints are sent in conjunction with unsolicited bulk email, provided no fee or other value is exchanged, provided no changes are made to the article, and provided the author's name, signature lines, and copyright line are printed with the article; except you may change the article's title.

This article shows you how to obtain the local time of any time zone you are interested in.

You configure the JavaScript for your preferred time zones. Thereafter, every time you load the page it will display the local time for each of your preconfigured zones.

Parts I and II of this series, now available at http://willmaster.com/a/15/pl.pl?jsccart1 and http://willmaster.com/a/15/pl.pl?jsccart2 show how to display the current time, with or without calendar date and day of week, in a form button or in a form field. It is highly recommended that you review Part II because the JavaScript code referenced therein is also used in this World Times article.

Configuring the JavaScript

Download the source code from the demo page at http://willmaster.com/a/15/pl.pl?jscc3

You'll notice that there are two JavaScript sections in the HEAD area.

The first is the JavaScript referenced in Part II of this series. In this first section, customize the time display you prefer at the line beginning with "DateTimeFormat = " (instructions are in the code). The demonstration, which is the same code as that which you're downloading, is formatted to display the day of the week and the time in both 12-hour and 24-hour formats.

The second section is the one which calculates world local times. It has several areas to customize, the first being the time zones you want to display on your page.

Customizing Time Zone Data

The demonstration contains time zones of the USA and also several cities around the world. For the listed time zones in the USA, I've included both Standard Time and Daylight Savings Time (for those that observe Daylight Savings Time). I made no effort to compile the Daylight Savings Time periods and clock adjustment amounts for any other countries, previous forays into the subject having demonstrated that it would be a formidable task to compile a definitive database for all regions of the world.

When you customize the time zones for your pages, you'll need to know the number of hours (or minutes) to adjust your target time zone. This would be plus or minus time zone 0, sometimes referred to as Universal Time (UT) or as Greenwich Mean Time (GMT).

If you do not know the amount of time to adjust for your target time zone, you can refer to http://___.com/ A search for "Time Zones" at your favorite search engine is likely to yield other references.

To customize a time zone listing, you'll provide a name or label for the time zone and the adjustment plus or minus UT. Each list item requires one JavaScript line. You can either change an existing time zone line or create a new one. Here are two examples:

AddTimeZoneToList("Lima - Peru",-5);
AddTimeZoneToList("Rome - Italy",1);

Hours can be specified as whole numbers or decimal. If you prefer to specify the adjustment in minutes, that's okay; any number over 12 or less than -12 is deemed to be minutes instead of hours.

The JavaScript has specific instructions within comments embedded in the code.

Customizing the Web Page Display

The demonstration displays the generated local times of the various times zones in a table with header text. Your display can be more or less elaborate.

The JavaScript has three places where the display can be customized:

What shall print before the time zone list, specified in the line beginning with
```
        var BeginListWith = 
```
What shall print for each time zone, specified in the line beginning with
```
        var ListItemDisplay = 
```
What shall print after the time zone list, specified in the line beginning with
```
        var EndListWith = 
```

The demonstration JavaScript shows you how to put the time zones into a table with header text. Modify it as you wish.

If you prefer to put the time zones in a bulleted list, you might have

var BeginListWith = "<ul>";
var ListItemDisplay = "<li>TIMEZONENAME: TIMEZONETIME</li>";
var EndListWith = "</ul>";

(When the list is generated, the placeholders TIMEZONENAME and TIMEZONETIME will be replaced with your time zone name and with the calculated current local time for that time zone, respectively.)

Should you want nothing printed before or after the list, simply remove all characters from between the quote marks. Example:

var BeginListWith = "";
var ListItemDisplay = "<p>TIMEZONENAME: TIMEZONETIME</p>";
var EndListWith = "";

Printing the Time Zone Information

At the spot on your web page where you want the time zone information printed, put this JavaScript:

<script type="text/javascript" language="JavaScript"><!--
DisplayListOfTimeZones();
//--></script>

How It Works

Near the top of the JavaScript section, you'll notice two arrays and a variable. These are array ItemName, which holds time zone names; array ItemTime, which holds time adjustments for the time zones, and variable HowMany, which holds the number of time zones the arrays contain.

When the page first loads, these variables are empty or hold the digit 0.

Each customizable line that specifies a time zone and adjustment calls the function AddTimeZoneToList(). This function:

Adds the time zone name to array ItemName.
Adds the time zone adjustment, in minutes, to array ItemTime, converting numbers representing hours if appropriate.
Increments HowMany by one.

That's all the JavaScript does when it is first loaded.

Once function DisplayListOfTimeZones() is called from the BODY of the web page, the time zones are printed. It uses the time zone and display formatting information you provided as well as functions in the JavaScript section referred to the Part II installment of this tutorial.

First, it prints whatever you specified as "BeginListWith ="

Then, DisplayListOfTimeZones() iterates over the time zone list, and with each item:

Makes a printing copy of whatever you specified as "ListItemDisplay ="
Replaces TIMEZONENAME in the printing copy with your time zone name.
Calculates the time zone's local time by adjusting the script's copy of the current time and using functions referred to in previous tutorial installments.
Replaces TIMEZONETIME in the printing copy with the time zone's local time.
Prints the printing copy of "ListItemDisplay ="

Last, it prints whatever you specified as "EndListWith ="

Uses

In addition to using this code simply because it's fun, you might use it to display your local time on your contact page next to your telephone number and office hours statement. Other uses might suggest themselves depending on the purpose or scope of your web site -- displaying the time zones of major cites in your customer service area, for example.

But most of all, have fun. That is what I have while developing these scripts and writing these tutorials, and I'm hoping some of that energy will reach you.

By: Will Bontrager

Copyright 2002 Bontrager Connection, LLC
http://willmaster.com/possibilities/
subscribe-possibilities@willmaster.com