Wikia Developers Wiki


908pages on
this wiki
Add New Page
Talk34 Share

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


See also: Help:Including additional CSS and JS, Help:Advanced CSS and JS
  • For personal use, add the code snippet below to your global.js page (for use on all wikis) or your common.js page on your wiki (for use on a single wiki). Note that personal JS must be enabled for your account.
    type: 'script',
    articles: [
importArticles — Best Practices for installing JavaScript on Fandom
The importArticles statement is designed to combine multiple HTTP requests into a single data transfer, allowing multiple scripts to load and execute faster. If you've been installing several different scripts, your JavaScript file has probably accumulated unnecessary import statements. Click "Expand" to learn how to efficiently batch import scripts to speed up performance and make your code look cleaner. One other approach is by using the MediaWiki:ImportJS.
If your JavaScript file has several lines of code that say importScript, importScriptPage, or importArticles, you may be able to combine them! By batch importing a collection of scripts with a single import, your JavaScript code will load faster and look cleaner. Consider the example below. On the left is an example of what your JavaScript file might currently look like. On the right is how you could improve that code.
Multiple imports — messy and slow One import — clean and efficient
  type: 'script',
  article: 'u:dev:FloatingToc/code.js'
importScriptPage('page1.js', 'wikiname');
importScriptPage('page2.js', 'wikiname');
    type: 'script',
    articles: [
Note: In this example, pay close attention to the placement of commas and other punctuation. For people who aren't familiar with programming (and even those who are!), a common mistake when writing code is to accidentally delete, forget, or misplace critical symbols like commas or quotation marks. This can cause a syntax error that breaks the code. Carefully follow the convention shown here when using importArticles.
But there's much more to importArticles than just this! For more examples and advanced usage, see the help page at Help:Including additional JavaScript and CSS.


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)';

// Change the clock from UTC to CST (China Standard Time)
window.DisplayClockJS = {
    offset: 480,
    format: '%2H:%2M:%2S %d %b %Y (CST)',

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

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. Text "Click to purge page from the server's cache"
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
monofonts The default fonts for the clock. These should be monospace only, 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. 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 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 Appearance

The clock element has the id DisplayClockJS, so you can apply CSS rules to change the appearance:

/* Changes the color of the text */
a#DisplayClockJS { 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 %G or %g as you can get "52" on 1st January and "1" on 31st December under some circumstances so you need the year to make sense of it. A standard ISO 8601 Week date can be built using "%G-W%2V-%u".

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

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.