Skylight Calendar Card — A family-friendly schedule card

Share your Projects! Dashboards & Frontend
1

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

image
image1650×879 50.2 KB

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_days mode 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!

10 Likes
DIY Family Calendar (Skylight)
📅 Calendar Merge — combine multiple calendar entities into one (HACS)
DIY Family Calendar (Skylight)
DIY Family Calendar (Skylight)
2

Thanks for sharing. I’m currently using this one: DIY Family Calendar (Skylight), which is a more manual setup.

I’ll give yours a test though.

3

I just went to update to v1.1.0 and received an error:

image
image646×500 25.5 KB

Otherwise this is looking really slick. Is it possible to have the calendar toggle buttons on the month and week view as well as the schedule view?

4

Rookie mistake (on my part), I believe your error was caused by the hacs.json file missing from the github repo. Sorry about that. I was just able to download the fixed version (v1.1.1) from HACS without issue. I am running Home Assistant Container, v2026.1.0, and HACS 2.0.5.

Please try again with v1.1.1. If it fails again, perhaps errors that show up in the logs may help? Feel free to reach out and I will help where I can.

For new features, I am happy to add that, if you’re comfortable in github please create an issue and I will work on it.

5

It worked, thank you.

No problem, I’ll raise it on Github.

6

By way of update on my use of this card over the last week or so and a bit of spruiking.

I have now changed over from the previous Skylight implementation that I was using and deleted that dashboard.

This card is beautifully designed and since it is a single card is much easier to setup and integrate into a dashboard.

Over the last week, the developer has added:

  • More view configuration options meaning that it’s now possible to display pretty much any combination of days or weeks that you would like;
  • Event management; and
  • The ability to make certain calendars readonly which is useful for bank holiday or birthday calendars to avoid accidental edits.

At this point, it’s pretty much the perfect Skylight implementation, IMO. Anyone else looking for one would do well to start here.

4 Likes
7

Really excited to try this. But can’t find it in HACS…?

8

You need to add the repository as a custom repo. 3 dots at the top right of the HACS page – Custom repositories.

9

Thank you! This is exactly what I have been looking for.

10

Awesome card! Is there a way to make the background transparent?

11

I love this card, especially now with the Dutch translation!

I have 2 questions.

  1. Is there a way to set 24h time notation?
  2. Is it possible to add one event to multiple calendars at once?

For 1 I mean in the schedule view, which I use most.

12

My family and I like it very much too. +1 for 24hr. I also noticed the date does not respect language settings: in Dutch the notation would be 22-28 feb 2026 instead of feb 22-28, 2026. Would tht be hard to internationlize?

13

I have submitted it to the HACS team for inclusion in their standard list of repositories. It will likely take a few more weeks before that is settled.

For now, installation as a custom repository is the correct way to install.

14

@NavNav, @mhoogenbosch, @Edwin_D, could I trouble you to create an issue on GitHub requesting these changes?

2 Likes
15

done

Feature Request: 24h notation in schedule view · Issue #74 · superdingo101/skylight-calendar-card for the 24hr notation in schedule view

Feature Request: Ability to select more calendars · Issue #75 · superdingo101/skylight-calendar-card for the ability to select more calendars on creating a new appointment.

16

@mhoogenbosch Both features implemented in the latest release.

2 Likes
17

Yes, I already showed the wife, she’s happy… and if she’s happy… we all are :wink: Very lovely! thanks

1 Like
18

This is great - thank you so much!

19

This card has changed a lot over the past few weeks! Here is a short summary of everything added since day one:

  • Internationalisation — full translation system with EN/FR/DE/NL support and auto-detection from HA
  • Dark mode — toggle, yaml-configurable, persisted to localStorage
  • Persisted preferences — hidden calendars and dark mode survive page reloads
  • Event management — full create/edit/delete with recurring event support; support varies depending on the underlying calendar integration
  • Combined calendars — duplicate events merged across calendars with visual indicators
  • Compact height & compact header — card fits viewport height dynamically
  • Rolling days/weeks — flexible sliding window views instead of fixed month/week grids
  • Current time bar in the schedule view
  • Visual config editor with a custom color picker, checkboxes, map inputs, and collapsible sections
  • Smart event fetching with change detection, range tracking, and incremental loading

I hope you find it as useful as I have! Feature requests are welcome!

3 Likes
20

Can you use card_mod to change things like fonts and event bubble backgrounds?