Lovelace: Clock Card

Thanks. Removing the entity config works on the Safari browser. On the Chromium browser it throws an error missing an entity.


I just released v0.1.2 please check it out. I messed with the font css.

If its not that the only other thing it might be is the css variables used messing up because of a theme.

Hmm it should work on both. Works on chrome on my end.
Have you refreshed your cache? might still have the old script loading.

Please update to 0.1.2 and refresh the cache.

I’m totally +1’ing myself on this. This is EXACTLY what I’ve been looking for for … quite some time. I cannot believe there’s isn’t such a card by default in HA.


PS: And I love you include additional timezones. We like to see a few ourselves.

I seem to recall a “known” problem with iOS app and Clocks, but I can’t find it right now. A quick summary:

Anybody know the bug off hand? It’s shown a -7 time, which is interesting and I’m in Mountain, that’s -7 UTC. But the clock is showing -7 Mountain (which doesn’t really exist).

Got this installed and it’s working great but I would like to change the Date format under the main clock to: Day, Month, Date instead of the default Day, Date, Month. I’ve seen several examples in the thread and figured it would be an easy javascript change but I’ve had no luck getting it accomplished? Any help?? Thanks!!

Hi I am having trouble getting lovelace to recognize this card.

This is what I have in ui-lovelace

  - url: /local/custom-lovelace/clockwork-card.js
    type: js
title: Home

I have saved clockworkd-card.js to the folder /home-assistant/www/custom-lovelace. and I can confirm that if I browse to myIP:8123/local/custom-lovelace/clockwork-card.js I can see the actual code of the clockwork-card.

But when I am adding the card in lovelace, it says the custom component does not exist.

I believed I have done all that is required for the code to work but it is not. Very puzzled here.

Any help please?

Did you do a restart of HA and clear your browser cache?

Oh, and I just noticed…

What version of HA are you on?

if it is the latest version you don’t have the “resources:” section in the right spot.

It has been moved to the “lovelace:” section of configuration.yaml since the last version.

Hi, thanks for helping!

I am using Home Assistant 0.108.3

Ok. I have physically removed the resources section from ui-lovelace.yaml and added this via the lovelace dashboards. I went to Resources tab, click the “+” button and add

The strange thing is that once I do that, the entire home screen on home assistant just disappear. and the only way I can get all the entities and cards back is to remove the clockcard from the lovelace resource gui.

What am I missing?

Are you using lovelace in yaml mode or UI mode?

in UI mode. I go to configuration -> Lovelace Dashboards -> Resources -> “+” button

Then I guess I’m not sure why you are discussing using the ui-lovelace.yaml file since that is only used in yaml mode.

sorry my bad. I am just following the instructions as per the plugins.

Any idea what I could do to get this plugin working?

how did you download the .js file from github? did you use the download zip or copy it manually using the “raw file” link? Or some other way?

I downloaded the zip, extracted it and copy it to the www folder of home assistant.

I’m not really sure what the problem might be then.

I just created a test version of HA and installed the card via the method you used (using the UI method, I normally use yaml mode in my regular HA) and it doesn’t work for me either. Maybe the card has a problem on V108.

It works fine on my v107 production HA running in yaml mode and I used the same config as I have there in the test version.

You sir are a legend. I am really grateful for you testing this out and confirming that this doesn’t work for you on 0.108 as well so I know this is not just me having the problem.

Hopefully the code will get updated soon. It is a nice clock card that I would like for my home assistant.

I thank you once again.

1 Like

A few requests because i’m a greedy jerk and don’t know how to code lol In order of importance…

  1. Way to have extra timezones removed optionally by not listing any locales
  2. Have time/date centered optionally
  3. Get this into hacs for installation

Wanting to do the same, I’ve achieved it with card-mod and the following card YAML:

entity: sensor.date_time_iso
locale: pl-PL
  - America/New_York
  - Australia/Sydney
  - America/Los_Angeles
style: |
  .other_clocks { display: none; }
  .time { text-align: center; }
type: 'custom:clockwork-card'

The zones are still there, just hidden by CSS.

You’re godly!