Display & Header Options for Daylight Calendar Card

Control header visibility, navigation, calendar badge display, and event formatting options for the Daylight Calendar Card in Home Assistant.

The Daylight Calendar Card gives you fine-grained control over which interface elements are visible and how individual events are presented. Whether you want a completely frameless calendar embedded in a dashboard or a fully interactive card with navigation controls and calendar toggles, the options below let you build exactly what you need.

Header Options

The header sits at the top of the card and contains the title, navigation arrows, view selector, add-event button, and the dark-mode toggle. You can hide any combination of these controls independently.

hide_header · boolean · default: "false"

Hide the entire card header, including the title and all controls. Useful when you want only the calendar grid itself to appear.

hide_year · boolean · default: "false"

Remove the year from the date shown in the header. Helpful when space is tight and the year is implied.

hide_navigation_buttons · boolean · default: "false"

Hide the previous and next navigation arrows so the card stays fixed on the current period.

hide_view_selector · boolean · default: "false"

Hide the view-selector dropdown (Month / Week / Schedule / Agenda) so the card stays locked to its default_view.

hide_add_event_button · boolean · default: "false"

Hide the Add Event button from the header.

hide_dark_mode_toggle · boolean · default: "false"

Hide the light/dark mode toggle button.

hide_controls · boolean · default: "false"

Hide all controls at once — equivalent to setting hide_navigation_buttons, hide_view_selector, and hide_add_event_button to true simultaneously.

compact_header · boolean · default: "false"

Collapse the header into a single row by placing the title and controls side by side. This saves vertical space on smaller cards.

show_dashboard_nav_button · boolean · default: "false"

Show a button in the header that navigates to another Home Assistant dashboard. You must also set header_dashboard_path for the button to appear.

header_dashboard_path · string

The path of the dashboard to open when the navigation button is clicked. For example, /lovelace/calendar or /lovelace-custom/overview. Requires show_dashboard_nav_button: true.

Calendar List Options

The calendar list lets users toggle individual calendars on or off from inside the card. These options control whether the list is shown and how each calendar is labelled.

hide_calendars · boolean · default: "false"

Hide the calendar visibility toggle list entirely.

hide_calendar_names · boolean · default: "false"

Hide the text name next to each calendar’s colored dot in the calendar list, showing only the color indicators.

default_hidden_calendars · list

A list of calendar entity IDs that should be hidden when the card loads for the first time. The user can still reveal them using the calendar toggle list. Once the user changes their selection it is saved in browser storage.

default_hidden_calendars:
  - calendar.work
  - calendar.holidays_in_united_states

calendar_names · map

Override the display name of any calendar in the card UI. The key is the entity ID and the value is the name you want shown.

calendar_names:
  calendar.family: "Family"
  calendar.work: "Work"

calendar_badge_icons · map

Assign an MDI icon to a calendar. The icon appears as a badge next to the calendar’s colored dot in the calendar list and, optionally, on each event from that calendar.

calendar_badge_icons:
  calendar.family: mdi:home-heart
  calendar.work: mdi:briefcase

hide_badge_calendars · list

A list of calendar entity IDs to exclude from the calendar badge row that appears in the card header. Calendars listed here will still appear in the main calendar grid and in the calendar toggle list — they are only hidden from the compact badge indicator strip at the top of the card.

hide_badge_calendars:
  - calendar.holidays_in_united_states
  - calendar.boss_calendar

Event Display Options

event_font_size · number · default: "11"

The font size (in pixels) of the event title text.

event_time_font_size · number · default: "9"

The font size (in pixels) of the event start/end time text.

event_location_font_size · number · default: "9"

The font size (in pixels) of the event location text.

event_calendar_friendly_name · boolean · default: "false"

Show the calendar’s friendly name beneath the event title in event detail modals.

event_title_prefix · string · default: "none"

Prepend a prefix to every event title in the calendar grid. Options:

• none — no prefix
• badge_icon — prepend the calendar’s MDI badge icon (requires calendar_badge_icons)
• friendly_name — prepend the calendar’s display name

hide_event_calendar_bubble · boolean · default: "false"

Hide the small colored dot (calendar indicator) that appears on each event chip in the grid.

hide_times_for_calendars · list

A list of calendar entity IDs for which event start and end times should be hidden. Applies to Month, Week Compact, Schedule, and Agenda views. Useful for all-day or informational calendars where times add clutter.

hide_times_for_calendars:
  - calendar.holidays_in_united_states

shorten_event_times · boolean · default: "false"

Display times in a compact format — for example, 10 AM instead of 10:00 AM. Applies to Month, Week Compact, Schedule, and Agenda views.

show_event_location · boolean · default: "false"

Show the event’s location text below the event title. Applies to Week Compact, Schedule, and Agenda views. Also applies to Month only when show_all_details_month is enabled.

use_short_location · boolean · default: "false"

When show_event_location is also enabled, truncate long location strings to a shorter form so they don’t push event blocks taller. Applies to Week Compact, Schedule, and Agenda views. Also applies to Month only when show_all_details_month is enabled.

past_event_mode · string · default: "none"

Controls how events that have already ended are displayed:

• none — past events appear exactly like future events
• hide — past events are removed from view entirely
• muted — past events are shown with reduced opacity to de-emphasise them

disable_swipe_controls · boolean · default: "false"

Disable touch swipe gestures for navigating between weeks and months. Useful on dashboards where the card is embedded inside another scrollable container.

Example

type: custom:daylight-calendar-card
title: Family Calendar
entities:
  - calendar.family
  - calendar.work
  - calendar.holidays_in_united_states
compact_header: true
hide_dark_mode_toggle: true
hide_add_event_button: false
show_dashboard_nav_button: true
header_dashboard_path: /lovelace/home
default_hidden_calendars:
  - calendar.holidays_in_united_states
calendar_names:
  calendar.family: "Family"
  calendar.work: "Work"
calendar_badge_icons:
  calendar.family: mdi:home-heart
  calendar.work: mdi:briefcase
event_font_size: 12
event_time_font_size: 10
shorten_event_times: true
show_event_location: true
use_short_location: true
past_event_mode: muted
hide_times_for_calendars:
  - calendar.holidays_in_united_states
hide_badge_calendars:
  - calendar.holidays_in_united_states