If it would be helpful, here is my full family calendar dashboard yaml.
I removed the config-template-card portion as the week-planner-card supports paging through months and picking calendars to show/hide now. We also never changed the durations we want to see in my family.
This uses Kiosk Mode to make it fullscreen on my Crestron 1070 display and a couple clock/weather widgets we like.
There are no helpers/etc needed, only need to install the necessary items through HACS and configure which calendars you want shown.
Here’s the code as it sits now. I’m sure the css can use some work, and I’d love feedback to make it better 
kiosk_mode:
user_settings:
- users:
- Crestron1
kiosk: true
hide_header: true
hide_sidebar: true
hide_menu_button: true
hide_menubutton: true
hide_overflow: true
views:
- type: panel
path: Home
title: Home
cards:
- type: custom:bootstrap-grid-card
class: container-fluid g-0
cards:
- type: row
class: row
cards:
- type: custom:clock-weather-card
class: col-3
entity: weather.forecast_home
forecast_days: 1
locale: en-US
time_format: 12
date_pattern: ccc, LLL d, yyyy
hide_clock: false
hide_today_section: false
hide_forecast_section: true
hourly_forecast: true
card_mod:
style: |
ha-card {
background: transparent !important;
box-shadow: none !important;
border: none !important;
margin: -3px 0px !important;
}
clock-weather-card-today-left {
justify-content: left !important;
}
clock-weather-card-today-left img {
height: 75px !important;
}
clock-weather-card-today-right-wrap {
line-height: 30px !important;
}
clock-weather-card-today-right-wrap-top {
font-size: 2rem !important;
}
clock-weather-card-today-right-wrap-bottom {
font-size: 2rem !important;
}
clock-weather-card-today-right-wrap-center {
font-size: 4.5rem !important;
}
- type: custom:weather-chart-card
class: col-5
entity: weather.forecast_home
show_main: false
show_temperature: false
show_current_condition: false
show_attributes: false
show_time: false
show_time_seconds: false
show_day: false
show_date: false
show_humidity: false
show_pressure: false
show_wind_direction: false
show_wind_speed: false
show_sun: false
show_feels_like: false
show_dew_point: false
show_wind_gust_speed: false
show_visibility: false
show_last_changed: false
use_12hour_format: true
icons_size: 25
animated_icons: true
icon_style: style1
autoscroll: true
forecast:
precipitation_type: rainfall
show_probability: false
labels_font_size: '16'
precip_bar_size: '100'
style: style2
show_wind_forecast: false
condition_icons: true
round_temp: false
type: hourly
number_of_forecasts: '10'
disable_animation: true
chart_height: '150'
units:
speed: ''
card_mod:
style: |
ha-card {
background: transparent !important;
box-shadow: none !important;
border: none !important;
margin: -3px 0px !important;
}
.card {
padding: 0px 10px 0px 20px !important;
}
- type: custom:clock-weather-card
class: col-4
entity: weather.forecast_home
forecast_days: 5
locale: en
time_format: 12
hide_clock: true
date_pattern: ''
hide_today_section: true
hide_forecast_section: false
card_mod:
style: |
ha-card {
background: transparent !important;
box-shadow: none !important;
border: none !important;
margin: -3px 0px !important;
}
forecast-text {
font-size: 17px !important;
}
clock-weather-card-forecast-row {
--col-one-size: 2rem !important;
}
- type: custom:week-planner-card
calendars:
- entity: calendar.cal1
name: Cal1
color: '#7afcfd'
- entity: calendar.cal2
name: Cal2
color: '#BBF1F1'
- entity: calendar.cal3
name: Cal3
color: '#FFB6C1'
- entity: calendar.cal4
name: Cal4
color: '#90EE90'
days: 35
columns: large
startingDayOffset: 0
startingDay: sunday
dayFormat: >-
'<span class="text">'ccc'</span><span data-date="'d'"><span
class="number">'d'</span><span
class="month">'MMM'</span></span>'
timeFormat: h:mm a
hideWeekend: false
noCardBackground: false
compact: true
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
useTwiceDaily: false
entity: weather.forecast_home
locale: en-US
showLocation: false
showDescription: false
hidePastEvents: false
hideDaysWithoutEvents: false
hideTodayWithoutEvents: false
combineSimilarEvents: true
showLegend: true
legendToggle: true
showNavigation: true
texts:
monday: M
tuesday: T
wednesday: W
thursday: Th
friday: F
saturday: S
sunday: S
yesterday: ''
today: ''
tomorrow: ''
noEvents: ''
fullDay: ''
card_mod:
style:
.: >
ha-card {
background: transparent !important;
box-shadow: none !important;
border: none !important;
} .card-content {
padding-top: 0px !important;
} .container .legend {
padding: 0px 0px 5px 20px !important;
} .container .day .date span .month {
display: none;
font-size: var(--day-date-number-font-size);
line-height: var(--day-date-number-line-height);
}
.container .day .date span[data-date="1"] .number {
display: none;
}
.container .day .date span[data-date="1"] .month {
display: inline;
background-color: #808080 !important;
border-radius: 50%;
order: 2;
height: 40px;
width: 40px;
padding: 5px;
padding-top: 15px;
margin-top: 5px;
display: table-cell;
vertical-align: middle;
text-align: center;
font-weight: 100;
font-family: "Roboto", sans-serif;
}
.container .day .events .event .time {
font-weight: 700;
font-size: 15px !important;
margin: 0px !important;
}
.container {
row-gap: 0px !important;
column-gap: 5px !important;
}
.container .navigation {
position: absolute;
right: 50px;
}
ha-card {
border-radius: 0px;
margin-top: 0px;
font-size: 20px !important;
overflow: hidden;
--days-spacing: 10px;
--event-padding: 2px !important;
--events-margin-top: 1px !important;
--event-border-width: 2px;
--navigation-month-font-size: 20px !important;
#background-color: black;
}
.event.past {
opacity: 0.3;
}
.none {
background-color: transparent !important;
}
.container .day {
width: calc((100% - 6 * var(--days-spacing)) / 7) !important;
margin: 0px !important
}
.container .day .date {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container .day .date .number {
order: 2;
height: 40px;
width: 40px;
padding: 5px;
padding-top: 15px;
margin-top: 5px;
display: table-cell;
vertical-align: middle;
text-align: center;
font-weight: 100;
font-family: "Roboto", sans-serif;
}
.container .day .date .text {
order: 1;
font-weight: 300;
font-family: "Roboto", sans-serif;
font-size: 20px !important;
margin-bottom: 8px;
transform: scale(1, 1.2);
}
.today .date .number {
background-color: #ff0000 !important;
border-radius: 50%;
}
.container .day:nth-child(n+9) .date .text {
display: none;
}
.event {
color: #333333 !important;
#line-height: 16px !important;
background-color: var(--border-color) !important;
border-radius: 10px !important;
max-height: 200px !important;
overflow: hidden !important;
font-size: 1.2em !important;
}
.container .day .events .event[data-entity="calendar.name"]
{
color: black;
--secondary-text-color: black;
background-color: hsla(174,53%,68%,0.75) !important;
}
.container .day .events
.event[data-entity="calendar.garbage"] {
color: black;
--secondary-text-color: black;
background-color: hsl(80,60%,35%,0.65) !important;
}
Thanks everyone for your hard work on this, can’t wait to see the tasks/chores integrations!