Allow initial View in Calendar Card (#6982)

src/panels/calendar/ha-full-calendar.ts

@@ -1,7 +1,7 @@
 // @ts-ignore
 import fullcalendarStyle from "@fullcalendar/common/main.css";
-import { Calendar } from "@fullcalendar/core";
 import type { CalendarOptions } from "@fullcalendar/core";
+import { Calendar } from "@fullcalendar/core";
 import dayGridPlugin from "@fullcalendar/daygrid";
 // @ts-ignore
 import daygridStyle from "@fullcalendar/daygrid/main.css";
@@ -73,9 +73,11 @@ class HAFullCalendar extends LitElement {
     "dayGridDay",
   ];
 
+  @property() public initialView: FullCalendarView = "dayGridMonth";
+
   @internalProperty() private calendar?: Calendar;
 
-  @internalProperty() private _activeView: FullCalendarView = "dayGridMonth";
+  @internalProperty() private _activeView?: FullCalendarView;
 
   protected render(): TemplateResult {
     const viewToggleButtons = this._viewToggleButtons(this.views);
@@ -176,8 +178,11 @@ class HAFullCalendar extends LitElement {
       this.calendar.addEventSource(this.events);
     }
 
-    if (changedProps.has("views") && !this.views.includes(this._activeView)) {
+    if (changedProps.has("views") && !this.views.includes(this._activeView!)) {
-      this._activeView = this.views[0];
+      this._activeView =
+        this.initialView && this.views.includes(this.initialView)
+          ? this.initialView
+          : this.views[0];
       this.calendar!.changeView(this._activeView);
       this._fireViewChanged();
     }
@@ -187,8 +192,11 @@ class HAFullCalendar extends LitElement {
     const config: CalendarOptions = {
       ...defaultFullCalendarConfig,
       locale: this.hass.language,
+      initialView: this.initialView,
     };
 
+    this._activeView = this.initialView;
+
     config.dateClick = (info) => this._handleDateClick(info);
     config.eventClick = (info) => this._handleEventClick(info);
 
@@ -237,7 +245,7 @@ class HAFullCalendar extends LitElement {
 
   private _handleView(ev): void {
     this._activeView = ev.detail.value;
-    this.calendar!.changeView(this._activeView);
+    this.calendar!.changeView(this._activeView!);
     this._fireViewChanged();
   }
 

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

@@ -3,34 +3,32 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
   PropertyValues,
   TemplateResult,
-  internalProperty,
 } from "lit-element";
-
+import { HA_COLOR_PALETTE } from "../../../common/const";
+import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
+import { HASSDomEvent } from "../../../common/dom/fire_event";
+import { debounce } from "../../../common/util/debounce";
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
-import "../../calendar/ha-full-calendar";
+import { fetchCalendarEvents } from "../../../data/calendar";
-
 import type {
-  HomeAssistant,
-  CalendarEvent,
   Calendar,
+  CalendarEvent,
   CalendarViewChanged,
   FullCalendarView,
+  HomeAssistant,
 } from "../../../types";
+import "../../calendar/ha-full-calendar";
+import { findEntities } from "../common/find-entites";
+import { installResizeObserver } from "../common/install-resize-observer";
+import "../components/hui-warning";
 import type { LovelaceCard, LovelaceCardEditor } from "../types";
 import type { CalendarCardConfig } from "./types";
-import { findEntities } from "../common/find-entites";
-import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
-import "../components/hui-warning";
-import { fetchCalendarEvents } from "../../../data/calendar";
-import { HASSDomEvent } from "../../../common/dom/fire_event";
-import { HA_COLOR_PALETTE } from "../../../common/const";
-import { debounce } from "../../../common/util/debounce";
-import { installResizeObserver } from "../common/install-resize-observer";
 
 @customElement("hui-calendar-card")
 export class HuiCalendarCard extends LitElement implements LovelaceCard {
@@ -91,7 +89,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
       };
     });
 
-    this._config = config;
+    this._config = { initial_view: "dayGridMonth", ...config };
   }
 
   public getCardSize(): number {
@@ -126,6 +124,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
           .events=${this._events}
           .hass=${this.hass}
           .views=${views}
+          .initialView=${this._config.initial_view!}
           @view-changed=${this._handleViewChanged}
         ></ha-full-calendar>
       </ha-card>

src/panels/lovelace/cards/types.ts

@@ -1,4 +1,5 @@
 import { ActionConfig, LovelaceCardConfig } from "../../../data/lovelace";
+import { FullCalendarView } from "../../../types";
 import { Condition } from "../common/validate-condition";
 import { HuiImage } from "../components/hui-image";
 import { LovelaceElementConfig } from "../elements/types";
@@ -14,6 +15,7 @@ export interface AlarmPanelCardConfig extends LovelaceCardConfig {
 
 export interface CalendarCardConfig extends LovelaceCardConfig {
   entities: string[];
+  initial_view?: FullCalendarView;
   title?: string;
   theme?: string;
 }