I’m also trying to change the color and time dimension, but without success.
anyone know how to do it?
I used a negative value on “margin-top” and it works:
e.g.
margin-top: -3px !important;
Fantastic card, I love it! I’m displaying a full week on the dashboard. There is just one problem - it almost always have problems loading together with the rest of the dashboard and most often it’s just busy loading showing a spinning white circle.
I run in the same dashboard plotly, apex chart, weather-card and quite a few entities.
Is there anything I can do to speed up Family Calendar?
Edit: I seem to have resolved it. Apparently a card utilizing Apex chart importing Nordpool data seem to make the Family Calendar card almost impossible to load. As soon as I removed the Apex chart card Family Calendar loads almost instantly.
it was a trifle: just add !important;
e.g:
.time {
color: white !important;
}
And this is the result…thanks for the fantastic card (it was exactly what I was looking for) and thanks to those who provide valuable suggestions in the forum.
I added, playing with the custom:button-cards, a header that allows me to view the weeks (1, 2 or 3) or the entire month in compact mode.
1 Like
Would you care to share this? Love it
type: custom:grid-layout
path: calendario
title: calendario
cards:
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
styles:
card:
- background-color: rgba(0, 0, 0, 0.0)
- box-shadow: none
- height: 5px
- width: 30px
- type: custom:button-card
entity: input_number.calendario_aspetto
icon: mdi:grid
layout: name_state
show_name: true
show_icon: false
name: Mese
styles:
card:
- height: 30px
- width: 100px
- background-color: rgba(0, 0, 0, 0)
- border-radius: 3px
name:
- padding-top: 9px
- color: grey
- font-size: 135%
- font-weight: bold
state:
- value: 1
styles:
card:
- background: rgba(255,165,0,0.0)
name:
- color: orange
tap_action:
action: call-service
service: input_number.set_value
service_data:
entity_id: input_number.calendario_aspetto
value: "1"
- type: custom:button-card
entity: input_number.calendario_aspetto
icon: mdi:grid-large
layout: name_state
show_name: true
show_icon: false
name: Settimana/e
styles:
card:
- height: 30px
- width: 150px
- background-color: rgba(0, 0, 0, 0)
- border-radius: 3px
name:
- padding-top: 9px
- color: grey
- font-size: 135%
- font-weight: bold
state:
- value: 0
styles:
card:
- background: rgba(255,165,0,0.0)
name:
- color: orange
tap_action:
action: call-service
service: input_number.set_value
service_data:
entity_id: input_number.calendario_aspetto
value: "0"
- type: horizontal-stack
cards:
- type: custom:button-card
styles:
card:
- background-color: rgba(0, 0, 0, 0.0)
- box-shadow: none
- height: 5px
- type: custom:button-card
entity: input_number.setimane
icon: mdi:arrow-left
show_name: true
show_icon: true
name: |
[[[
if (states['input_number.calendario_aspetto'].state > '1' )
return states['sensor.mese_precedente'].state;
return ""
]]]
styles:
card:
- height: 70px
- width: 120px
- background-color: rgba(0, 0, 0, 0)
- border-radius: 3px
icon:
- padding: 0px 0px
- color: white
- height: 60px
- width: 60px
- color: grey
name:
- color: orange
- font-size: 110%
- font-weight: bold
- color: grey
state:
- value: -1
styles:
card:
- background: rgba(255,165,0,0.2)
icon:
- color: orange
name:
- color: orange
tap_action:
action: call-service
service: input_number.set_value
service_data:
entity_id: input_number.setimane
value: "-1"
- type: custom:button-card
entity: input_number.setimane
icon: mdi:calendar
show_name: true
show_icon: true
name: |
[[[
if (states['input_number.calendario_aspetto'].state > '1' )
return states['sensor.mese_corrente'].state;
return "Settimana/e"
]]]
styles:
card:
- height: 70px
- width: 120px
- background-color: rgba(0, 0, 0, 0)
- border-radius: 3px
icon:
- padding: 0px 0px
- color: white
- font-size: 110%
- font-weight: bold
- color: grey
name:
- color: orange
- font-size: 110%
- font-weight: bold
- color: grey
state:
- value: 0
styles:
card:
- background: rgba(255,165,0,0.2)
icon:
- color: orange
name:
- color: orange
tap_action:
action: call-service
service: input_number.set_value
service_data:
entity_id: input_number.setimane
value: "0"
- type: custom:button-card
entity: input_number.setimane
icon: mdi:arrow-right
show_name: true
show_icon: true
name: |
[[[
if (states['input_number.calendario_aspetto'].state > '1' )
return states['sensor.mese_successivo'].state;
return ""
]]]
styles:
card:
- height: 70px
- width: 120px
- background-color: rgba(0, 0, 0, 0)
- border-radius: 3px
icon:
- padding: 0px 0px
- color: white
- height: 60px
- width: 60px
- color: grey
name:
- color: orange
- font-size: 110%
- font-weight: bold
- color: grey
state:
- value: 1
styles:
card:
- background: rgba(255,165,0,0.2)
icon:
- color: orange
name:
- color: orange
tap_action:
action: call-service
service: input_number.set_value
service_data:
entity_id: input_number.setimane
value: "1"
- type: custom:button-card
styles:
card:
- background-color: rgba(0, 0, 0, 0.0)
- box-shadow: none
- height: 5px
- type: horizontal-stack
cards:
- type: custom:button-card
styles:
card:
- background-color: rgba(0, 0, 0, 0.0)
- box-shadow: none
- height: 5px
- width: 480px
- type: custom:button-card
entity: input_number.days_this_month
icon: mdi:numeric-1-circle
layout: name_state
show_name: false
show_icon: true
styles:
card:
- height: 40px
- width: 40px
- background-color: rgba(0, 0, 0, 0)
- border-radius: 3px
icon:
- padding: 0px 0px
- color: grey
- height: 40px
- width: 40px
state:
- value: 7
styles:
card:
- background: rgba(255,165,0,0.0)
icon:
- color: orange
tap_action:
action: call-service
service: input_number.set_value
service_data:
entity_id: input_number.days_this_month
value: "7"
- type: custom:button-card
entity: input_number.days_this_month
icon: mdi:numeric-2-circle
layout: name_state
show_name: false
show_icon: true
styles:
card:
- height: 40px
- width: 40px
- background-color: rgba(0, 0, 0, 0)
- border-radius: 3px
icon:
- padding: 0px 0px
- color: grey
- height: 40px
- width: 40px
state:
- value: 14
styles:
card:
- background: rgba(255,165,0,0.0)
icon:
- color: orange
tap_action:
action: call-service
service: input_number.set_value
service_data:
entity_id: input_number.days_this_month
value: "14"
- type: custom:button-card
entity: input_number.days_this_month
icon: mdi:numeric-3-circle
layout: name_state
show_name: false
show_icon: true
styles:
card:
- height: 40px
- width: 40px
- background-color: rgba(0, 0, 0, 0)
- border-radius: 3px
icon:
- padding: 0px 0px
- color: grey
- height: 40px
- width: 40px
state:
- value: 21
styles:
card:
- background: rgba(255,165,0,0.0)
icon:
- color: orange
tap_action:
action: call-service
service: input_number.set_value
service_data:
entity_id: input_number.days_this_month
value: "21"
visibility:
- condition: numeric_state
entity: input_number.calendario_aspetto
below: 1
- type: custom:button-card
styles:
card:
- background-color: rgba(0, 0, 0, 0.0)
- box-shadow: none
- height: 5px
visibility:
- condition: numeric_state
entity: input_number.calendario_aspetto
above: 0
- type: custom:config-template-card
variables:
DAYS: states['input_number.days_this_month'].state
entities:
- input_number.days_this_month
card:
type: custom:week-planner-card
calendars:
- entity: calendar.#######
color: green
name: Ettore
- entity: #######
color: dodgerblue
name: Roberta
- entity: calendar.compleanni
color: orange
Background: rgba(0, 0, 0, .75)
name: Compleanni
- entity: calendar.festivita_in_italia
color: red
Background: rgba(0, 0, 0, .75)
name: Festività
days: ${DAYS}
startingDay: monday
startingDayOffset: ${-DAYS}
locale: it
showLegend: true
noCardBackground: true
updateInterval: 300
texts:
noEvents: null
fullDay: null
today: Oggi
tomorrow: Domani
yesterday: Ieri
card_mod:
style: |
ha-card {
height: 860px !important;
overflow: hidden;
.event.past {
opacity: .45;
}
.sunday .number {
color: red;
}
.saturday .number {
color: pink;
}
.time {
color: black !important;
font-weight: bold !important;
font-size: 0.8em !important;
margin-top: -5px !important;
}
.event {
color: snow !important;
line-height: 18px !important;
background-color: var(--border-color) !important;
border-radius: 6px !important;
max-height: 65px !important;
overflow: hidden; !important;
margin-top: 0px !important;
font-size: 1.35em !important;
}
.none {
background-color: transparent !important;
}
.container .day {
width: calc((100% - 7 * var(--days-spacing)) / 7) !important;
}
@container weekplanner (width <= 1024px) {
.container .day {
width: calc((100% - 2 * var(--days-spacing)) / 3) !important;
}
}
@container weekplanner (width <= 640px) {
.container .day {
width: 100% !important;
}
}
}
visibility:
- condition: numeric_state
entity: input_number.setimane
above: -2
below: 0
- condition: numeric_state
entity: input_number.calendario_aspetto
below: 1
- type: custom:config-template-card
variables:
DAYS: states['input_number.days_this_month'].state
entities:
- input_number.days_this_month
card:
type: custom:week-planner-card
calendars:
- entity: calendar.#######
color: green
name: Ettore
- entity: #######
color: dodgerblue
name: Roberta
- entity: calendar.compleanni
color: orange
Background: rgba(0, 0, 0, .75)
name: Compleanni
- entity: calendar.festivita_in_italia
color: red
Background: rgba(0, 0, 0, .75)
name: Festività
days: ${DAYS}
startingDay: monday
locale: it
showLegend: true
noCardBackground: true
updateInterval: 300
texts:
noEvents: null
fullDay: null
today: Oggi
tomorrow: Domani
yesterday: Ieri
card_mod:
style: |
ha-card {
height: 860px !important;
overflow: hidden;
.event.past {
opacity: .45;
}
.sunday .number {
color: red;
}
.saturday .number {
color: pink;
}
.time {
color: black !important;
font-weight: bold !important;
font-size: 0.8em !important;
margin-top: -5px !important;
}
.event {
color: snow !important;
line-height: 18px !important;
background-color: var(--border-color) !important;
border-radius: 6px !important;
max-height: 65px !important;
overflow: hidden; !important;
margin-top: 0px !important;
font-size: 1.35em !important;
}
.none {
background-color: transparent !important;
}
.today .number {
border: solid 2px orange;
border-radius: 4px;
background-color: darkslategrey !important;
}
.container .day {
width: calc((100% - 7 * var(--days-spacing)) / 7) !important;
}
@container weekplanner (width <= 1024px) {
.container .day {
width: calc((100% - 2 * var(--days-spacing)) / 3) !important;
}
}
@container weekplanner (width <= 640px) {
.container .day {
width: 100% !important;
}
}
}
visibility:
- condition: numeric_state
entity: input_number.setimane
above: -1
below: 1
- condition: numeric_state
entity: input_number.calendario_aspetto
below: 1
- type: custom:config-template-card
variables:
DAYS: states['input_number.days_this_month'].state
entities:
- input_number.days_this_month
card:
type: custom:week-planner-card
calendars:
- entity: calendar.#######
color: green
name: Ettore
- entity: #######
color: dodgerblue
name: Roberta
- entity: calendar.compleanni
color: orange
Background: rgba(0, 0, 0, .75)
name: Compleanni
- entity: calendar.festivita_in_italia
color: red
Background: rgba(0, 0, 0, .75)
name: Festività
days: ${DAYS}
startingDay: monday
startingDayOffset: ${DAYS}
locale: it
showLegend: true
noCardBackground: true
updateInterval: 300
texts:
noEvents: null
fullDay: null
today: Oggi
tomorrow: Domani
yesterday: Ieri
card_mod:
style: |
ha-card {
height: 860px !important;
overflow: hidden;
.event.past {
opacity: .4;
}
.sunday .number {
color: red;
}
.saturday .number {
color: pink;
}
.time {
color: black !important;
font-weight: bold !important;
font-size: 0.8em !important;
margin-top: -5px !important;
}
.event {
color: snow !important;
line-height: 18px !important;
background-color: var(--border-color) !important;
border-radius: 6px !important;
max-height: 65px !important;
overflow: hidden; !important;
margin-top: 0px !important;
font-size: 1.35em !important;
}
.none {
background-color: transparent !important;
}
.container .day {
width: calc((100% - 7 * var(--days-spacing)) / 7) !important;
}
@container weekplanner (width <= 1024px) {
.container .day {
width: calc((100% - 2 * var(--days-spacing)) / 3) !important;
}
}
@container weekplanner (width <= 640px) {
.container .day {
width: 100% !important;
}
}
}
visibility:
- condition: numeric_state
entity: input_number.setimane
above: 0
below: 2
- condition: numeric_state
entity: input_number.calendario_aspetto
below: 1
- type: custom:config-template-card
variables:
DAYS: states['sensor.numero_giorni_mese_pre'].state
entities:
- sensor.numero_giorni_mese_pre
card:
type: custom:week-planner-card
calendars:
- entity: calendar.#######
color: green
name: Ettore
- entity: #######
color: dodgerblue
name: Roberta
- entity: calendar.compleanni
color: orange
Background: rgba(0, 0, 0, .75)
name: Compleanni
- entity: calendar.festivita_in_italia
color: red
Background: rgba(0, 0, 0, .75)
name: Festività
days: ${DAYS}
compact: true
startingDay: month
startingDayOffset: ${-DAYS}
locale: it
showLegend: true
noCardBackground: true
updateInterval: 300
texts:
noEvents: null
fullDay: null
today: Oggi
tomorrow: Domani
yesterday: Ieri
card_mod:
style: |
ha-card {
height: 860px !important;
overflow: hidden;
.event.past {
opacity: .45;
}
.sunday .number {
color: red;
}
.saturday .number {
color: pink;
}
.time {
color: black !important;
font-weight: bold !important;
font-size: 0.8em !important;
margin-top: 1px !important;
}
.event {
color: snow !important;
line-height: 16px !important;
background-color: var(--border-color) !important;
border-radius: 6px !important;
max-height: 55px !important;
overflow: hidden; !important;
font-size: 1em !important;
}
.number {
font-size: 2.5em !important;
}
.none {
background-color: transparent !important;
}
.container .day {
width: calc((100% - 10 * var(--days-spacing)) / 10) !important;
}
@container weekplanner (width <= 1024px) {
.container .day {
width: calc((100% - 2 * var(--days-spacing)) / 3) !important;
}
}
@container weekplanner (width <= 640px) {
.container .day {
width: 100% !important;
}
}
}
visibility:
- condition: numeric_state
entity: input_number.setimane
above: -2
below: 0
- condition: numeric_state
entity: input_number.calendario_aspetto
above: 0
- type: custom:config-template-card
variables:
DAYS: states['input_number.days_this_month'].state
entities:
- input_number.days_this_month
card:
type: custom:week-planner-card
calendars:
- entity: calendar.#######
color: green
name: Ettore
- entity: #######
color: dodgerblue
name: Roberta
- entity: calendar.compleanni
color: orange
Background: rgba(0, 0, 0, .75)
name: Compleanni
- entity: calendar.festivita_in_italia
color: red
Background: rgba(0, 0, 0, .75)
name: Festività
days: month
compact: true
startingDay: month
locale: it
showLegend: true
noCardBackground: true
updateInterval: 300
texts:
noEvents: null
fullDay: null
today: Oggi
tomorrow: Domani
yesterday: Ieri
card_mod:
style: |
ha-card {
height: 860px !important;
overflow: hidden;
.event.past {
opacity: .45;
}
.sunday .number {
color: red;
}
.saturday .number {
color: pink;
}
.time {
color: black !important;
font-weight: bold !important;
font-size: 0.8em !important;
margin-top: 1px !important;
}
.event {
color: snow !important;
line-height: 16px !important;
background-color: var(--border-color) !important;
border-radius: 6px !important;
max-height: 55px !important;
overflow: hidden; !important;
font-size: 1em !important;
}
.number {
font-size: 2.5em !important;
}
.none {
background-color: transparent !important;
}
.today .number {
border: solid 1px orange;
border-radius: 4px;
background-color: darkslategrey !important;
}
.container .day {
width: calc((100% - 10 * var(--days-spacing)) / 10) !important;
}
@container weekplanner (width <= 1024px) {
.container .day {
width: calc((100% - 2 * var(--days-spacing)) / 3) !important;
}
}
@container weekplanner (width <= 640px) {
.container .day {
width: 100% !important;
}
}
}
visibility:
- condition: numeric_state
entity: input_number.setimane
above: -1
below: 1
- condition: numeric_state
entity: input_number.calendario_aspetto
above: 0
- type: custom:config-template-card
variables:
DAYS: states['sensor.numero_giorni_mese_suc'].state
MESE_ATT: states['sensor.numero_giorni_mese'].state
entities:
- sensor.numero_giorni_mese_suc
card:
type: custom:week-planner-card
calendars:
- entity: calendar.#######
color: green
name: Ettore
- entity: #######
color: dodgerblue
name: Roberta
- entity: calendar.compleanni
color: orange
Background: rgba(0, 0, 0, .75)
name: Compleanni
- entity: calendar.festivita_in_italia
color: red
Background: rgba(0, 0, 0, .75)
name: Festività
days: ${DAYS}
compact: true
startingDay: month
startingDayOffset: ${MESE_ATT}
locale: it
showLegend: true
noCardBackground: true
updateInterval: 300
texts:
noEvents: null
fullDay: null
today: Oggi
tomorrow: Domani
yesterday: Ieri
card_mod:
style: |
ha-card {
height: 860px !important;
overflow: hidden;
.event.past {
opacity: .3;
}
.sunday .number {
color: red;
}
.saturday .number {
color: pink;
}
.time {
color: black !important;
font-weight: bold !important;
font-size: 0.8em !important;
margin-top: 1px !important;
}
.event {
color: snow !important;
line-height: 16px !important;
background-color: var(--border-color) !important;
border-radius: 6px !important;
max-height: 55px !important;
overflow: hidden; !important;
font-size: 1em !important;
}
.number {
font-size: 2.5em !important;
}
.none {
background-color: transparent !important;
}
.container .day {
width: calc((100% - 10 * var(--days-spacing)) / 10) !important;
}
@container weekplanner (width <= 1024px) {
.container .day {
width: calc((100% - 2 * var(--days-spacing)) / 3) !important;
}
}
@container weekplanner (width <= 640px) {
.container .day {
width: 100% !important;
}
}
}
visibility:
- condition: numeric_state
entity: input_number.setimane
above: 0
below: 2
- condition: numeric_state
entity: input_number.calendario_aspetto
above: 0
layout: {}
background: {}
1 Like
Hello, I am looking for a calendar also allowing me to see the weeks in column view (5 or 7 columns …), and really like the “Google like” view with the colors I mean (my calendar and the one of my wife …) :
My purpose is to display the calendar on my wall tablet, so it needs to be configurable to display on the all width of the tablet.
Can you please confirm to me this one is able to do so ?
I am asking before installing it “for nothing”
P.S. and I see I need to add in custom repositories, but what type do I need to use, because integration is not working … is “Dashboard ok ?”
Many Thanks !
Many Thanks !!
This is fantastic. Great work and thankyou for developing it. My wife wanted to get a Skylight Calendar, and showed it to me and my eyes lit up. She opened the door to technological solutions and I said “HA can do all that!” and now I get to have fun 
It was a while ago, but you mentioned:
WRT creating calendar entries. Could you just tie into the google.create_event function in the Google Calendar integration and pop-up their create event box when someone touches/clicks the date, or add a create event button?
I’m not sure if it is necessary, and the point is that you’re combining and displaying the family’s calendars, and individuals could still create entries directly in their own calendars, as usual, but it may be simple to add it?
Cheers,
Matthew
It hasn’t been. You can see the discussion here, with an example on how to style the entry from specific calendars only. I didn’t find the right name for the background, but that’s just me.
Wouldn’t it be great to have a list of the components to target with card_mod?
EDIT:
Added link above to css file.
Oh, I got it with trial and error:
.container .day .events .event[data-entity=“calendar.my_calendar_entity”] .inner {
background-color: rgba(200, 0, 200, .1); !important
}
I don’t think this is perfect as I think there was a tiny little corner uncoloured (from the box radius), but it is a nudge in the right direction.
I think you are referring to this?
it would be really useful to have the possibility to insert (and even delete) directly in the “week-planner-card”
Another way would be to create a pop-up card (similar to this one) that once filled in launches a script with google.create_event function.
yes, that’s the one I saw in the normal calendar view that maybe could be re-used…!
Hello, sorry to post again, but when I want to install the calendar, it is asking me for the “type”, like web stuff, or integration, or …
what do I need to choose there in HACS please ?
Many thanks !!
I’ve just updated the documentation 5 minutes ago to add this. You need to select Dashboard.
1 Like
You’ve already added it
1 Like
That is ok … for some reason, it was already loaded in HACS.
I am now looking for a way to adapt the card to extend to full height of my tablet, and ti put in in columns weeks view (but that doesn’t seem to be available through GUI)
Many thanks !
OK … I played with it a little bit. My intend is to show it on a wall tablet showing 7 columns, one for each day of the week.
I succeed to do it using a normal view, like this :
kiosk_mode:
admin_settings:
hide_header: false
hide_sidebar: false
non_admin_settings:
kiosk: true
views:
- type: custom:week-planner-card
calendars:
- entity: calendar.xxxx_gmail_com
color: '#e6c229'
- entity: calendar.yyyy_gmail_com
color: '#1a8fe3'
days: 7
locale: fr
The calendar present almost like I want, in columns :
Now What I do not get, is that If I add the “custom-grid-layout”, using this 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:week-planner-card
calendars:
- entity: calendar.xxxx_gmail_com
color: yellow
- entity: calendar.yyyy_gmail_com
color: lightblue
days: 7
locale: fr
, then the calendar is presented as a 1 column list showing all days ??? :
So unless I miss something here, this is not a parameter of the calendar card itself which generates the new / way the calendar is presented, but instead, this is the dashboard setup ???
and something else as well, for some reason the dashboard won’t be displayed (at least the card itself) on my wall tablet, where it is on the computer.
this si not a dashboard issue as the “Home” button is there … here is the error message I have :
… and the 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 1000px
grid-template-columns: 1440px
grid-template-areas: |
"head1 head2"
"col1 col1"
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.myself
tap_action:
action: navigate
navigation_path: /lenovo-m10-plus-home/0
name: Homeee
content_info: name
icon: mdi:home
use_entity_picture: false
icon_color: yellow
view_layout:
grid-area: head1
- type: custom:week-planner-card
calendars:
- entity: calendar.xxx_com
color: yellow
- entity: calendar.yyy_com
color: lightblue
days: 7
locale: fr
view_layout:
grid-area: col1
To get the calendar to display days side by side you need to use a view type other than “Masonry”. If you use the new “Sections” layout, then make sure you edit the section view to be as wide as you need
Your second issue is likely due to an error in your lovelace config.
Look at your configuration.yaml under
lovelace:
resources:
Any error here for any of the modules can cause errors for all modules listed lower