Lovelace: Clock Card

Share your Projects! Dashboards & Frontend
61

Mine works on all connections.

62

Not being able to make it work.

lovelace resources: /local/custom-lovelace/clockwork-card.js

under www directory, created the folder custom-lovelace and have clockwork-card.js on it.

Custom element doesn't exist: clockwork-card.
entity: sensor.date_time_iso
locale: en-GB
other_time:
  - America/New_York
  - Australia/Sydney
  - Australia/Brisbane
style: |
  .other_clocks { display: none; }
  .time { text-align: center; }
type: custom:clockwork-card

but no way to make it work.

Any hint?

63

I have my js card in my www folder and works great but I had issues when I first tried setting up this clock
image

64

i’ve tried all - no luck - i give up.

65

Any ones world times disappeared on the right, my main time is still there but central now ? This happened after a reboot on 2021.7.3

Nothing changed

66

This works awesome on HA core version 2021.6.6 In case it helps anyone…

I installed this through HACS clockwork-card

then added this in lovelace: Edit Dashboard → Add Card → scroll to the bottom “manual”

entity: sensor.date_time_iso
locale: en-GB
other_time:
  - Asia/Kolkata
  - America/Vancouver
style: |
  .other_clocks { display: none; }
  .time { text-align: center; }
type: custom:clockwork-card

I also added this in my configuration YAML

sensor:    
    platform: time_date
    display_options:
      - 'time'
      - 'date'
      - 'date_time'
      - 'date_time_utc'
      - 'date_time_iso'
      - 'time_date'
      - 'time_utc'
      - 'beat'

screenshot.322

67

You really should update your itallation… :wink:

68

Nice catch fixed it is actually 2021.6.6 Seriously I need to focus more :slight_smile:

1 Like
69

@Snash so does that fix work in 2021.8.* ?

Mine not worked for a couple of months now

1 Like
70

What fix?

I haven’t changed anything on mine and it works fine an 2021.8.

71

@finity Just trying to see if anyone has actually got it working as @Snash got his working in 2021.1.1 but mine not worked from 2021.6 I think. Its still not working in 2021.8 and Ive changed nothing and I havent seen any breaking changes. My code is same as above.

Cheers

Martyn

72

@dicko My version is core-2021.6.6 My apologies I got it wrong but have since fixed my post

73

if you upgrade, it may just change as mine is like this and I havent changed anything and I have 6 out of the 8 time options you have.

image

74

Can it display seconds?

75

In the github instructions, what does this mean?

"Reference accordingly
resource:

  • url: /local/custom-lovelace/clockwork-card.js
    type: js"

Where does one “reference” this? In the configuration.yaml, or what?

76

I just realized there isn’t any (that I could find) instructions on how to add custom cards.

If you install the custom cards thru HACS it will automatically put the reference to the .js file in the right place.

if you install it manually and are using the Lovelace UI editor you need to add it to the resources tab at configuration->Lovelace Dashboards.

if you install it manually and don’t use the UI editor then you need to add the resource to the “lovelace:” section of the configuration.yaml file:

lovelace:
  mode: yaml
  resources:
    - url: /local/lovelace/clockwork-card.js
      type: module
    - url: /local/lovelace/tiles-card.js
      type: module
    - url: /local/lovelace/timetable-card.js?v=1
      type: module
etc.
77

Ive not had any other countries work on this for about 6 months.

Has anyone else ?

It just shows the current time for my timezone

78

This custom card has worked well for me for many months and on all clients (Safari, dedicated Android 9 tablets, and the HA iOS app). Today I’ve been trying to set up an Android 10 tablet and all it shows me is the time in UTC for every timezone. It’s the same in Chrome and Fully Kiosk Browser.

Only this one Android 10 tablet is wrong. Its timezone is correct. I’ve tried unsetting and resetting the timezone, clearing the browser cache, cookies, etc. and rebooting.

My config is very simple (and as mentioned works everywhere except this new tablet):

type: custom:clockwork-card
entity: sensor.date_time_iso
other_time:
  - Europe/London
  - America/New_York
  - Asia/Tokyo

Maybe I’m missing something that only the newer Chromium cares about?

79

This is my code and it wasnt changed. It just stopped working. I use Chrome and Edge only. So you could be right.

entity: sensor.date_time_iso
locale: en-GB
other_time:
  - America/New_York
  - Australia/Sydney
  - Australia/Brisbane
style: |
  .other_clocks { display: none; }
  .time { text-align: center; }
type: custom:clockwork-card
80

I left my new Android 10 tablet running and out of the blue the time information is now correct. I didn’t make any changes.

Weird, but at least it works now.