browser_mod added to integrations and styled full day events
This commit is contained in:
@@ -53,4 +53,9 @@ Datetime (Time)
|
|||||||
- “calendar_event_end”
|
- “calendar_event_end”
|
||||||
|
|
||||||
Toggle:
|
Toggle:
|
||||||
- “calendar_all_day_event”
|
- “calendar_all_day_event”
|
||||||
|
|
||||||
|
## HACS
|
||||||
|
### Browser Mod
|
||||||
|
>[!IMPORTANT]
|
||||||
|
> It's important to add the browser mod integration to your HA after you add it to HACS. Then restart your HA
|
||||||
@@ -1,3 +1,5 @@
|
|||||||
|
## add a new script to Settings > Automations & scenes > Scripts
|
||||||
|
|
||||||
alias: Add CalDAV Calendar Event
|
alias: Add CalDAV Calendar Event
|
||||||
description: Create an event based on All Day or Timed selection
|
description: Create an event based on All Day or Timed selection
|
||||||
sequence:
|
sequence:
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
# Script for CalDAV events
|
|
||||||
This is what allows you to utilize a self-hosted calendar (in my instance nextcloud).
|
|
||||||
|
|
||||||
Add this script to the scripts settings of your HA you can find scripts here `Settings > Automations & scenes > Scripts`
|
|
||||||
320
dashboard.yaml
320
dashboard.yaml
@@ -55,141 +55,177 @@ views:
|
|||||||
column_span: 4
|
column_span: 4
|
||||||
- type: grid
|
- type: grid
|
||||||
cards:
|
cards:
|
||||||
- type: horizontal-stack
|
- type: vertical-stack
|
||||||
cards:
|
cards:
|
||||||
- type: custom:bubble-card
|
- type: horizontal-stack
|
||||||
card_type: button
|
cards:
|
||||||
button_type: state
|
- type: custom:bubble-card
|
||||||
entity: person.brian
|
card_type: button
|
||||||
scrolling_effect: false
|
button_type: state
|
||||||
show_icon: true
|
entity: person.brian
|
||||||
show_name: true
|
scrolling_effect: false
|
||||||
show_state: false
|
show_icon: true
|
||||||
tap_action:
|
show_name: true
|
||||||
action: perform-action
|
show_state: false
|
||||||
perform_action: script.brian_calendar_visible_filter
|
tap_action:
|
||||||
target: {}
|
action: perform-action
|
||||||
button_action:
|
perform_action: script.brian_calendar_visible_filter
|
||||||
tap_action:
|
target: {}
|
||||||
action: perform-action
|
button_action:
|
||||||
perform_action: script.brian_calendar_visible_filter
|
tap_action:
|
||||||
target: {}
|
action: perform-action
|
||||||
styles: |
|
perform_action: script.brian_calendar_visible_filter
|
||||||
.bubble-button-background {
|
target: {}
|
||||||
opacity: 1 !important;
|
styles: |
|
||||||
background-color: ${hass.states['input_text.brian_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(15, 208, 184, 0.3)'} !important;}
|
.bubble-button-background {
|
||||||
}
|
opacity: 1 !important;
|
||||||
- type: custom:bubble-card
|
background-color: ${hass.states['input_text.brian_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(15, 208, 184, 0.3)'} !important;}
|
||||||
card_type: button
|
}
|
||||||
button_type: state
|
- type: custom:bubble-card
|
||||||
entity: person.kate
|
card_type: button
|
||||||
scrolling_effect: false
|
button_type: state
|
||||||
show_icon: true
|
entity: person.kate
|
||||||
show_name: true
|
scrolling_effect: false
|
||||||
show_state: false
|
show_icon: true
|
||||||
tap_action:
|
show_name: true
|
||||||
action: perform-action
|
show_state: false
|
||||||
perform_action: script.kate_calendar_visible_filter_duplicate
|
tap_action:
|
||||||
target: {}
|
action: perform-action
|
||||||
button_action:
|
perform_action: script.kate_calendar_visible_filter_duplicate
|
||||||
tap_action:
|
target: {}
|
||||||
action: perform-action
|
button_action:
|
||||||
perform_action: script.kate_calendar_visible_filter_duplicate
|
tap_action:
|
||||||
target: {}
|
action: perform-action
|
||||||
styles: |
|
perform_action: script.kate_calendar_visible_filter_duplicate
|
||||||
.bubble-button-background {
|
target: {}
|
||||||
opacity: 1 !important;
|
styles: |
|
||||||
background-color: ${hass.states['input_text.kate_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(240, 8, 130, 0.5)'} !important;}
|
.bubble-button-background {
|
||||||
}
|
opacity: 1 !important;
|
||||||
- type: custom:bubble-card
|
background-color: ${hass.states['input_text.kate_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(240, 8, 130, 0.5)'} !important;}
|
||||||
card_type: button
|
}
|
||||||
button_type: state
|
- type: custom:bubble-card
|
||||||
entity: person.brian
|
card_type: button
|
||||||
name: Dogs
|
button_type: state
|
||||||
scrolling_effect: false
|
entity: person.brian
|
||||||
show_icon: true
|
name: Dogs
|
||||||
show_name: true
|
scrolling_effect: false
|
||||||
show_state: false
|
show_icon: true
|
||||||
tap_action:
|
show_name: true
|
||||||
action: perform-action
|
show_state: false
|
||||||
perform_action: script.dog_calendar_visible_filter
|
tap_action:
|
||||||
target: {}
|
action: perform-action
|
||||||
button_action:
|
perform_action: script.dog_calendar_visible_filter
|
||||||
tap_action:
|
target: {}
|
||||||
action: perform-action
|
button_action:
|
||||||
perform_action: script.dog_calendar_visible_filter
|
tap_action:
|
||||||
target: {}
|
action: perform-action
|
||||||
styles: |
|
perform_action: script.dog_calendar_visible_filter
|
||||||
.bubble-button-background {
|
target: {}
|
||||||
opacity: 1 !important;
|
styles: |
|
||||||
background-color: ${hass.states['input_text.dog_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(15, 100, 255, 0.5)'} !important;}
|
.bubble-button-background {
|
||||||
}
|
opacity: 1 !important;
|
||||||
- type: custom:bubble-card
|
background-color: ${hass.states['input_text.dog_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(15, 100, 255, 0.5)'} !important;}
|
||||||
card_type: button
|
}
|
||||||
button_type: state
|
- type: custom:bubble-card
|
||||||
entity: calendar.holidays
|
card_type: button
|
||||||
scrolling_effect: false
|
button_type: state
|
||||||
show_icon: true
|
entity: calendar.holidays
|
||||||
show_name: true
|
scrolling_effect: false
|
||||||
show_state: false
|
show_icon: true
|
||||||
tap_action:
|
show_name: true
|
||||||
action: perform-action
|
show_state: false
|
||||||
perform_action: script.holiday_calendar_visible_filter
|
tap_action:
|
||||||
target: {}
|
action: perform-action
|
||||||
button_action:
|
perform_action: script.holiday_calendar_visible_filter
|
||||||
tap_action:
|
target: {}
|
||||||
action: perform-action
|
button_action:
|
||||||
perform_action: script.holiday_calendar_visible_filter
|
tap_action:
|
||||||
target: {}
|
action: perform-action
|
||||||
styles: |
|
perform_action: script.holiday_calendar_visible_filter
|
||||||
.bubble-button-background {
|
target: {}
|
||||||
opacity: 1 !important;
|
styles: |
|
||||||
background-color: ${hass.states['input_text.holiday_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(175, 150, 255, 0.6)'} !important;}
|
.bubble-button-background {
|
||||||
}
|
opacity: 1 !important;
|
||||||
- type: custom:bubble-card
|
background-color: ${hass.states['input_text.holiday_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(175, 150, 255, 0.6)'} !important;}
|
||||||
card_type: button
|
}
|
||||||
button_type: name
|
icon: mdi:calendar-month
|
||||||
card_layout: large
|
- type: custom:bubble-card
|
||||||
name: Add Event
|
card_type: button
|
||||||
icon: mdi:calendar-plus
|
button_type: state
|
||||||
tap_action:
|
entity: calendar.contact_birthdays
|
||||||
action: navigate
|
scrolling_effect: false
|
||||||
navigation_path: '#addcalendarevent'
|
show_icon: true
|
||||||
button_action:
|
icon: mdi:cake
|
||||||
tap_action:
|
show_name: true
|
||||||
action: navigate
|
show_state: false
|
||||||
navigation_path: '#addcalendarevent'
|
tap_action:
|
||||||
styles: |
|
action: perform-action
|
||||||
* {
|
perform_action: script.contact_calendar_visible_filter
|
||||||
font-size: 1.05em !important;
|
target: {}
|
||||||
}
|
button_action:
|
||||||
ha-card {
|
tap_action:
|
||||||
--bubble-main-background-color: #393745 !important;
|
action: perform-action
|
||||||
width: 300px;
|
perform_action: script.contact_calendar_visible_filter
|
||||||
}
|
target: {}
|
||||||
.bubble-icon {
|
styles: |
|
||||||
--mdc-icon-size: 30px !important;
|
.bubble-button-background {
|
||||||
color: snow !important;
|
opacity: 1 !important;
|
||||||
opacity: 1;
|
background-color: ${hass.states['input_text.contact_calendar_filter'].state === '.*' ? 'light-grey' : 'rgba(250, 230, 30, 0.6)'} !important;}
|
||||||
}
|
}
|
||||||
.bubble-icon-container {
|
card_layout: large
|
||||||
background: #393745 !important;
|
force_icon: false
|
||||||
display: flex;
|
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 {
|
.bubble-name {
|
||||||
color: snow !important;
|
color: snow !important;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
margin: 0 40px 0 0;
|
margin: 0 40px 0 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
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
|
||||||
@@ -199,19 +235,22 @@ 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.kate_calendar_filter
|
||||||
- input_text.dog_calendar_filter
|
- input_text.dog_calendar_filter
|
||||||
- input_text.holiday_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
|
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
|
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: |
|
||||||
(() => {
|
(() => {
|
||||||
@@ -248,6 +287,10 @@ views:
|
|||||||
name: holidays
|
name: holidays
|
||||||
color: rgba(175, 150, 255, 0.6)
|
color: rgba(175, 150, 255, 0.6)
|
||||||
filter: ${ HOLCAL }
|
filter: ${ HOLCAL }
|
||||||
|
- entity: calendar.contact_birthdays
|
||||||
|
name: Birthdays
|
||||||
|
color: rgba(250, 240, 30, 0.6)
|
||||||
|
filter: ${ BIRCAL }
|
||||||
days: ${ DAYS }
|
days: ${ DAYS }
|
||||||
startingDay: sunday
|
startingDay: sunday
|
||||||
startingDayOffset: 0
|
startingDayOffset: 0
|
||||||
@@ -299,6 +342,10 @@ 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 {
|
.fullday .inner {
|
||||||
padding: 0.25rem !important;
|
padding: 0.25rem !important;
|
||||||
}
|
}
|
||||||
@@ -328,7 +375,7 @@ views:
|
|||||||
--background-color: red;
|
--background-color: red;
|
||||||
border: solid 1px whitesmoke;
|
border: solid 1px whitesmoke;
|
||||||
padding: 0.2%;
|
padding: 0.2%;
|
||||||
width: 12% !important;
|
width: 13% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
grid_options:
|
grid_options:
|
||||||
@@ -358,6 +405,9 @@ views:
|
|||||||
: '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
|
||||||
|
|||||||
Reference in New Issue
Block a user