> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daylightcalendar.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

> [tab] 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](https://hacs.xyz/docs/use/) first.
>
> Click the button below to open Daylight Calendar Card directly in your Home Assistant's HACS:
>
> [![Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.](https://my.home-assistant.io/badges/hacs_repository.svg)](https://my.home-assistant.io/redirect/hacs_repository/?owner=superdingo101\&repository=daylight-calendar-card\&category=frontend)
>
> **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.

> [tab] 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](https://github.com/superdingo101/daylight-calendar-card/releases) 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:
>
> ```text theme={null}
> <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.

> [!NOTE]
>
> 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.