I was able to copy and past your YAML, which went a long way. Thank you! I think we i am struggling is adding other people such as my wife. And also making it look like the Skylight UI.
almost there just missing a few things and I cant seem to figure them out.
-
I cant get the weather to show on the calendar in each individual square.
-
When I click on birthdays and a person I get the error āAction script.birthdays_calendar_visible_filter not foundā
-
Not sure why I keep getting the config error on the left of birthdays
-
The bubble that say Jesus I cant change that to another color only stays grey.
Can someone explain what im doing wrong. I am attaching the YAML code
views:
- type: sections
title: Family Planner
path: family-planner
sections:
- 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.forecast_home_2
current: true
details: true
forecast: false
card_mod:
style: |
ha-card {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
- type: grid
cards:
- show_current: false
show_forecast: true
type: weather-forecast
entity: weather.forecast_home_2
forecast_type: daily
forecast_slots: 10
card_mod:
style: |
ha-card {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
grid_options:
columns: 24
rows: 3
column_span: 2
- type: grid
cards:
- type: vertical-stack
cards:
- type: markdown
content: <font color="" size="12">Family Planner</font>
grid_options:
columns: 48
rows: auto
column_span: 4
- cards:
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: state
entity: person.jesus
scrolling_effect: false
show_icon: true
show_name: true
show_state: false
tap_action:
action: perform-action
perform_action: script.jesus_calendar_visible_filter
target: {}
button_action:
tap_action:
action: perform-action
perform_action: script.jesus_calendar_visible_filter
target: {}
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['input_text.jesus_calendar_filter'].state === '.*' ? 'light-grey' : 'blue'} !important;}
}
modules:
- default
- type: custom:bubble-card
card_type: button
button_type: state
entity: person.person2
scrolling_effect: false
show_icon: true
show_name: true
show_state: false
tap_action:
action: perform-action
perform_action: script.person2_calendar_visible_filter
target: {}
button_action:
tap_action:
action: perform-action
perform_action: script.person2_calendar_visible_filter
target: {}
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['input_text.person2_calendar_filter'].state === '.*' ? 'light-grey' : '#e5f50c'} !important;}
}
modules:
- default
- type: custom:bubble-card
card_type: button
button_type: state
entity: person.person3
scrolling_effect: false
show_icon: true
show_name: true
show_state: false
tap_action:
action: perform-action
perform_action: script.person3_calendar_visible_filter
target: {}
button_action:
tap_action:
action: perform-action
perform_action: script.person3_calendar_visible_filter
target: {}
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['input_text.person3_calendar_filter'].state === '.*' ? 'light-grey' : '#900cf5'} !important;}
}
modules:
- default
- type: custom:bubble-card
card_type: button
button_type: state
entity: person.person4
scrolling_effect: false
show_icon: true
show_name: true
show_state: false
tap_action:
action: perform-action
perform_action: script.person4_calendar_visible_filter
target: {}
button_action:
tap_action:
action: perform-action
perform_action: script.person4_calendar_visible_filter
target: {}
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['input_text.person4_calendar_filter'].state === '.*' ? 'light-grey' : '#0cf537'} !important;}
}
modules:
- default
- type: custom:bubble-card
card_type: button
button_type: state
entity: person.person5
scrolling_effect: false
show_icon: true
show_name: true
show_state: false
tap_action:
action: perform-action
perform_action: script.person5_calendar_visible_filter
target: {}
button_action:
tap_action:
action: perform-action
perform_action: script.person5_calendar_visible_filter
target: {}
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['input_text.person5_calendar_filter'].state === '.*' ? 'light-grey' : '#eb8af2'} !important;}
}
modules:
- default
- type: custom:bubble-card
card_type: button
button_type: state
entity: person.birthdays
name: Birthdays
scrolling_effect: false
show_icon: true
show_name: true
show_state: false
tap_action:
action: perform-action
perform_action: script.birthdays_calendar_visible_filter
target: {}
button_action:
tap_action:
action: perform-action
perform_action: script.birthdays_calendar_visible_filter
target: {}
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['input_text.birthdays_calendar_filter'].state === '.*' ? 'light-grey' : 'red'} !important;}
}
modules:
- default
grid_options:
columns: 28
rows: auto
column_span: 3
- type: custom:bubble-card
card_type: button
button_type: name
card_layout: large
name: Add Event
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_name: true
show_state: true
name: Select View
show_last_changed: false
show_attribute: false
column_span: 1
- type: custom:config-template-card
entities:
- input_text.person1_calendar_filter
- input_text.person2_calendar_filter
- input_text.person3_calendar_filter
- input_text.person4_calendar_filter
- input_text.person5_calendar_filter
- input_text.birthdays_calendar_filter
- input_select.calendar_view
variables:
PERSONCAL: states['input_text.person1_calendar_filter']?.state
PERSON2CAL: states['input_text.person2_calendar_filter']?.state
PERSON3CAL: states['input_text.person3_calendar_filter']?.state
PERSON4CAL: states['input_text.person4_calendar_filter']?.state
PERSON5CAL: states['input_text.person5_calendar_filter']?.state
BIRCAL: states['input_text.birthdays_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;
if (calendarView === 'Overmorrow') return 3;
// 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 28;
})()
card:
type: custom:week-planner-card
calendars:
- entity: calendar.jesuschavana26_gmail_com
name: person1
color: '#80b690'
filter: ${ PERSONCAL }
- entity: calendar.person2
name: person2
color: '#e5f50c'
filter: ${ PERSON2CAL }
- entity: calendar.person3
name: person3
color: '#900cf5'
filter: ${ PERSON3CAL }
- entity: calendar.person4
name: person4
color: '#0cf537'
filter: ${ PERSON4CAL }
- entity: calendar.person5
name: person5
color: '#eb8af2'
filter: ${ PERSON5CAL }
- entity: calendar.birthdays
name: Birthdays
color: red
filter: ${ BIRCAL }
days: ${ DAYS }
startingDayOffset: 0
hideWeekend: false
noCardBackground: false
compact: false
locale: en
weather: null
showCondition: true
showTemperature: true
showLowTemperature: true
useTwiceDaily: false
entity: weather.forecast_home_2
showLocation: true
hidePastEvents: false
hideDaysWithoutEvents: false
hideTodayWithoutEvents: false
combineSimilarEvents: true
showLegend: false
legendToggle: false
showNavigation: true
texts:
monday: Mon
tuesday: Tue
wednesday: Wed
thursday: Thu
friday: Fri
saturday: Sat
sunday: Sun
yesterday: ''
today: āTODAYā
tomorrow: ''
overmorrow: ''
card_mod:
style: |
ha-card {
.container .navigation .data-year {
position: static;
right: 60px;
}
.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;
}
}
column_span: 4
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#addcalendarevent'
button_type: name
name: Add Calendar Event
icon: mdi:calendar-plus
scrolling_effect: false
show_icon: true
show_name: true
styles: |
.bubble-button-card-container {
background:
${hass.states['input_select.calendar_select'].state ==
'person1' ? '#2d7bcf
: hass.states['input_select.calendar_select'].state ==
'person2' ? '#e5f50c'
: hass.states['input_select.calendar_select'].state ==
'person3' ? '#900cf5'
: hass.states['input_select.calendar_select'].state ==
'person4' ? '#0cf537'
: hass.states['input_select.calendar_select'].state ==
'person5' ? '#eb8af2'
: hass.states['input_select.calendar_select'].state ==
'Birthdays' ? '#B2BEB5'
: 'red'} !important;
}
- type: vertical-stack
cards:
- type: entities
entities:
- entity: input_select.calendar_select
- entity: input_text.calendar_event_title
name: Event Title
- entity: input_text.calendar_event_description
name: Event Description
- entity: input_boolean.calendar_all_day_event
name: All Day Event
title: Add Calendar Event
state_color: false
- type: conditional
conditions:
- entity: input_boolean.calendar_all_day_event
state: 'off'
card:
type: entities
entities:
- entity: input_datetime.calendar_event_start
name: Start Time
- entity: input_datetime.calendar_event_end
name: End Time
- type: conditional
conditions:
- entity: input_boolean.calendar_all_day_event
state: 'on'
card:
type: entities
entities:
- entity: input_datetime.calendar_day_event_start
name: Event Start Date
- entity: input_datetime.calendar_day_event_end
name: Event End Date
- type: custom:button-card
name: Add Event to Calendar
tap_action:
action: call-service
service: script.add_google_calendar_event
styles:
card:
- background-color: |
[[[
if (states['input_select.calendar_select'].state == 'person1')
return "#2d7bcf";
if (states['input_select.calendar_select'].state == 'person2')
return "#e5f50c";
if (states['input_select.calendar_select'].state == 'person3')
return "#900cf5";
if (states['input_select.calendar_select'].state == 'person4')
return "#0cf537";
if (states['input_select.calendar_select'].state == 'person5')
return "#eb8af2";
if (states['input_select.calendar_select'].state == 'Birthdays')
return "#33a02c";
return "gray";
]]]
column_span: 4
- type: custom:week-planner-card
calendars:
- entity: calendar.jesuschavana26_gmail_com
name: person1
color: '#2d7bcf'
filter: ${ PERSONCAL }
- entity: calendar.person2
name: person2
color: '#e5f50c'
filter: ${ PERSONCAL2 }
- entity: calendar.person3
name: person3
color: '#900cf5'
filter: ${ PERSONCAL3 }
- entity: calendar.person4
name: person4
color: '#0cf537'
filter: ${ PERSONCAL4 }
- entity: calendar.person5
name: person5
color: '#eb8af2'
filter: ${ PERSONCAL5 }
- entity: calendar.birthdays
name: Birthdays
color: '#B2BEB5'
filter: ${ BIRCAL }
days: ${ DAYS }
startingDay: today
startingDayOffset: 0
hideWeekend: false
noCardBackground: false
compact: false
weather:
showCondition: true
showTemperature: false
showLowTemperature: true
useTwiceDaily: false
entity: weather.forecast_home
locale: en
showLocation: true
hidePastEvents: false
hideDaysWithoutEvents: false
hideTodayWithoutEvents: false
combineSimilarEvents: true
showLegend: false
legendToggle: false
showNavigation: true
texts:
monday: Mon
tuesday: Tue
wednesday: Wed
thursday: Thu
friday: Fri
saturday: Sat
sunday: Sun
yesterday: ''
today: ''
tomorrow: ''
overmorrow: ''
column_span: 4
cards: []
So you āperson.jesusā as well as āscript.jesus_calendar_visible_filterā as the perform_action.
Then you have others namely āperson.person2ā with a āscript.person2_ā¦ā
and so on.
However lower down you have a number of input_text. entries. The first one being:
" - input_text.person1_calendar_filter"
with a corresponding variable below:
"PERSONCAL: states[āinput_text.person1_calendar_filterā]?.state
All the bits that say person1 should be replaced with ājesusā.
Can you try this and let me know how it goes.
If you want the weather icons/temp to show on each day in the calendar you need to add that section in. I didnt want it, for me it was too much and I felt it cluttered the view. But its personal choice.
Within the calendar section where it says āweather: nullā you need to add additional elements:
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
useTwiceDaily: false
as an example
idk what i did but got it to work
@husbspamuel is it possible to get blanks on the calendar. For example I just want to see 1-31 or whatever that month has. While also keeping the weekday on the same side? so like 29 and 30 for the previous month from the image would show as blank like a regular calendar
Iāll have a look. I suspect some sort of conditional formatting that identifies days from previous month and sets them to a semi transparant grey colour or something perhaps.
You can also set it so it just has the current month on screen. So it doesnt do a rolling 30/31 days, but a fixed 31 days.
On shorter months that does tend to mean there are 1 or 2 days from the next month on view as well though.
Does anyone have their yaml for the chore part they would want to share?
I have got a morning routine check list that works well. Not really a chore list, but it could be used for the same purpose.
Chore Tracker 1.0 - Chore Tracking with Point System in Home Assistant
Chore Tracker 2.0 - Home Assistant Chore Tracker 2.0: Part 1 Chore Tracker Setup - Smart Home Sysadmin
That said you could do something like āTodoistā. Create an account, build it out in that, add a new dashboard and set it as that webpage perhaps
Thank you for this! Super happy with the idea of not having to create a ton of scripts and helpers (as I was having problems with the helpers for the main calendar in this thread)
Iāve added some other fun things. Iām using wallpanel (HACS) to pop up a screensaver of favorite photos, Iām using Browser_mod (HACS) to turn off the screensaver when one of my zigbee motion sensors detects motion in front of the calendar, and Iām using simple-swipe-card (HACS) to swipe back and forth between the calendar and the whole home graphical display (a picture-elements card)
for the top row of my calendar, Iām using clock-weather-card (HACS) twice (like you) and lunar-phase-card (HACS) for moon phases. Iāve also modified the CSS a bunch so that the day numbers are in an upper corner, days that have passed have a diagonal line through them and faded numbers, and past events are mostly transparent and have the details hidden.
my css (Iām not super good at css, so it may be poor, but it works for my needs):
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: #fcf3cf !important;
border-radius: 20%;
order: 2;
height: 20px;
width: 120px;
padding: 5px;
padding-top: 10px;
margin-top: 5px;
display: table-cell;
vertical-align: middle;
text-align: center;
font-weight: 100;
font-family: "ChunkFive", sans-serif;
}
.container .day .events .event .time {
font-weight: 700;
font-size: 15px !important;
margin: 0px !important;
} .time {
color: black !important;
} .container {
row-gap: 0px !important;
column-gap: 2px !important;
}
.container .navigation {
position: absolute;
right: 50px;
}
ha-card {
border-radius: 0px;
margin-top: 0px;
font-size: 20px !important;
overflow: hidden;
--days-spacing: 11px;
--event-padding: 2px !important;
--events-margin-top: 1px !important;
--event-border-width: 2px;
--navigation-month-font-size: 20px !important;
}
.event.past {
opacity: 0.2;
}
.event.past .title{
display: none;
} .none {
background-color: transparent !important;
}
.container .day {
width: calc((100% - 6 * var(--days-spacing)) / 7) !important;
margin: 0px !important;
border: 1px solid gray;
}
.container .day .date {
display: inline-block;
width: 98%;
align-items: center;
justify-content: center;
}
.container .day .date .number {
order: 2;
height: 20px;
width: 98%;
padding: 5px;
padding-top: 5px;
padding-bottom: 5px
margin-top: 2px;
display: inline-block;
vertical-align: center;
text-align: left;
font-weight: 50;
font-family: "ChunkFive", sans-serif;
font-size: 98% !important;
}
.container .day .date .text {
order: 1;
font-weight: 300;
font-family: "ChunkFive", sans-serif;
font-size: 20px !important;
margin-bottom: 8px;
transform: scale(1, 1.2);
}
.today .date .number {
background-color: #CCCCCC !important;
text-decoration: underline;
width: 98% !important;
height: 20px !important;
padding: 2px !important;
padding-top: 2px !important;
margin-top: 2px !important;
text-align: center !important;
border: double;
border-radius: 10%;
}
.past .date .number {
opacity: 0.3;
font-size: 95% !important;
border-radius: 10%;
}
.container .day:nth-child(n+9) .date .text {
display: none;
}
.event {
color: #333333 !important;
background-color: var(--border-color) !important;
border-radius: 10px !important;
max-height: 200px !important;
overflow: hidden !important;
font-size: .75em !important;
}
.day.past {
background-image: repeating-linear-gradient(150deg, transparent 0%, transparent 49%, #44a 50%, transparent 51%, transparent 100%);
}
1 Like