Skip to content
Branch: master
Find file History
Latest commit a0d92d7 Oct 7, 2018
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
faces Switched to SVG graphics for scalability Jul 10, 2016
README.md Added in screenshot Oct 7, 2018
clock.js
clock_screenshot.png
clock_styles.css

README.md

Module: 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

  • Current time Current time

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
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
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
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<br> **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
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 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
timezone Specific a timezone to show clock.

Possible examples values: America/New_York, America/Santiago, Etc/GMT+10
Default value: none. See more informations about configuration value here
You can’t perform that action at this time.