Sorry, this is one of those cases for me that a 30 second conversation would have been faster and avoided confusion lol. I think I understand what you are saying now. Have a separate card for each calendar and one for all events per day and let the native visibility options handle which ones show. Yes it’s repeated config, but I’m fine with that.
This is just effectively a filter and since I have a finite set of cases (calendars), the above approach should work fine.
Is it possible to assign a seperate color to duplicate, filtered events ?
I am trying to change the event name to a different color, but it always stays white. I’ve tried with the css name, hex code, and rgb code. I don’t have any card mods on this one either.
can u pls fix a bug i have the newesest and i canot find hide past events
Hello, I am trying to find a way to get all day events to appear as banners (with the event background a solid colour).
The behaviour I am trying to mimic is the same as Google calendar or the default calendar card day view. All day events appear at the top of the day view as a solid colour banner, which makes it easer to see them as separate to the day’s meetings.
I was thinking I could have two instances of the card - one with just all day events and one without. Then the all day event one can have background opacity set > 0. However, I can’t find a way to use the event filtering to just include or exclude all day events.
Any ideas?
if u make 2 sperete calanders and put them in home assistend calander u can use calander card pro and set what callor for what calander
Im sorry if I have missed this in the documentation. But is is possible to set a style, only for the All-day events? I want to mark them a bit clearer. Bigger, bolder font or similar. Thanks
I would be keen on this feature too. Google Calendar, and the default calendar card, both have all-day events as a sort of banner at the top of the day.
I have managed to replicate this using the Famouswolf week planner card using Card Mod, as that gives the all day events their own html class. I haven’t managed to do it with calendar card pro.
If Calendar Card Pro let you change the opacity of all day events then you could easily replicate the Google functionality.
Amazing card alexp1 
Thanks a lot for sharing this.
As there has been a few requests to highlight all-day events better, here’s what I use with card-mod:
card_mod:
style: |
.event:not(:has(.time-actual ha-icon)) {
.summary {
overflow: unset;
.event-title {
background-color: #666877;
border-radius: 20px;
padding: 0px 12px;
}
}
}
It applies the rounded background to all events without a time sub-child.
So simply disable the time display for all-day events in your card setting and keep it enabled for normal events.
Looks like this:
Would look even better if the background could be the calendar color, but it’s not available as variable in this scope.
Thanks for this amazing calendar.
Two questions:
Anyone seeing this error in the console?
Source map error: Error: request failed with status 404
Stack in the worker:networkRequest@resource://devtools/client/shared/source-map-loader/utils/network-request.js:43:9
Resource URL: http://10.1.1.100:8123/hacsfiles/calendar-card-pro/calendar-card-pro.js?hacstag=939311749310
Source Map URL: calendar-card-pro.js.map
The card is working.
Hello, Before installing it and plying with it, can you please confirm to me I can display the events which are happening on several consecutive days being spread on consecutive days ?
The Google Calendar for example is oing it, but issue is when using a wall tablet and Fully Kiosk, there is no way to add a button to return to home page :
… and using the standard Agenda card, the events are not showned as spread on multiple days :
I really like the google calendar look and feel, clear, etc … but wondering about the Calendar Card pro …
Many Thanks !!
Not completely sure if this is what you’re asking about:
The card has an option to split multi-day events into multiple events so it will show up on every day instead just the first one.
Hello,
I would like to have a dynamic height set on deifferent parameters (that induce the display of other cards).
I set my variable height in a template sensor and add
height: "{{states('sensor.desired_height')}}px"
in the configuration, but that does not seem to work in a stable way.
It works sometimes, but randomly falls back on “automatic height” on card edit or refresh.
Anything I might be doing otherwise?
Is it possible to have it only display the name of the Location chosen in the address and not display the actual address/city/state/etc.?
Is there a bug when 2 different calendars have an event at the same time. Only 1 event shows ?
Thanks
I’m seeing some odd behavior with more than one calendar card on a single view.
I can not fathom why the colors are different between these two cards, especially since I just copied the config from one to the other (and then made some tweaks to the second one).
Card 1:
Card 1 code:
entities:
- entity: calendar.person1
color: white
accent_color: rgba(7, 103, 215)
blocklist: ""
compact_events_to_show: 3
show_time: true
days_to_show: 1
compact_days_to_show: 1
compact_events_to_show: 3
show_empty_days: true
filter_duplicates: true
title: OBSCURED
title_font_size: 26px
title_color: white
background_color: rgba(7, 103, 215, 0.24)
day_separator_width: 2px
day_separator_color: rgba(7, 103, 215)
date_vertical_alignment: top
weekday_font_size: 24px
weekday_color: white
day_color: white
show_month: false
month_color: white
event_font_size: 18px
event_color: white
empty_day_color: rgba(7, 103, 215)
show_end_time: false
time_font_size: 16px
time_color: white
time_icon_size: 16px
show_location: false
location_color: orange
weather:
position: date
date:
show_conditions: true
show_high_temp: true
show_low_temp: false
icon_size: 20px
font_size: 18px
color: rgba(7, 103, 215)
event:
show_conditions: true
show_temp: true
icon_size: 14px
font_size: 12px
color: rgba(7, 103, 215)
entity: weather.pirate_weather
tap_action:
action: navigate
navigation_path: /xxxx
refresh_on_navigate: false
type: custom:calendar-card-pro
grid_options:
columns: 11
rows: auto
max_height: "280"
Card 2:
Card 2 code:
entities:
- entity: calendar.person2
days_to_show: 1
compact_days_to_show: 1
compact_events_to_show: 3
show_empty_days: true
filter_duplicates: true
title: OBSCURED
title_font_size: 26px
title_color: white
background_color: rgba(7, 103, 215, 0.24)
day_separator_width: 2px
day_separator_color: purple
date_vertical_alignment: top
weekday_font_size: "0"
weekday_color: white
day_font_size: "0"
day_color: white
show_month: false
month_color: white
event_font_size: 18px
event_color: white
empty_day_color: green
show_end_time: false
time_font_size: 16px
time_color: white
time_icon_size: 16px
show_location: false
location_color: orange
weather:
position: date
date:
show_conditions: true
show_high_temp: true
show_low_temp: false
icon_size: 20px
font_size: 18px
color: rgba(7, 103, 215)
event:
show_conditions: true
show_temp: true
icon_size: 14px
font_size: 12px
color: white
tap_action:
action: navigate
navigation_path: /xxxx
refresh_on_navigate: false
type: custom:calendar-card-pro
grid_options:
columns: 11
rows: auto
max_height: "280"
I have a question: why does my calendar always have a grey background and not the themed one? here is an example:
The background should by blurry like the card above.
Here is my code of the calendar card:
entities:
- entity: calendar.desiree_sven
color: red
accent_color: blue
accent_color: green
event_background_opacity: 100
time_24h: true
weather:
position: date
date:
show_conditions: true
show_high_temp: true
show_low_temp: false
icon_size: 14px
font_size: 12px
color: var(--primary-text-color)
event:
show_conditions: true
show_temp: true
icon_size: 14px
font_size: 12px
color: var(--primary-text-color)
type: custom:calendar-card-pro
I do. Is there a fix? Not that anything seems broken - it is a warning after all.
I have not seen this error for months. Can’t remember doing anything to fix it other than updating the card.