Quickstart: Add Daylight Calendar Card to Your Dashboard

Add the Daylight Calendar Card to your Home Assistant dashboard in under two minutes using the visual editor or a simple YAML snippet.

Once the card is installed, adding it to your Home Assistant dashboard takes less than two minutes. You can configure it entirely through the built-in visual editor — no YAML required — or drop in a short YAML snippet if you prefer to manage your dashboard as code. Either way, you’ll have a working calendar on your screen in just a few steps.

Make sure you have completed the installation steps before continuing. You’ll need at least one Home Assistant calendar entity (for example calendar.family or calendar.work) available in your instance.

Add the Card to Your Dashboard

Visual Editor

The visual editor exposes all common options as form fields, so you can get a calendar up and running without writing any configuration by hand.

1. Enter edit mode

   Open the dashboard where you want to add the card, then click the pencil icon (Edit) in the top-right corner to enter edit mode.

2. Add a new card

   Click + Add Card at the bottom of the dashboard. In the card picker, type Daylight in the search box, then select Daylight Calendar Card from the results.

3. Select your calendar entities

   In the Entities field, search for and select the calendar entities you want to display — for example calendar.family or calendar.work. You can add as many calendars as you like.

4. Configure the view and title

   Set a Title for the card (for example “Family Calendar”) and choose a Default View — month, week-compact, week-standard, or agenda. Explore the other options such as first day of the week, past event appearance, and weather integration to suit your preferences.

5. Save the card

   Click Save to add the card to your dashboard, then click Done to exit edit mode. Your calendar is now live.

YAML

If you prefer to configure your dashboard in YAML — or want to share or version-control your setup — you can define the card with a minimal snippet and expand it as needed.

Minimal configuration

This is all you need to get started. It displays events from a single calendar entity using the card’s default settings.

type: custom:daylight-calendar-card
title: Family Calendar
entities:
  - calendar.family

Expanded configuration

The example below adds a second calendar, sets the default view to month, starts the week on Monday (1), and mutes past events so they don’t dominate the view.

type: custom:daylight-calendar-card
title: Family Calendar
entities:
  - calendar.family
  - calendar.work
default_view: month
first_day_of_week: 1
past_event_mode: muted

To use this YAML, enter dashboard edit mode, click + Add Card, scroll to the bottom of the card picker, and select Manual. Paste your YAML into the editor and click Save.

Each value under entities must be a valid Home Assistant calendar entity ID. You can find your available calendar entities in Developer Tools → States by filtering for the calendar. domain.

Next Steps

Now that your calendar card is on the dashboard, explore what else you can do with it.

Month View

Learn how the month view works and how to customize its layout and event display.

Basic Configuration

Browse all available configuration options — colors, fonts, weather, and more.