TZclock

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:
# 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
== ==
== ==
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 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
<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>
; London
<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>
; Tokyo
<nowiki>
# NAME UTCOFF ZONE
Tokyo 9:00 JST # no daylight time in Japan
</nowiki>
; Adelaide
<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>
<nowiki> may not be essential for all clock configurations, but it is recommended to stop MediaWiki from interfering with them.