Hi see below full page yaml
"0":
type: grid
cards:
- type: custom:better-moment-card
parentStyle: |
line-height:normal;
moment:
- parentStyle: |
font-size:1em; text-align:center; margin-top:5px;
templateRaw: |
{{moment format=cccc}}
- parentStyle: |
font-size:1.5em; text-align:center; margin-top:5px;
templateRaw: |
{{moment format=LLLL dd, yyyy}}
- parentStyle: |
font-size:4em; text-align:center; font-weight:400;
templateRaw: |
{{moment format=HH:mm}}
card_mod:
style: |
ha-card {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
- type: custom:weather-card
entity: weather.[MY_WEATHER_ENTITY}
current: true
details: true
forecast: false
- type: weather-forecast
show_current: false
show_forecast: true
entity: weather.[MY_WEATHER_ENTITY]
forecast_type: daily
name: Weather Forecast
card_mod:
style: |
ha-card {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
cards:
- type: vertical-stack
cards:
- type: markdown
content: <font color="Black" size="6">The Skylight Calendar</font>
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: state
entity: person.remy_warner
scrolling_effect: false
tap_action:
action: navigate
navigation_path: "\"#addcalendarevent\""
button_action:
tap_action:
action: navigate
navigation_path: "\"#addcalendarevent\""
icon: mdi:calendar-plus
- type: custom:bubble-card
card_type: button
button_type: name
name: Add Event
scrolling_effect: false
icon: mdi:calendar-plus
tap_action:
action: navigate
navigation_path: "\"#addcalendarevent\""
button_action:
tap_action:
action: navigate
navigation_path: "\"#addcalendarevent\""
styles: |-
font-size: 1.05em !important;
ha-card {
--bubble-main-background-color: #393745 !important;
width: 300px;
}
.bubble-icon {
--mdc-icon-size: 30px !important;
color: snow !important;
opacity: 1;
}
.bubble-icon-container {
background: #393745 !important;
display: flex;
}
.bubble-name {
color: snow !important;
opacity: 1;
display: flex;
line-height: 18px;
flex-direction: row;
justify-content: center;
flex-grow: 1;
margin: 0 40px 0 0;
pointer-events: none;
position: relative;
overflow: hidden;
}
- type: custom:bubble-card
card_type: select
entity: input_select.calendar_view
show_icon: false
show_name: true
show_state: true
name: Select View
- type: custom:config-template-card
entities:
- input_text.remy_calendar_filter_calendar_filter
- input_select.calendar_view
variables:
PERSONCAL: states['input_text.remy_calendar_filter_calendar_filter']?.state
VIEW: states['input_select.calendar_view']?.state
DAYS: |
(() => {
const calendarView = states['input_select.calendar_view']?.state;
if (calendarView === 'Today') return 1;
if (calendarView === 'Tomorrow') return 2;
// Check for Month, Biweek, or Week based on screen width
if (calendarView === 'Week') return 7;
if (calendarView === 'Biweek') return 14;
if (calendarView === 'Month') return 28;
if (calendarView === 'Bimonth') return 56;
// Default fallback to 7 if no condition matches
return 7;
})()
card:
type: custom:week-planner-card
calendars:
- entity: calendar.remythfc_googlemail_com
name: remy
color: "#ffff"
filter: ${ PERSONCAL }
days: ${ DAYS }
startingDayOffset: 0
hideWeekend: false
noCardBackground: false
compact: false
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
useTwiceDaily: false
entity: weather.forecast_home
locale: en
showLocation: true
hidePastEvents: false
hideDaysWithoutEvents: false
hideTodayWithoutEvents: false
combineSimilarEvents: true
showLegend: false
legendToggle: false
texts:
monday: Mon
tuesday: Tue
wednesday: Wed
thursday: Thu
friday: Fri
saturday: Sat
sunday: Sun
yesterday: ""
today: ""
tomorrow: ""
card_mod:
style: |
ha-card {
.event.past {
opacity: .2;
background-color: gray !important;
}
.time {
color: #333333 !important;
font-size: 0.8em !important;
}
.event {
color: #333333 !important;
line-height: 16px !important;
background-color: var(--border-color) !important;
border-radius: 10px !important;
max-height: 80px !important;
overflow: hidden !important;
font-size: 1.1em !important;
}
.none {
background-color: transparent !important;
}
.today .number {
border-radius: 5px;
background-color: orange !important;
padding-left: 4px;
padding-right: 4px;
}
.day .date .text {
font-size: 1em !important;
font-weight: bold !important;
}
.day .date .number {
font-weight: bold !important;
font-size: 3em !important;
}
.day {
--background-color: red;
border: solid 1px whitesmoke;
padding: 0.2%;
width: 13% !important;
}
}
type: masonry
title: Skylight
I do have the card mod and the browser mod set up as well.
Thanks
