MM2 Clock Card by @shbatm

Digital/Analog Clock Card for Home Assistant Lovelace based on the MagicMirror2 Clock

This is a direct port of the MagicMirror2 Clock to TypeScript and the Home Assistant card. Credit goes to the original contributers to that project and module.

Screenshot

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

Installation

Download the 'download.zip' folder from the latest release and store it in your configuration/www folder.

Configure Lovelace to load the card:

resources:
  - url: /local/mm2-clock-card.js
    type: module