Clock

The clock module is one of the default modules of the MagicMirror. This module displays the current date and time. The information will be updated realtime.

Screenshot

Using the module

To use this module, add it to the modules array in the config/config.js file:

modules: [
  {
    module: "clock",
    position: "top_left", // This can be any of the regions.
    config: {
      // The config property is optional.
      // See 'Configuration options' for more information.
    },
  },
];

Configuration options

The following properties can be configured:

Option	Description
`timeFormat`	Use 12 or 24 hour format. Possible values: `12` or `24` Default value: uses value of config.timeFormat
`timezone`	Specific a timezone to show clock. Possible examples values: `America/New_York`, `America/Santiago`, `Etc/GMT+10` Default value: `none`. See more information about configuration value here
`displaySeconds`	Display seconds. Possible values: `true` or `false` Default value: `true`
`showPeriod`	Show the period (am/pm) with 12 hour format. Possible values: `true` or `false` Default value: `true`
`showPeriodUpper`	Show the period (AM/PM) with 12 hour format as uppercase. Possible values: `true` or `false` Default value: `false`
`clockBold`	Remove the colon and bold the minutes to make a more modern look. Possible values: `true` or `false` Default value: `false`
`showTime`	Turn off or on the Time section. Possible values: `true` or `false` Default value: `true`
`showDate`	Turn off or on the Date section. Possible values: `true` or `false` Default value: `true`
`showWeek`	Turn off or on the Week section. Possible values: `true` or `false` Default value: `false`
`showSunTimes`	Turn off or on the section showing sunrise and sunset times (digital clock only). Possible values: `true` or `false` Default value: `false`
`showMoonTimes`	Turn off or on the section showing moonrise and moonset times (digital clock only). Optionally display an image of lunar phase and lit percentage of the moon Possible values: `times`, `percent`, `phase`, `both` or `false` (disable) Default value: `false`
`lat`	Latitude for sun/moon calculations. Default value: `47.630539`
`lon`	Longitude for sun/moon calculations. Default value: `-122.344147`
`dateFormat`	Configure the date format as you like. Possible values: Docs Default value: `"dddd, LL"`
`displayType`	Display a digital clock, analog clock, or both together. Possible values: `digital`, `analog`, or `both` Default value: `digital`
`analogSize`	Specific to the analog clock. Defines how large the analog display is. Possible values: `A positive number of pixels` Default value: `200px`
`analogFace`	Specific to the analog clock. Specifies which clock face to use. Possible values: `simple` for a simple border, `none` for no face or border, or `face-###` (where ### is currently a value between 001 and 012, inclusive) Default value: `simple`
`secondsColor`	Specific to the analog clock. Specifies what color to make the 'seconds' hand. Possible values: `any HTML RGB Color` Default value: `#888888` // starting in version 2.31.0 this property is DEPRECATED, and WILL be removed in some future version. Use CSS instead. Class "clock-second-digital" for digital clock, "clock-second" for analog clock.
`analogPlacement`	Specific to the analog clock. (requires displayType set to `'both'`) Specifies where the analog clock is in relation to the digital clock Possible values: `top`, `right`, `bottom`, or `left` Default value: `bottom`
`analogShowDate`	Obsolete, can be replaced with analogPlacement and showTime. Specific to the analog clock. If the clock is used as a separate module and set to analog only, this configures whether a date is also displayed with the clock. Possible values: `false`, `top`, or `bottom` Default value: `top`
`sendNotifications`	Enable notifications for elapsed time. Used to be always done send prio to v2.23 Possible values: `true`, or `false` Default value: `false`

Notifications

The clock makes use of the built-in Notification Mechanism to relay notifications to all modules.

Current notifications are:

Notification	Description
`CLOCK_SECOND`	A second has elapsed. Parameter: second value
`CLOCK_MINUTE`	A minute has elapsed Parameter: minute value

Clock

Screenshot

Using the module

Configuration options

Notifications

styles for clock hands (analog) and text (digital) can be found in clock_style.css, use css/custom.css to override