Skylight Calendar Card for Home Assistant

A custom Lovelace calendar card inspired by the Skylight Calendar style.

Compact Week View

Schedule View

Prerequisite

This card requires one or more Home Assistant calendar entities (for example: calendar.family, calendar.work, etc.).

Installation

Without HACS

1. Download these files: skylight-calendar-card.js
2. Add these files to your <config>/www folder
3. On your dashboard click on the icon at the right top corner then on Edit dashboard
4. Click again on that icon and then click on Manage resources
5. Click on Add resource
6. Copy and paste this: /local/skylight-calendar-card.js?v=1
7. Click on JavaScript Module then Create
8. Go back and refresh your page
9. You can now click on Add card in the bottom right corner, search for Skylight Calendar Card, and configure the card directly from the visual editor (or use Manual card with the quick start guide and the configuration wiki page).
10. After any update of the file you will have to edit /local/skylight-calendar-card.js?v=1 and change the version to any higher number

If it's not working, just try to clear your browser cache.

With HACS (Recommended)

This method allows you to get updates directly on the HACS main page

1. If HACS is not installed yet, download it following the instructions on https://hacs.xyz/docs/setup/download/
2. Proceed to the HACS initial configuration following the instructions on https://hacs.xyz/docs/configuration/basic
3. On your sidebar go to HACS > Frontend
4. Click on the + button at the bottom right corner
5. Now search for Skylight Calendar Card and then click on the button at the bottom right corner to download it
6. Go back on your dashboard and click on the icon at the right top corner then on Edit dashboard
7. You can now click on Add card in the bottom right corner, search for Skylight Calendar Card, and configure the card directly from the visual editor (or use Manual card with the quick start guide and the configuration wiki page).

If it's not working, try to clear your browser cache.

Quick Start

Use this simple, working example:

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

Documentation Wiki

Full documentation has been moved to the wiki pages in this repository:

• Wiki Home
• Installation
• Configuration
• Views & Navigation
• Event Management
• Troubleshooting
• Compatibility with Card Mod
• Development

Help

Feel free to open an issue if something is not working as expected.

Got questions or thoughts? Want to share your dashboards? You can go on the Home Assistant forum or on the GitHub Discussions section.

Donate

I dedicate most of my spare time to making this project the best it can be. So if you appreciate my work, any donation would be a great way to show your support 🍻

Thank you everyone for your support, you all are my greatest motivation!