Calendar Card Pro - A beautiful, high-performance calendar card for Home Assistant

Calendar Card Pro - A beautiful, high-performance calendar card for Home Assistant

Hi everyone! :wave:

I’m excited to share Calendar Card Pro - a custom card I developed to display calendar events in Home Assistant with a clean, modern design and optimized performance!

Why I built this

I fell in love with @kdw2060’s calendar designs but ran into some performance issues when implementing them with button-card and card-mod. So I decided to create a dedicated card from scratch that offers the same beautiful design but with better performance.

Features

  • :art: Sleek & minimalist design - Clean, modern layouts inspired by material design
  • :date: Multi-calendar support - Display and color-code multiple calendars
  • :arrows_counterclockwise: Compact & expandable views - Toggle between space-efficient and detailed displays
  • :zap: Optimized performance - Smart caching, progressive rendering, minimal API calls
  • :rainbow: Highly customizable - Fine-tune colors, fonts, spacing and more
  • :earth_africa: Multi-language - Currently supports English and German (more coming soon!)
  • :electric_plug: Works with any calendar integration - Compatible with Google Calendar, CalDAV, etc.

Compatibility

This card is designed to work with any integration that creates calendar entities in Home Assistant. You just need any calendar.* entity, and you’re good to go! I’ve specifically tested itwith CalDAV &Google Calendar, integration. No special add-ons or configurations required - it just works with your existing calendar setup!

Some examples

Basic view with HA default theme:

Multiple calendars with compact/expanded mode and iOS theme:

Installation

📦 HACS Installation (Recommended)
  1. Make sure HACS is installed
  2. Go to HACSFrontendCustom Repositories
  3. Add this repository: https://github.com/alexpfau/calendar-card-pro
  4. Install Calendar Card Pro
  5. Refresh your browser

Open in HACS

📂 Manual Installation
  1. Download the latest release from GitHub
  2. Copy calendar-card-pro.js to your /config/www/ directory
  3. Add the resource in your dashboard:
    url: /local/calendar-card-pro.js
    type: module
    
  4. Add the card to your dashboard:
    type: custom:calendar-card-pro
    entities:
      - calendar.your_calendar
    

Looking for contributions!

This is a hobby project that I work on in my spare time, so community help is very welcome! Specifically looking for:

  • Translations to other languages
  • Feature ideas and feedback
  • Bug reports
  • Code contributions

Check out the GitHub repo for more information and the complete documentation.

Enjoy! :blush:

12 Likes

Pretty cool. Shame it does not use the same css that other core and custom cards do so that it takes my theme:

Not sure I can be bothered sorting that out with card mod.

Nice work! I’m starting to learn about hass frontend in order to recreate a mix of Skylight and hearth calendar UIs. I’m going to review your code to help me learn haha… I’m not asking you to do this, but what would it take to make the calendar events clickable? I’m still trying to understand the frontend architecture documentation.

Thank you! :slight_smile: The card does actually utilize CSS classes of user’s themes, but only for those things that are implemented. For themes like HA native/Mushroom, iOS, or Bubble, the elements and CSS classes I have implemented achieve a unified look and feel, however, I have not implemented all elements and CSS classes that exist in HA (like this title gradient for instance) because I didn’t have a need yet (or might not even be aware of all of them). Thus, there is no way currently to style these non-existing style elements like the title gradient with card-mod.

That said, if you don’t mind, please open a feature request on my GitHub and describe the styling elements you are missing in your theme, ideally together with the name of your theme and if you have, the CSS class of those elements:

Thanks man! What do you mean specifically by “making the calendar events clickable”, i.e., what are you trying to achieve?

For example: Do you want each calendar event to be its own dedicated clicking area and then for instance open more details for this very event? I haven’t done something like that, but I guess it’s doable as each calendar event is in it’s own table row and this row could be defined as a clicking surface.

I have implemented the entire card as one click surface to toggle tap and hold actions as defined in the user’s config. This corresponds more with my idea of this clean calendar card. What I do on my dashboard to get more details than I initially show on the main page is have the calendar card open a bubble popup with another instance of the calendar card that shows more details. This way, I have a clean card on the main dashboard page, and more details after one tap. :slight_smile:

Hi

Thanks for the very nice card and to share it :wink:

I have submitted a pull request to include french translation in it.

Vincèn

1 Like

Yes, that’s what I was talking about. Ah, great. Thanks for the idea!

1 Like

@stupac62, feel free to create a fork of my repo and play around with the actions, if you like. :slight_smile:

1 Like

@vincen - getting the first contribution not even 24h after releasing my card is really awesome, thank you! In addition to the fr.json, i will also need to update a few other modules to ensure proper formatting of time strings and respecting language specifics (like Mar 15 in English, 15. Mär in German, and 15 Mar in French). I will look into that shortly and release an update in HACS including French.

1 Like

Looks great. I only have one issue. I have a recurring calendar item in my IOS calendar that I declined on my phone, but it is shown by your extension. My guess is that you should filter declined calendar items, or make a configuration for it, like show_declined, defaulting to false.

Thanks for sharing this, For some reason it is showing my calendar events a day ahead of the actual scheduled event (see example below). Any ideas on what I’ve got misconfigured?

Mine Calendar Pro is also showing events on the day scheduled prior.

It does look really good!

Great Calendar! How do you add those little icons for each event ?

@Janno, great idea and probably rather easy to implement! If you don’t mind (and haven’t done yet), can you please open a feature request on GitHub with your proposal? I will prioritize all ideas and work through the proposals in the coming weeks.

@Vettester, I’ve read from another user on Facebook that had the same issue, but many others don’t. It’s not clear to me yet what’s causing this, but looks like a time zone issue. If you don’t mind (and haven’t done yet), can you please open a bug ticket on GitHub and provide additional information? It would be great if you could include info on

  1. your local timezone
  2. go to dev tools in HA > actions > choose calendar.get_events, choose your calendar entity, start and end time => include the result you get in you bug ticket

This should enable me to narrow the issue down. Thanks for your support!

@smokeygoose Those are actually just emojis added at the beginning of each individual calendar event.