WTH there is no easy way to display a clock in the header

Month of "What the heck?!"
,
1

The display of time seems a very useful and relevant information for any dashboard. Displaying the current time by adding a simple clock in the header of a dashboard is no simple endeavor (see Replacing the three dots in the header with a clock ).

Why can’t we be able to configure the display of a clock through configuration of home assistant out of the box? It would be a great help.

2

Have you checked this one?

3

On what platforma would that be useful? On mobile devices the clock is in the OS header, in Windows it is in the bottom right. They are there so every application won’t need to.

4

Thank you for the hint @sri4iot. I did and this is a card. It takes a lot of space and cannot be added to the header.

5

Agreed for mobile phones or desktop/laptop usage.

This would be useful for any form of locked devices used in full-screen to only host home assistant. For example wall-mounted tablets would benefit from this.

6

I am not sure about your requirement. Using card-mod I have reduced the font and color. It works well for me. I will share the YAML and the screenshot later today.

7 
type: custom:digital-clock
card_mod:
  style: |
    span.first-line 
    {
      font-size: 2em;
      margin-bottom:5px;
      color: GreenYellow
    }
    span.second-line 
    {
      font-size: 1em;
      margin-bottom:1px;
      color: LawnGreen
    }          
timeFormat:
  hour: 2-digit
  minute: 2-digit
  second: 2-digit
dateFormat:
  day: 2-digit
  month: long
  year: numeric
  weekday: long

Clock_HA

8

The issue with a clock is that HA is mainly using backend functions, which means a clock would only update when the homepage is updated.
It will seem lagging with seconds shown, but can somewhat work with only minutes as the lowest value, al though it might have some erratic jumps at times where it willaybe take almost 2 minutes for the minute counter to increase 1, then only a few seconds for it to increase again.

9

Thanks a lot @sri4iot for taking the time to share your code! It looks great.

What I really meant is having the clock displayed in the header menu, not as a card. If you check the first link I provided, you will see several options to get this implemented. It works but feels like a crude hack that potentially needs to be adjusted from release to release.

1 Like
10

Absolutely! For this reason, my currently working implementation is leveraging a bit of JavaScript magic to do this.