From 09a3b6ac98f7588fd4eb485a83659d6bcdd67f36 Mon Sep 17 00:00:00 2001 From: Brian Nelson Date: Mon, 1 Dec 2025 13:12:27 -0500 Subject: [PATCH] browser_mod added to integrations and styled full day events --- README.md | 7 +- ...caldav-event.yaml => add-caldav-event.yaml | 2 + add-caldav-event/README.md | 4 - dashboard.yaml | 320 ++++++++++-------- 4 files changed, 193 insertions(+), 140 deletions(-) rename add-caldav-event/add-caldav-event.yaml => add-caldav-event.yaml (97%) delete mode 100644 add-caldav-event/README.md diff --git a/README.md b/README.md index 32cddb4..0a8921d 100644 --- a/README.md +++ b/README.md @@ -53,4 +53,9 @@ Datetime (Time) - “calendar_event_end” Toggle: -- “calendar_all_day_event” \ No newline at end of file +- “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 \ No newline at end of file diff --git a/add-caldav-event/add-caldav-event.yaml b/add-caldav-event.yaml similarity index 97% rename from add-caldav-event/add-caldav-event.yaml rename to add-caldav-event.yaml index fc5fb4d..8e56ca2 100644 --- a/add-caldav-event/add-caldav-event.yaml +++ b/add-caldav-event.yaml @@ -1,3 +1,5 @@ +## add a new script to Settings > Automations & scenes > Scripts + alias: Add CalDAV Calendar Event description: Create an event based on All Day or Timed selection sequence: diff --git a/add-caldav-event/README.md b/add-caldav-event/README.md deleted file mode 100644 index e0c669e..0000000 --- a/add-caldav-event/README.md +++ /dev/null @@ -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` diff --git a/dashboard.yaml b/dashboard.yaml index 5fc744e..4b9214f 100644 --- a/dashboard.yaml +++ b/dashboard.yaml @@ -55,141 +55,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.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;} - } - - 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 @@ -199,19 +235,22 @@ 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: | (() => { @@ -248,6 +287,10 @@ views: 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: sunday startingDayOffset: 0 @@ -299,6 +342,10 @@ 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; } @@ -328,7 +375,7 @@ views: --background-color: red; border: solid 1px whitesmoke; padding: 0.2%; - width: 12% !important; + width: 13% !important; } } grid_options: @@ -358,6 +405,9 @@ views: : 'red'} !important; } modules: [] + close_action: + action: navigate + navigation_path: /our-calendar - type: vertical-stack cards: - type: entities