Home
Softono

Daylight Calendar Card

Open source MIT JavaScript
Website GitHub
155
Stars
18
Forks
8
Issues
3
Watchers
3 months
Last Commit
Home Automation

 About Daylight Calendar Card

A beautiful, custom Home Assistant calendar card

Platforms

Web Self-hosted

Languages

JavaScript

Links

Website Source Code

Need Help Installing Daylight Calendar Card?

We provide expert installation service for this software. Our team will install, configure, and secure Daylight Calendar Card on your server. plans start at just $30.

Hire an Expert
Published by
superdingo101
Visit View Profile

Daylight Calendar Card

View on GitHub

hacs_badge GitHub release GitHub stars Github All Releases GitHub issues License GitHub Sponsors Buy Me a Coffee

Daylight Calendar Card for Home Assistant

[!NOTE] Formerly known as skylight-calendar-card.

A bright, family-friendly calendar card for Home Assistant dashboards.

Designed for clarity at a glance, with flexible views and deep customization.

✨ Features

  • 📅 Month, Week, Schedule, and Agenda views
  • 👨‍👩‍👧‍👦 Multi-calendar support
  • 📝 Create and edit events
  • 🌤️ Weather forecasts
  • 🎨 Event Styles and Day Styles
  • 🏷️ Day Badges
  • 🧩 Virtual Calendars
  • 👤 Person entity integration
  • ✨ Rich Markdown and HTML event descriptions
  • 🎛️ Full visual editor
  • 📱 Responsive tablet-friendly design

📸 Screenshots

Week View

Week View

Schedule View

Schedule View

Agenda View

Agenda View

🔧 Requirements

  • Home Assistant
  • One or more calendar entities (e.g. calendar.family, calendar.work)

🚀 Installation

Recommended: Install via HACS

Open your Home Assistant instance and open a repository inside the Home Assistant Community Store.

OR

  1. Open HACS → Frontend
  2. Click + Explore & Download Repositories
  3. Search for Daylight Calendar Card
  4. Install and refresh your dashboard

👉 If you don’t have HACS yet, follow: https://hacs.xyz/docs/use/

Manual Installation

Without HACS

  1. Download: https://raw.githubusercontent.com/superdingo101/daylight-calendar-card/refs/heads/main/skylight-calendar-card.js

  2. Place in: <config>/www/skylight-calendar-card.js

  3. Add resource:

    /local/skylight-calendar-card.js?v=1

  4. Set type to JavaScript Module

  5. Refresh your browser

💡 After updates, bump the version (?v=2) to avoid caching issues.

⚡ Quick Start

type: custom:daylight-calendar-card
title: Family Calendar
entities:
  - calendar.family
  - calendar.work
  - calendar.holidays

📚 Documentation

Full documentation is available at:

https://docs.daylightcalendar.com

Popular Guides

  • Installation
  • Quick Start
  • Configuration Reference
  • Event Styles
  • Day Styles
  • Day Badges
  • Virtual Calendars
  • Event Management
  • Troubleshooting

💬 Community & Support

If you need help, have ideas, or want to contribute, use the options below:

🛠 Troubleshooting

Having problems?

  • Verify you're running the latest version
  • Open the About / Diagnostics section in the editor
  • Visit the troubleshooting guide

Still stuck? Open an issue.

💪 Support this project

If you'd like to support development, GitHub Sponsors is the preferred option ❤️

❤️ Acknowledgements

Thanks to the Home Assistant community for feedback, ideas, and contributions.

Your support helps shape the future of this project!