browser_mod added to integrations and styled full day events

README.md

@@ -54,3 +54,8 @@ Datetime (Time)
 
 Toggle:
 - “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

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:

add-caldav-event/README.md

@@ -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`

dashboard.yaml

@@ -54,6 +54,8 @@ views:
               columns: full
         column_span: 4
       - type: grid
+        cards:
+          - type: vertical-stack
             cards:
               - type: horizontal-stack
                 cards:
@@ -146,6 +148,33 @@ views:
                         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
@@ -190,6 +219,13 @@ views:
                         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