This module is derived from default MagicMirror module 'clock' and modified. Thanks to michaelteeuw. This module displays the current times of several locations.
1. Execute the following commands to install the module:
cd ~/MagicMirror/modules # navigate to module folder
git clone https://github.com/eouia/worldclock # clone this repository
2. Then, add the following into the modules
section of your config/config.js
file:
{
module: 'worldclock',
position: 'top_left', // This can be any of the regions, best results in top_left or top_right regions
config: {
// See 'Configuration options' for more information.
timeFormat: 'hh:mm A', //defined in moment.js format()
style: 'top', //predefined 4 styles; 'top', 'left','right','bottom'
offsetTimezone: null, // Or you can set `Europe/Berlin` to get timegap difference from this timezone. `null` will be UTC timegap.
clocks: [
{
title: "Home",
},
{
title: "HOLLYWOOD", // Too long title could cause ugly text align.
timezone: "America/Los_Angeles", //When omitted, Localtime will be displayed. It might be not your purporse, I bet.
flag: "us",
},
{
timezone: "Asia/Seoul",
},
]
}
},
Of course, you should change the configuration values for your purpose.
The following properties can be configured:
Option | Description |
---|---|
timeFormat |
How to format the time of worldclocks Possible example values: any formatter available in moment.js (eg. HH:mm A , hmmss ) Default value: LT (It could be displayed like '12:34 AM') |
style |
How to display with defined style. Possible values: top , bottom , left , right If you select top, the time will be displayed over the timezone title or UTC gap comment. You can customize this style by modifying CSS with style selector (style-top, style-bottom, style-left, style-right). See the clock_style.css Default value: top |
offsetTimezone |
null or Europe/Berlin If you set null , timegap from UTC will be shown. If you set TIMEZONE like Europe/Berlin , it will show timegap from that timezone. |
clocks |
Array of clocks |
Option | Description |
---|---|
title |
The clock title of each timezone. if it is omitted or null, the timezone value will be displayed instead. Example: My Home , The Golden Gate , Hong Kong Office or null |
timezone |
Specify a timezone to show current local time. Possible examples values: America/New_York , Europe/Berlin , Etc/GMT+10 See more informations about configuration value here Default value: null If this value is null or omitted, current local timezone value (defined in config.js) will be used. I don't recommend it because the purpose of this module is showing another local time. All available timzone codes are here |
flag |
ISO 3166-1-alpha-2 code for country. |
I Prefer modifying looks by CSS.
Every clock has 'world-[seq.]' as it's classname. So you can modify color of specific clock(eg. 'world-1' means second clock)
And if you set the style
value in configuration, the classname 'style-[style config value]' will be assigned to top level container block. (eg. style-top
)
- 2019-02-24
timezoneOffset
is added.
- 2017-08-25
- supports
MMM-TelegramBot
(https://github.com/eouia/MMM-TelegramBot) - command
/worldclock
is added
- supports
- 2017-08-10
- Country flags are supported.
- HTML/CSS Structures are refined.
Thanks for everyone.
@eouia