Here’s my take. It’s running on a tablet in the hallway. Family approved. 
1 Like
Hello,
thank you for this very nice project!
Is there a way to get rid of this glitches on the left side of the events? (EDIT: compact: true did it)
And is there a way to colorize the background of a day according to a event?
(e.g. a different background if it is a holiday day)
HI,
Thanks for this great card. Im trying to get my head around the REGEX filters. Ive never really understood these.
I have a family calendar, where entries will have our initial before them. eg in our family there maybe S J M or T or a commination of them, making the calendar entries like this.
S- Lunch out
J- Going london
SJT- Parents Evening
ALL- Chinese meal out
Generally this is working well, but i’d like to then break down to each person on their own page, so for S it will show any where S is in the begining 4 charachters before a “-” or the ones with All.
Is this possible?
thanks
stuart
Hello everyone,
First of all, thank you very much for this awesome integration. This is exactly what I’ve been looking for for a long time. I have adapted some things to my needs. However, there are two things I haven’t managed yet, and I’m hoping for your help:
- In the first week, Sunday is displayed lower than the other days. How can I move it up to align with the rest of the week?
- I need a button on the page that brings me back to my main page. I use Fully Kiosk so the top bar is hidden. However, as soon as I create a button in Panel Mode, I get the message that only one panel view can be used. If I switch to Sidebar Mode, a white area appears on the right, and I haven’t managed to stretch the calendar to the full width.
It seems from this thread that some people have managed to solve this. Unfortunately, I couldn’t make sense of the codes. I hope someone can help me. Thank you.
# Kalender
- title: Kalender
path: kalender
icon: mdi:calendar
type: panel
subview: false
cards:
# Planner Card
- type: custom:week-planner-card
calendars:
- entity: calendar1
color: blue
- entity: calendar2
color: blue
- entity: calendar3
color: orange
- entity: calendar4
color: blue
- entity: calendar5
color: purple
- entity: calendar6
color: red
- entity: calendar7
color: green
days: '21'
startingDay: monday
startingDayOffset: 0
hideWeekend: false
noCardBackground: true
eventBackground: var(--ha-card-background)
compact: false
weather:
showCondition: false
showTemperature: true
showLowTemperature: true
useTwiceDaily: false
entity: weather.forecast_street
locale: de
showLocation: false
hidePastEvents: false
hideDaysWithoutEvents: false
hideTodayWithoutEvents: false
combineSimilarEvents: false
showLegend: false
texts:
fullDay: ""
today: ""
tomorrow: ""
noEvents: ""
yesterday: ""
sunday: So
monday: Mo
tuesday: Di
wednesday: Mi
thursday: Do
friday: Fr
saturday: Sa
showNavigation: true
card_mod:
style:
.: |
/* Karte auf volle Breite */
ha-card {
margin-top: 1px;
font-size: 15px !important;
overflow: hidden; --days-spacing: 10px;
--event-padding: 2px !important;
--events-margin-top: 1px;
--event-border-width: 2px;
}
/* Event-Hintergrundfarben */
.event[data-entity="calendar1"] {
background-color: rgba(135,206,250,0.2) !important;
}
.event[data-entity="calendar2"] {
background-color: rgba(135,206,250,0.2) !important;
}
.event[data-entity="calendar3"] {
background-color: rgba(238,118,0,0.2) !important;
}
.event[data-entity="calendar4"] {
background-color: rgba(135,206,250,0.2) !important;
}
.event[data-entity="calendar5"] {
background-color: rgba(255,187,255,0.2) !important;
}
.event[data-entity="calendar6"] {
background-color: rgba(255,106,106,0.2) !important;
}
.event[data-entity="calendar7"] {
background-color: rgba(124,205,124,0.2) !important;
}
.event.past {
opacity: 0.3;
}
.none {
background-color: transparent !important;
}
/* Linke Linie der Events ausblenden */
.container .day .event {
border-left: none !important;
}
/* Container volle Breite + gleichmäßiger Abstand */
.container {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
width: 100% !important;
align-content: flex-start;
align-items: flex-start;
gap: var(--days-spacing) !important; /* Abstand zwischen den Tagen */
}
/* Jeder Tag gleich breit */
.container .day {
width: calc((100% - 6 * var(--days-spacing)) / 7) !important;
max-width: calc((100% - 6 * var(--days-spacing)) / 7) !important;
}
/* Erste Woche: alle Tage oben ausrichten und minimal verschieben */
.container .day:nth-child(-n+7) {
align-self: flex-start;
transform: translateY(20px);
}
/* Abstand zwischen den Wochen (ab 2. Woche) */
.container .day:nth-child(n+8) {
margin-top: 70px;
}
/* Datum + Wochentag nebeneinander */
.container .day .date {
display: flex;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
padding-left: 6px;
gap: 10px;
}
/* Tageszahl */
.container .day .date .number {
order: 1;
margin-top: 0px;
text-align: left;
font-weight: 400;
font-size: 35px !important;
font-family: "Roboto", sans-serif;
color: var(--primary-text-color);
}
/* Punkt hinter Datum */
.container .day .date .number::after {
content: ".";
margin-left: -3px;
}
/* Wochentag */
.container .day .date .text {
order: 2;
font-weight: 500;
font-size: 20px !important;
color: var(--primary-text-color);
margin-top: 10px;
}
/* Heute – Zahl und Wochentag rot */
.container .day.today .date .number,
.container .day.today .date .text {
color: #ff0000 !important;
font-weight: 600 !important;
}
/* Monatsanzeige verschieben */
.month {
position: relative;
top: -9px;
left: 20px;
font-size: 30px !important;
font-weight: 500;
color: var(--primary-text-color);
}
/* Temperatur auf Wochentag-Höhe verschieben */
.container .day .weather .temperature {
position: relative;
top: 15px;
left: -20px;
font-size: 12px !important;
}
Could you share the yaml code you used? I cannot seem to figure out how to get the entire month to show, even the days that have passed. Thank you
I have several Google calendar combined.
Is it possible to show the calendar entity (in best case “friendly name”) of the entry in the daily overview?
In best case 07:30 - 13:00 "calendar entity / “frindly name”
Englisch-Vokabeltest
should be something like:
card_mod:
style: |
.day
{
font-size: 16px;
}
.event .entity or .event.data-entity
{
font-size: 9px;
}
however I see changing the font size of the day, but I don´t see the calendar entity.
Is it possible to make it so it says the actual day of the week instead of “Yesterday” & “Tomorrow”? I don’t mind it saying “Today”, but I would like the actual day of the week to be there instead of the “Yesterday” & “Tomorrow” text.
I think you can do that under date/time formats.
How? There is nothing about that in there.
the field override day number and add a luxon compatible “code”
I have for example:
'<span class="number">'d'</span> <span class="text">'cccc'</span> <span class="wk">'n'</span>'
Because i wanted to show also the week number.
But I am not trying to override the Day Number. I still want the number of the day to be there. I think some kind of coding would need to be placed where you can change the names of the day. Something that would force the actual day name would get placed where the “Yesterday” “Today” and “Tomorrow” are, using a card mod in the code editor… because they already have it so you can change those display texts.
You still have if you use the correct Luxon format.
Mine looks like this:
It’s Date, Name, Weeknumber.
I got it figured out. It’s not actually how you suggested. Regardless, I appreciate your help because, in trying what you were saying, I was able to figure out how it needs to be coded. For anyone searching for how to do this, it does not involve using the Luxon format. All you need to do is place the YAML code for the text edits of changing the day names and leave the “yesterday” & “tomorrow” blank. So it should look like the code below:
texts:
tomorrow:
yesterday:
Again really appreciate your suggestions because I was trying to place Luxon formats in those days and when I removed the Luxon code, I could see in the preview that the actual days showed up.
@lanceblaise yes your solution works but the below code which is in Luxon format as the docs say
dayFormat: >-
'<span class="number">'EEE'</span> <span class="month">'d
MMM'</span>'
Gives me this calendar
My full card code below
- type: custom:week-planner-card
calendars:
- entity: calendar.australia_tas
color: dodgerblue
name: Public Holidays
- entity: calendar.calendar
color: grey
name: Maverick
- entity: calendar.recycle_pickup
color: yellow
name: Recycling
- entity: calendar.rubbish_pickup
color: green
name: Rubbish & FOGO
- entity: calendar.birthdays
color: crimson
name: Birthdays
- entity: calendar.hunter
color: purple
name: Hunter
weather:
entity: weather.devonport
showCondition: true
showTemperature: true
noCardBackground: true
eventBackground: var(--ha-card-background)
showLegend: true
days: 35
startingDay: sunday
startingDayOffset: 0
columns:
extraLarge: 7
large: 7
medium: 7
small: 7
extraSmall: 7
dayFormat: >-
'<span class="number">'EEE'</span> <span class="month">'d
MMM'</span>'
compact: true
showNavigation: true
card_mod:
style: |
.day.past {
opacity: .3;
}
.today .number {
color: crimson;
border: solid 2px crimson;
border-radius: 4px;
background-color: white !important;
}
.event[data-entity="calendar.recycle_pickup_3"] {
background-color: rgba(255,215,0,0.2) !important;
}
.event[data-entity="calendar.rubbish_pickup_3"] {
background-color: rgba(34,139,34,0.2) !important;
}
.event[data-entity="calendar.australia_tas"] {
background-color: rgba(30,144,255,0.2) !important;
}
.event[data-entity="calendar.birthdays"] {
background-color: rgba(220,20,60,0.2) !important;
}
.event[data-summary="Hunter Home"] {
background-color: rgba(106,90,205,0.2) !important;
}
.event[data-summary="Hunter Fly-Home"] {
background-color: rgba(148,0,211,0.5) !important;
}
.event[data-summary="Hunter Fly-Work"] {
background-color: rgba(148,0,211,0.5) !important;
}
Hello everyone - this thread has been so helpful in building out my family calendar. I’ve searched the thread and can’t find the answer to two issues I’m facing (ChatGPT is no help either):
-
Does anyone have an alternative to the default week planner navigation buttons? Ideally, I’d love a way to move the buttons to the top center of a section.
-
Is there any way to “hide” the “No events” text? I’m find w/ just formatting it to match the background color but I can’t for the life of me find a working solution either way.
Thanks so much in advance for any help!
views:
- title: Home
sections:
- type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: select
entity: input_select.calendar_visible_date_range
name: Date Range
scrolling_effect: false
show_icon: true
force_icon: false
show_state: true
show_last_changed: false
show_last_updated: false
show_attribute: false
card_layout: normal
- square: false
type: grid
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
display: flex;
justify-content: center;
padding: 0;
background: none;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: person.family
show_name: false
show_entity_picture: true
tap_action:
action: perform-action
perform_action: script.family_calendar_visible_filter
styles:
card:
- border: none
- height: 120px
- width: 120px
- background: none
entity_picture:
- height: 75px
- width: 75px
- border-radius: 120%
- border-style: solid
- border-width: 4px
- border-color: '#fcb468'
- opacity: >
[[[ return
states['input_text.family_calendar_filter'].state
=== '.*' ? 0.3 : 1; ]]]
name:
- color: white
- background: '#fcb468'
- border-radius: 30%
- border-style: solid
- border-width: 4px
- border-color: '#fcb468'
- type: custom:button-card
entity: person.person1
show_name: false
show_entity_picture: true
tap_action:
action: perform-action
perform_action: script.person1_calendar_visible_filter
styles:
card:
- border: none
- height: 120px
- width: 120px
- background: none
entity_picture:
- height: 75px
- width: 75px
- border-radius: 120%
- border-style: solid
- border-width: 4px
- border-color: '#68a6fc'
- opacity: >
[[[ return
states['input_text.person1_calendar_filter'].state
=== '.*' ? 0.3 : 1; ]]]
name:
- color: white
- background: '#68a6fc'
- border-radius: 20%
- border-style: solid
- border-width: 4px
- border-color: '#68a6fc'
- type: custom:button-card
entity: person.person2
show_name: false
show_entity_picture: true
tap_action:
action: perform-action
perform_action: script.person2_calendar_visible_filter
styles:
card:
- border: none
- height: 120px
- width: 120px
- background: none
entity_picture:
- height: 75px
- width: 75px
- border-radius: 120%
- border-style: solid
- border-width: 4px
- border-color: '#aff2a0'
- opacity: >
[[[ return
states['input_text.person2_calendar_filter'].state
=== '.*' ? 0.3 : 1; ]]]
name:
- color: white
- background: '#aff2a0'
- border-radius: 30%
- border-style: solid
- border-width: 4px
- border-color: '#aff2a0'
- type: custom:button-card
entity: person.person4
show_name: false
show_entity_picture: true
tap_action:
action: perform-action
perform_action: script.person4_calendar_visible_filter
styles:
card:
- border: none
- height: 120px
- width: 120px
- background: none
entity_picture:
- height: 75px
- width: 75px
- border-radius: 120%
- border-style: solid
- border-width: 4px
- border-color: '#d8a0f2'
- opacity: >
[[[ return
states['input_text.person4_calendar_filter'].state
=== '.*' ? 0.3 : 1; ]]]
name:
- color: white
- background: '#d8a0f2'
- border-radius: 30%
- border-style: solid
- border-width: 4px
- border-color: '#d8a0f2'
- type: custom:button-card
entity: person.person3
show_name: false
show_entity_picture: true
tap_action:
action: perform-action
perform_action: script.person3_calendar_visible_filter
styles:
card:
- border: none
- height: 120px
- width: 120px
- background: none
- opacity: >
[[[ return
states['input_text.person3_calendar_filter'].state
=== '.*' ? 0.3 : 1; ]]]
entity_picture:
- height: 75px
- width: 75px
- border-radius: 120%
- border-style: solid
- border-width: 4px
- border-color: '#f2a0c8'
name:
- color: white
- background: '#f2a0c8'
- border-radius: 30%
- border-style: solid
- border-width: 4px
- border-color: '#f2a0c8'
grid_options:
columns: full
rows: auto
columns: 1
grid_options:
columns: full
- square: false
type: grid
cards:
- type: custom:config-template-card
entities:
- input_select.calendar_visible_date_range
- input_text.family_calendar_filter
- input_text.person1_calendar_filter
- input_text.person2_calendar_filter
- input_text.person4_calendar_filter
- input_text.person3_calendar_filter
variables:
FAMCAL: states['input_text.family_calendar_filter']?.state
P1CAL: states['input_text.person1_calendar_filter']?.state
P2CAL: states['input_text.person2_calendar_filter']?.state
P3CAL: states['input_text.person4_calendar_filter']?.state
P4CAL: states['input_text.person3_calendar_filter']?.state
VIEW: states['input_select.calendar_visible_date_range']?.state
DAYS: |
(() => {
const calendarView = states['input_select.calendar_visible_date_range']?.state;
if (calendarView === 'Today') return 1;
if (calendarView === 'Week') return 7;
if (calendarView === '2 Weeks') return 14;
if (calendarView === '3 Weeks') return 21;
if (calendarView === '4 Weeks') return 28;
return 7;
})()
card:
type: custom:week-planner-card
calendars:
- entity: calendar.family
color: '#fcb468'
filter: ${ FAMCAL }
- entity: calendar.person1
color: '#68a6fc'
filter: ${ P1CAL }
- entity: calendar.person2
color: '#aff2a0'
filter: ${ P2CAL }
- entity: calendar.person4
color: '#d8a0f2'
filter: ${ P3CAL }
- entity: calendar.person3
color: '#f2a0c8'
filter: ${ P4CAL }
- entity: calendar.holidays_in_united_states
color: lightblue
days: ${DAYS}
no_events: null
locale: en
weather:
entity: weather.pirateweather
showTemperature: true
showLowTemperature: true
showNavigation: true
showTitle: true
noCardBackground: false
compact: false
texts:
sunday: Sun
monday: Mon
tuesday: Tue
wednesday: Wed
thursday: Thu
friday: Fri
saturday: Sat
timeFormat: h:mma
updateInterval: '60'
legendToggle: false
showLegend: false
startingDay: sunday
columns:
extraLarge: '7'
large: '7'
medium: '5'
small: '5'
view_layout:
grid-area: col1
card_mod:
style: >
.today .number { color: red; }
.event.past { opacity: .3; }
.event { color: #333333 !important; line-height: 16px
!important; background-color: var(--border-color)
!important; border-radius: 10px !important; max-height:
80px !important; overflow: hidden !important; font-size:
1.1em !important; }
grid_options:
columns: full
rows: auto
grid_options:
columns: full
columns: 1
column_span: 4
- type: grid
cards: []
column_span: 4
type: sections
layout:
grid-template-rows: 75px 1000px
grid-template-columns: 1440px
grid-template-areas: |
"head1 head2"
"col1 col1"
cards: []
max_columns: 4
theme: Skylight
- title: Home
sections:
- type: grid
cards:
- type: horizontal-stack
cards:
- type: markdown
content: '# Our Family'
text_only: true
- type: custom:bubble-card
card_type: select
entity: input_select.calendar_visible_date_range
name: Date Range
scrolling_effect: false
show_icon: true
force_icon: false
show_state: true
show_last_changed: false
show_last_updated: false
show_attribute: false
card_layout: normal
grid_options:
columns: full
- square: false
type: grid
cards:
- type: custom:config-template-card
entities:
- input_select.calendar_visible_date_range
variables:
VIEW: states['input_select.calendar_visible_date_range']?.state
DAYS: |
(() => {
const calendarView = states['input_select.calendar_visible_date_range']?.state;
if (calendarView === 'Today') return 1;
if (calendarView === 'Week') return 7;
if (calendarView === '2 Weeks') return 14;
if (calendarView === '3 Weeks') return 21;
if (calendarView === '4 Weeks') return 28;
return 7;
})()
card:
type: custom:week-planner-card
calendars:
- entity: calendar.family
color: yellow
- entity: calendar.holidays_in_united_states
color: lightblue
days: ${DAYS}
no_events: null
locale: en
weather:
entity: weather.pirateweather
showTemperature: true
showLowTemperature: true
showNavigation: true
showTitle: true
compact: false
texts:
sunday: Sun
monday: Mon
tuesday: Tue
wednesday: Wed
thursday: Thu
friday: Fri
saturday: Sat
timeFormat: h:mmA
updateInterval: '60'
legendToggle: false
showLegend: false
startingDay: sunday
columns:
extraLarge: '7'
large: '7'
medium: '5'
small: '5'
view_layout:
grid-area: col1
card_mod:
style: |
.navigation { width: 200%; }
.today .number { color: red; }
.event.past { opacity: .3; }
grid_options:
columns: full
rows: auto
grid_options:
columns: full
columns: 1
column_span: 4
type: sections
layout:
grid-template-rows: 75px 1000px
grid-template-columns: 1440px
grid-template-areas: |
"head1 head2"
"col1 col1"
cards: []
- type: sections
max_columns: 7
path: calendar
title: calendar
sections:
- type: grid
cards:
- square: false
type: grid
cards:
- type: custom:mod-card
card_mod:
style: |
ha-card {
display: flex;
justify-content: center;
padding: 0;
background: none;
}
card:
type: horizontal-stack
cards:
- type: custom:button-card
entity: person.family
show_name: false
show_entity_picture: true
styles:
card:
- border: none
- height: 120px
- width: 120px
- background: none
entity_picture:
- height: 75px
- width: 75px
- border-radius: 120%
- border-style: solid
- border-width: 4px
- border-color: '#3f51b5'
name:
- color: white
- background: '#3f51b5'
- border-radius: 30%
- border-style: solid
- border-width: 4px
- border-color: '#3f51b5'
- type: custom:button-card
entity: person.person1
show_name: false
show_entity_picture: true
styles:
card:
- border: none
- height: 120px
- width: 120px
- background: none
entity_picture:
- height: 75px
- width: 75px
- border-radius: 120%
- border-style: solid
- border-width: 4px
- border-color: '#d85675'
name:
- color: white
- background: '#d85675'
- border-radius: 20%
- border-style: solid
- border-width: 4px
- border-color: '#d85675'
- type: custom:button-card
entity: person.person2
show_name: false
show_entity_picture: true
styles:
card:
- border: none
- height: 120px
- width: 120px
- background: none
entity_picture:
- height: 75px
- width: 75px
- border-radius: 120%
- border-style: solid
- border-width: 4px
- border-color: '#039be5'
name:
- color: white
- background: '#039be5'
- border-radius: 30%
- border-style: solid
- border-width: 4px
- border-color: '#039be5'
- type: custom:button-card
entity: person.person4
show_name: false
show_entity_picture: true
styles:
card:
- border: none
- height: 120px
- width: 120px
- background: none
entity_picture:
- height: 75px
- width: 75px
- border-radius: 120%
- border-style: solid
- border-width: 4px
- border-color: '#ef6c00'
name:
- color: white
- background: '#ef6c00'
- border-radius: 30%
- border-style: solid
- border-width: 4px
- border-color: '#ef6c00'
- type: custom:button-card
entity: person.person3
show_name: false
show_entity_picture: true
styles:
card:
- border: none
- height: 120px
- width: 120px
- background: none
entity_picture:
- height: 75px
- width: 75px
- border-radius: 120%
- border-style: solid
- border-width: 4px
- border-color: '#9e69af'
name:
- color: white
- background: '#9e69af'
- border-radius: 30%
- border-style: solid
- border-width: 4px
- border-color: '#9e69af'
grid_options:
columns: full
rows: auto
columns: 1
column_span: 7
- type: grid
cards:
- type: custom:week-planner-card
timeFormat: h:mma
hideDaysWithoutEvents: false
days: '7'
showLegend: false
calendars:
- entity: calendar.family
name: null
color: '#3f51b5'
- entity: calendar.person1
name: null
color: '#d85675'
- entity: calendar.person2
name: null
color: '#039be5'
- entity: calendar.person4
name: null
color: '#ef6c00'
- entity: calendar.person3
name: null
color: '#9e69af'
- name: Holidays
color: '#55b080'
entity: calendar.holidays_in_united_states
compact: false
startingDayOffset: '0'
weather:
entity: weather.pirateweather
showCondition: true
showTemperature: true
showLowTemperature: true
useTwiceDaily: false
legendToggle: false
noCardBackground: true
columns:
extraLarge: '7'
large: '7'
medium: '7'
small: '7'
extraSmall: '7'
showDescription: false
locale: en
showLocation: false
combineSimilarEvents: true
showTitle: true
texts:
noEvents: null
fullDay: null
showNavigation: true
maxDayEvents: '0'
startingDay: sunday
grid_options:
columns: full
card_mod:
style: |
.event {
border-radius: 10px !important;
background-color: var(--border-color) !important;
}
.time {
font-weight: bold;
color: white !important;
}
.title {
color: white !important;
}
.event.past {
opacity: .3;
}
.day {
border-radius: 10px;
height: 800px !important;
}
.today {
border-radius: 10px !important;
height: 800px !important;
}
.date .text {
font-size: 25px !important;
}
.month{
display: flex !important;
alight-items: center !important;
height: 100% !important;
margin-top: 0 !important;
margin-bottom: 0px !important;
font-size: 30px !important;
}
.container {
height: 80px !important;
color: black !important;
}
.container .day .date {
}
column_span: 7
cards: []
top_margin: false
dense_section_placement: true
background:
opacity: 100
alignment: center
size: auto
repeat: repeat
attachment: fixed
image: /api/image/serve/a9c38658b7df51e3d7594af94f07acc7/original
How can I stop it from constantly refreshing? When my screen turns on, the Family Calendar reloads/refreshes. How cna I change this so it only refreshes like every 3 hours or something?
Its been a while since I logged in, so I will check properly later on. But Im sure there is a value like ‘updateInterval’ which checks for event updates. Default was 60 seconds from memory. Could be related to that.
Or are you refering to more of a complete browser page re-render?
You can change this in the gui under Miscellaneous
Default is set to 60 seconds.
From the manual:
updateInterval number 60 Any positive integer number Seconds between checks for new events 1.0.0
1 Like
Johan has provided your answer.
That said just check before you change it, that it functions as you expect. For example it might seem like you dont need it refreshed so often. But if you set it to 3hrs. If you update the calendar, add an event for example, it wont be shown for 3 hours until it refreshes.
Maybe I don’t want to change it then. My issue is that when my tablet screen shuts off for some reason my tablet disconnects from Home Assistant Green, then when it reconnects the Family Calendar take like 30 seconds to refresh. Is there a way to disable the refresh every time it reconnects?