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.
How do you make the calendar start on a Sunday and also display the entire month?