Web Analytics

my-skylight-calendar

⭐ 248 stars Traditional Chinese by mohesles

🌐 語言

DIY 智慧家庭行事曆（Skylight 仿製版）

Sklylight calendar DIY Skylight

📖 介紹

最近我太太在社群媒體上頻繁看到智慧家庭行事曆（Skylight、Cozyla、Hearth）的廣告，甚至準備花超過 300 美元購買一台。在給她同意購買之前，我提出讓我先研究這些產品的機會。 我發現大多數產品雖然功能相似，但價格差異很大。最重要的是，我沒有看到任何我無法在 Home Assistant 中實現的突出功能。

目標： 一個通過老婆認可（WAF）、適合放在檯面上的觸控式行事曆，可深度整合至我們的智慧家庭，且無需每月付費。

💡 為什麼選擇自製？

選擇用 Home Assistant 自己動手做，有幾個優點勝過購買 Skylight/Hearth 顯示器：

🛠 硬體選擇

目前設計是讓儀表板可在任何 HD（1920x1080）顯示器上顯示。

我的需求是它「看起來像」skylight、要有觸控、適合放在檯面上，且能隨時搬動。因此我選用了下述硬體。不過你的情況可能不同，或許需要調整，例如你想放在平板上或其他設備。

我當初選擇的硬體，除了上述原因外，也希望將來可利用網路攝影機、喇叭和麥克風擴充功能。現在回想起來，如果重來一次我會有所不同，因為我還沒時間實現這些額外硬體構想。

✨ 功能

---

⚙️ 安裝指南

注意：本教學使用 YAML 套件，自動為你建立所有必要的輔助工具、腳本和變數。你不需手動建立它們。

1. 先決條件（HACS）

您必須已安裝 HACS。請安裝以下 前端 整合：

*注意：在設定 → 裝置與服務中，請確保 Browser Mod 作為整合（磁磚）出現，而不僅僅是在 HACS 下方。 如果沒有出現，請點選新增整合 → Browser Mod 並完成流程，然後重新啟動 HA。 透過 HACS 安裝僅會下載檔案；您必須新增整合，才能讓 HA 註冊其動作／實體。

2. 後端（大腦）

   homeassistant:
     packages: !include_dir_named packages
   ``

  • 在你的 HA 設定目錄中建立一個名為 packages 的資料夾（如果你還沒有的話）。
    • 

  • 從這個存儲庫下載 packages/family_calendar.yaml。
    • 

  • 搜尋字串 [ #<--- UPDATE THIS ENTITY] 並將行事曆實體 ID 更新為符合你的環境。詳細資訊請參考第 3 節。
    • 

  • 將檔案放入你的 packages/ 資料夾內。
    • 

  • 重新啟動 Home Assistant。
3. 行事曆
你可以使用 Google 行事曆 或 本地行事曆。
#### 選項 A：重用行事曆名稱（最簡單）
  • 前往 設定 > 裝置與服務。
    • 

  • 新增 本地行事曆 整合。
    • 

  • 建立名稱完全為：calendar1、calendar2、calendar3、calendar4、Family 的行事曆。
    • 
    
 如果你使用這些名稱，程式碼即可直接運作！*
#### 選項 B：自訂行事曆
  • 前往 設定 > 裝置與服務。
    • 

  • 新增 本地行事曆 整合，或 Google 行事曆。
    • 

  • 前往 設定 > 整合 > 本地行事曆 或 Google 行事曆，並選擇「新增項目」
    • 

  • 為每個建立的項目取得實體 ID，以更新 dashboard.yaml 檔案。
    • 

  • 開啟 dashboard.yaml。
    • 

  • 搜尋 # <--- UPDATE THIS ENTITY。
    • 

  • 更新符合你環境的實體 ID
    • 

#### 設定假期
自 Home Assistant 更新後，假期現在可透過 UI 新增：
  • 前往 設定 > 裝置與服務 > 新增整合 > 假期。
    • 

  • 選擇你的國家。
    • 

  • 檢查實體 ID（例如 calendar.holidays）。若與預設不同，請在 dashboard YAML 中更新。
4. 儀表板（外觀）
  • 前往 設定 > 儀表板
    • 

  • 點擊 新增儀表板（選擇「全新儀表板」並確保選擇「加入側邊欄」）。
    • 

  • 在左側選單選擇新建立的儀表板，然後點擊鉛筆圖示進行編輯。
    • 

  • 選擇三個點的圖示，然後選擇「原始配置編輯器」。
    • 

  • 複製並貼上來自 dashboard.yaml 的程式碼。
步驟五：主題（可選）
若要獲得特定的字型外觀（Ovo）：
  • 確保你的 configuration.yaml 在 frontend: 下有這一行：
    •    
`yaml
   frontend:
     themes: !include_dir_merge_named themes
   `

  • 在你的設定目錄下建立一個名為 themes 的資料夾。
    • 

  • 下載 themes/skylight.yaml 並放入該資料夾中。
    • 

  • 使用檔案編輯器將 calbackgrd.png 上傳至 /www/ 資料夾，這會在儀表板內部轉換為 /local。
    • 

  • 重新啟動 Home Assistant。
    • 

  • 前往你的個人檔案（左下角的使用者圖示）並將 主題 更改為 Skylight。
    • 

注意：此主題並非全面性，請留意。
📐 運作原理（底層說明）
篩選邏輯
week-planner-card 原生並不支援即時隱藏特定行事曆。為解決此問題，我使用 Input Texts 作為正則過濾器。
 當你點擊某人的按鈕時，會在 .（顯示全部）與 ^$（全部隱藏）之間切換其過濾條件。

  • config-template-card 會動態地將這些變數注入至行事曆卡片。
建立事件腳本
「新增事件」的彈出視窗使用單一腳本，負責處理多人與事件類型（整天 vs 定時）的邏輯。
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) ``

注意事項

我最初的貼文只是為了提供一個高層次的概述，讓大家能夠根據自己的特定情境調整程式碼以使其運作。

特別是我這麼做的原因是因為每個顯示器和需求都不同。我無法為所有可能尺寸的顯示器、儀表板等進行開發。因此這套方案是為我所提到的顯示器或任何（1920x1080）設計，但應該可以編輯以適用於其他顯示器。

談到顯示器，我最初推薦那款是因為它當時在 Woot 特價，是取得觸控顯示器非常經濟的方式。現在可能不是如此，所以請使用任何適合你的顯示器。平板、觸控螢幕、手機都可以。你主要需要編輯的是儀表板。

--- Tranlated By Open Ai Tx | Last indexed: 2026-03-08 ---

Original README: View on GitHub

Translated by OpenAiTx | Last updated: 2026-03-08