Configuration

Important

Documentation has been moved to daylightcalendar.com

This wiki will no longer be kept up to date and will be retired soon.

Daylight Calendar Card supports both Home Assistant’s visual card editor and direct YAML configuration.

Note

Updated but new features are missing?

After the rename, make sure Home Assistant is loading:

/hacsfiles/daylight-calendar-card/skylight-calendar-card.js

Remove this old resource if present:

/hacsfiles/skylight-calendar-card/skylight-calendar-card.js

Existing dashboards using custom:skylight-calendar-card still work, but new configs should use custom:daylight-calendar-card.

When to use the visual editor

Use the visual editor for common configuration:

Select calendars
Choose the default view
Configure week/day display
Set calendar colors and display names
Configure header options
Configure event display options
Configure background image options
Enable or disable event management

When to use YAML

Use YAML for advanced features that require nested rules, lists of objects, complex matching, or custom CSS.

YAML-only / advanced YAML options include:

Feature	Option	Why YAML is required
Conditional event styling	`event_styles`	Uses nested match rules, priorities, regex, and per-rule style overrides
Conditional day styling	`day_styles`	Uses ordered rules with conditions, calendar filters, title matching, backgrounds, borders, and opacity
Conditional day badges	`day_badges`	Uses ordered rules with conditions, calendar filters, title matching, backgrounds, borders, and opacity
Virtual grouped calendars	`virtual_calendars`	Defines dashboard-only calendar groups from multiple source calendars
Advanced styling	`uix`	Injects custom CSS selectors and style rules

How to switch to YAML mode

Edit your dashboard.
Edit the Daylight Calendar Card.
Open the three-dot menu.
Choose Show code editor.
Add the YAML option manually.
Save.

Minimal Configuration

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

Common Configuration Example

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

default_view: week-standard
week_start_hour: 8
week_end_hour: 21
first_day_of_week: 0

compact_header: true
compact_height: true

calendar_names:
  calendar.holidays_in_united_states: Holidays

readonly_calendars:
  - calendar.holidays_in_united_states

colors:
  calendar.personal: '#FF6B6B'
  calendar.work: '#4ECDC4'
  calendar.family: '#45B7D1'

Configuration Options

Core Options

Option	Type	Default	Available in visual editor?	Description
`title`	string	`'Family Calendar'`	✅ Yes	Card title
`entities`	list	Required	✅ Yes	Calendar entity IDs
`calendar_names`	map	auto	✅ Yes	Friendly names
`default_view`	string	`null`	✅ Yes	`month`, `week-compact`, `week-standard`, `agenda`

Date & Time Behavior

Option	Type	Default	Available in visual editor?	Description
`first_day_of_week`	integer	`0`	✅ Yes	0 = Sunday
`week_days`	list	`[0,1,2,3,4,5,6]`	✅ Yes	Days shown in week views
`rolling_days_week_compact`	integer	`null`	✅ Yes	Show today + N days
`rolling_days_schedule`	integer	`null`	✅ Yes	Schedule rolling window
`rolling_weeks`	integer	`null`	✅ Yes	Show this week + N weeks
`week_start_hour`	integer	`0`	✅ Yes	Start hour
`week_end_hour`	integer	`23`	✅ Yes	End hour
`lock_schedule_hours`	boolean	`false`	✅ Yes	Lock schedule hours
`use_24hr_schedule`	boolean	`false`	✅ Yes	24-hour format

Layout & Sizing

Option	Type	Default	Available in visual editor?	Description
`height_scale`	float	`1.0`	✅ Yes	Schedule scaling
`compact_height`	boolean	`false`	✅ Yes	Fit to screen
`compact_header`	boolean	`false`	✅ Yes	Single-row header
`hide_empty_days`	boolean	`false`	✅ Yes	Hide empty days in agenda view
`agenda_compact_events`	boolean	`false`	✅ Yes	Tighter event formatting in agenda view

Event Display

Option	Type	Default	Available in visual editor?	Description
`hide_event_calendar_bubble`	boolean	`false`	✅ Yes	Hide calendar icon
`event_calendar_friendly_name`	boolean	`false`	✅ Yes	Show full calendar name
`event_title_prefix`	string	`none`	✅ Yes	Prefix event titles
`show_event_location`	boolean	`false`	✅ Yes	Show location
`use_short_location`	boolean	`false`	✅ Yes	Shorten location
`event_location_font_size`	integer	`9`	✅ Yes	Location font size
`hide_times_for_calendars`	list	`[]`	✅ Yes	Hide times for calendars
`show_current_time_bar`	boolean	`false`	✅ Yes	Show current time indicator
`event_styles`	map	`none`	🧩 YAML only	See below
`event_color_mode`	string	`none`	🧩 YAML only	Changes event color styling. See below
`event_color_mode`	string	`none`	🧩 YAML only	See below
`event_neutral_background`	string	`none`	🧩 YAML only	See below
`event_tint_opacity`	string	`none`	🧩 YAML only	See below
`event_color_bar_width`	string	`none`	🧩 YAML only	See below
`past_event_mode`	string	`none`	✅ Yes	Styling for complete events. Options are `none`, `hide`, and `muted`.

Calendar Behavior

Option	Type	Default	Available in visual editor?	Description
`enable_event_management`	boolean	`true`	✅ Yes	Allow event editing
`readonly_calendars`	list	`[]`	✅ Yes	Disable editing for calendars
`combine_calendars`	boolean	`false`	✅ Yes	Merge duplicate events
`combine_style`	string	`bars`	✅ Yes	`bars`, `dots`, `stripes`
`combine_background`	string	`neutral`	✅ Yes	Background style
`combine_calendars_width`	integer	`12`	✅ Yes	Stripe width
`virtual_calendars`	map	`none`	🧩 YAML only	See below
`default_hidden_calendars`	list	`[]`	✅ Yes	Load mapped calendars as hidden by default.
`default_calendar_visibility`	map	`none`	✅ Yes	Set calendars to default `show` or `hide`.

Header & Controls

Option	Type	Default	Available in visual editor?	Description
`hide_calendars`	boolean	`false`	✅ Yes	Hide calendar buttons
`hide_controls`	boolean	`false`	✅ Yes	Hide navigation controls
`hide_dark_mode_toggle`	boolean	`false`	✅ Yes	Hide dark mode toggle
`hide_calendar_names`	boolean	`false`	✅ Yes	Show icons only
`hide_year`	boolean	`false`	✅ Yes	Remove year from header
`show_dashboard_nav_button`	boolean	`false`	✅ Yes	An optional navigation button to a configured Lovelace dashboard.
`header_dashboard_path`	string	`null`	✅ Yes	Lovelace dashboard used with `show_dashboard_nav_button`.
`show_week_numbers_month`	boolean	`false`	✅ Yes	Show ISO 8601 week numbers in month view.
`hide_badge_names`	list	`[]`	✅ Yes	List of badges to hide from the header.
`header_weather_sensor`	entity	`null`	✅ Yes	Adds current weather to header, daily forecast to day headers.
`header_time_sensor`	entity	`null`	✅ Yes	Display the current time in the header.
`calendar_person_entities`	map	`none`	✅ Yes	Map user name/location/icon to calendar.
`hide_add_event_button`	boolean	`false`	✅ Yes	Hide "add event" button from header.
`hide_view_selector`	boolean	`false`	✅ Yes	Hide view selection button from header.
`show_header_controls`	boolean	`false`	✅ Yes	Hide next/previous period controls from header.
`day_badges`	map	`[]`	✅ Yes	Add custom badges to day header based on event matching rulesets.

Appearance

Option	Type	Default	Available in visual editor?	Description
`color_scheme`	string	`auto`	✅ Yes	`auto`, `light`, `dark`
`colors`	map	auto	✅ Yes	Per-calendar colors
`event_font_size`	integer	`11`	✅ Yes	Event text size
`event_font_colors`	map	`white`	✅ Yes	Per-calendar font colors
`event_time_font_size`	integer	`9`	✅ Yes	Time font size

Background & Media

Option	Type	Default	Available in visual editor?	Description
`background_transparent`	boolean	`false`	✅ Yes	Transparent background
`background_opacity`	integer	`0`	✅ Yes	0–100 opacity
`background_image_url`	string	`[]`	✅ Yes	Background image
`background_image_size`	string	`cover`	✅ Yes	CSS background-size
`background_image_position`	string	`center`	✅ Yes	CSS position
`background_image_repeat`	string	`no-repeat`	✅ Yes	CSS repeat
`day_styles`	map	`none`	🧩 YAML only	See below
`today_style`	map	`none`	🧩 YAML only	Shortcut for `day_styles` implementation for `condition: today`. See below.
`today_background_color`	string	`[]`	✅ Yes	Shortcut to set background color for today. See below.

Localization

Option	Type	Default	Available in visual editor?	Description
`language`	string	`en`	✅ Yes	UI language
`locale`	string	`en-US`	✅ Yes	Regional formatting

Layout & Full Width

Full Width Options

Use one of the following dashboard layouts:

Panel → simplest, full-width single card
Sections → flexible layouts with multiple cards

Panel

Full-width
One card only

Sections

Supports columns and layouts
Can stretch calendar across full width

Tip for Sections:

grid_options:
  columns: [12*column_span]
  rows: 10

Combined Calendar Behavior

Enable Combined Events

combine_calendars: true

What It Does

Merges duplicate events
Applies visual striping
Shows multiple calendar indicators
Allows per-calendar editing

Duplicate Matching Rules

Events must match exactly on:

Start time
End time
Summary
Description
Location

Whitespace and formatting are normalized.

Appearance & Styling

Calendar Colors

colors:
  calendar.personal: '#FF6B6B'
  calendar.work: '#4ECDC4'
  calendar.family: '#45B7D1'
  calendar.kids: '#FFA07A'

Header Styling

Supports solid colors, gradients, and theme variables:

header_color: '#1e40af'

header_color: 'linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%)'

header_color: 'var(--primary-color)'

`header_weather_sensor`

Home Assistant weather entity. Adds current weather to the header and daily forecast to day headers. Support was designed around the pirateweather integration but will work with any weather integration that provides similarly formatted data.

Background Customization

background_transparent: true

background_image_url: https://example.com/image.jpg
background_image_size: cover
background_image_position: center
background_image_repeat: no-repeat

Supports:

Online images (https://...)
/media/local/...
media-source://...

Event Text Styling

event_font_size: 13

event_font_colors:
  calendar.family: "#ffffff"
  calendar.work: "#fef3c7"
  calendar.school: "#111827"

Calendar Badge Icons

calendar_badge_icons:
  calendar.family: mdi:home-heart
  calendar.work: /media/local/work-avatar.jpg

Recommended Image Format

Aspect ratio: 1:1 (square)
Minimum: 64×64 px
Ideal: 128×128 px or higher
Keep subject centered (edges may be cropped)

`event_styles`

Important

This feature is configured in YAML only. It is supported by the card, but it does not appear in the visual editor.

Example: Match all events on calendar.mike that have "game" in the title except those with "soccer" in the title.

event_styles:
  - id: important
    priority: 20
    match:
      and:
        - title: game
        - calendar: calendar.mike
        - not:
          - title: soccer
    style:
      background_color: "#8B0000"
      event_font_color: "#5FFFFF"
      event_font_size: 13
      event_time_font_size: 13
      event_location_font_size: 10
      show_event_location: true
      use_short_location: true
      hide_time: false
      hide_event_calendar_bubble: false
      event_title_prefix: "badge"

  event_styles:
    - id: custom-past-muted
      match:
        past: true
      style:
        opacity: 0.35
        filter: grayscale(80%)

Field match keys

title
summary (alias of title)
calendar (matches either entity_id or calendar friendly name)
location
description
all_day (boolean-style matching)

Logical operators

all: every child condition must match
and: same behavior as all
any: at least one child condition must match
not: negates a condition (supports object or array forms)

String matching modes (for text fields)

Default: substring (case-insensitive)

exact:<text>
contains:<text> or substring:<text>
regex:<pattern>
/pattern/flags regex literal format
Object form also works:
- { exact: "..." }
- { substring: "..." }
- { contains: "..." }
- { regex: "..." }

`all_day` value handling

Accepts boolean (true / false)
Also accepts "true" / "false" strings

Styling

background_color: "#8B0000"
event_font_color: "#FFFFFF"
event_font_size: 13
event_time_font_size: 10
event_location_font_size: 10
show_event_location: true
use_short_location: true
hide_time: false
hide_event_calendar_bubble: false
event_title_prefix: "badge"
- event_title_prefix options: badge, icon, friendly
- icon: Optional Home Assistant MDI icon to show on matching events, for example mdi:basketball
- icon_color: Optional icon color
- icon_size: Optional icon size, such as 16px, 1.2em, or 18
- icon_position: Optional icon placement. Supported values:
  - before_title (default)
  - corner

Example: Add an icon to matching events.

    event_styles:
      - id: basketball-practice
        priority: 20
        match:
          title: practice
        style:
          icon: mdi:basketball
          icon_color: orange
          icon_size: 16px
          icon_position: before_title

Priority

If multiple styles match, the one with the lowest priority value wins.

`day_styles`

Important

This feature is configured in YAML only. It is supported by the card, but it does not appear in the visual editor.

Conditionally highlight a day in all views.

day_styles:
  # Style current day only
  - condition: today
    priority: 10
    background: "#0082f6"
    background_opacity: 0.6
    border_color: "#0082f6"
    border_width: 5px

  # Days in the past
  - condition: past
    priority: 100
    opacity: 0.45

  # Any day with an event from a calendar
  - condition: has_event
    priority: 30
    calendar: calendar.holidays_in_united_states
    background: "##bbf7d0"
    background_opacity: 0.6

  # Title match with string matching
  - condition: has_event
    calendar: calendar.kid
    title_match: first day
    border_color: "#FF0000"
    border_width: 5px

  # Negative works with has_event
  - condition: "!has_event"
    priority: 50
    calendar: calendar.work
    background: "#22afaa"
    background_opacity: 0.6

  # Saturday + Sunday (numeric form; 0=Sunday, 6=Saturday)
  - condition: day_of_week
    day_of_week: [0, 6]
    background: "#1f2937"
    background_opacity: 0.14
    border_color: "#475569"
    border_width: 1px

  # Make weekdays slightly different for contrast
  - condition: weekday
    background: "#0f172a"
    background_opacity: 0.04

  # Make weekends slightly different for contrast
  - condition: weekend
    background: "#0f172a"
    background_opacity: 0.04

  # Day-based styling
  - condition: day_of_week
    day_of_week: [saturday, sunday]
    background: "#1f2937"
    background_opacity: 0.14

  # And with a Spanish locale, localized tokens work too
  - condition: day_of_week
    day_of_week: [sábado, domingo]
    background: "#1f2937"
    background_opacity: 0.14

`title_match`

title_match is only used when condition: has_event.

How it works

For each day, the card:

Finds events on that day.
Filters to events matching calendar.
If title_match is provided, it checks the event title (event.summary) using the same text matcher as other rules.

Plain string = case-insensitive substring match
exact:... = exact match
contains:... / substring:... = substring match
regex:... or /.../flags = regex match

Priority

Higher number = higher priority.

priority is compared numerically, and the rule with the greater value wins. If two rules have the same priority, the earlier rule in the config list wins (lower index tie-break).

Styling today's date

For simple today styling, use today_background_color. Internally this is treated like a day_styles rule with condition: today and the default priority 0, so explicit higher-priority day_styles rules can override it.

type: custom:daylight-calendar-card
entities:
  - calendar.family
today_background_color: var(--primary-color)

For more control, use today_style with the same supported style fields as a day_styles style block, such as background_color, background_opacity, opacity, border_color, and border_width. If both today options are configured, today_style takes precedence over today_background_color for overlapping fields.

type: custom:daylight-calendar-card
entities:
  - calendar.family
today_style:
  background_color: '#ff0000'
  background_opacity: 0.35
  border_color: '#ffffff'
  border_width: 2

`virtual_calendars`

Important

This feature is configured in YAML only. It is supported by the card, but it does not appear in the visual editor.

type: custom:skylight-calendar-card
title: Family Calendar
entities:
  - calendar.rob
  - calendar.suzie
virtual_calendars:
  - id: children
    name: Kids
    icon: mdi:human-child
    color: "#7c3aed"
    entities:
        - calendar.rob
        - calendar.suzie

virtual_calendars allows for the creation of a virtual calendar, visible only through this dashboard, that is displayed and acts as though it is a single calendar entity. Note that it takes the place of the calendar entities referenced, it is not additive. It can be modified through other actions such as event_styles.

`event_color_mode`

Important

This feature is configured in YAML only. It is supported by the card, but it does not appear in the visual editor.

The new feature is controlled primarily by event_color_mode, which supports three values:

classic: Existing behavior, the event background uses the calendar/event color.
left-neutral: Shows the calendar color as a left-side bar and uses a neutral event background.
left-tint: Shows the calendar color as a left-side bar and uses a tinted background derived from the calendar/event color.

Invalid or missing event_color_mode values normalize back to classic.

Related options

event_neutral_background: used only with left-neutral; defaults to #F8F3E9.

event_tint_opacity: used only with left-tint; uses the same 0–100 direction as other opacity-style settings in this card, where 0 is fully opaque tint and 100 is fully transparent tint. It defaults to 80.

event_color_bar_width: controls the left color-bar width for split event modes. If it is not set, it falls back to combine_calendars_width; if neither is set, both default to 18.

Rendering behavior

For single-color events:

left-neutral applies the neutral background and draws a left-side bar using the event/calendar color.

left-tint applies the computed tint background and draws the same left-side color bar.

classic keeps the original full event-color background behavior.

Combined-calendar events continue through the existing combined-event styling path rather than being overridden by these single-event split modes.

`day_badges`

Important

This feature is configured in YAML only. It is supported by the card, but it does not appear in the visual editor.

Render small circular badges in day headers when events on that day match configured conditions.

Supported views:

month
week-compact
week-standard

Not currently rendered in:

agenda

Badges are rendered in the day header area (top-right), in a compact horizontal row.

Basic text badge example

day_badges:
  - conditions:
      title_contains: Ballet
    text: PL
    background_color: "#ff4b2b"
    color: "#000000"

Icon badge example

day_badges:
  - conditions:
      title_contains: Ballet
    icon: mdi:shoe-ballet
    background_color: "#ff4b2b"
    color: "#000000"

Multiple badge rules example

If both rules match events on the same day, both badges render in that day’s header.

day_badges:
  - conditions:
      calendar: calendar.school
      title: contains:practice
    text: PR
    background_color: "#3b82f6"
    color: "#ffffff"

  - conditions:
      title_contains: dentist
    icon: mdi:tooth-outline
    background_color: "#f59e0b"
    color: "#111827"

Fields

Each day_badges item supports:

conditions (object, required): Event-matching conditions for deciding whether the badge appears on a day.
text (string, optional): Badge text content.
icon (string, optional): Home Assistant icon name (for example mdi:shoe-ballet).
background_color (string, optional): Badge background color (any valid CSS color).
color (string, optional): Badge text/icon color (any valid CSS color).
size (number|string, optional): Badge size.
- Number values are treated as pixels (example: 30 → 30px)
- String values accept CSS size units (example: "28px", "1.8rem", "95%")
font_size (number|string, optional): Badge text/icon font size.
- Number values are treated as pixels
- String values accept CSS size units

Condition Keys

day_badges.conditions uses the same practical event condition matching style used elsewhere in the card.

Common keys:

title
summary (alias of title)
calendar (entity ID or calendar display name)
location
description
all_day

Logical operators:

all / and
any
not

String matching modes:

plain string (case-insensitive substring)
exact:<text>
contains:<text> / substring:<text>
regex:<pattern>
regex literal form: /pattern/flags
object forms like:
- { exact: "..." }
- { contains: "..." }
- { substring: "..." }
- { regex: "..." }

Header badge person state

Link a calendar header badge to a Home Assistant person entity when you want the badge to show the person state, such as Home, Away, or the current zone/location, under the calendar badge name. If the person entity has an entity_picture and no calendar badge icon is configured, the badge uses that picture and enlarges the icon/photo area.

Note that a badge icon takes precedence over the entity picture.

type: custom:daylight-calendar-card
entities:
- calendar.ian
- calendar.anne_marie
calendar_names:
  calendar.ian: Ian
  calendar.anne_marie: Anne-Marie
calendar_person_entities:
  calendar.ian: person.ian
  calendar.anne_marie: person.anne_marie

Default calendar visibility

If you have calendars that should usually stay hidden, set their default state in YAML. Users can still toggle the calendar badges in the card, and those choices are saved in the browser until preferences are cleared.

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

You can also configure each calendar explicitly with default_calendar_visibility:

default_calendar_visibility:
  calendar.family: show
  calendar.work: hide
  calendar.school: show

Uh oh!

Configuration

Configuration

When to use the visual editor

When to use YAML

How to switch to YAML mode

Minimal Configuration

Common Configuration Example

Configuration Options

Core Options

Date & Time Behavior

Layout & Sizing

Event Display

Calendar Behavior

Header & Controls

Appearance

Background & Media

Localization

Layout & Full Width

Full Width Options

Panel

Sections

Combined Calendar Behavior

Enable Combined Events

What It Does

Duplicate Matching Rules

Appearance & Styling

Calendar Colors

Header Styling

header_weather_sensor

Background Customization

Event Text Styling

Calendar Badge Icons

Recommended Image Format

event_styles

Field match keys

Logical operators

String matching modes (for text fields)

all_day value handling

Styling

Priority

day_styles

title_match

How it works

Priority

Styling today's date

virtual_calendars

event_color_mode

Related options

Rendering behavior

day_badges

Basic text badge example

Icon badge example

Multiple badge rules example

Fields

Condition Keys

Header badge person state

Default calendar visibility

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Wiki

Getting Started

Usage

Support

Project

Clone this wiki locally

`header_weather_sensor`

`event_styles`

`all_day` value handling

`day_styles`

`title_match`

`virtual_calendars`

`event_color_mode`

`day_badges`