Datum / Uhrzeit als Heading Card in HA

Allgemein
1

Guten Morgen zusammen,

weiss jemand zufällig eine Lösung, wie ich die folgende Datum / Uhrzeit:

Siehe Foto

Als Heading Card in meinen Dashboard einstelle?
Screenshot 2025-02-24 095244

Danke euch für eure Hilfe :slight_smile:

2

Ich verstehe das so, dass du das Uhrenfeld über die gesamt Breite haben willst.
Dazu den Abschnitt auf volle Breite stellen und in der Uhren-Karte unter

type: custom:digital-clock

fügst du dann das hier ein:

grid_options:
  columns: full
3

Guten Morgen @Radiocarbonat

das teste ich mal, wie stelle ich aber den Abschnitt auf volle Breite?

4

Ich habe das mit der bubble-card und dem card_type: separator umgesetzt.

bubblecard
bubblecard514×507 14 KB

type: custom:bubble-card
card_type: separator
card_layout: large
icon: mdi:home-outline
sub_button:
  - show_background: false
    tap_action:
      action: none
styles: |

  .bubble-line {
    background: var(--primary-text-color);
    opacity: 0.1;
  }

  .bubble-sub-button-1 {
    font-size: 22px !important;
    flex-direction: row;
  }

  ${(() => {
    const now = new Date();
    const locale = hass.locale;
    const timeString = now.toLocaleTimeString(locale.language, {
      hour: 'numeric', minute: 'numeric', hour24: locale?.time_format === '24'
    });

    const formattedTime = timeString.replace(/([APM]{2})$/, '<span style="font-size: 12px; margin: 6px 4px 0">$1</span>');

    card.querySelector('.bubble-sub-button-1').innerHTML = formattedTime;
    card.querySelector('.bubble-name').innerText = now.toLocaleDateString(locale.language, {
      weekday: 'long', day: 'numeric', month: 'long'
    }).replace(/^./, str => str.toUpperCase());
  })()}
1 „Gefällt mir“
5

Danke dir, teste ich heute abend gleich!
So habe ich das als “quasi” Überschrift ganz oben mittig?