trying to get a us calendar style to work
This commit is contained in:
365
config-2.yaml
365
config-2.yaml
@@ -1,4 +1,7 @@
|
||||
# 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:
|
||||
- title: Home
|
||||
sections:
|
||||
@@ -53,97 +56,177 @@ views:
|
||||
column_span: 4
|
||||
- type: grid
|
||||
cards:
|
||||
- type: horizontal-stack
|
||||
- type: vertical-stack
|
||||
cards:
|
||||
- type: custom:bubble-card
|
||||
card_type: button
|
||||
button_type: state
|
||||
entity: person.brian
|
||||
scrolling_effect: false
|
||||
show_icon: true
|
||||
show_name: true
|
||||
show_state: false
|
||||
tap_action:
|
||||
action: perform-action
|
||||
perform_action: script.brian_calendar_visible_filter
|
||||
target: {}
|
||||
button_action:
|
||||
tap_action:
|
||||
action: perform-action
|
||||
perform_action: script.brian_calendar_visible_filter
|
||||
target: {}
|
||||
styles: |
|
||||
.bubble-button-background {
|
||||
opacity: 1 !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.brian
|
||||
name: Dogs
|
||||
scrolling_effect: false
|
||||
show_icon: true
|
||||
show_name: true
|
||||
show_state: false
|
||||
tap_action:
|
||||
action: perform-action
|
||||
perform_action: script.dog_calendar_visible_filter
|
||||
target: {}
|
||||
button_action:
|
||||
tap_action:
|
||||
action: perform-action
|
||||
perform_action: script.dog_calendar_visible_filter
|
||||
target: {}
|
||||
styles: |
|
||||
.bubble-button-background {
|
||||
opacity: 1 !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: 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;
|
||||
- type: horizontal-stack
|
||||
cards:
|
||||
- type: custom:bubble-card
|
||||
card_type: button
|
||||
button_type: state
|
||||
entity: person.brian
|
||||
scrolling_effect: false
|
||||
show_icon: true
|
||||
show_name: true
|
||||
show_state: false
|
||||
tap_action:
|
||||
action: perform-action
|
||||
perform_action: script.brian_calendar_visible_filter
|
||||
target: {}
|
||||
button_action:
|
||||
tap_action:
|
||||
action: perform-action
|
||||
perform_action: script.brian_calendar_visible_filter
|
||||
target: {}
|
||||
styles: |
|
||||
.bubble-button-background {
|
||||
opacity: 1 !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
|
||||
card_type: button
|
||||
button_type: state
|
||||
entity: person.brian
|
||||
name: Dogs
|
||||
scrolling_effect: false
|
||||
show_icon: true
|
||||
show_name: true
|
||||
show_state: false
|
||||
tap_action:
|
||||
action: perform-action
|
||||
perform_action: script.dog_calendar_visible_filter
|
||||
target: {}
|
||||
button_action:
|
||||
tap_action:
|
||||
action: perform-action
|
||||
perform_action: script.dog_calendar_visible_filter
|
||||
target: {}
|
||||
styles: |
|
||||
.bubble-button-background {
|
||||
opacity: 1 !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
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
[data-entity="calendar.contact_birthdays"] {
|
||||
color: red !important;
|
||||
}
|
||||
grid_options:
|
||||
columns: full
|
||||
- type: vertical-stack
|
||||
cards:
|
||||
- type: custom:bubble-card
|
||||
card_type: select
|
||||
entity: input_select.calendar_view
|
||||
@@ -153,47 +236,63 @@ views:
|
||||
show_last_changed: false
|
||||
show_attribute: false
|
||||
grid_options:
|
||||
columns: full
|
||||
columns: 9
|
||||
rows: 1
|
||||
- type: custom:config-template-card
|
||||
entities:
|
||||
- input_text.brian_calendar_filter
|
||||
- input_text.kate_calendar_filter
|
||||
- input_text.dog_calendar_filter
|
||||
- input_text.holiday_calendar_filter
|
||||
- input_text.contact_calendar_filter
|
||||
- inpup_select.calendar_view
|
||||
variables:
|
||||
PERSONCAL: states['input_text.brian_calendar_filter']?.state
|
||||
PERSON2CAL: states['input_text.kate_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
|
||||
DAYS: |
|
||||
(() => {
|
||||
const width = window.innerWidth;
|
||||
const calendarView = states['input_select.calendar_view']?.state;
|
||||
|
||||
if (width >= 390 && width<= 500) return 1;
|
||||
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 31;
|
||||
if (calendarView === 'Month') return 31;
|
||||
if (calendarView === 'Biweek') return 14;
|
||||
if (calendarView === 'Week') return 7;
|
||||
return 3;
|
||||
})()
|
||||
#### OPTION TO MAKE 1 MONTH VIEW 31 DAYS ####
|
||||
card:
|
||||
type: custom:week-planner-card
|
||||
calendars:
|
||||
- entity: calendar.personal
|
||||
- entity: calendar.brian
|
||||
name: brian
|
||||
color: rgba(15, 208, 184, 0.3)
|
||||
filter: ${ PERSONCAL }
|
||||
- entity: calendar.kate
|
||||
name: kate
|
||||
color: rgba(223, 8, 119, 0.35)
|
||||
filter: ${ PERSON2CAL }
|
||||
- entity: calendar.dogs
|
||||
name: dogs
|
||||
color: rgba(15, 100, 255, 0.5)
|
||||
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 }
|
||||
startingDay: today
|
||||
showNavigation: true
|
||||
startingDayOffset: 0
|
||||
startingDay: month
|
||||
hideWeekend: false
|
||||
noCardBackground: false
|
||||
compact: false
|
||||
@@ -229,18 +328,16 @@ views:
|
||||
card_mod:
|
||||
style: |
|
||||
ha-card {
|
||||
#font-family: 'Ovo';
|
||||
.container .navigation .data-year {
|
||||
position: static;
|
||||
right: 60px;
|
||||
}
|
||||
.event.past {
|
||||
opacity: .2;
|
||||
background-color: gray !important;
|
||||
}
|
||||
.container .data-week {
|
||||
display: none !important;
|
||||
}
|
||||
display: none !important;
|
||||
}
|
||||
.time {
|
||||
color: #333333 !important;
|
||||
font-size: 0.8em !important;
|
||||
@@ -254,6 +351,16 @@ views:
|
||||
overflow: hidden !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 {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
@@ -263,9 +370,10 @@ views:
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
#.today {
|
||||
# border: solid 2px #000000 !important;
|
||||
#}
|
||||
.today {
|
||||
border: solid 2px rgba(0,0,0,0) !important;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.day .date .text {
|
||||
font-size: 1em !important;
|
||||
font-weight: bold !important;
|
||||
@@ -275,9 +383,9 @@ views:
|
||||
font-size: 3em !important;
|
||||
}
|
||||
.day {
|
||||
border-radius: 5px;
|
||||
--background-color: red;
|
||||
border: solid 1px whitesmoke;
|
||||
border-radius: 5px;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: flex-start !important;
|
||||
@@ -303,32 +411,21 @@ views:
|
||||
.container .legend {
|
||||
grid-column: 1 / -1 !important; /* span full width */
|
||||
grid-row: 1 !important;
|
||||
justify-content: center !important;
|
||||
justify-content: left !important;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
align-items: center !important;
|
||||
align-items: left !important;
|
||||
margin-bottom: 0px !important;
|
||||
text-align: center !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.navigation .month {
|
||||
color: transparent !important; /* hide original text */
|
||||
position: relative !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 */
|
||||
@@ -343,6 +440,7 @@ views:
|
||||
.week.past-week {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
grid_options:
|
||||
columns: full
|
||||
- type: vertical-stack
|
||||
@@ -362,12 +460,17 @@ views:
|
||||
${hass.states['input_select.calendar_select'].state ==
|
||||
'brian' ? 'rgba(15, 208, 184, 0.3)'
|
||||
: 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)'
|
||||
: hass.states['input_select.calendar_select'].state ==
|
||||
'Birthdays' ? '#000000'
|
||||
'Birthdays' ? 'light-grey'
|
||||
: 'red'} !important;
|
||||
}
|
||||
modules: []
|
||||
close_action:
|
||||
action: navigate
|
||||
navigation_path: /our-calendar
|
||||
- type: vertical-stack
|
||||
cards:
|
||||
- type: entities
|
||||
@@ -388,10 +491,10 @@ views:
|
||||
card:
|
||||
type: entities
|
||||
entities:
|
||||
- entity: input_datetime.calendar_event_start
|
||||
name: Start Time
|
||||
- entity: input_datetime.calendar_event_end
|
||||
name: End Time
|
||||
- entity: input_datetime.calendar_timed_event_start
|
||||
name: Start Date & Time
|
||||
- entity: input_datetime.calendar_timed_event_end
|
||||
name: End Date & Time
|
||||
- type: conditional
|
||||
conditions:
|
||||
- entity: input_boolean.calendar_all_day_event
|
||||
@@ -407,13 +510,15 @@ views:
|
||||
name: Add Event to Calendar
|
||||
tap_action:
|
||||
action: call-service
|
||||
service: script.add_calendar_event
|
||||
service: script.add_caldav_calendar_event
|
||||
styles:
|
||||
card:
|
||||
- background-color: |
|
||||
[[[
|
||||
if (states['input_select.calendar_select'].state == 'brian')
|
||||
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')
|
||||
return "rgba(15, 100, 255, 0.5)";
|
||||
if (states['input_select.calendar_select'].state == 'Birthdays')
|
||||
|
||||
Reference in New Issue
Block a user