Skylight Calendar Card — A family-friendly schedule card
Hey everyone! I built a new Lovelace calendar card that’s been a game-changer for keeping our family organized. It’s heavily inspired by the Skylight Calendar app — clean, easy to read at a glance, and designed around how families actually use calendars.
Three views, all switchable from the card:
- Month — classic grid, color-coded events, all-day events float to the top
- Week (compact) — stacked event list per day, great for a quick glance
- Schedule — timeline view with events placed at their exact time slots, concurrent events side-by-side
A few things I’m particularly happy with:
- All-day events always sort to the top, and the all-day row only appears when there are actually all-day events — no wasted space
- The header automatically picks up your theme’s primary color (
var(--primary-color)), so it just fits right in rolling_daysmode lets you show “today + N days” instead of a fixed week — super handy if you want a 3-day or 10-day lookahead- Works great on mobile too
Quick setup:
type: custom:skylight-calendar-card
title: Family Calendar
entities:
- calendar.personal
- calendar.work
- calendar.kids
default_view: week-standard
rolling_days: 6 # Today + 6 = 7 days
height_scale: 0.6 # Compact it down
compact_height: true # Scroll within the card
That’s really all it takes to get going. Full docs and install instructions are in the README.
Would love to hear what you think — happy to take feature requests or bug reports. Let me know if you run into any issues getting it set up!
