Update calendar card to allow variable height, better multi-day event support

src/panels/lovelace/cards/hui-calendar-card.ts

@@ -1,6 +1,7 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
 import { getColorByIndex } from "../../../common/color/colors";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
@@ -115,6 +116,11 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
       "listWeek",
     ];
 
+    const style = {
+      "--calendar-height":
+        (this._config.height ? this._config.height : 400) + "px",
+    };
+
     return html`
       <ha-card>
         <div class="header">${this._config.title}</div>
@@ -127,6 +133,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
           .eventDisplay=${this._eventDisplay}
           .error=${this._error}
           @view-changed=${this._handleViewChanged}
+          style=${styleMap(style)}
         ></ha-full-calendar>
       </ha-card>
     `;
@@ -154,8 +161,12 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
   }
 
   private _handleViewChanged(ev: HASSDomEvent<CalendarViewChanged>): void {
-    this._eventDisplay =
-      ev.detail.view === "dayGridMonth" ? "list-item" : "auto";
+    if (this._config.multi_day) {
+      this._eventDisplay = "auto";
+    } else {
+      this._eventDisplay =
+        ev.detail.view === "dayGridMonth" ? "list-item" : "auto";
+    }
     this._startDate = ev.detail.start;
     this._endDate = ev.detail.end;
     this._fetchCalendarEvents();
@@ -230,10 +241,6 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
         padding-inline-start: 8px;
         direction: var(--direction);
       }
-
-      ha-full-calendar {
-        --calendar-height: 400px;
-      }
     `;
   }
 }

src/panels/lovelace/cards/types.ts

@@ -41,6 +41,8 @@ export interface CalendarCardConfig extends LovelaceCardConfig {
   initial_view?: FullCalendarView;
   title?: string;
   theme?: string;
+  height?: number;
+  multi_day?: boolean;
 }
 
 export interface ConditionalCardConfig extends LovelaceCardConfig {

src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts

@@ -10,6 +10,7 @@ import {
   optional,
   string,
   union,
+  number,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
@@ -28,6 +29,8 @@ const cardConfigStruct = assign(
     initial_view: optional(string()),
     theme: optional(string()),
     entities: array(string()),
+    height: optional(number()),
+    multi_day: optional(boolean()),
   })
 );
 
@@ -69,6 +72,12 @@ export class HuiCalendarCardEditor
                 },
               },
             },
+            {
+              name: "height",
+              required: false,
+              selector: { number: { mode: "box", step: "any" } },
+            },
+            { name: "multi_day", required: false, selector: { boolean: {} } },
           ],
         },
         { name: "theme", required: false, selector: { theme: {} } },
@@ -126,6 +135,14 @@ export class HuiCalendarCardEditor
       return this.hass!.localize("ui.panel.lovelace.editor.card.generic.title");
     }
 
+    if (schema.name === "height") {
+      return "Height in pixels (default 400)";
+    }
+
+    if (schema.name === "multi_day") {
+      return "Display Multi-Day Blocks";
+    }
+
     if (schema.name === "theme") {
       return `${this.hass!.localize(
         "ui.panel.lovelace.editor.card.generic.theme"