Timezoneconverter

This is the documentation for the tool TimeZoneConverter. Due to the 2020 global health crisis, more Wikimedia events happen online. Since the Wikimedia community is global, this means that people participate from different time zones. To make it easier for the participants, this tool allows displaying times and dates in the time zone of the user. Further, it also converts UTC time into the local time of the user, thus improving the convenience of working within this multilingual community.

Installation

edit

To see dates in your time zone add this to your common.js:

mw.loader.load("https://meta.wikimedia.org/w/index.php?title=User:Michael Schönitzer (WMDE)/timezoneconverter.js&action=raw&bcache=1&maxage=86400&ctype=text/javascript");

Usage on a page

edit

If you want to use timezoneconverter at you wikipage, you have two options. You can also mix them – for example use the templates and only fall back to the manual form if needed.

With Templates (easier)

edit
  1. Add the following to activate timezoneconverter:
    {{timezoneconverter}}
  2. Add your events with one of the following ways:
    {{TZC event|2020|06|01|15|48}}
    {{TZC event|year=2020|month=06|day=01|hour=15|minute=48}}
    • Optional add an option format:
    timeonly to get only the time without date
    dateonly to get only the date without time
    daytime to get the day of the week and time – needs additional parameter weekday
    dtime to get the abbreviated day of the week and time – needs additional parameter weekday
    houronly to get only the hour

Manual (more flexible)

edit
  1. Add the following elements:
    <div id="tzc-timezoneconverter"> <div id="tzc-disabled"> Text to display if Tool is off </div> <div id="tzc-enabled" style="display:none;"> Text for when the tool is used <span class="tzc-timezonename"></span> (UTC<span class="tzc-timezoneoffset"></span>) <span class="tzc-locale"></span> </div> </div>
    • Can be of any HTML-type (<div>, <span>, <p>…)
    • This will enable the script on the given site
    • The text in the element tzc-disabled will be shown to people that don't use the tool,
    • tzc-timezonename will be filled with the name of the time zone
    • tzc-timezoneoffset will be filled with the offset compared to UTC
    • tzc-locale will be filled with the name of the locale
  2. Add your events like the following
    <time datetime="2020-06-01T14:48:00.000+00:00">2020-06-01 14:48</time>
    • The datetime contains the date that will be used.
    • The datetime has to be in extended ISO 8601 format as above! Other formats will work in some browsers but be incorrect on others!
    • The content of the element (div) is the text shown to people who don't use the tool – it is ignored by the tool and can therefore be of any form.
    • Optional: Add class tzc-timeonly to get only the time without date
    • Optional: Add class tzc-dateonly to get only the date without time
    • Optional: Add class tzc-daytime to get the day of the week and time
    • Optional: Add class tzc-dtime to get the abbreviated day of the week and time
    • Optional: Add class tzc-houronly to get only the hour
  3. Alternatively you can add events like this:
    <div class="tzc-event" data-datetime="2020-06-01T14:48:00.000+00:00">2020-06-01 14:48</div>
    • Can be of any HTML-type (<div>, <span>, <p>…)
    • The class tzc-event tells the tool that this is a time that should be converted.
    • Use data-datetime instead of datetime.
    • Every thing else works as in 2.
  4. Alternatively you can add events with the template Event.

Example

edit
All times on this page are displayed in UTC. Enable the TimeZoneConverter userscript to see them in your local timezone.
Code Displayed Option
{{TZC event|2020|06|01|15|48}} -
{{TZC event|year=2020|month=06|day=01|hour=15|minute=48}} -
<time datetime="2020-06-01T14:48:00.000+00:00">2020-06-01 14:48</time> -
<div class="tzc-event" data-datetime="2020-06-01T14:48:00.000+00:00">2020-06-01 14:48</div>
2020-06-01 14:48
-
{{TZC event|2020|06|01|15|48|format=dateonly}} dateonly
{{TZC event|2020|06|01|15|48|format=timeonly}} timeonly
{{TZC event|2020|06|01|15|48|format=daytime|weekday=Monday}} daytime
{{TZC event|2020|06|01|15|48|format=dtime|weekday=Mo}} dtime
{{TZC event|2020|06|01|15|48|format=houronly}} houronly
{{TZC event|2020|06|01|15|48|showtimezone=name}}  (UTC) -
<span class="tzc-timezonename">UTC</span> UTC -

About

edit

This tool was proposed by User:Lea Lacroix (WMDE) and initially written by Michael Schönitzer (WMDE). Feedback and improvements are welcome.

This tool consists of:

  • {{timezoneconverter}} – template to easily activate the tool on a wiki page.
    This template is translatable. Help translating it to more languages to make the experience smoother for people of other languages.
  • {{TZC event}} – template to easily add times at any places on a page
  • The Javascript tool itself