UTCClock adds a clock displaying the current time in the UTC timezone to the header on FandomDesktop. 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.
Installation
Configuration
Custom clock face text
// 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;February;March;April;May;June;July;August;September;October;November;December}m %Y (UTC)';
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 bottom toolbar 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)',
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=1 second) */
location: 'toolbar',
monofonts: 'Consolas, monospace', /* The font the clock uses by default */
offset: 480 /* Time offset from UTC in minutes - 480 changes the clock from UTC to CST (China Standard Time) */
};
importArticle({type:'script', article:'u:dev:MediaWiki:UTCClock/code.js'});
Option | Description | Type | Default |
---|---|---|---|
format
|
The format string as noted above. | Text | %2H:%2M:%2S %d %b %Y (UTC)
|
hoverText
|
The text the user sees when they hover their mouse over the link. If not configured, it will use the default text in the user's language, if a translation exists. | Text | "Click here to make the server purge and regenerate (update) this page." |
interval
|
How frequently the clock updates itself. 500ms (the default) is smooth, 1000ms is stuttery but cheaper on CPU. You can use bigger values if you want it to update slowly (5000=one update every 5 seconds). | Number | 500
|
location
|
Where the clock is put in the UI. There are two supported values: header and toolbar . header places the clock in the page header, toolbar places it in the bottom user toolbar. The toolbar option is only allowed on personal code. Using this configuration option sitewide would be a violation of the customization policy.
|
Text | header
|
monofonts
|
The default fonts for the clock. These should be monospace only as normal non-monospace fonts will cause the clock to get wider and narrower as the numbers change which is distracting and annoying. | Text | "Consolas, 'Lucida Console', monospace"
|
offset
|
The clock defaults to UTC. This can be changed by changing the UTC offset (in minutes). | Number | 0
|
You can use DisplayClock in your personal JavaScript if you want. It'll work fine since you won't get 2 clocks or any other glitches if the Wiki uses DisplayClock as well.
Code interface
You can modify the value of DisplayClockJS.format
while 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 as the live editing of the format string can be useful for experimenting with the options]
Changing the appearance
The clock element has the id DisplayClockJS
, so you can apply CSS rules to change the appearance:
/* When displaying in the header */
a#DisplayClockJS { color: red !important }
/* When displaying in the bottom toolbar / other skins */
li#DisplayClockJS > a { color: red !important }
/* Use a Monospace font */
#DisplayClockJS { font-family: 'Lucida Console', monospace }
Users can hide the clock by inserting the code below into their personal CSS:
#DisplayClockJS {
display: none;
}
Customising the clock
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
.
Specifier | Replaced with | Range | Example |
---|---|---|---|
Sunday, 2 September 2012 5:12:15 PM | |||
%%
|
'%' symbol. | % | |
%B
|
Long name of the month (in the wiki's language). | September | |
%b
|
Short name of the month (in the wiki's language). | Sep | |
%d
|
Day of the month. | 1-31 | 2 |
%G
|
ISO 8601 week date's year. This should only be used with %V .
|
2012 | |
%g
|
ISO 8601 week date short year. | 0-99 | 12 |
%H
|
Hour in 24 hour time. | 0-23 | 17 |
%I
|
Hour in 12 hour time. | 1-12 | 5 |
%j
|
Day of the year. | 1-366 | 246 |
%m
|
Month number. | 1-12 | 9 |
%M
|
Minutes. | 0-59 | 12 |
%p
|
'AM' (Hours < 12) or 'PM' (Hours >= 12). | PM | |
%S
|
Seconds. | 0-59 | 15 |
%u
|
Day of the week, Monday is the first day. | 1-7 | 7 |
%U
|
Week of the year, Sunday is the first day of week 1. | 0-53 | 36 |
%V
|
ISO 8601 week date, Week 1 is the first week with a Thursday in it.
This flag needs to be used in conjunction with |
1-53 | 35 |
%w
|
Day of the week, Sunday is the first day. | 1-7 | 1 |
%W
|
Week of the year, Monday is the first day of week 1. | 0-53 | 35 |
%X
|
Arbitrary time text, formatted as per the user's (browser) language. | 5:12:15 PM | |
%x
|
Arbitrary date text, formatted as per the user's (browser) language. | Sunday, 2 September 2012 | |
%y
|
Last 2 digits of the year. | 0-99 | 12 |
%Y
|
The year. | 2012 |