World Clock¶

Provides a frame that displays the current time for multiple configurable locations from around the world using IANA timezone data.

A complete list of Timezones can be found here.

Admin Configuration¶

World Clock admin configuration options are stored in the Site Assets library in the hub site. The file will be called topbarconfig.json An example of an administrators configuration can be found below, an explanation of the properties, below that.

"worldClockData": {
"defaultClocks": [
    {
      "title": "London",
      "timezone": "Europe/London"
    },
    {
      "title": "France",
      "timezone": "Europe/Paris"
    },
    {
      "title": "New York",
      "timezone": "America/New_York"
    }
  ],
  "settings": {
    "dateFormat": "",
    "ampm": false,
    "showDayOfTheWeek": true
  }
 }

Default Clocks¶

Defines a clock to display by default in a user's world clock panel. Each clock definition must be fully completed with all properties listed below.

*note all properties are case sensitive.

Property	Type	Description
title	string	The title of a clock can contain an unlimited string of non-symbolic characters to represent the clock. The name of a relevant location, office building or city is the intended purpose.
timezone	string	The timezone expects an IANA formatted (see above) timezone location (see the examples above) The reason IANA is used is to preserve the daylight-saving policy for the respective location (see attached wiki link)

Settings¶

Optionally set the values for displaying certain aspects of the application. See below table for details.

*note all properties are case sensitive.

Property	Type	Description
dateFormat*	string	Format the date to your liking see this table for how to write a format.
ampm*	boolean	When true, will display the format of the time as AM/PM i.e 6:00pm. When false will use military (24 hour) time 18:00.
showDayOfTheWeek*	boolean	When true, show the day of the week with the date. When false do not show the day of the week. This does not overwrite the date format, rather it works together with it.

* Users can overwrite this setting.

User Configuration¶

Users can configure their clocks in two ways. The first by adding more clocks. The second by customizing the appearance of clocks.

Edit Clocks¶

Clocks can be added and edited by clicking the "edit" button at the bottom of the panel. When clicked a second panel will fly out from the right.

Add and Save

Enter information into the title and timezone columns (see above for information required) and click Add and Save. The panel will automatically populate with the clocks you have added.

Add More

More Clocks can be added by clicking the + on the right hand side of the bottom row.

Settings¶

The formatting for clocks can be adjusted be clicking the "Settings" button at the bottom of the panel. When clicked, a second panel will fly out from the left overwriting the visible panel.

By default, the settings will appear as described in the image below.

Add More

Setting Choose date and time format to "Yes" will reveal the remaining options. (While turned off, the administrator settings will be applied, see above for more information about Administrator settings).

Add More

See above for the value of each individual setting.