Why cant I change height of the calendar card ?
type: calendar
entities:
- calendar.mymail_gmail_com
initial_view: dayGridDay
card_mod:
style: |
ha-card {
min-height: 200px !important;
color: red;
}
It accepts the color change but not the height. The height is just greyed out like so:
If I change this in the developer console it does exactly what I want:
Can anyone help?
This is my solution:
- type: calendar
entities:
- calendar.mailo_gmail_com
initial_view: dayGridDay
card_mod:
style:
ha-full-calendar:
$: |
#calendar {
min-height: 150px !important;
}
Is this a custom card or where did you put this bit?
Thank you, found it.
I’ll give it a go.
sorry to piggyback on this but the Spousal Approval Factor is at stake.
I have the calendar on an Inkplate 10 and thankfully, I found your thread about the height which helped a lot but the spacing between the event lines is so big that the calendar still only shows 2-3 events.
Do you know by any chance on how I’d be able to reduce the spacing and how I could change the past events to not “fade” (wife thinks the grey events make it look “broken”).
Big thanks to anyone who can help me 
Hey @motz ,
Spousal approval factor are the most important , I know what you are talking about !
I have tried to make some changes for you , maybe that can help…
card_mod:
style:
ha-full-calendar:
$: |
#calendar {
min-height: 230px !important;
}
.fc-day-past .fc-daygrid-day-events {
opacity: 1 !important;
}
.fc .fc-daygrid-event {
padding 0px !important;
margin 0px !important;
}
@cvester You rock! The events are not faded any more! I think that’s the most critical part as it looks good now.
The .fc .fc-daygrid-event didn’t seem to change anything for now but that direction on how to play around should already help me get there eventually.
Thanks again! Man, I love this community.
Edit: height: did the trick! Yay!
.fc .fc-daygrid-event {
padding 0px !important;
margin 0px !important;
height: 15px !important;
}
Good you found a solution , I’m glad I could help ! 
this worked great for me…many thanks…to be fair it was nitpicking for me but HASS is all about a tinkering session
Hello, I am also trying to extend the height of the calendar view, but no success.
I would like to fill in the blank space at the bottom of the card … the width is ok though :
- initial_view: dayGridMonth
type: calendar
entities:
- calendar.ceccccdrccccole_gmail_com
card_mod:
style:
ha-full-calendar:
$: |
#calendar {
min-height: 200px !important;
}
in fact as far as I can see now that I have setup a black background, it increases the height of the “card”, but not the height of the table (calendar itself), as you can see :
… here is my complete code :
kiosk_mode:
admin_settings:
hide_header: false
hide_sidebar: false
non_admin_settings:
kiosk: true
views:
- title: Home
sections: []
type: custom:grid-layout
layout:
grid-template-rows: 75px 500px
grid-template-columns: 600px 600px
grid-template-areas: |
"head1 head1"
"col1 col1"
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.delecole
tap_action:
action: navigate
navigation_path: /lenovo-m10-plus-home/0
name: Home
content_info: name
icon: mdi:home
use_entity_picture: false
icon_color: yellow
view_layout:
grid-area: head1
- initial_view: dayGridMonth
type: calendar
entities:
- calendar.xxxxxx_gmail_com
card_mod:
style: |
ha-card {
background: black;
min-height: 600px !important;
border: 0px;
}
view_layout:
grid-area: col1
Many Thanks !!
My guess would be that you target the ha-card like this:
ha-card {
background: black;
min-height: 600px !important;
border: 0px;
}
and not like this
ha-full-calendar:
$: |
#calendar {
min-height: 200px !important;
}
this seems to be working for me
style: |
ha-full-calendar {
--calendar-height: 600px !important; /* Adjust the height as desired */
}
No luck for me … I have put a black background, and as you can see only this background is changing, but not the table itself ?!?
- initial_view: dayGridMonth
type: calendar
entities:
- calendar.xxx_gmail_com
- calendar.yyy_com
card_mod:
style: |
ha-card {
background: black;
height: 150px !important;
border: 0px;
}
view_layout:
grid-area: col1
oh but wait … you are using ha-full-calendar ??? Where is this coming from because indeed, this wording is changing the calendar itself, it seems …
card_mod:
style: |
ha-full-calendar {
background: black;
height: 800px !important;
border: 0px;
}
and now it seems to be dimensioning in height :
Is there some doc explaining this ?
I though “ha-card” was a card-mod parameter, but now we talk about ha-full-calendar ???
ha-card is the root but I figured it was better just to go straight to the sub element
its funny that I send you something that indeed does work , then you do whatever you want and write back to me that it doesnt work.
Well yes, the card-mod docs explain everything.
Well, actually yes, it works with ha-full-calendar.
It is still not ok for me, because even if it shows a nice calendar and size adapted to my dashboard, what I want in final is a 7 columns) days view …
You know about a way to have such with with this calendar card ?
You seems to be expert the coding
If you try to draw / illustrate it to me I can give it a try
Super thanks !!
What I would like to achieve, is such view with the ability to go from weeks to weeks :
and basically even a single week is also ok :
… this I can achieve using anther card called “week-planner”, and this is what I would like to achieve using the standard card. For the moment with the standard card I can not have a view like this in columns ;-(
