Web Analytics

my-skylight-calendar

⭐ 140 stars German by mohesles

🌐 Sprache

DIY Smart Home Familienkalender (Skylight-Klon)

Skylight-Kalender DIY Skylight

📖 Einführung

Meine Frau wurde in letzter Zeit in den sozialen Medien mit Werbung für smarte Familienkalender (Skylight, Cozyla, Hearth) überhäuft und war bereit, über 300 $ dafür auszugeben. Bevor ich ihr grünes Licht gab, bat ich um die Chance, diese zu recherchieren.

Mir fiel auf, dass die meisten eine ähnliche Funktionalität boten, sich aber im Preis erheblich unterschieden. Am wichtigsten war, dass ich kein herausragendes Feature sah, das ich nicht selbst in Home Assistant umsetzen konnte.

Das Ziel: Ein WAF-zugelassener (Wife Acceptance Factor), arbeitsplattenfreundlicher Touchscreen-Kalender, der tief in unser Smart Home integriert ist und keine monatlichen Gebühren verursacht.

💡 Warum DIY?

Der DIY-Weg mit Home Assistant bot mehrere Vorteile gegenüber dem Kauf eines Skylight/Hearth-Displays:

🛠 Hardware-Auswahl

Dies ist derzeit so gebaut, dass das Dashboard auf jedem HD-Display (1920x1080) angezeigt werden kann.

In meinem Fall war die Anforderung, dass es „wie Skylight aussieht“, Touchscreen-fähig ist, auf der Arbeitsplatte steht und die Möglichkeit besteht, es an verschiedenen Orten zu nutzen. Daher habe ich mich für die unten beschriebene Hardware entschieden. Nichtsdestotrotz kann dein Anwendungsfall anders sein und du musst es ggf. anpassen, zum Beispiel, wenn du es auf einem Tablet oder etwas anderem anzeigen möchtest.

Die ursprünglich verwendete Hardware habe ich nach den oben genannten Kriterien ausgewählt und in der Hoffnung, die Funktionalität mit Webcam, Lautsprecher und Mikrofon erweitern zu können. Im Nachhinein würde ich es jetzt wahrscheinlich anders bauen, da ich bisher keine Zeit hatte, diese zusätzlichen Hardware-Ideen umzusetzen.

✨ Funktionen

---

⚙️ Installationsanleitung

Hinweis: Dieses Setup verwendet ein YAML-Paket, um automatisch alle benötigten Helfer, Skripte und Variablen für dich zu erstellen. Du musst diese nicht manuell anlegen.

1. Voraussetzungen (HACS)

Sie müssen HACS installiert haben. Bitte installieren Sie die folgenden Frontend-Integrationen:

2. Das Backend (Das Gehirn)

   homeassistant:
     packages: !include_dir_named packages
   ``

  • Erstellen Sie einen Ordner namens packages in Ihrem HA-Konfigurationsverzeichnis (falls Sie noch keinen haben).
    • 

  • Laden Sie packages/family_calendar.yaml aus diesem Repository herunter.
    • 

  • Legen Sie die Datei in Ihren packages/-Ordner.
    • 

  • Starten Sie Home Assistant neu.
3. Die Kalender
Sie können Google-Kalender oder Lokale Kalender verwenden.
#### Option A: Lokaler Kalender (am einfachsten)
Beachten Sie, dass dies ungetestet ist, da ich ausschließlich Google-Kalender verwende
  • Gehen Sie zu Einstellungen > Geräte & Dienste.
    • 

  • Fügen Sie die Integration Lokaler Kalender hinzu.
    • 

  • Erstellen Sie Kalender mit genau diesen Namen: Alice, Bob, Charlie, Daisy, Family.
    • 
    
 Wenn Sie diese Namen verwenden, funktioniert der Code direkt!*
#### Option B: Google-Kalender
  • Öffnen Sie packages/family_calendar.yaml.
    • 

  • Scrollen Sie zum Skript add_google_calendar_event.
    • 

  • Aktualisieren Sie die calendar_map, sodass sie auf Ihre realen Google-Entitäten zeigt:
    • 
    
`yaml
    calendar_map:
      "Alice": "calendar.alice_gmail_com"
      "Bob": "calendar.bob_work_account"
    `
#### Feiertage einrichten
Seit den Updates von Home Assistant werden Feiertage jetzt über die Benutzeroberfläche hinzugefügt:
  • Gehe zu Einstellungen > Geräte & Dienste > Integration hinzufügen > Feiertag.
    • 

  • Wähle dein Land aus.
    • 

  • Überprüfe die Entity-ID (z. B. calendar.holidays). Falls diese von der Standard-ID abweicht, aktualisiere sie im Dashboard-YAML.
4. Das Dashboard (Das Aussehen)
  • Erstelle eine neue Dashboard-Ansicht (Ansichtstyp auf Abschnitte setzen).
    • 

  • Kopiere den Code aus dashboard.yaml.
    • 

  • Anpassen:
    • 
   
  • Suchen & Ersetzen: Ersetze person.alice durch deine tatsächlichen Familienmitglied-Entitäten.
    • 
   
  • Wetter: Ersetze weather.home durch deinen Wetteranbieter.
    • 
   
  • Hintergrund: Aktualisiere die Bild-URL am Ende der yaml.
Schritt 5: Das Theme (Optional)
Um das spezielle Schriftbild (Ovo) zu erhalten:
  • Stelle sicher, dass deine configuration.yaml diese Zeile unter frontend: enthält.
    •    
`yaml
   frontend:
     themes: !include_dir_merge_named themes
   `

  • Erstellen Sie einen Ordner namens themes in Ihrem Konfigurationsverzeichnis.
    • 

  • Laden Sie themes/skylight.yaml herunter und legen Sie diese Datei in diesem Ordner ab.
    • 

  • Starten Sie Home Assistant neu.
    • 

  • Gehen Sie zu Ihrem Profil (Benutzersymbol unten links) und ändern Sie das Theme auf Skylight.
    • 

HINWEIS: Das Theme ist nicht umfassend, behalten Sie dies im Hinterkopf.
📐 Funktionsweise (unter der Haube)
Filter-Logik
Die week-planner-card unterstützt das Ausblenden bestimmter Kalender nicht nativ. Um dies zu lösen, habe ich Input Texts als Regex-Filter verwendet.
 Wenn Sie auf die Schaltfläche einer Person klicken, wird deren Filter zwischen . (Alles anzeigen) und ^$ (Nichts anzeigen) umgeschaltet.

  • Die config-template-card injiziert diese Variablen dynamisch in die Kalenderkarte.
Ereigniserstellungs-Skript
Das "Add Event"-Popup verwendet ein einziges Skript, das die Logik für mehrere Personen und Ereignistypen (Ganztägig vs. zeitlich) übernimmt.
yaml

Simplified Logic Example

target_calendar: "{{ calendar_map.get(states('input_select.calendar_select')) }}"

choose:

  • conditions: "All Day Event is ON"
action: calendar.create_event (start_date, end_date)
  • conditions: "All Day Event is OFF"
action: calendar.create_event (start_date_time, end_date_time) ``

HINWEISE

Mein ursprünglicher Beitrag sollte nur einen groben Überblick darüber geben, wie man es macht, und den Leuten ermöglichen, den Code an ihre spezifischen Szenarien anzupassen.

Insbesondere habe ich das gemacht, weil jedes Display und jeder Bedarf unterschiedlich ist. Ich kann nicht für alle potenziellen Displaygrößen, Dashboards usw. entwickeln. Es ist also dafür gebaut, mit dem erwähnten Display oder jedem anderen (1920x1080) zu funktionieren, sollte aber für andere editierbar sein.

Was das Display angeht, habe ich ursprünglich das vorgeschlagen, weil es damals bei Woot im Angebot war und eine sehr günstige Möglichkeit bot, ein Touchscreen-Display zu bekommen. Das muss jetzt aber nicht mehr der Fall sein, verwende also einfach das Display, das für dich funktioniert. Tablet, Touchscreen, Handy, was auch immer. Das Hauptsächliche, das du bearbeiten musst, ist das Dashboard.

--- Tranlated By Open Ai Tx | Last indexed: 2026-01-14 ---

Original README: View on GitHub

Translated by OpenAiTx | Last updated: 2026-01-14