Calendar Card Pro - A beautiful, high-performance calendar card for Home Assistant
Hi everyone!
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!
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
Sleek & minimalist design - Clean, modern layouts inspired by material design
Multi-calendar support - Display and color-code multiple calendars
Compact & expandable views - Toggle between space-efficient and detailed displays
Optimized performance - Smart caching, progressive rendering, minimal API calls
Highly customizable - Fine-tune colors, fonts, spacing and more
Multi-language - Currently supports English and German (more coming soon!)
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!
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! 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.
@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.
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?
@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
your local timezone
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!
Sleek & minimalist design - Clean, modern layouts inspired by material design
Multi-calendar support - Display and color-code multiple calendars
Compact & expandable views - Toggle between space-efficient and detailed displays
Optimized performance - Smart caching, progressive rendering, minimal API calls
Highly customizable - Fine-tune colors, fonts, spacing and more
Multi-language - Currently supports English and German (more coming soon!)
Works with any calendar integration - Compatible with Google Calendar, CalDAV, etc.
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.
