Have you tried max-width: 100%?
Is it also possible to implement different calendars? Like combination of google,apple and TimeTree?
@FamousWolf
@death2all110: is that a calendar setting of card_mod?
I tried both.
@richard0815: from the examples above or the GH documentation
type: custom:week-planner-card
calendars:
- entity: calendar.google
- entity: calendar.apple
- entity: calendar.timefree
Hi hi! Love this card over the Atomic Scheduler I used to rely on, it’s great (and simple!)
I had a question on how to display ongoing events … They don’t (necessarily) need to show up with some sort of different visual format (although it is a nice consideration) … My issue at the moment is that I have my work schedule on the calendar, but the moment it starts, it doesn’t show up on today’s card anymore.
I couldn’t see any options to enable ongoing events to show up until they’re over, but perhaps I missed something… Thanks in advance!
Thanks for your week-planner card, it’s getting close to what I am looking for.
I am trying to tweak the compact mode which is a bit too compact for me, and I have one question.
Is there a way to style the event-location?
I tried vrious card-mods, but without any luck
card_mod:
style: |
.day {
font-size: 16px;
}
.event.fullday {
opacity: .8;
}
.event.past {
opacity: .3;
}
.event.data-location
{
font-size: 9px !important;
}
There’s no option for this. You could do it with card-mod or a custom theme, as ongoing events do get the class ongoing, but I’m guessing that would be intentional if you set that in your CSS. Sounds more like a problem with whatever integration you’re using to get the events.
This should do it:
.event .location {
font-size: 9px;
}
2 Likes
Any calendar that has an integration with HA can be used. The card just gets the data from HA, not directly from the calendar provider.
3 Likes
This week-planner-card is amazing!
I am wondering if there is a possibility to show only events with specific terms e.g. “Birthday”
Right now the filter is rather negative filter (filter out) instead of a positive.
Regex filter ^(?!.Birthday).$ is not working.
I did just miss a space in my code. Thanks
HI,
is ther an option to show the month
i like the Big Daynuber, but missing the month small next to.
This should work: ^((?!Birthday).)*$
1 Like
Yes, you can use the dayFormat option. This uses Luxon formatting, so for the day number and the month it would be d LLLL
I’m seeing the exact same thing. I love the weekly planner card, but having the ability for my family to be able to add events from our hallway dashboard might push me back to the default calendar sadly.
Thank yuo, have it know.
i was trying in the “date-format” field
.
Its a pitty not to have still the Big Day Number, with the month
hi guys,
is it possible to create a calender like this with the week planner?
if yes - can some one send me a small example with that i can start with?
1 Like
Dynamic number of days depending on screen size
Inspired by my own post on Github regarding another user’s question about being able to use templates (and as I found out afterwards, I wasn’t the first), I came up with the idea of being able to define the number of days to be displayed dynamically based on the screen size.
Although the week-planner-card offers the possibility to define the number of columns depending on the screen size, this currently has 2 disadvantages for me:
- the underlying resolutions (small, medium, large, …) are fixed and cannot be changed
- I would not only like to define the number of columns, but limit the view to 1 row of days and specify the number of columns by the number of days.
In conjunction with the config-template-card, I found the following simple solution:
type: custom:config-template-card
entities: []
variables:
ANZAHL: |
(() => {
const width = window.innerWidth;
if (width >= 1920) return 7;
if (width >= 1280) return 3;
return 2;
})()
card:
type: custom:week-planner-card
days: ${ ANZAHL }
...
The big disadvantage is of course that you lose the great possibility to configure the card via UI. 
It would therefore be great if the week-planner-card could support templates directly in future. An additional added value would be if these could be written with Javascript (instead of Jinja2) in order to access client-side functions such as reading the screen size.
Some great cards, such as Apex-Charts and custom-button-card also offer the possibility of JS templates.
Alternatively or additionally, the week-planner-card could perhaps also have a native setting like this in the future: a “1-row mode” in which the card itself decides how many days can be displayed based on the available space.
In any case, great achievement and many thanks for this card!
2 Likes
as said by FamousWolf , it was not merged. instead you can use card-mod .
then add this at the end of your card:
style: >
.container .day .events .event[data-entity="calendar.calendrier_cuisine"] .inner {
background-color: #e6c229;
}
Hi! I am trying to get my calendar to show like yours in terms of having the different background color for each calendar (i.e., blue for one, green for another). I tried tampering with the code you posted, but I cannot seem to get it to work. Am I missing something? Thanks a lot.
type: custom:week-planner-card
days: 45
compact: true
weather:
entity: weather.forecast_home
showTemperature: true
showLowTemperature: true
showCondition: true
useTwiceDaily: false
noCardBackground: true
calendars:
- entity: calendar.[redacted]
color: rgba(142,36,170,1)
background-color: rgba(142,36,170,.2)
name: Name1
- entity: calendar.[redacted]
name: Holidays
color: magenta
Background-color: rgba(142,36,170,.2)
showTitle: true
combineSimilarEvents: false
showDescription: false
showLocation: true
showLegend: true
legendToggle: true
hidePastEvents: false
title: Fire Tablet 10 Synced Calendar
updateInterval: "60"
maxEvents: "0"
timeFormat: h:mma
eventBackground: rgba(0, 0, 0, .75)
card_mod:
style: |
.day.past {
opacity: .3;
}
.today .number {
color: red;
border: solid 2px red;
border-radius: 4px;
background-color: white !important;
}
try this way:
type: custom:week-planner-card
days: 45
compact: true
weather:
entity: weather.forecast_home
showTemperature: true
showLowTemperature: true
showCondition: true
useTwiceDaily: false
noCardBackground: true
calendars:
- entity: calendar.[redacted]
color: rgba(142,36,170,1)
name: Name1
- entity: calendar.[redacted]
name: Holidays
color: magenta
showTitle: true
combineSimilarEvents: false
showDescription: false
showLocation: true
showLegend: true
legendToggle: true
hidePastEvents: false
title: Fire Tablet 10 Synced Calendar
updateInterval: "60"
maxEvents: "0"
timeFormat: h:mma
eventBackground: rgba(0, 0, 0, .75)
card_mod:
style: |
.day.past {
opacity: .3;
}
.today .number {
color: red;
border: solid 2px red;
border-radius: 4px;
background-color: white !important;
}
.event[data-entity="calendar.Name1"] {
background-color: rgba(142,36,170,.2) !important;
}
.event[data-entity="calendar.Holidays"] {
background-color: rgba(142,36,170,.2) !important;
}