From 33beafbcb1396c11a1cf0ab0e190c90c21f21461 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Thu, 29 Oct 2020 20:42:26 -0500 Subject: [PATCH 1/6] Add update Size method to Calendar and list change --- src/panels/calendar/ha-full-calendar.ts | 24 ++++++++++++++++--- .../lovelace/cards/hui-calendar-card.ts | 10 ++++++-- src/types.ts | 2 +- 3 files changed, 30 insertions(+), 6 deletions(-) diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts index f568d14e468e..630e15693b05 100644 --- a/src/panels/calendar/ha-full-calendar.ts +++ b/src/panels/calendar/ha-full-calendar.ts @@ -44,6 +44,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 +60,21 @@ const defaultFullCalendarConfig: CalendarOptions = { dayMaxEventRows: true, height: "parent", eventDisplay: "list-item", + 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 +93,10 @@ class HAFullCalendar extends LitElement { @internalProperty() private _activeView?: FullCalendarView; + public updateSize(): void { + this.calendar?.updateSize(); + } + protected render(): TemplateResult { const viewToggleButtons = this._viewToggleButtons(this.views); @@ -243,7 +261,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(); diff --git a/src/panels/lovelace/cards/hui-calendar-card.ts b/src/panels/lovelace/cards/hui-calendar-card.ts index 9e373f2f1941..1e4fbd44d9fe 100644 --- a/src/panels/lovelace/cards/hui-calendar-card.ts +++ b/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` @@ -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 { diff --git a/src/types.ts b/src/types.ts index 5f302d48951f..18708ffd5313 100644 --- a/src/types.ts +++ b/src/types.ts @@ -153,7 +153,7 @@ export type FullCalendarView = | "dayGridMonth" | "dayGridWeek" | "dayGridDay" - | "listWeek"; + | "list"; export interface ToggleButton { label: string; From a3f11fea534f2c1506afec2ca8ce9af6dd47daea Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Thu, 29 Oct 2020 20:53:18 -0500 Subject: [PATCH 2/6] Adds in locales so that the first day of the week --- src/panels/calendar/ha-full-calendar.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts index 630e15693b05..a81cd18e59ea 100644 --- a/src/panels/calendar/ha-full-calendar.ts +++ b/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"; @@ -60,6 +61,7 @@ const defaultFullCalendarConfig: CalendarOptions = { dayMaxEventRows: true, height: "parent", eventDisplay: "list-item", + locales: allLocales, views: { list: { visibleRange: getListWeekRange, From 47fecb6b875fd0319a0647bd6b5497678d3ceff1 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Fri, 30 Oct 2020 10:48:11 -0500 Subject: [PATCH 3/6] Update the locale when user changes language --- src/panels/calendar/ha-full-calendar.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts index a81cd18e59ea..cc91efd21bd8 100644 --- a/src/panels/calendar/ha-full-calendar.ts +++ b/src/panels/calendar/ha-full-calendar.ts @@ -206,6 +206,12 @@ export 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 { From c39e3401491439fdbc61b5789246d1aab6d64ba7 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Fri, 30 Oct 2020 11:03:02 -0500 Subject: [PATCH 4/6] update scroll bar --- src/panels/calendar/ha-full-calendar.ts | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts index cc91efd21bd8..32066b40fcf5 100644 --- a/src/panels/calendar/ha-full-calendar.ts +++ b/src/panels/calendar/ha-full-calendar.ts @@ -27,7 +27,7 @@ import memoize from "memoize-one"; import { fireEvent } from "../../common/dom/fire_event"; import "../../components/ha-button-toggle-group"; import "../../components/ha-icon-button"; -import { haStyle } from "../../resources/styles"; +import { haStyle, haStyleScrollbar } from "../../resources/styles"; import type { CalendarEvent, CalendarViewChanged, @@ -182,7 +182,7 @@ export class HAFullCalendar extends LitElement { ` : ""} -
+
`; } @@ -292,6 +292,7 @@ export class HAFullCalendar extends LitElement { static get styles(): CSSResult[] { return [ haStyle, + haStyleScrollbar, css` ${unsafeCSS(fullcalendarStyle)} ${unsafeCSS(daygridStyle)} @@ -513,6 +514,23 @@ export 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; + } `, ]; } From d3ec58a067bd105a49a2d77fdaf326088676bca5 Mon Sep 17 00:00:00 2001 From: Zack Arnett Date: Fri, 30 Oct 2020 11:27:00 -0500 Subject: [PATCH 5/6] remove unneeded import --- src/panels/calendar/ha-full-calendar.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts index 32066b40fcf5..a164889ef80c 100644 --- a/src/panels/calendar/ha-full-calendar.ts +++ b/src/panels/calendar/ha-full-calendar.ts @@ -27,7 +27,7 @@ import memoize from "memoize-one"; import { fireEvent } from "../../common/dom/fire_event"; import "../../components/ha-button-toggle-group"; import "../../components/ha-icon-button"; -import { haStyle, haStyleScrollbar } from "../../resources/styles"; +import { haStyle } from "../../resources/styles"; import type { CalendarEvent, CalendarViewChanged, @@ -292,7 +292,6 @@ export class HAFullCalendar extends LitElement { static get styles(): CSSResult[] { return [ haStyle, - haStyleScrollbar, css` ${unsafeCSS(fullcalendarStyle)} ${unsafeCSS(daygridStyle)} From 153c3525510d2c54f2a1012a752e0b1f7d806b7a Mon Sep 17 00:00:00 2001 From: Zack Barett Date: Fri, 30 Oct 2020 13:34:26 -0500 Subject: [PATCH 6/6] Update src/panels/calendar/ha-full-calendar.ts --- src/panels/calendar/ha-full-calendar.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts index a164889ef80c..e6a3d11f4ed3 100644 --- a/src/panels/calendar/ha-full-calendar.ts +++ b/src/panels/calendar/ha-full-calendar.ts @@ -182,7 +182,7 @@ export class HAFullCalendar extends LitElement { ` : ""} -
+
`; }