brian/homeassistant-calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

trying to get a us calendar style to work

Browse Source
This commit is contained in:
Brian Nelson
2025-12-11 09:32:29 -05:00
parent b197cbf932
commit c0efeba0a5
2 changed files with 240 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
config-2.yaml
View File

@@ -1,4 +1,7 @@
# this is another version of the dashbaord that is a WIP # this is another version of the dashbaord that is a WIP
kiosk_mode:
hide_header: '[[[ user_name === "Viewer" ]]]'
hide_sidebar: '[[[ is_state("input_boolean.hide_sidebar", "on") ]]]'
views: views:
- title: Home - title: Home
sections: sections:
@@ -52,6 +55,8 @@ views:
columns: full columns: full
column_span: 4 column_span: 4
- type: grid - type: grid
cards:
- type: vertical-stack
cards: cards:
- type: horizontal-stack - type: horizontal-stack
cards: cards:
@@ -77,6 +82,28 @@ views:
opacity: 1 !important; opacity: 1 !important;
background-color: ${hass.states['input_text.brian_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(15, 208, 184, 0.3)'} !important;} background-color: ${hass.states['input_text.brian_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(15, 208, 184, 0.3)'} !important;}
} }
- type: custom:bubble-card
card_type: button
button_type: state
entity: person.kate
scrolling_effect: false
show_icon: true
show_name: true
show_state: false
tap_action:
action: perform-action
perform_action: script.kate_calendar_visible_filter_duplicate
target: {}
button_action:
tap_action:
action: perform-action
perform_action: script.kate_calendar_visible_filter_duplicate
target: {}
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['input_text.kate_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(240, 8, 130, 0.5)'} !important;}
}
- type: custom:bubble-card - type: custom:bubble-card
card_type: button card_type: button
button_type: state button_type: state
@@ -100,6 +127,55 @@ views:
opacity: 1 !important; opacity: 1 !important;
background-color: ${hass.states['input_text.dog_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(15, 100, 255, 0.5)'} !important;} background-color: ${hass.states['input_text.dog_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(15, 100, 255, 0.5)'} !important;}
} }
- type: custom:bubble-card
card_type: button
button_type: state
entity: calendar.holidays
scrolling_effect: false
show_icon: true
show_name: true
show_state: false
tap_action:
action: perform-action
perform_action: script.holiday_calendar_visible_filter
target: {}
button_action:
tap_action:
action: perform-action
perform_action: script.holiday_calendar_visible_filter
target: {}
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['input_text.holiday_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(175, 150, 255, 0.6)'} !important;}
}
icon: mdi:calendar-month
- type: custom:bubble-card
card_type: button
button_type: state
entity: calendar.contact_birthdays
scrolling_effect: false
show_icon: true
icon: mdi:cake
show_name: true
show_state: false
tap_action:
action: perform-action
perform_action: script.contact_calendar_visible_filter
target: {}
button_action:
tap_action:
action: perform-action
perform_action: script.contact_calendar_visible_filter
target: {}
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['input_text.contact_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(250, 230, 30, 0.6)'} !important;}
}
card_layout: large
force_icon: false
name: Birthdays
- type: custom:bubble-card - type: custom:bubble-card
card_type: button card_type: button
button_type: name button_type: name
@@ -144,6 +220,13 @@ views:
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
[data-entity="calendar.contact_birthdays"] {
color: red !important;
}
grid_options:
columns: full
- type: vertical-stack
cards:
- type: custom:bubble-card - type: custom:bubble-card
card_type: select card_type: select
entity: input_select.calendar_view entity: input_select.calendar_view
@@ -153,47 +236,63 @@ views:
show_last_changed: false show_last_changed: false
show_attribute: false show_attribute: false
grid_options: grid_options:
columns: full columns: 9
rows: 1
- type: custom:config-template-card - type: custom:config-template-card
entities: entities:
- input_text.brian_calendar_filter - input_text.brian_calendar_filter
- input_text.kate_calendar_filter
- input_text.dog_calendar_filter - input_text.dog_calendar_filter
- input_text.holiday_calendar_filter
- input_text.contact_calendar_filter
- inpup_select.calendar_view - inpup_select.calendar_view
variables: variables:
PERSONCAL: states['input_text.brian_calendar_filter']?.state PERSONCAL: states['input_text.brian_calendar_filter']?.state
PERSON2CAL: states['input_text.kate_calendar_filter']?.state
DOGCAL: states['input_text.dog_calendar_filter']?.state DOGCAL: states['input_text.dog_calendar_filter']?.state
HOLCAL: states['input_text.holiday_calendar_filter']?.state
BIRCAL: states['input_text.contact_calendar_filter']?.state
VIEW: states['input_select.calendar_view']?.state VIEW: states['input_select.calendar_view']?.state
DAYS: | DAYS: |
(() => { (() => {
const width = window.innerWidth;
const calendarView = states['input_select.calendar_view']?.state; const calendarView = states['input_select.calendar_view']?.state;
if (width >= 390 && width<= 500) return 1;
if (calendarView === 'Today') return 1; if (calendarView === 'Today') return 1;
if (calendarView === 'Tomorrow') return 2; 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; if (calendarView === 'Bimonth') return 56;
if (calendarView === 'Month') return 31;
// Default fallback to 7 if no condition matches if (calendarView === 'Biweek') return 14;
return 31; if (calendarView === 'Week') return 7;
return 3;
})() })()
#### OPTION TO MAKE 1 MONTH VIEW 31 DAYS ####
card: card:
type: custom:week-planner-card type: custom:week-planner-card
calendars: calendars:
- entity: calendar.personal - entity: calendar.brian
name: brian name: brian
color: rgba(15, 208, 184, 0.3) color: rgba(15, 208, 184, 0.3)
filter: ${ PERSONCAL } filter: ${ PERSONCAL }
- entity: calendar.kate
name: kate
color: rgba(223, 8, 119, 0.35)
filter: ${ PERSON2CAL }
- entity: calendar.dogs - entity: calendar.dogs
name: dogs name: dogs
color: rgba(15, 100, 255, 0.5) color: rgba(15, 100, 255, 0.5)
filter: ${ DOGCAL } filter: ${ DOGCAL }
- entity: calendar.holidays
name: holidays
color: rgba(175, 150, 255, 0.6)
filter: ${ HOLCAL }
- entity: calendar.contact_birthdays
name: Birthdays
color: rgba(250, 240, 30, 0.6)
filter: ${ BIRCAL }
days: ${ DAYS } days: ${ DAYS }
startingDay: today
showNavigation: true
startingDayOffset: 0 startingDayOffset: 0
startingDay: month
hideWeekend: false hideWeekend: false
noCardBackground: false noCardBackground: false
compact: false compact: false
@@ -229,10 +328,8 @@ views:
card_mod: card_mod:
style: | style: |
ha-card { ha-card {
#font-family: 'Ovo';
.container .navigation .data-year { .container .navigation .data-year {
position: static; position: static;
right: 60px;
} }
.event.past { .event.past {
opacity: .2; opacity: .2;
@@ -254,6 +351,16 @@ views:
overflow: hidden !important; overflow: hidden !important;
font-size: 1.1em !important; font-size: 1.1em !important;
} }
.event.fullday {
background: none !important; /* or transparent */
border: 2px solid var(--border-color); /* Use your border color variable */
}
.fullday .inner {
padding: 0.25rem !important;
}
.fullday .inner .time {
display: none !important;
}
.none { .none {
background-color: transparent !important; background-color: transparent !important;
} }
@@ -263,9 +370,10 @@ views:
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
} }
#.today { .today {
# border: solid 2px #000000 !important; border: solid 2px rgba(0,0,0,0) !important;
#} border-radius: 5px;
}
.day .date .text { .day .date .text {
font-size: 1em !important; font-size: 1em !important;
font-weight: bold !important; font-weight: bold !important;
@@ -275,9 +383,9 @@ views:
font-size: 3em !important; font-size: 3em !important;
} }
.day { .day {
border-radius: 5px;
--background-color: red; --background-color: red;
border: solid 1px whitesmoke; border: solid 1px whitesmoke;
border-radius: 5px;
display: flex !important; display: flex !important;
flex-direction: column !important; flex-direction: column !important;
justify-content: flex-start !important; justify-content: flex-start !important;
@@ -303,32 +411,21 @@ views:
.container .legend { .container .legend {
grid-column: 1 / -1 !important; /* span full width */ grid-column: 1 / -1 !important; /* span full width */
grid-row: 1 !important; grid-row: 1 !important;
justify-content: center !important; justify-content: left !important;
} }
.navigation { .navigation {
display: flex !important; display: flex !important;
flex-direction: row !important; flex-direction: row !important;
align-items: center !important; align-items: left !important;
margin-bottom: 0px !important; margin-bottom: 0px !important;
text-align: center !important; text-align: left !important;
} }
.navigation .month { .navigation .month {
color: transparent !important; /* hide original text */ color: transparent !important; /* hide original text */
position: relative !important; position: relative !important;
white-space: nowrap !important; white-space: nowrap !important;
align-items: center !important;
}
.navigation .month::after {
content: "November 🦃" !important; /* new text */
color: #000000 !important; /* your desired color */
position: absolute !important;
white-space: nowrap !important;
left: 0;
top: 0;
padding-right: 4px;
} }
/* Reorder days so Sunday is first column */ /* Reorder days so Sunday is first column */
@@ -343,6 +440,7 @@ views:
.week.past-week { .week.past-week {
display: none !important; display: none !important;
} }
}
grid_options: grid_options:
columns: full columns: full
- type: vertical-stack - type: vertical-stack
@@ -362,12 +460,17 @@ views:
${hass.states['input_select.calendar_select'].state == ${hass.states['input_select.calendar_select'].state ==
'brian' ? 'rgba(15, 208, 184, 0.3)' 'brian' ? 'rgba(15, 208, 184, 0.3)'
: hass.states['input_select.calendar_select'].state == : hass.states['input_select.calendar_select'].state ==
'kate' ? 'rgba(223, 8, 119, 0.35)'
: hass.states['input_select.calendar_select'].state ==
'dogs' ? 'rgba(15, 100, 255, 0.5)' 'dogs' ? 'rgba(15, 100, 255, 0.5)'
: hass.states['input_select.calendar_select'].state == : hass.states['input_select.calendar_select'].state ==
'Birthdays' ? '#000000' 'Birthdays' ? 'light-grey'
: 'red'} !important; : 'red'} !important;
} }
modules: [] modules: []
close_action:
action: navigate
navigation_path: /our-calendar
- type: vertical-stack - type: vertical-stack
cards: cards:
- type: entities - type: entities
@@ -388,10 +491,10 @@ views:
card: card:
type: entities type: entities
entities: entities:
- entity: input_datetime.calendar_event_start - entity: input_datetime.calendar_timed_event_start
name: Start Time name: Start Date & Time
- entity: input_datetime.calendar_event_end - entity: input_datetime.calendar_timed_event_end
name: End Time name: End Date & Time
- type: conditional - type: conditional
conditions: conditions:
- entity: input_boolean.calendar_all_day_event - entity: input_boolean.calendar_all_day_event
@@ -407,13 +510,15 @@ views:
name: Add Event to Calendar name: Add Event to Calendar
tap_action: tap_action:
action: call-service action: call-service
service: script.add_calendar_event service: script.add_caldav_calendar_event
styles: styles:
card: card:
- background-color: | - background-color: |
[[[ [[[
if (states['input_select.calendar_select'].state == 'brian') if (states['input_select.calendar_select'].state == 'brian')
return "rgba(15, 208, 184, 0.3)"; return "rgba(15, 208, 184, 0.3)";
if (states['input_select.calendar_select'].state == 'kate')
return "rgba(223, 8, 119, 0.35)";
if (states['input_select.calendar_select'].state == 'dogs') if (states['input_select.calendar_select'].state == 'dogs')
return "rgba(15, 100, 255, 0.5)"; return "rgba(15, 100, 255, 0.5)";
if (states['input_select.calendar_select'].state == 'Birthdays') if (states['input_select.calendar_select'].state == 'Birthdays')

4
dashboard.yaml
View File

@@ -293,6 +293,7 @@ views:
filter: ${ BIRCAL } filter: ${ BIRCAL }
days: ${ DAYS } days: ${ DAYS }
startingDay: sunday startingDay: sunday
showNavigation: false
startingDayOffset: 0 startingDayOffset: 0
hideWeekend: false hideWeekend: false
noCardBackground: false noCardBackground: false
@@ -323,6 +324,9 @@ views:
yesterday: '' yesterday: ''
today: '' today: ''
tomorrow: '' tomorrow: ''
overmorrow: ''
fullDay: ''
noEvents: ''
card_mod: card_mod:
style: | style: |
ha-card { ha-card {