So baust du eigene Countdown Cards in Home Assistant – Visualisiere deine Timer!

Countdown Cards im Home Assistant: Eigene Ereignisse visualisieren

Mit Countdown Cards kannst du bevorstehende Ereignisse wie Urlaub, Weihnachten oder Geburtstage direkt auf deinem Home Assistant Dashboard visualisieren. So hast du wichtige Termine immer im Blick – inklusive einer dynamischen Anzeige, wie viele Tage noch verbleiben oder ob das Ereignis schon vorbei ist. Das Ganze lässt sich flexibel und ohne Programmierkenntnisse über die Benutzeroberfläche konfigurieren.

Warum eigene Countdown Cards sinnvoll sind

Viele Nutzer möchten nicht nur wissen, wann ein Ereignis stattfindet, sondern auch, wann es endlich soweit ist. Ein Countdown sorgt hier für den nötigen Überblick – etwa für den nächsten Urlaub, den Geburtstag eines Familienmitglieds oder andere persönliche Meilensteine. Durch die Integration in Home Assistant kannst du die Daten jederzeit anpassen und auf jedem Endgerät anzeigen lassen.

Eingabe-Datum/Uhrzeit-Hilfen anlegen

Damit du die Ereignisse flexibel verwalten kannst, legst du zuerst sogenannte input_datetime-Helfer an. Diese dienen als Speicher für die jeweiligen Termine. Du kannst sie entweder über die grafische Oberfläche unter Einstellungen > Helfer > Helfer hinzufügen > Datum/Uhrzeit anlegen oder direkt in YAML definieren:

1input_datetime:
2  vacation_start:
3    name: Vacation Start
4    has_date: true
5    has_time: false
6
7  christmas:
8    name: Christmas
9    has_date: true
10    has_time: false
11
12  birthday:
13    name: Birthday
14    has_date: true
15    has_time: false

Jeder dieser Helfer speichert ein Datum. Über die Oberfläche kannst du die Werte jederzeit anpassen, ohne YAML bearbeiten zu müssen.

Vorlagensensoren: Countdown als Text ausgeben

Damit Home Assistant den Countdown berechnen und als verständlichen Text anzeigen kann, brauchst du Template-Sensoren. Diese Sensoren vergleichen das aktuelle Datum mit dem eingestellten Termin und geben je nach verbleibender Zeit eine passende Nachricht aus. Das ist besonders nützlich, um auf dem Dashboard nicht nur eine Zahl, sondern eine verständliche Information zu sehen.

1template:
2  - sensor:
3      - name: "Vacation Countdown Text"
4        state: >
5          {% set date = states('input_datetime.vacation_start') %}
6          {% if date != 'unknown' %}
7            {% set days = (as_datetime(date).date() - now().date()).days %}
8            {% if days == 0 %}
9              🎉 Today is your vacation!
10            {% elif days == 1 %}
11              ⏳ Vacation starts tomorrow!
12            {% elif days > 1 %}
13              {{ days }} days left until vacation
14            {% else %}
15              ✅ Vacation started {{ days | abs }} days ago
16            {% endif %}
17          {% else %}
18            Date not set
19          {% endif %}
20
21      - name: "Christmas Countdown Text"
22        state: >
23          {% set date = states('input_datetime.christmas') %}
24          {% if date != 'unknown' %}
25            {% set days = (as_datetime(date).date() - now().date()).days %}
26            {% if days == 0 %}
27              🎄 It's Christmas today!
28            {% elif days == 1 %}
29              🎅 Christmas is tomorrow!
30            {% elif days > 1 %}
31              {{ days }} days left until Christmas
32            {% else %}
33              🎁 Christmas was {{ days | abs }} days ago
34            {% endif %}
35          {% else %}
36            Date not set
37          {% endif %}
38
39      - name: "Birthday Countdown Text"
40        state: >
41          {% set date = states('input_datetime.birthday') %}
42          {% if date != 'unknown' %}
43            {% set days = (as_datetime(date).date() - now().date()).days %}
44            {% if days == 0 %}
45              🎉 Today is your birthday!
46            {% elif days == 1 %}
47              🎈 Your birthday is tomorrow!
48            {% elif days > 1 %}
49              {{ days }} days left until your birthday
50            {% else %}
51              🎂 Your birthday was {{ days | abs }} days ago
52            {% endif %}
53          {% else %}
54            Date not set
55          {% endif %}

Die Sensoren geben je nach verbleibenden Tagen unterschiedliche Texte aus. Damit bekommst du eine direkte Rückmeldung, ob das Ereignis heute, morgen, in ein paar Tagen oder schon vorbei ist.

Mushroom Cards: Countdown übersichtlich anzeigen

Für die Darstellung eignen sich die Mushroom Template Cards besonders gut. Sie bieten eine moderne Optik und lassen sich flexibel gestalten. Jede Karte zeigt das Ereignis samt Icon und dem aktuellen Countdown-Text an:

1type: vertical-stack
2cards:
3  - type: custom:mushroom-template-card
4    primary: 🏖️ Vacation
5    secondary: "{{ states('sensor.vacation_countdown_text') }}"
6    icon: mdi:beach
7    icon_color: teal
8
9  - type: custom:mushroom-template-card
10    primary: 🎄 Christmas
11    secondary: "{{ states('sensor.christmas_countdown_text') }}"
12    icon: mdi:pine-tree
13    icon_color: red
14
15  - type: custom:mushroom-template-card
16    primary: 🎂 Birthday
17    secondary: "{{ states('sensor.birthday_countdown_text') }}"
18    icon: mdi:cake-variant
19    icon_color: pink

Du kannst die Karten beliebig erweitern oder anpassen, zum Beispiel für weitere Ereignisse. Die primary-Zeile ist der Titel, secondary zeigt den dynamischen Countdown-Text aus dem jeweiligen Sensor an.

Optional: Dynamische Symbolfarbe je nach Countdown

Um die Dringlichkeit visuell hervorzuheben, kannst du die Symbolfarbe abhängig von den verbleibenden Tagen gestalten. So wird das Icon etwa kurz vor dem Ereignis rot oder orange, ansonsten bleibt es in einer neutralen Farbe. Das folgende Beispiel zeigt, wie du das für den Urlaubs-Countdown umsetzt:

icon_color: >

  {% set days = (as_datetime(states('input_datetime.vacation_start')).date() - now().date()).days %}
  {% if days 

Mit dieser dynamischen Anpassung erkennst du auf einen Blick, wie nah das Ereignis ist. Die gleiche Logik lässt sich für alle anderen Ereignisse übernehmen.

Fazit

Mit wenigen Schritten kannst du eigene Countdown Cards für Home Assistant erstellen und beliebige Ereignisse übersichtlich auf deinem Dashboard anzeigen. Die Konfiguration ist flexibel, lässt sich jederzeit über die Oberfläche anpassen und sorgt für eine klare, verständliche Visualisierung deiner wichtigsten Termine.

Im Video wird „So baust du dir deine eigenen Countdown Cards - Visualisiere deine Timer in Home Assistant!“ nachvollziehbar und praxisnah erklärt.