Switch calendar cards on main dashboard

From Atomic Calendar Revive to Calendar Card Pro

main_dashboard.yaml

@@ -342,48 +342,52 @@ views:
             heading: Family Calendar
             heading_style: title
             icon: mdi:calendar
-          - type: custom:atomic-calendar-revive
-            enableModeChange: true
-            firstDayOfWeek: 1
-            maxDaysToShow: 7
-            refreshInterval: 15
-            entities:
-              - calendar.family
-              - calendar.kallen_school_days
-              - calendar.tony_s_twitch_schedule
+          - entities:
+              - entity: calendar.family
+                label: mdi:human-male-female-child
+                color: green
+                accent_color: green
+              - entity: calendar.kallen_school_days
+                label: mdi:school
+                color: orange
+                accent_color: orange
+              - entity: calendar.tony_s_twitch_schedule
+                label: mdi:twitch
+                color: purple
+                accent_color: purple
               - calendar.kallen_early_release
               - calendar.tm24fan8_gmail_com
               - calendar.irishpirate1988_gmail_com
               - calendar.vacation
-            showLoader: true
-            hideFinishedEvents: true
-            showRelativeTime: false
-            showDate: true
-            sortByStartTime: true
-            showLocation: true
-            hideDuplicates: false
-            noEventText: Nothing scheduled for today!
-            showCurrentEventLine: false
-            showMonth: false
-            showProgressBar: true
-            showWeekDay: true
-            disableEventLink: false
-            showNoEventsForToday: true
-            showEventIcon: false
-            showFullDayProgress: false
-            showLastCalendarWeek: false
-            disableCalEventLink: false
-            disableCalLocationLink: false
-            showTimeRemaining: true
-            showAllDayEvents: true
-            hoursOnSameLine: false
-            showMultiDayEventParts: false
-            showMultiDay: false
-            showDescription: false
-            disableLocationLink: false
-            showCalendarName: false
-            showAllDayHours: true
-            disableCalLink: false
+            days_to_show: 5
+            week_separator_width: 1px
+            month_separator_width: 1px
+            today_indicator: dot
+            weekend_weekday_color: cyan
+            weekend_day_color: cyan
+            weekend_month_color: cyan
+            today_weekday_color: ''
+            today_day_color: ''
+            today_month_color: ''
+            show_countdown: true
+            show_progress_bar: true
+            remove_location_country: true
+            weather:
+              position: date
+              date:
+                show_conditions: true
+                show_high_temp: true
+                show_low_temp: false
+                icon_size: 14px
+                font_size: 12px
+                color: var(--primary-text-color)
+              event:
+                show_conditions: true
+                show_temp: true
+                icon_size: 14px
+                font_size: 12px
+                color: var(--primary-text-color)
+            type: custom:calendar-card-pro
       - type: grid
         cards:
           - type: heading

mobile_dashboard.yaml

@@ -34,20 +34,6 @@ streamline_templates:
           background-color: ${state === 'on' ? 'var(--error-color)' : 'var(--bubble-main-background-color)'} !important;
           transition: background-color 1s !important;
         }
-        .bubble-icon-container {
-          background: ${state === 'on' ? 'var(--error-color)' : 'var(--card-background-color)'} !important;
-        }
-        .bubble-icon-container::after {
-          opacity: ${state === 'on' ? 0.3 : 0} !important;
-          transition: all 1s !important;
-        }
-        .bubble-icon {
-          display: flex !important;
-          opacity: 0.5 !important;
-        }
-        .is-on .bubble-icon {
-          opacity: 1 !important;
-        }
       show_state: false
       columns: '[[columns]]'
   main_button_name:
@@ -123,24 +109,6 @@ streamline_templates:
             } !important;
             transition: background-color 1s !important;
           }
-          .bubble-icon-container {
-            background: ${
-              occupancy === 'on' ? 'var(--accent-color)' : 'var(--card-background-color)'
-            } !important;
-          }
-          .bubble-icon-container::after {
-            opacity: ${
-              occupancy === 'on' ? 0.3 : 0
-            } !important;
-            transition: all 1s !important;
-          }
-          .bubble-icon {
-            display: flex !important;
-            opacity: 0.5 !important;
-          }
-          .is-on .bubble-icon {
-            opacity: 1 !important;
-          }
           .bubble-sub-button {
             background: transparent
           }
@@ -223,20 +191,6 @@ streamline_templates:
           background-color: ${state === 'on' ? 'var(--error-color)' : 'var(--background-color-2)'} !important;
           transition: background-color 1s !important;
         }
-        .bubble-icon-container {
-          background: ${state === 'on' ? 'var(--error-color)' : 'var(--card-background-color)'} !important;
-        }
-        .bubble-icon-container::after {
-          opacity: ${state === 'on' ? 0.3 : 0} !important;
-          transition: all 1s !important;
-        }
-        .bubble-icon {
-          display: flex !important;
-          opacity: 0.5 !important;
-        }
-        .is-on .bubble-icon {
-          opacity: 1 !important;
-        }
   popup_accent_color_button:
     defaults:
       - name: ''
@@ -263,9 +217,6 @@ streamline_templates:
           opacity: 1 !important;
           background-color: ${state === 'on' ? 'var(--accent-color)' : 'var(--background-color-2)'} !important;
         }
-        .bubble-icon {
-          color: ${state === 'on' ? 'var(--accent-color)' : 'var(--text-color)'} !important;
-        }
   popup_temperature_button:
     defaults:
       - name: ''
@@ -285,13 +236,6 @@ streamline_templates:
           background-color: ${hass.states['[[hot_entity]]'].state === 'on' ? 'var(--error-color)' : 'var(--background-color-2)'} !important;
           transition: background-color 1s !important;
         }
-        .bubble-icon-container {
-          background: ${hass.states['[[hot_entity]]'].state === 'on' ? 'var(--error-color)' : 'var(--card-background-color)'} !important;
-        }
-        .bubble-icon-container::after {
-          opacity: ${hass.states['[[hot_entity]]'].state === 'on' ? 0.3 : 0} !important;
-          transition: all 1s !important;
-        }
   popup_timer_card:
     defaults:
       name: ''
@@ -492,19 +436,6 @@ views:
                 layout: vertical
                 icon_type: entity-picture
                 fill_container: false
-          - type: heading
-            icon: mdi:calendar
-            heading: Calendar
-            heading_style: title
-          - type: custom:bubble-card
-            card_type: calendar
-            modules:
-              - default
-            entities:
-              - entity: calendar.family
-                color: '#608414'
-            show_end: true
-            show_progress: true
           - type: heading
             icon: mdi:cctv
             heading: Cameras
@@ -529,6 +460,32 @@ views:
               - condition: state
                 entity: camera.side_camera
                 state_not: unavailable
+          - type: heading
+            icon: mdi:calendar
+            heading: Calendar
+            heading_style: title
+          - type: custom:bubble-card
+            card_type: calendar
+            modules:
+              - default
+            entities:
+              - entity: calendar.family
+                color: '#608414'
+              - entity: calendar.kallen_school_days
+                color: deep-orange
+              - entity: calendar.tony_s_twitch_schedule
+                color: '#A567EE'
+              - entity: calendar.kallen_early_release
+                color: '#83BC1B'
+              - entity: calendar.tm24fan8_gmail_com
+                color: '#EF2411'
+              - entity: calendar.irishpirate1988_gmail_com
+                color: '#6BFA27'
+              - entity: calendar.vacation
+                color: '#E4DF8D'
+            show_end: true
+            show_progress: true
+            rows: '5'
       - type: grid
         cards:
           - type: heading
@@ -608,38 +565,6 @@ views:
                   !important;
                   transition: background-color 1s !important;
                 }
-                .bubble-icon-container {
-                  background:
-                  {% set feeding_reminders = states('counter.rabbit_feeding_reminder_count') | int %}
-                  {% set cleaning_reminders = states('counter.rabbit_hutch_cleaning_reminder_count') | int %}
-                  {% if feeding_reminders == 0 and cleaning_reminders == 0 %}
-                    var(--card-background-color)
-                  {% elif feeding_reminders < 3 and cleaning_reminders < 3 %}
-                    var(--warning-color)
-                  {% else %}
-                    var(--error-color)
-                  {% endif %}
-                  !important;
-                }
-                .bubble-icon-container::after {
-                  opacity:
-                  {% set feeding_reminders = states('counter.rabbit_feeding_reminder_count') | int %}
-                  {% set cleaning_reminders = states('counter.rabbit_hutch_cleaning_reminder_count') | int %}
-                  {% if feeding_reminders > 0 or cleaning_reminders > 0 %}
-                    0.3
-                  {% else %}
-                    0
-                  {% endif %}
-                  !important;
-                  transition: all 1s !important;
-                }
-                .bubble-icon {
-                  display: flex !important;
-                  opacity: 0.5 !important;
-                }
-                .is-on .bubble-icon {
-                  opacity: 1 !important;
-                }
           - type: custom:streamline-card
             template: main_button_name
             variables:
@@ -755,46 +680,6 @@ views:
                   !important;
                   transition: background-color 1s !important;
                 }
-                .bubble-icon-container {
-                  background:
-                  {% set counters = states.counter
-                    | selectattr('entity_id','contains','tony')
-                    | selectattr('entity_id','contains','meds')
-                    | map(attribute='state')
-                    | max 
-                    | int %}
-                  {% if counters == 0 %}
-                    var(--card-background-color)
-                  {% elif counters < 3 %}
-                    var(--warning-color)
-                  {% else %}
-                    var(--error-color)
-                  {% endif %}
-                  !important;
-                }
-                .bubble-icon-container::after {
-                  opacity:
-                  {% set counters = states.counter
-                    | selectattr('entity_id','contains','tony')
-                    | selectattr('entity_id','contains','meds')
-                    | map(attribute='state')
-                    | max 
-                    | int %}
-                  {% if counters > 0 %}
-                    0.3
-                  {% else %}
-                    0
-                  {% endif %}
-                  !important;
-                  transition: all 1s !important;
-                }
-                .bubble-icon {
-                  display: flex !important;
-                  opacity: 0.5 !important;
-                }
-                .is-on .bubble-icon {
-                  opacity: 1 !important;
-                }
             visibility:
               - condition: user
                 users:
@@ -838,46 +723,6 @@ views:
                   !important;
                   transition: background-color 1s !important;
                 }
-                .bubble-icon-container {
-                  background:
-                  {% set counters = states.counter
-                    | selectattr('entity_id','contains','tina')
-                    | selectattr('entity_id','contains','meds')
-                    | map(attribute='state')
-                    | max 
-                    | int %}
-                  {% if counters == 0 %}
-                    var(--card-background-color)
-                  {% elif counters < 3 %}
-                    var(--warning-color)
-                  {% else %}
-                    var(--error-color)
-                  {% endif %}
-                  !important;
-                }
-                .bubble-icon-container::after {
-                  opacity:
-                  {% set counters = states.counter
-                    | selectattr('entity_id','contains','tina')
-                    | selectattr('entity_id','contains','meds')
-                    | map(attribute='state')
-                    | max 
-                    | int %}
-                  {% if counters > 0 %}
-                    0.3
-                  {% else %}
-                    0
-                  {% endif %}
-                  !important;
-                  transition: all 1s !important;
-                }
-                .bubble-icon {
-                  display: flex !important;
-                  opacity: 0.5 !important;
-                }
-                .is-on .bubble-icon {
-                  opacity: 1 !important;
-                }
             visibility:
               - condition: user
                 users:
@@ -929,46 +774,6 @@ views:
                   !important;
                   transition: background-color 1s !important;
                 }
-                .bubble-icon-container {
-                  background:
-                  {% set counters = states.counter
-                    | selectattr('entity_id','contains','kallen')
-                    | selectattr('entity_id','contains','meds')
-                    | map(attribute='state')
-                    | max 
-                    | int %}
-                  {% if counters == 0 %}
-                    var(--card-background-color)
-                  {% elif counters < 3 %}
-                    var(--warning-color)
-                  {% else %}
-                    var(--error-color)
-                  {% endif %}
-                  !important;
-                }
-                .bubble-icon-container::after {
-                  opacity:
-                  {% set counters = states.counter
-                    | selectattr('entity_id','contains','kallen')
-                    | selectattr('entity_id','contains','meds')
-                    | map(attribute='state')
-                    | max 
-                    | int %}
-                  {% if counters > 0 %}
-                    0.3
-                  {% else %}
-                    0
-                  {% endif %}
-                  !important;
-                  transition: all 1s !important;
-                }
-                .bubble-icon {
-                  display: flex !important;
-                  opacity: 0.5 !important;
-                }
-                .is-on .bubble-icon {
-                  opacity: 1 !important;
-                }
           - type: custom:bubble-card
             card_type: button
             button_type: name
@@ -1064,20 +869,6 @@ views:
                 background-color: ${state === 'on' ? 'var(--accent-color)' : 'var(--bubble-main-background-color)'} !important;
                 transition: background-color 1s !important;
               }
-              .bubble-icon-container {
-                background: ${state === 'on' ? 'var(--accent-color)' : 'var(--card-background-color)'} !important;
-              }
-              .bubble-icon-container::after {
-                opacity: ${state === 'on' ? 0.3 : 0} !important;
-                transition: all 1s !important;
-              }
-              .bubble-icon {
-                display: flex !important;
-                opacity: 0.5 !important;
-              }
-              .is-on .bubble-icon {
-                opacity: 1 !important;
-              }
             tap_action:
               action: navigate
               navigation_path: '#front-porch'
@@ -1300,9 +1091,6 @@ views:
                         opacity: 1 !important;
                         background-color: ${state === 'on' ? 'var(--accent-color)' : 'var(--background-color-2)'} !important;
                       }
-                      .bubble-icon {
-                        color: ${state === 'on' ? 'var(--accent-color)' : 'var(--text-color)'} !important;
-                      }
                     modules:
                       - default
                     entity: switch.front_porch_storm_mode
@@ -1338,9 +1126,6 @@ views:
                         opacity: 1 !important;
                         background-color: ${state === 'on' ? 'var(--accent-color)' : 'var(--background-color-2)'} !important;
                       }
-                      .bubble-icon {
-                        color: ${state === 'on' ? 'var(--accent-color)' : 'var(--text-color)'} !important;
-                      }
                     modules:
                       - default
                   - type: custom:bubble-card
@@ -1362,9 +1147,6 @@ views:
                         opacity: 1 !important;
                         background-color: ${state === 'on' ? 'var(--success-color)' : 'var(--background-color-2)'} !important;
                       }
-                      .bubble-icon {
-                        color: ${state === 'on' ? 'var(--success-color)' : 'var(--text-color)'} !important;
-                      }
               - type: custom:streamline-card
                 template: popup_timer_card
                 variables:
@@ -2662,9 +2444,6 @@ views:
                               opacity: 1 !important;
                               background-color: ${state === 'on' ? 'var(--accent-color)' : 'var(--background-color-2)'} !important;
                             }
-                            .bubble-icon {
-                              color: ${state === 'on' ? 'var(--accent-color)' : 'var(--text-color)'} !important;
-                            }
                         - type: custom:bubble-card
                           card_type: button
                           button_type: state
@@ -2689,20 +2468,6 @@ views:
                               background-color: ${state === 'on' ? 'var(--error-color)' : 'var(--background-color-2)'} !important;
                               transition: background-color 1s !important;
                             }
-                            .bubble-icon-container {
-                              background: ${state === 'on' ? 'var(--error-color)' : 'var(--card-background-color)'} !important;
-                            }
-                            .bubble-icon-container::after {
-                              opacity: ${state === 'on' ? 0.3 : 0} !important;
-                              transition: all 1s !important;
-                            }
-                            .bubble-icon {
-                              display: flex !important;
-                              opacity: 0.5 !important;
-                            }
-                            .is-on .bubble-icon {
-                              opacity: 1 !important;
-                            }
               - type: horizontal-stack
                 cards:
                   - type: custom:bubble-card
@@ -3065,9 +2830,6 @@ views:
                               opacity: 1 !important;
                               background-color: ${state === 'on' ? 'var(--accent-color)' : 'var(--background-color-2)'} !important;
                             }
-                            .bubble-icon {
-                              color: ${state === 'on' ? 'var(--accent-color)' : 'var(--text-color)'} !important;
-                            }
                         - type: custom:bubble-card
                           card_type: button
                           button_type: state
@@ -3092,20 +2854,6 @@ views:
                               background-color: ${state === 'on' ? 'var(--error-color)' : 'var(--background-color-2)'} !important;
                               transition: background-color 1s !important;
                             }
-                            .bubble-icon-container {
-                              background: ${state === 'on' ? 'var(--error-color)' : 'var(--card-background-color)'} !important;
-                            }
-                            .bubble-icon-container::after {
-                              opacity: ${state === 'on' ? 0.3 : 0} !important;
-                              transition: all 1s !important;
-                            }
-                            .bubble-icon {
-                              display: flex !important;
-                              opacity: 0.5 !important;
-                            }
-                            .is-on .bubble-icon {
-                              opacity: 1 !important;
-                            }
               - type: conditional
                 conditions:
                   - condition: state
@@ -3236,20 +2984,6 @@ views:
                     background-color: ${state === 'on' ? 'var(--error-color)' : 'var(--background-color-2)'} !important;
                     transition: background-color 1s !important;
                   }
-                  .bubble-icon-container {
-                    background: ${state === 'on' ? 'var(--error-color)' : 'var(--card-background-color)'} !important;
-                  }
-                  .bubble-icon-container::after {
-                    opacity: ${state === 'on' ? 0.3 : 0} !important;
-                    transition: all 1s !important;
-                  }
-                  .bubble-icon {
-                    display: flex !important;
-                    opacity: 0.5 !important;
-                  }
-                  .is-on .bubble-icon {
-                    opacity: 1 !important;
-                  }
               - type: custom:bubble-card
                 card_type: separator
                 name: Doors