Configuration

Configuration

Minimal working config

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

Common options

type: custom:skylight-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
show_week_numbers: false
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

Option	Type	Default	Description
title	string	'Family Calendar'	Card title displayed in header
entities	list	Required	List of calendar entity IDs
calendar_names	map	auto	Custom name map for each calendar entry
default_view	string	null	Initial view mode on load: 'month', 'week-compact', or 'week-standard'
header_color	string	'var(--primary-color)'	Custom header background (solid color or gradient)
first_day_of_week	integer	0	First day of week (0 = Sunday, 1 = Monday, etc.)
week_days	list	[0,1,2,3,4,5,6]	Days to show in week views (0=Sun, 6=Sat)
rolling_days_week_compact	integer	null	Compact week view: show today + N days (alternative to week_days)
rolling_days_schedule	integer	null	Schedule view: show today + N days (alternative to week_days)
rolling_weeks	integer	null	Show this week + N weeks in month view
week_start_hour	integer	8	Start hour for week-standard view (0-23)
week_end_hour	integer	21	End hour for week-standard view (0-23)
height_scale	float	1.0	Height scaling factor (0.5-2.0, affects schedule view)
compact_height	boolean	false	Fit monthly/schedule views to available screen height without scrolling
compact_header	boolean	false	Single-row header with inline badges
hide_event_calendar_bubble	boolean	false	Hide the calendar initial bubble shown inside events
hide_times_for_calendars	list	[]	Calendar entities whose start/end times should be hidden in schedule view
show_current_time_bar	boolean	false	Show a red current-time indicator line in schedule view
default_dark_mode	boolean	false	Start the card in dark mode on load (legacy alias: dark_mode)
show_week_numbers	boolean	false	Show week numbers on the left side
max_events	integer	100	Maximum number of events to load
enable_event_management	boolean	true	Enable event creation features
readonly_calendars	list	[]	Calendar entities that should not allow modifications
colors	map	auto	Custom colors for each calendar entity
language	string	en	Language for strings
locale	string	en-US	Optional locale; falls back to language/Home Assistant settings
background_transparent	boolean	false	Set calendar background to transparent
background_image_url	string	[]	Online URLs or HA local media path
background_image_size	string	cover	Any valid css for background-size, incl: cover (default); contain; auto; 100% 100%; 120px auto
background_image_position	string	center	Any valid background-position value, incl: center (default); top, bottom, left, right; top left, center right; 50% 25%; 20px 40px
background_image_repeat	string	no-repeat	Any valid background_image_repeat value, incl: no-repeat (default); repeat; repeat-x; repeat-y; space; round
use_24hr_schedule	Boolean	false	Use 24 hr notation in schedule view

Features in detail: appearance and colors

Color-coded events

Each calendar entity can have its own color:

colors:
  calendar.personal: '#FF6B6B'    # Red for personal events
  calendar.work: '#4ECDC4'        # Teal for work events
  calendar.family: '#45B7D1'      # Blue for family events
  calendar.kids: '#FFA07A'        # Orange for kids' activities

Customizing header color

The header defaults to var(--primary-color), or you can set a custom color/gradient.

Solid colors:

header_color: '#1e40af'
header_color: '#059669'
header_color: '#dc2626'

Gradients:

header_color: 'linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%)'
header_color: 'linear-gradient(135deg, #065f46 0%, #10b981 100%)'
header_color: 'linear-gradient(135deg, #ea580c 0%, #dc2626 100%)'
header_color: 'linear-gradient(135deg, #0f766e 0%, #14b8a6 100%)'
header_color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'

Theme variables:

header_color: 'var(--secondary-color)'
header_color: 'var(--accent-color)'
header_color: 'var(--card-background-color)'
header_color: 'var(--primary-color)'

Background customization (transparent or image)

You can make the calendar background transparent, or set a background image URL that applies across month, week, and schedule views:

type: custom:skylight-calendar-card
entities:
  - calendar.family
background_transparent: true
# or use an image instead:
# background_image_url: https://example.com/your-photo.jpg
# background_image_size: cover
# background_image_position: center
# background_image_repeat: no-repeat

background_image_url supports:

• Online images (for example https://...)
• Home Assistant local media paths (for example /media/local/family/photo.jpg)
• Home Assistant media-source local URIs (for example media-source://media_source/local/family/photo.jpg)