Skip to main content
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 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 your Home Assistant instance and open a repository inside the Home Assistant Community Store.
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.
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.