Web Analytics

my-skylight-calendar

⭐ 115 stars English by mohesles

DIY Smart Home Family Calendar (Skylight Clone)

Sklylight calendar DIY Skylight

📖 Introduction

My wife has been recently bombarded in social media with ads for smart home calendars (Skylight, Cozyla, Hearth) and was ready to spend over $300 on one. Before giving her the green light, I asked for a chance to research them.

I realized most offered similar functionality but differed significantly in price. Most importantly, I didn't see any outstanding feature that I couldn't implement in Home Assistant.

The Goal: A WAF-approved (Wife Acceptance Factor), countertop-friendly touchscreen calendar that integrates deep into our smart home without monthly fees.

💡 Why DIY?

Choosing the DIY route with Home Assistant provided several benefits over buying a Skylight/Hearth display:

🛠 Hardware Selection

This is currently built to show the dashboard on any HD (1920x1080) display.

In my case, the requirement was for it to "look like" skylight, be touchscreen, be countertop, possibility to move it to different locations. Therefore I went with the hardware described below. Nevertheless, you case might be different and will need you to adjust it as needed, for example if you want to display it on a tablet or something else.

The hardware I originally used I chose based on what I mentioned above plus with the hope to be able to extend functionality using the webcam, speaker and microphone. Currently I would probably build it differently now in hindsight, since I havent had time to address these additional hardware ideas.

✨ Features

---

⚙️ Installation Guide

Note: This setup uses a YAML Package to automatically create all the necessary helpers, scripts, and variables for you. You do not need to create them manually.

1. Prerequisites (HACS)

You must have HACS installed. Please install the following Frontend integrations:

2. The Backend (The Brains)

   homeassistant:
     packages: !include_dir_named packages
   ``

  • Create a folder named packages in your HA config directory (if you don't have one).  
    • 

  • Download packages/family_calendar.yaml from this repo.  
    • 

  • Place the file inside your packages/ folder.  
    • 

  • Restart Home Assistant.  
3. The Calendars  
You can use Google Calendars or Local Calendars.  
#### Option A: Local Calendar (Easiest)  
Note this is untested since I use Google Calendars exclusively  
  • Go to Settings > Devices & Services.  
    • 

  • Add the Local Calendar integration.  
    • 

  • Create calendars named exactly: Alice, Bob, Charlie, Daisy, Family.  
    • 
    
 If you use these names, the code works out of the box!*  
#### Option B: Google Calendar  
  • Open packages/family_calendar.yaml.  
    • 

  • Scroll to the add_google_calendar_event script.  
    • 

  • Update the calendar_map to point to your real Google entities:
    • 
    
`yaml
    calendar_map:
      "Alice": "calendar.alice_gmail_com"
      "Bob": "calendar.bob_work_account"
    `
#### Setting up Holidays
Since Home Assistant updates, Holidays are now added via UI:
  • Go to Settings > Devices & Services > Add Integration > Holiday.
    • 

  • Select your country.
    • 

  • Check the entity ID (e.g., calendar.holidays). If it differs from the default, update it in the dashboard YAML.
4. The Dashboard (The Look)
  • Create a new Dashboard View (Set View Type to Sections).
    • 

  • Copy the code from dashboard.yaml.
    • 

  • Customize:
    • 
   
  • Search & Replace: Replace person.alice with your actual family member entities.
    • 
   
  • Weather: Replace weather.home with your weather provider.
    • 
   
  • Background: Update the image URL at the bottom of the yaml.
Step 5: The Theme (Optional)
To get the specific font look (Ovo):
  • Ensure your configuration.yaml has this line under frontend:
    •    
`yaml
   frontend:
     themes: !include_dir_merge_named themes
   `

  • Create a folder named themes in your config directory.
    • 

  • Download themes/skylight.yaml and place it in that folder.
    • 

  • Restart Home Assistant.
    • 

  • Go to your Profile (User Icon bottom left) and change Theme to Skylight.
    • 

NOTE: The theme is not comprehensive, so keep that in mind
📐 How It Works (Under the Hood)
Filter Logic
The week-planner-card does not natively support hiding specific calendars on the fly. To solve this, I used Input Texts acting as Regex filters.
 When you click a person's button, it toggles their filter between . (Show everything) and ^$ (Show nothing).

  • config-template-card injects these variables into the calendar card dynamically.
Event Creation Script
The "Add Event" popup uses a single script that handles logic for multiple people and event types (All Day vs Timed).
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) ``

NOTES

My original post was just to give a high level overview of how to do it and allow people to adjust code to make it work in their specific scenarios.

In particular I did this because every display and need is different. I can't develop for all potential sizes of displays, dashboards, etc. So it is built to work in the display I mentioned or any (1920x1080) but should be editable for others.

Talking about display, I originally suggested that one because it was on sale at Woot and was a very economic way to get a touchscreen display at the time. This might not be the case now, so use whatever display works for you. Tablet, touchscreen, phone, whatever. The main thing youll need to edit is the dashboard.

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

Original README: View on GitHub

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