TZclock is a JavaScript application that displays timezone-adjusted clocks.
- Supports any timezone, not just the user's or UTC
- Supports multiple clocks per page
- Supports optional daylight saving time
It produces, with the basic styling provided, a clock that looks like:
Installation
Usage
This application looks for HTML elements [usually <div>, but they could be <span> or (rendered) <td>] with the class js-tzclock on the page. If it doesn't find any, it exits. If it finds any, it runs.
Configuration
Configuration of each clock is included on the wiki page inside each element with class js-tzclock. The syntax of the configuration is adapted from tzdata.
- Optional comments begin with
#(pound/octothorpe) - Spaces in strings must use
_(underscore)- Underscore is replaced with a space when running
+(plus) is optional for positive time offsets- Basic zone definition must come before any rules
- NAME is location name displayed in clock (any string)
- UTCOFF is offset from UTC (
[+|-]hh[:mm]) - ZONE is the timezone name (any string)
- Rules for daylight saving, if there are any, must be in chronological order
- IN is the month name for a rule (3-letter English abbreviation)
- ON is the date (numerical
date,lastDay, orDay>=date)- If used,
Dayis the 3-letter English abbreviation
- If used,
- AT is the standard time at which the rule takes effect (24-hour)
- SAVE is the amount of time added to standard time (
hh[:mm]) - LETTERS is the zone name when the rule is in effect (any string)
Simple mode
By setting window.TZclockSimpleFormat to true, you can make the clock display a simpler version of the time.
Styling
The stylesheet TZclock.css provides basic styling, facilitating centering the clock text inside the js-tzclock element and underlining the location name. There are three additional classes available for further styling the clocks. Additional styling, if any, should be done in your site's MediaWiki:Common.css.
js-tzclock-wrap- Child of
js-tzclock, wraps both the location name and the time js-tzclock-lctn- Child of
js-tzclock-wrap, applies to the location name only js-tzclock-time- Child of
js-tzclock-wrap, applies to the time only
Example clock configurations
- New York
<div class="js-tzclock"><nowiki>
# NAME UTCOFF ZONE
New_York -5:00 EST
# IN ON AT SAVE LETTERS
Mar Sun>=8 2:00 1 EDT # 2nd Sunday in March
Nov Sun>=1 2:00 0 EST # 1st Sunday in November
</nowiki></div>
- London
<div class="js-tzclock"><nowiki>
# NAME UTCOFF ZONE
London 0:00 GMT
# IN ON AT SAVE LETTERS
Mar lastSun 1:00 1 BST # last Sunday in March
Oct lastSun 1:00 0 GMT # last Sunday in October
</nowiki></div>
- Tokyo
<div class="js-tzclock"><nowiki>
# NAME UTCOFF ZONE
Tokyo 9:00 JST # no daylight time in Japan
</nowiki></div>
- Adelaide
<div class="js-tzclock"><nowiki>
# NAME UTCOFF ZONE
Adelaide +9:30 CST
# IN ON AT SAVE LETTERS
Apr Sun>=1 2:00 0 CST # 1st Sunday in April
Oct Sun>=1 2:00 1 CDT # 1st Sunday in October
</nowiki></div>
<nowiki> may not be essential for all clock configurations, but it is recommended to stop MediaWiki from interfering with them.