DisplayClock
Type	JavaScript
Description	Adds a UTC clock to every page.
Scope	Site-wide use or personal
Author(s)	Lunarity
Updated	2012-12-08
Code	/code.js
Skins	Monobook Oasis
Languages	Any (Gregorian Calendar, Hindu-Arabic/European Digits)

Adds a clock displaying the current time in the UTC time-zone to the header on both Oasis and Monobook. This is helpful in figuring out how long ago comments were posted on talk pages and forums since the user's signature shows the time in UTC when it was posted.

InstallationEdit

Default appearance (English):

importArticle({type:'script', article:'w:c:dev:DisplayClock/code.js'});

If you have an existing importArticles statement, then just add a row to it:

importArticles({type:'script', articles: [
    // ...
    'w:c:dev:DisplayClock/code.js',
    // ...
]);

Custom Clock Face TextEdit

// Display 12 hour time followed by day, month (English, full name)
// and year with "(UTC)" at the end
window.DisplayClockJS = '%2I:%2M:%2S %p %2d %{January;Febuary;March;April;May;June;July;August;September;October;November;December}m %Y (UTC)';
importArticle({type:'script', article:'w:c:dev:DisplayClock/code.js'});

This last syntax is the most powerful but that also makes it the most complicated. See the Instructions here.

It's also possible to position the clock inside the GlobalNavigation strip and configure various other features if you want to do that:

// Display 12 hour time followed by day, month (English, full name)
// and year with "(UTC)" at the end
window.DisplayClockJS = {
    format: '%2I:%2M:%2S %p %2d %{January;Febuary;March;April;May;June;July;August;September;October;November;December}m %Y (UTC)',
    location: 'global',
    hoverText: 'This is what the user sees when they hover their mouse over the link',
    interval: 500, /* How often the timer updates in milliseconds (1000=1second) */
    monofonts: 'Consolas, monospace' /* The font the clock uses by default */
};
importArticle({type:'script', article:'w:c:dev:DisplayClock/code.js'});

Code interfaceEdit

You can modify the value of DisplayClockJS.format whilst the clock is running which will instantly change the text it displays for you. There is also a kill function that will stop the clock and remove it from the UI for you: DisplayClockJS.kill(). [You can access these via your JavaScript console if you need them for some reason, the live editing of the format string can be useful for experimenting with the options]

Changing the AppearanceEdit

The clock element has the id

1. DisplayClockJS, you can apply CSS rules to change the appearance:

/* When displaying in the header */
a#DisplayClockJS { color: red !important }
/* When displaying in the Global Navigation / Monobook */
li#DisplayClockJS > a { color: red !important }
/* Use a Monospace font */
#DisplayClockJS { font-family: 'Lucida Console', monospace }

Customising the ClockEdit

The clock syntax is based on the C/C++ strftime function but slightly different. Basically, window.DisplayClockJS takes an arbitrary block of text that will appear unchanged on the clock except for the magic % symbols. Each %symbol has the following form:

Type 1:  % <Minimum Length> <Letter>
Example: %d = Current day of the month, no minimum length (e.g. 2)
         %2d = Current day of the month, force it to always have at least 2 characters (e.g. 02)
Type 2:  % {<Semicolon list>} <Letter>
Example: %{Sunday;Monday;Tuesday;Wednesday;Thursday;Friday;Saturday}w = Displays English day of the week
Type 3:  %% = Produces a single % symbol

The last item in a list will be used for everything greater than the length of the list. If there are only 6 entries in a day of the week list then the last one (6th) will be used for both of the last 2 days of the week.

Unlike strftime there are no default minimum lengths. If you don't supply your own width number then it will always be only as wide as necessary, if you want the day of the month number to always be 2 characters wide then you must ask for that specifically using %2d instead of just %d.