• 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, or Day>=date)

    If used, Day is the 3-letter English abbreviation

  • 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.