Merge pull request #192 from FamousWolf/146-calendar-icon

[FEATURE] Add option for calendar icons
FamousWolf · Nov 20, 2024 · fdc9dbf · fdc9dbf
2 parents f2a9564 + 20c61dd
commit fdc9dbf
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -89,6 +89,7 @@ Custom Home Assistant card displaying a responsive overview of multiple days wit
 | `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   |
+| `icon`         | string  | optional     | Any icon               | Icon used for events from the calendar          | 1.0.0   |
 | `filter`       | string  | optional     | Any regular expression | Remove events that match the regular expression | 1.8.0   |
 | `hideInLegend` | boolean | false        | `false` \| `true`      | Do not show the calendar in the legend          | 1.8.0   |
 

diff --git a/src/card.js b/src/card.js
@@ -279,7 +279,11 @@ export class WeekPlannerCard extends LitElement {
                     ${this._calendars.map((calendar) => {
                         if (!calendar.hideInLegend) {
                             return html`
-                                <li style="--legend-calendar-color: ${calendar.color}">
+                                <li class="${calendar.icon ? 'icon' : 'noIcon'}" style="--legend-calendar-color: ${calendar.color}">
+                                    ${calendar.icon ?
+                                        html`<ha-icon icon="${calendar.icon}"></ha-icon>` :
+                                        ''
+                                    }
                                     ${calendar.name ?? calendar.entity}
                                 </li>
                             `;
@@ -383,26 +387,34 @@ export class WeekPlannerCard extends LitElement {
                                                     <div class="inner">
                                                         <div class="time">
                                                             ${event.fullDay ?
-                                                                    html`${this._language.fullDay}` :
-                                                                    html`
-                                                                        ${event.start.toFormat(this._timeFormat)}
-                                                                        ${event.end ? ' - ' + event.end.toFormat(this._timeFormat) : ''}
-                                                                    `
+                                                                html`${this._language.fullDay}` :
+                                                                html`
+                                                                    ${event.start.toFormat(this._timeFormat)}
+                                                                    ${event.end ? ' - ' + event.end.toFormat(this._timeFormat) : ''}
+                                                                `
                                                             }
                                                         </div>
                                                         <div class="title">
                                                             ${event.summary}
                                                         </div>
                                                         ${this._showLocation && event.location ?
-                                                                html`
-                                                                    <div class="location">
-                                                                        <ha-icon icon="mdi:map-marker"></ha-icon>
-                                                                        ${event.location}
-                                                                    </div>
-                                                                ` :
-                                                                ''
+                                                            html`
+                                                                <div class="location">
+                                                                    <ha-icon icon="mdi:map-marker"></ha-icon>
+                                                                    ${event.location}
+                                                                </div>
+                                                            ` :
+                                                            ''
                                                         }
                                                     </div>
+                                                    ${event.icon ?
+                                                        html`
+                                                            <div class="icon">
+                                                                <ha-icon icon="${event.icon}"></ha-icon>
+                                                            </div>
+                                                        ` :
+                                                        ''
+                                                    }
                                                 </div>
                                             `
                                         }
@@ -673,6 +685,7 @@ export class WeekPlannerCard extends LitElement {
                 originalEnd: this._convertApiDate(event.end),
                 fullDay: fullDay,
                 color: calendar.color ?? 'inherit',
+                icon: calendar.icon ?? null,
                 otherColors: [],
                 calendar: calendar.entity,
                 otherCalendars: [],

diff --git a/src/card.styles.js b/src/card.styles.js
@@ -68,9 +68,14 @@ export default css`
     
     .container .legend ul li {
         display: block;
+        --mdc-icon-size: 16px;
+    }
+    
+    .container .legend ul li ha-icon {
+        color: var(--legend-calendar-color, var(--divider-color, #ffffff));
     }
 
-    .container .legend ul li:before {
+    .container .legend ul li.noIcon:before {
         content: '';
         display: inline-block;
         width: var(--legend-dot-size);
@@ -159,6 +164,10 @@ export default css`
         background-color: var(--event-additional-color);
     }
 
+    .container .day .events .event .icon {
+        padding: var(--event-padding);
+    }
+
     .container .day .events .event .inner {
         flex-grow: 1;
         padding: var(--event-padding);

diff --git a/src/editor.js b/src/editor.js
@@ -34,6 +34,7 @@ export class WeekPlannerCardEditor extends LitElement {
                                         ${this.addTextField('calendars.' + index + '.entity', 'Entity')}
                                         ${this.addTextField('calendars.' + index + '.name', 'Name')}
                                         ${this.addTextField('calendars.' + index + '.color', 'Color')}
+                                        ${this.addTextField('calendars.' + index + '.icon', 'Icon')}
                                         ${this.addTextField('calendars.' + index + '.filter', 'Filter events (regex)')}
                                         ${this.addBooleanField('calendars.' + index + '.hideInLegend', 'Hide in legend')}
                                         ${this.addButton('Remove calendar', 'mdi:trash-can', () => {