From ef82bc2abbb8c0d109b493bca4d8558725d98326 Mon Sep 17 00:00:00 2001 From: Petar Petrov Date: Fri, 5 Dec 2025 14:39:51 +0200 Subject: [PATCH] Fix calendar card not showing different colors for multiple calendars (#28338) --- .../lovelace/cards/hui-calendar-card.ts | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/panels/lovelace/cards/hui-calendar-card.ts b/src/panels/lovelace/cards/hui-calendar-card.ts index 80b2ca24f2..f72815c5f2 100644 --- a/src/panels/lovelace/cards/hui-calendar-card.ts +++ b/src/panels/lovelace/cards/hui-calendar-card.ts @@ -80,12 +80,6 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard { throw new Error("Entities need to be an array"); } - const computedStyles = getComputedStyle(this); - this._calendars = config!.entities.map((entity, idx) => ({ - entity_id: entity, - backgroundColor: getColorByIndex(idx, computedStyles), - })); - if (this._config?.entities !== config.entities) { this._fetchCalendarEvents(); } @@ -93,6 +87,20 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard { this._config = { initial_view: "dayGridMonth", ...config }; } + public willUpdate(changedProps: PropertyValues): void { + super.willUpdate(changedProps); + if ( + !this.hasUpdated || + (changedProps.has("_config") && this._config?.entities) + ) { + const computedStyles = getComputedStyle(this); + this._calendars = this._config!.entities.map((entity, idx) => ({ + entity_id: entity, + backgroundColor: getColorByIndex(idx, computedStyles), + })); + } + } + public getCardSize(): number { return 12; }