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

Share your Projects! Dashboards & Frontend
21

Not a good start - first (for Google) you need to the Google calendar intergration - erm - no.

Screenshot 2025-03-17 163807
Screenshot 2025-03-17 1638071006×403 26.3 KB

22

Hi.
I’m using the Home Assistant Companion App on several Devices. Every Device shows the Calendar correctly.

I only get the above error message on the Fire tablet. Home Assistant Core and Calendar Card Pro are up to date. Google says that the problem is probably with Webview. Amazon System Webview v84-4147.125.183 is installed on the Fire Tablet.
Unfortunately, I cannot install the Android system Webview on Fire Tablets.
This problem only exists with this frontend, all other frontends installed via HACS are displayed correctly.

23

Are you using Fully Kiosk Browser on your Fire Tablet? You may want to give it some time to clear cache. I’ve had similar issues with other custom cards in the past, and heard from other users similarly.

24

Looks like you are having issues with integrating your Google Calendar into Home Assistant using the Google Calendar integration. While I cannot bug fix this component as it’s not related to me in any way, I can only say that it’s working for me. I am using a Google Calendar and this integration for testing purposes.

If your issues persist and you don’t want to use the Google Calendar integration - no problem, my card supports ANY CALENDAR integrated via ANY INTEGRATION into your Home Assistant. It’s your choice! :wink:

25

Hi @firstcolle, I saw you opened Feature Requests in my GitHub repo for your ideas that others had not yet proposed. This is amazing, thanks for your contribution!

I will need some time to go through all ideas, evaluate them across multiple criteria and prioritize them, and then start implementation. It was an intense 3 weeks since starting this project, so please bare with me as this is a hobby project. :slight_smile:

26

Calendar Card Pro v1.2.0 Released - Now with 18 Languages! :globe_with_meridians:

Hi everyone!

I’m excited to announce the release of Calendar Card Pro v1.2.0! :tada:

This update significantly expands the card with comprehensive multi-language support, adds language-specific date formatting, and fixes several important bugs that were reported by the community.

What’s New in v1.2.0

:earth_africa: Full Multi-Language Support

Calendar Card Pro now supports 18 languages thanks to amazing community contributions! The card will automatically detect your Home Assistant language setting, or you can manually specify a preferred language.

:bug: Bug Fixes

Fixed the time_24h: false setting not applying to multi-day events, ensuring all event types properly respect your time format preferences.

:bulb: Other Improvements

  • Enhanced date formatting that respects language conventions

  • Improved documentation

  • Various code optimizations

Thank You to Our Amazing Contributors!

This release wouldn’t be possible without the incredible contributions from the Home Assistant community. A special thank you to everyone who contributed translations:

jakksoft, hrassel, dkduck, @mhoogenbosch, Kotikaltsu, vincegre, Shanksg, @suxlala, russi76, @papperone, @andrewjswan, CrallH, and PATCoder97!

Getting Started

If you’re already using Calendar Card Pro, you can update it through HACS. The card will automatically detect your Home Assistant language setting, or you can manually specify a language in the card configuration:


type: custom:calendar-card-pro

language: fr # Optional: specify a language or let it auto-detect

For the complete list of changes and full details, check out the GitHub Release Notes.

Want to Help?

Thanks again to this amazing community for all your support, bug reports, and contributions. :heart:

5 Likes
27

Thank you for sharing this amazing calender. One question if i have no event in the calender it will not show the title. can i fix this somehow? i want the Title always to show. THank you so much

28

@Armin_S This is great feedback, thanks! If you don’t mind, would you open a feature request in my repo? GitHub · Where software is built

This allows me to have one central place for all potential improvements and features where I can prioritize them for implementation, and nothing gets lost.

Many thanks for your contribution!

29

@tom_l, any chance you could tell me the name of the theme you are using there? This would allow me to use it for debugging purposes. Thanks!

30

Thank you for sharing this! I’m just wondering if there is a way to expand this card to take full width of the section?

31

No, i use the Companion App.

32

Oh, I want to use the Google Calendat - it just won’t let me. Possibly as I use 5G for broadband, no proper public address?

33

Oh my god, that is sooo fantastic. I just started with HA migrating from openHAB and the calendar options made me really crazy in HA as openHAB i had a fantastic overview for my family. I replied to 2 feature requests in your github, especially vertical bar color per calendar and to limit the max entries per calendar (+ a third less urgent to grey out / different color for the today past events).

Thanks for that great work, really appreciate it!

1 Like
34

Hey, i like to test your realy cool card, but by the instalation via HACS i got a compliant-error.

<Integration alexpfau/calendar-card-pro> Repository structure for v1.2.3 is not compliant

Maybe you can check it out.

35

You‘ve gotta choose category dashboard in HACS. :wink:

36

oh…, i selected Integration.
:smiley: Thank you, what a beginner’s mistake

37

No worries! :slight_smile: Actually, the category to choose was missing in my ReadMe - will be added with the next release in a bit.

38

Calendar Card Pro v2.0.0 Released

This major release completely reimagines Calendar Card Pro with a new architecture, enhanced performance, and numerous new features for customization. Calendar Card Pro v2 brings significant improvements to theme compatibility, visual styling options, and smart data management.

→→→ Please see the :new: What’s New in v2 section in the README for detailed examples of all new features. ←←←

:rocket: Major Refactoring

Enhanced Performance

  • Complete Rewrite: Entirely new rendering engine for better performance
  • Smart Caching: Intelligent caching reduces API calls and improves load times
  • Progressive Rendering: Efficiently renders events in small batches to maintain responsiveness
  • Stable DOM Structure: Consistent structure for better compatibility with other components

Improved Theme & Card-Mod Compatibility

  • Native Theme Support: Properly integrates with all Home Assistant themes
  • Standard Card Structure: Uses standard ha-card structure making card-mod work exactly like other cards

:tada: New Features

Custom Styling Per Calendar

  • Accent Colors: Assign unique colors to the vertical line for each calendar entity (#19 and #92 by @LiquidPT)

  • Background Colors: Enable semi-transparent backgrounds matching the accent color

  • Smart Rounded Corners: Events use rounded corners derived from your theme’s card radius

  • Visual Hierarchy: Instantly distinguish events from different calendars at a glance

    Custom Styling
    Custom Styling1600×1245 270 KB

Calendar Labels

  • Custom Calendar Identifiers: Add emoji or text before event titles (#65, #83, #91)
  • Visual Distinction: Labels appear before event titles with proper spacing
  • Improved Accessibility: Distinguish calendars beyond just color coding

Advanced Display Controls

  • Per-Calendar Settings: Control which information appears for specific calendars
  • Flexible Configuration: Show time or location information based on calendar type
  • Simplified Display: Hide time information for all-day events (#7)

Custom Start Date

  • Date Selection: View calendars from any date, not just today (#25, #77)
  • Future Planning: Create seasonal or special-purpose calendars
  • Flexible Format: Supports both YYYY-MM-DD and ISO date formats

Empty Day Display

  • Consistent Layout: Always display all configured days, even when they have no events (#40)
  • Visual Placeholders: Clear indication of empty days with checkmark emoji
  • Improved Organization: Easily see when days have no scheduled events

Enhanced Past Event Display

  • Visual Distinction: Past events appear with reduced opacity (60%)
  • Improved All-Day Handling: Correctly handles multi-day all-day events
  • Smart Detection: All-day events active today are never marked as “past”

Fixed Height with Scrolling

  • Size Control: Limit card height while preserving all events (#62, #51)
  • Automatic Scrolling: Content scrolls when it exceeds defined height
  • Consistent Layout: Maintain dashboard aesthetics regardless of event count

Smarter Caching

  • Navigation-Aware Caching: Option to preserve cache when switching dashboard views
  • Reduced API Calls: Minimizes unnecessary API requests
  • Mobile-Friendly: Better performance and battery life for mobile users

Enhanced Spacing Controls

  • Fine-Tuned Layout: Control vertical padding within each event (#11)
  • Day Spacing: Adjust spacing between different calendar day rows
  • Consistent Naming: More intuitive parameter names (row_spacing → day_spacing)

Today’s Event Styling with Card-Mod

  • Custom Today Highlighting: Easily style today’s events differently with card-mod (#20)
  • Animation Support: Create subtle animations for today’s events
  • Visual Priority: Make current day events stand out

:hammer_and_wrench: Breaking Changes

  1. Parameter Renaming:

    • row_spacing is now day_spacing (for clarity)

  2. Split Parameters:

    • time_location_icon_size has been split into separate parameters:
      time_icon_size: '14px'
location_icon_size: '14px'

  3. Card DOM Structure: Internal structure updates may affect existing card-mod customizations

:books: Documentation Updates

  • Reorganized README: Clearer feature explanations with examples
  • Enhanced Configuration Guide: Comprehensive parameter documentation
  • New Examples: Additional configuration examples with screenshots
  • Architecture Documentation: New developer documentation explaining internal design

:gear: Technical Improvements

  • Modular Architecture: Completely restructured codebase for maintainability
  • Type Safety: Enhanced TypeScript interfaces throughout the codebase
  • Styling System: Improved CSS variable integration with Home Assistant themes
  • Event Processing: Better handling of multi-day and all-day events
  • Error Handling: Graceful degradation when calendar data is unavailable

:bug: Bug Fixes

  • Multiple Lit Versions: Fixed issues with multiple versions of Lit being loaded (#74)
  • Title Display: Card title now always displays even with no events (#70)
  • All-Day Events: Improved detection and display of all-day events
  • Theme Compatibility: Fixed inconsistencies with various Home Assistant themes
  • Date Alignment: Fixed date column alignment issues (#41)

New Contributors

Full Changelog: Comparing v1.2.3...v2.0.0 · alexpfau/calendar-card-pro · GitHub

Thank you to everyone who contributed feature requests and bug reports that made this release possible!

6 Likes
39

I am doing something wrong.
Installed via HACS, reloaded site and restarted HA.
When trying to add the calendar to a dashboard i get this error.
Check image

pro
pro692×744 62.7 KB

40

What happens when you just tap the card and add it to your dashboard? You should just be able to configure it, the auto detection for entity is not really needed for anything.