You can install Daylight Calendar Card in two ways: through HACS (Home Assistant Community Store), which handles updates automatically and is recommended for most users, or manually by downloading the JavaScript file and registering it as a Lovelace resource yourself. Both methods result in the same card with the same features.
Install the Card
HACS (Recommended)
Manual
HACS manages the download, registration, and future updates for you. If you haven’t installed HACS yet, follow the official HACS installation guide first.Click the button below to open Daylight Calendar Card directly in your Home Assistant’s HACS:
Open HACS in Home Assistant
In your Home Assistant sidebar, click HACS to open the Community Store.
Navigate to Frontend
Click Frontend in the HACS navigation to browse Lovelace cards and UI components.
Search for Daylight Calendar Card
Use the search bar to find Daylight Calendar Card. Click the result to open its detail page.
Install the card
Click the Download button (or Install if you see that label). HACS will fetch the latest release and register the resource automatically.
Reload your browser
Hard-reload your browser (Ctrl+Shift+R on Windows/Linux, Cmd+Shift+R on macOS) so the new JavaScript file is picked up. The card is now ready to use.
Manual installation gives you full control over the file location and resource registration. You’ll need filesystem access to your Home Assistant configuration directory.Download the JavaScript file
Go to the GitHub releases page and download skylight-calendar-card.js from the latest release assets. Copy the file to your www folder
Place the downloaded file in your Home Assistant configuration’s www directory:<config>/www/skylight-calendar-card.js
www folder if it doesn’t exist yet. Open the Resources settings
In Home Assistant, go to Settings → Dashboards, then click the ⋮ menu in the top-right corner and select Resources.
Add the resource
Click Add Resource and fill in the following fields:| Field | Value |
|---|
| URL | /local/skylight-calendar-card.js |
| Resource type | JavaScript Module |
Reload your browser
Hard-reload your browser (Ctrl+Shift+R on Windows/Linux, Cmd+Shift+R on macOS) to load the newly registered resource. The card is now available in your dashboard editor.
The card was previously called Skylight Calendar Card. It was renamed to Daylight Calendar Card in v4.0.0. If you have existing dashboard YAML that uses type: custom:skylight-calendar-card, it will continue to work without any changes — both type names are supported.
Requirements
Before installing, make sure your setup meets the following requirements:
- Home Assistant — any reasonably recent version with Lovelace dashboards enabled.
- At least one calendar entity — for example
calendar.family, calendar.work, or any entity provided by a calendar integration such as Google Calendar, CalDAV, or Local Calendar. You can check your available calendar entities under Settings → Devices & Services or in Developer Tools → States by filtering for the calendar. domain.
If you don’t have a calendar integration set up yet, add one from Settings → Devices & Services → Add Integration before proceeding. 