type: custom:week-planner-card
calendars:
- entity: calendar.feyenoord
color: green
- entity: calendar.f1
color: red
hideDaysWithoutEvents: true
hideTodayWithoutEvents: true
showLegend: false
card_mod:
style: |
.event {
#display: flex;
border-radius: 0px !important;
margin: 0px !important ;
margin-bottom: 4px !important;
border-left: none !important;
position: relative;
padding-left: 16px;
}
.event::before {
content: '';
position: absolute;
left: 4px;
top: 16px;
width: 8px;
height: 8px;
background-color: var(--border-color);
border-radius: 50%;
}
.event .inner {
display: flex;
}
.event .time {
#padding-right: 12px;
width: 100px;
line-height: 20px;
}
.event .title {
width: calc(100% - 140px);
line-height: 20px;
}
.event .location, .event .description {
color: var(--secondary-text-color);
}
.event .location ha-icon{
display: none !important;
}
.event.past {
opacity: .5;
}
.day .date .number {
display: none !important;
font-size: 18px !important;
}
.day .date {
#text-transform: uppercase;
#padding-left: 24px;
padding-top: 0px;
#background-color: var(--background-color-info);
height: 32px;
font-weight: bold;
border-radius: 12px 12px 0px 0px;
}
.loader {
opacity: 0;
}
.events {
margin-top: 4px !important;
}
.event[data-summary~="F1:"] {
#background-color: rgba(0, 0, 0, 0.02) !important;
background-image: url('/local/tmp/f1.png');
background-repeat: no-repeat;
background-position: right center;
background-size: 39px 39px;
}
.event[data-summary~="Feyenoord"] {
#background-color: rgba(0, 0, 0, 0.02) !important;
background-image: url('/local/tmp/feyenoord.png');
background-repeat: no-repeat;
background-position: right center;
background-size: 39px 39px;
}
