Skip to main content
The Daylight Calendar Card gives you extensive control over its visual presentation. You can assign distinct colors to each calendar, choose how those colors are applied to event chips, style the header independently from the card body, and even set a background image — all through YAML configuration.
Looking for font size, event text, time text, or location text settings?Font-related display options are documented in Display Options, including:
  • event_font_size
  • event_time_font_size
  • event_location_font_size
  • event_font_colors

​
Calendar Colors

​
map
default:"[]"
A map of calendar entity IDs to hex color strings. Each calendar’s events are rendered in the color you specify. If you omit a calendar, the card assigns it an automatic color from its built-in palette.
​
map
default:"[]"
A map of calendar entity IDs to hex color strings for the text rendered on event chips. Use this when the auto-contrast logic does not produce readable text against your chosen calendar color.

​
Event Color Modes

​
string
default:"classic"
Controls how the calendar color is applied to event chips. Three modes are available:
  • classic — the entire event chip background is filled with the calendar color, matching the look of most traditional calendar applications
  • left-neutral — the chip has a neutral background with a colored vertical bar on the left edge; good for maintaining readability with dark colors
  • left-tint — the chip has a lightly tinted background (derived from the calendar color) with a colored left bar
​
string
default:"#F8F3E9"
The hex background color applied to event chips when event_color_mode is left-neutral. Only this option — not colors — affects the chip background in this mode.
​
number
default:"80"
A value from 0 to 100 controlling how strongly the calendar color tints the chip background in left-tint mode. 0 produces a fully neutral background; 100 produces a fully saturated background.
​
number
default:"18"
The width in pixels of the colored left border applied to event chips in left-neutral and left-tint modes.

​
Header Appearance

​
string
default:"var(--primary-color)"
The background color of the card header. Accepts a hex string (e.g. #1A1A2E), a CSS variable (e.g. var(--primary-color)), or the special value match-card-background to make the header blend seamlessly with the card body.
​
string
The color of text and icon elements inside the header. Accepts a hex string. When omitted, the card calculates a contrasting color automatically based on header_color.
​
number
default:"0"
The transparency of the header background, from 0 (fully opaque) to 100 (fully transparent). Values between these extremes produce a semi-transparent header. Useful when you set a background image and want the image to show through the header.
​
boolean
default:"false"
Legacy shortcut for a fully transparent header. When header_background_opacity is not set, true is equivalent to header_background_opacity: 100.

​
Card Background

​
number
default:"0"
The transparency of the card body background, from 0 (fully opaque) to 100 (fully transparent). Setting this to 100 lets the underlying dashboard wallpaper or HA theme background show through.
​
boolean
default:"false"
Legacy shortcut for a fully transparent card body. When background_opacity is not set, true is equivalent to background_opacity: 100.
​
string
A URL pointing to an image to display behind the calendar grid. Local Home Assistant paths (e.g. /local/calendar-bg.jpg) and remote URLs are both supported.
​
string
default:"cover"
CSS background-size value for the background image. Options: cover, contain, auto.
​
string
default:"center"
CSS background-position value for the background image. Options: center, top, bottom, left, right.
​
string
default:"no-repeat"
CSS background-repeat value for the background image. Options: no-repeat, repeat, repeat-x, repeat-y.

​
Layout

​
boolean
default:"false"
Make the card fit precisely into its parent container’s height instead of expanding to fit its content.This is especially useful in Home Assistant Panel dashboards and fixed-height grid layouts. In a Panel dashboard, the parent container is usually the full available dashboard viewport, so compact_height: true makes Daylight Calendar Card automatically size itself to fill the screen height.Use this when:
  • the card should fill a wall-tablet or kiosk screen
  • the card is inside a fixed-height grid area
  • Agenda view should scroll internally instead of making the whole dashboard taller
  • Month/Schedule view should compress vertically to fit the available space
Avoid this in normal masonry/sidebar layouts where the card’s parent may not have a defined height. In those layouts, use the default content height or adjust height_scale for Schedule view.
​
boolean
default:"false"
Reduce internal horizontal padding. Use this when the card is placed in a narrow column and you want to maximise the space available for the calendar grid itself.
​
number
default:"1.0"
A multiplier applied to the hour-row height in the Schedule view (also known as week-standard). A value of 1.5 makes each hour slot 50% taller; 0.75 compresses them. Does not affect Month, Week Compact, or Agenda views.

​
Light/Dark Mode

​
string
default:"auto"
Controls whether the card renders in light or dark mode. auto follows the Home Assistant theme, light always uses the light appearance, and dark always uses the dark appearance regardless of the theme.

​
Today Highlight

​
string
A simple hex color applied as the background of today’s cell in all views. For more control, use today_style instead.
​
object
An advanced object for fine-grained styling of today’s cell. You can set any combination of the following keys:When both today_background_color and today_style are set, today_style takes precedence.

​
Example

The configuration below creates a dark-themed card with a background image, semi-transparent header, and custom event colors: