[FEATURE] Add option to show legend

This adds a `showLegend` option to show a calendar legend at the top of the card. It is turned off by default. Resolves: #107
FamousWolf · Sep 2, 2024 · 2c279b2 · 2c279b2
1 parent 1d780e8
commit 2c279b2
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -80,10 +80,11 @@ Custom Home Assistant card displaying a responsive overview of multiple days wit
 
 ### Calendars
 
-| Name           | Type        | Default      | Supported options                   | Description                                          | Version |
-|----------------|-------------|--------------|-------------------------------------|------------------------------------------------------|---------|
-| `entity`       | string      | **Required** | `calendar.my_calendar`              | Entity ID                                            | 1.0.0   |
-| `color`        | string      | optional     | Any CSS color                       | Color used for events from the calendar              | 1.0.0   |
+| Name     | Type   | Default      | Supported options      | Description                             | Version |
+|----------|--------|--------------|------------------------|-----------------------------------------|---------|
+| `entity` | string | **Required** | `calendar.my_calendar` | Entity ID                               | 1.0.0   |
+| `name`   | string | optional     | Any text               | Name of the calendar                    | 1.7.0   |
+| `color`  | string | optional     | Any CSS color          | Color used for events from the calendar | 1.0.0   |
 
 ### Texts
 

diff --git a/src/card.js b/src/card.js
@@ -76,6 +76,7 @@ export class WeekPlannerCard extends LitElement {
     _hidePastEvents;
     _hideDaysWithoutEvents;
     _filter;
+    _showLegend;
 
     /**
      * Get properties
@@ -124,6 +125,7 @@ export class WeekPlannerCard extends LitElement {
         this._hidePastEvents = config.hidePastEvents ?? false;
         this._hideDaysWithoutEvents = config.hideDaysWithoutEvents ?? false;
         this._filter = config.filter ?? false;
+        this._showLegend = config.showLegend ?? false;
         if (config.locale) {
             LuxonSettings.defaultLocale = config.locale;
         }
@@ -202,6 +204,7 @@ export class WeekPlannerCard extends LitElement {
                         ''
                     }
                     <div class="container">
+                        ${this._renderLegend()}
                         ${this._renderDays()}
                     </div>
                     ${this._renderEventDetailsDialog()}
@@ -214,6 +217,24 @@ export class WeekPlannerCard extends LitElement {
         `;
     }
 
+    _renderLegend() {
+        if (!this._showLegend) {
+            return html``;
+        }
+
+        return html`
+            <div class="legend">
+                <ul>
+                    ${this._calendars.map((calendar) => {
+                        return html`
+                            <li style="--legend-calendar-color: ${calendar.color}">${calendar.name ?? calendar.entity}</li>
+                        `;
+                    })}
+                </ul>
+            </div>
+        `;
+    }
+
     _renderDays() {
         if (!this._days) {
             return html``;

diff --git a/src/card.styles.js b/src/card.styles.js
@@ -2,6 +2,8 @@ import { css } from 'lit';
 
 export default css`
     ha-card {
+        --legend-spacing: 15px;
+        --legend-dot-size: 10px;
         --days-spacing: 15px;
         --day-date-number-font-size: 3.5em;
         --day-date-number-line-height: 1.2em;
@@ -46,6 +48,30 @@ export default css`
         flex-wrap: wrap;
         gap: var(--days-spacing);
     }
+    
+    .container .legend ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--legend-spacing);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+    
+    .container .legend ul li {
+        display: block;
+    }
+
+    .container .legend ul li:before {
+        content: '';
+        display: inline-block;
+        width: var(--legend-dot-size);
+        height: var(--legend-dot-size);
+        background-color: var(--legend-calendar-color, var(--divider-color, #ffffff));
+        border-radius: 50%;
+        margin: 0 5px 0 0;
+        vertical-align: middle;
+    }
 
     .container .day {
         position: relative;