Yes thats the one!
You could do this with the visual editor and you need to add some code to the yaml.
Important is to have card mod installed.
I only have it in week view at the moment not in month view but this is my configuration
days: "7"
startingDay: monday
startingDayOffset: "7"
hideWeekend: false
noCardBackground: true
compact: false
weather:
entity: weather.buienradar
showCondition: true
showTemperature: true
showLowTemperature: false
useTwiceDaily: false
locale: nl
showLocation: false
hidePastEvents: false
hideDaysWithoutEvents: false
hideTodayWithoutEvents: false
combineSimilarEvents: false
showLegend: false
legendToggle: false
texts:
fullDay: null
today: Vandaag
tomorrow: Morgen
moreEvents: Meer...
yesterday: Gisteren
noEvents: " "
grid_options:
columns: full
#add's week number behind the day of the week (i/e monday 12)
dayFormat: >-
'<span class="number">'d'</span> <span class="text">'cccc'</span> <span
class="wk">'n'</span>'
showDescription: false
`card_mod:
style: |
# Changes the background of an event to the same color as the line in front of the event
.event {
color: white !important;
background-color: var(--border-color) !important;
}
# Makes Today number white
.today .number {
color: white;
text-shadow: 0px 3px 3px rgba(0,0,0,50);
}
#Removes the background of the no event block.
.none {
background-color: transparent !important;
}
#Changes events fonts etc...
.events {
font-size: 1.4em;
}
# Removes border and shadow
ha-card {
border: none;
--ha-card-box-shadow: 0px;
}
Here’s my version. Modeled after the skylight calendar. This is displayed on a 15" Samsung tablet in my office and one in the kitchen. I’m using the navbar card for the navigation at the bottom. Bubble card pop-ups include the front door camera view when a person is detected, and a visual representation of any Alexa timers that are started in the kitchen. Thanks for this calendar card!
@husbspamuel
- type: sections
max_columns: 4
title: calendar
path: calendar
theme: Wall Tablet Theme Light
background:
opacity: 100
alignment: center
size: cover
repeat: no-repeat
attachment: scroll
image: /api/image/serve/yourvalue/original
sections:
- type: grid
cards: []
- type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: person.yourvalue
name: yourvalue
show_name: true
show_entity_picture: true
entity_picture: /local/images/512x512yourvaluenew2.png
styles:
card:
- border: none
- height: 160px
- width: 150px
- background: none
entity_picture:
- height: 88px
- width: 88px
- border-radius: 100%
- border-style: solid
- border-width: 4px
- border-color: teal
name:
- color: white;
- background: teal
- border-radius: 30%
- border-style: solid
- border-width: 4px
- border-color: teal
card_mod:
style: |
ha-card {
--mdc-theme-surface: lightblue !important; /* Change background */
color: black !important; /* Adjust text color for readability */
}
- type: custom:button-card
entity: person.yourvalue
name: yourvalue
show_name: true
show_entity_picture: true
entity_picture: /local/images/512x512yourvalue.png
styles:
card:
- border: none
- height: 160px
- width: 155px
- background: none
entity_picture:
- height: 88px
- width: 88px
- border-radius: 100%
- border-style: solid
- border-width: 4px
- border-color: pink
name:
- color: white;
- background: pink
- border-radius: 30%
- border-style: solid
- border-width: 4px
- border-color: pink
tap_action: none
- type: custom:button-card
entity: person.yourvalue
name: yourvalue
show_name: true
show_entity_picture: true
entity_picture: /local/images/512x512yourvalue3.png
styles:
card:
- border: none
- height: 160px
- width: 155px
- background: none
entity_picture:
- height: 88px
- width: 88px
- border-radius: 100%
- border-style: solid
- border-width: 4px
- border-color: mediumpurple
name:
- color: white;
- background: mediumpurple
- border-radius: 30%
- border-style: solid
- border-width: 4px
- border-color: mediumpurple
tap_action: none
- type: custom:button-card
entity: person.yourvalue
name: yourvalue
show_name: true
show_entity_picture: true
entity_picture: /local/images/512x512yourvalue.png
styles:
card:
- border: none
- height: 160px
- width: 155px
- background: none
entity_picture:
- height: 88px
- width: 88px
- border-radius: 100%
- border-style: solid
- border-width: 4px
- border-color: darkseagreen
name:
- color: white;
- background: darkseagreen
- border-radius: 30%
- border-style: solid
- border-width: 4px
- border-color: darkseagreen
tap_action: none
- type: custom:button-card
entity: person.yourvalue
name: yourvalue
show_name: true
show_entity_picture: true
entity_picture: /local/images/512x512yourvalue.png
styles:
card:
- border: none
- height: 160px
- width: 155px
- background: none
entity_picture:
- height: 88px
- width: 88px
- border-radius: 100%
- border-style: solid
- border-width: 4px
- border-color: lightsalmon
name:
- color: white;
- background: lightsalmon
- border-radius: 30%
- border-style: solid
- border-width: 4px
- border-color: lightsalmon
tap_action: none
grid_options:
columns: full
rows: auto
column_span: 2
- type: grid
cards: []
- type: grid
cards:
- type: custom:week-planner-card
calendars:
- entity: calendar.family
color: none
name: ' '
days: '14'
startingDay: monday
startingDayOffset: 0
hideWeekend: false
noCardBackground: true
compact: false
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
useTwiceDaily: false
entity: weather.pirateweather
locale: en
showLocation: false
hidePastEvents: false
hideDaysWithoutEvents: false
hideTodayWithoutEvents: false
combineSimilarEvents: false
showLegend: true
showNavigation: true
grid_options:
columns: full
rows: 8
showDescription: true
texts:
noEvents: null
fullDay: null
today: ⭐TODAY⭐
eventBackground: lightblue
timeFormat: t
card_mod:
style: |
.event[data-summary~="yourvalue" i]{
background-color: mediumpurple !important;
}
.event[data-summary~="yourvalue" i],
.event[data-summary~="yourvalue" i]{
background-color: pink !important;
}
.event[data-summary~="yourvalue" i],
.event[data-summary~="yourvalue" i]{
background-color: teal !important;
}
.event[data-summary~="yourvalue" i],
.event[data-summary~="yourvalue" i]{
background-color: darkseagreen !important;
}
.event[data-summary~="yourvalue" i]{
background-color: lightsalmon !important;
}
.event[data-summary~="Hide"]{
opacity: .6;
}
.event.past {
opacity: .3;
}
.none{
background-color: transparent !important;
}
.today{
background-color: wheat !important;
border-radius: 10px !important;
}
.event{
border-radius: 10px !important;
font-size: 20px !important;
color: white !important;
}
.month{
font-size: 80px !important;
}
.time{
color: white !important;
}
.day{
font-size: 18px !important;
}
column_span: 4
- type: grid
cards:
- type: custom:navbar-card
desktop:
position: bottom
show_labels: true
mobile:
show_labels: true
styles: |
.navbar {
background: lightblue;
}
.navbar.desktop {
gap: 45px;
box-shadow: none;
}
.icon {
--mdc-icon-size: 40px;
--icon-primary-color: white;
}
.label {
font-size: 16px;
color: white;
}
routes:
- url: /new-office/home
icon: mdi:home
label: Home
hold_action:
action: perform-action
perform_action: fully_kiosk.load_url
target:
device_id: yourvalue
data:
url: >-
http://yourIP:8123/new-office/home/0?disable_km=&edit=1
- url: /new-office/calendar
icon: mdi:calendar
label: Calendar
- url: /new-office/rooms
icon: mdi:sofa
label: Rooms
- url: /new-office/cameras
icon: mdi:cctv
label: Cameras
- url: /new-office/nursery
icon: mdi:baby-bottle
label: Nursery
- url: /new-office/sonos
icon: mdi:music
label: Sonos
- url: /new-office/calendar#officetabletfrontdoorcalendar
icon: mdi:cctv
label: Front Door
- url: /new-office/calendar#officealexatimercalendar
icon: mdi:timer
label: Timer
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#officetabletfrontdoorcalendar'
show_header: true
auto_close: '30000'
trigger: null
trigger_entity: binary_sensor.frontdoorlowrtc_person_occupancy
trigger_state: 'on'
trigger_close: false
icon: ''
name: Front Door - Press here to lock/unlock
entity: lock.front_door
button_type: state
show_state: true
tap_action:
action: toggle
force_icon: false
width_desktop: 100%
styles: >-
.bubble-pop-up * {
font-size: 18px !important;
}
${icon.setAttribute("icon",
hass.states['lock.front_door'].state ==='unlocked' ?
'mdi:lock-open' : 'mdi:lock')}
hide_backdrop: false
close_by_clicking_outside: false
bg_blur: '0'
bg_opacity: '0'
shadow_opacity: '0'
backdrop_blur: '0'
margin_top_desktop: '-30px'
show_last_changed: true
sub_button: []
show_icon: true
button_action:
tap_action:
action: toggle
modules:
- default
- type: custom:frigate-card
cameras:
- camera_entity: camera.frontdoorrtc
go2rtc:
modes: []
live_provider: go2rtc
live:
preload: true
draggable: false
zoomable: true
controls: {}
microphone:
always_connected: false
auto_unmute:
- selected
menu:
style: overlay
buttons:
frigate:
enabled: false
cameras:
enabled: false
substreams:
enabled: false
live:
enabled: false
clips:
enabled: false
snapshots:
enabled: false
recordings:
enabled: false
download:
enabled: false
camera_ui:
enabled: false
fullscreen:
enabled: false
timeline:
enabled: false
media_player:
enabled: false
performance: {}
cameras_global:
dimensions:
layout:
fit: fill
status_bar:
style: none
dimensions:
aspect_ratio_mode: static
aspect_ratio: '16:8'
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#officealexatimercalendar'
show_header: false
auto_close: ''
trigger:
- condition: and
conditions:
- condition: state
entity: sensor.office_dot_next_timer
state_not: unavailable
- condition: state
entity: sensor.office_dot_next_timer
state_not: unknown
icon: ''
name: ''
show_state: true
force_icon: false
width_desktop: '90'
hide_backdrop: false
close_by_clicking_outside: false
bg_blur: '0'
bg_opacity: '0'
shadow_opacity: '0'
backdrop_blur: '0'
margin_top_desktop: 20vh
sub_button: []
button_action:
tap_action:
action: toggle
modules:
- default
slide_to_close_distance: ''
close_on_click: true
background_update: true
- type: custom:flipdown-timer-card
entity: sensor.office_dot_next_timer
show_hour: auto
show_title: false
show_header: false
theme: light
styles:
rotor:
width: 360px
height: 250px
fontsize: 18rem
card_mod:
style: |
ha-card {
background: transparent;
box-shadow: none;
}
grid_options:
rows: 1
columns: 12
cards: []