Calendar: Adds an Update Size and Makes list view start today and adds in local for first day of week (#7541)

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

@@ -2,6 +2,7 @@
 import fullcalendarStyle from "@fullcalendar/common/main.css";
 import type { CalendarOptions } from "@fullcalendar/core";
 import { Calendar } from "@fullcalendar/core";
+import allLocales from "@fullcalendar/core/locales-all";
 import dayGridPlugin from "@fullcalendar/daygrid";
 // @ts-ignore
 import daygridStyle from "@fullcalendar/daygrid/main.css";
@@ -44,6 +45,15 @@ declare global {
   }
 }
 
+const getListWeekRange = (currentDate: Date): { start: Date; end: Date } => {
+  const startDate = new Date(currentDate.valueOf());
+  const endDate = new Date(currentDate.valueOf());
+
+  endDate.setDate(endDate.getDate() + 7);
+
+  return { start: startDate, end: endDate };
+};
+
 const defaultFullCalendarConfig: CalendarOptions = {
   headerToolbar: false,
   plugins: [dayGridPlugin, listPlugin, interactionPlugin],
@@ -51,16 +61,22 @@ const defaultFullCalendarConfig: CalendarOptions = {
   dayMaxEventRows: true,
   height: "parent",
   eventDisplay: "list-item",
+  locales: allLocales,
+  views: {
+    list: {
+      visibleRange: getListWeekRange,
+    },
+  },
 };
 
 const viewButtons: ToggleButton[] = [
   { label: "Month View", value: "dayGridMonth", iconPath: mdiViewModule },
   { label: "Week View", value: "dayGridWeek", iconPath: mdiViewWeek },
   { label: "Day View", value: "dayGridDay", iconPath: mdiViewDay },
-  { label: "List View", value: "listWeek", iconPath: mdiViewAgenda },
+  { label: "List View", value: "list", iconPath: mdiViewAgenda },
 ];
 
-class HAFullCalendar extends LitElement {
+export class HAFullCalendar extends LitElement {
   public hass!: HomeAssistant;
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
@@ -79,6 +95,10 @@ class HAFullCalendar extends LitElement {
 
   @internalProperty() private _activeView?: FullCalendarView;
 
+  public updateSize(): void {
+    this.calendar?.updateSize();
+  }
+
   protected render(): TemplateResult {
     const viewToggleButtons = this._viewToggleButtons(this.views);
 
@@ -186,6 +206,12 @@ class HAFullCalendar extends LitElement {
       this.calendar!.changeView(this._activeView);
       this._fireViewChanged();
     }
+
+    const oldHass = changedProps.get("hass") as HomeAssistant;
+
+    if (oldHass && oldHass.language !== this.hass.language) {
+      this.calendar.setOption("locale", this.hass.language);
+    }
   }
 
   protected firstUpdated(): void {
@@ -243,7 +269,7 @@ class HAFullCalendar extends LitElement {
     this._fireViewChanged();
   }
 
-  private _handleView(ev): void {
+  private _handleView(ev: CustomEvent): void {
     this._activeView = ev.detail.value;
     this.calendar!.changeView(this._activeView!);
     this._fireViewChanged();
@@ -496,6 +522,23 @@ class HAFullCalendar extends LitElement {
         :host([narrow]) .fc-dayGridMonth-view .fc-scrollgrid-sync-table {
           overflow: hidden;
         }
+
+        .fc-scroller::-webkit-scrollbar {
+          width: 0.4rem;
+          height: 0.4rem;
+        }
+
+        .fc-scroller::-webkit-scrollbar-thumb {
+          -webkit-border-radius: 4px;
+          border-radius: 4px;
+          background: var(--scrollbar-thumb-color);
+        }
+
+        .fc-scroller {
+          overflow-y: auto;
+          scrollbar-color: var(--scrollbar-thumb-color) transparent;
+          scrollbar-width: thin;
+        }
       `,
     ];
   }

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

@@ -7,6 +7,7 @@ import {
   LitElement,
   property,
   PropertyValues,
+  query,
   TemplateResult,
 } from "lit-element";
 import { HA_COLOR_PALETTE } from "../../../common/const";
@@ -24,6 +25,7 @@ import type {
   HomeAssistant,
 } from "../../../types";
 import "../../calendar/ha-full-calendar";
+import type { HAFullCalendar } from "../../calendar/ha-full-calendar";
 import { findEntities } from "../common/find-entites";
 import { installResizeObserver } from "../common/install-resize-observer";
 import "../components/hui-warning";
@@ -71,6 +73,8 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
 
   @internalProperty() private _veryNarrow = false;
 
+  @query("ha-full-calendar", true) private _calendar?: HAFullCalendar;
+
   private _startDate?: Date;
 
   private _endDate?: Date;
@@ -121,8 +125,8 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
     }
 
     const views: FullCalendarView[] = this._veryNarrow
-      ? ["listWeek"]
-      : ["listWeek", "dayGridMonth", "dayGridDay"];
+      ? ["list"]
+      : ["list", "dayGridMonth", "dayGridDay"];
 
     return html`
       <ha-card>
@@ -186,6 +190,8 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
     }
     this._narrow = card.offsetWidth < 870;
     this._veryNarrow = card.offsetWidth < 350;
+
+    this._calendar?.updateSize();
   }
 
   private async _attachObserver(): Promise<void> {

src/types.ts

@@ -148,7 +148,7 @@ export type FullCalendarView =
   | "dayGridMonth"
   | "dayGridWeek"
   | "dayGridDay"
-  | "listWeek";
+  | "list";
 
 export interface ToggleButton {
   label: string;