tenpinmark/worldclock

This is my first Node.JS module for MagicMirror^2. This module could display several world-wide local times.

Module: worldclock

This module is derived from default MagicMirror module 'clock' and modified. Thanks to michaelteeuw. This module displays the current times of several locations.

Installation

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.

Configuration options

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

clocks configuration options:

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.

Style Customizing

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)

Updated

• 2019-02-24
  • timezoneOffset is added.
• 2017-08-25
  • supports MMM-TelegramBot (https://github.com/eouia/MMM-TelegramBot)
  • command /worldclock is added
• 2017-08-10
  • Country flags are supported.
  • HTML/CSS Structures are refined.

Thanks for everyone.

@eouia