Installing Daylight Calendar Card in Home Assistant

Install Daylight Calendar Card via HACS in one click, or manually by downloading the JS file and registering it as a Lovelace resource.

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)

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:

1. Open HACS in Home Assistant

   In your Home Assistant sidebar, click HACS to open the Community Store.

2. Navigate to Frontend

   Click Frontend in the HACS navigation to browse Lovelace cards and UI components.

3. Search for Daylight Calendar Card

   Use the search bar to find Daylight Calendar Card. Click the result to open its detail page.

4. 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.

5. 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

Manual installation gives you full control over the file location and resource registration. You’ll need filesystem access to your Home Assistant configuration directory.

1. Download the JavaScript file

   Go to the GitHub releases page and download skylight-calendar-card.js from the latest release assets.

2. 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
   

   Create the www folder if it doesn’t exist yet.

3. Open the Resources settings

   In Home Assistant, go to Settings → Dashboards, then click the ⋮ menu in the top-right corner and select Resources.

4. Add the resource

   Click Add Resource and fill in the following fields:

   Field	Value
   URL	/local/skylight-calendar-card.js
   Resource type	JavaScript Module

   Click Create to save.

5. 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.