diff --git a/src/panels/lovelace/cards/hui-calendar-card.ts b/src/panels/lovelace/cards/hui-calendar-card.ts
index 110d28378d64..9f5fbb9dddef 100644
--- a/src/panels/lovelace/cards/hui-calendar-card.ts
+++ b/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`
@@ -127,6 +133,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
.eventDisplay=${this._eventDisplay}
.error=${this._error}
@view-changed=${this._handleViewChanged}
+ style=${styleMap(style)}
>
`;
@@ -154,8 +161,12 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
}
private _handleViewChanged(ev: HASSDomEvent): 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;
- }
`;
}
}
diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts
index 9f741915fa80..7eee5762f667 100644
--- a/src/panels/lovelace/cards/types.ts
+++ b/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 {
diff --git a/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
index 8d3de51c1b28..d1cda81018ea 100644
--- a/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
+++ b/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"