diff --git a/src/panels/config/helpers/forms/ha-schedule-form.ts b/src/panels/config/helpers/forms/ha-schedule-form.ts index ba7376f492..5671a35f35 100644 --- a/src/panels/config/helpers/forms/ha-schedule-form.ts +++ b/src/panels/config/helpers/forms/ha-schedule-form.ts @@ -17,15 +17,17 @@ import { unsafeCSS, } from "lit"; import { customElement, property, state } from "lit/decorators"; +import { firstWeekdayIndex } from "../../../../common/datetime/first_weekday"; import { formatTime24h } from "../../../../common/datetime/format_time"; import { useAmPm } from "../../../../common/datetime/use_am_pm"; -import { firstWeekdayIndex } from "../../../../common/datetime/first_weekday"; import { fireEvent } from "../../../../common/dom/fire_event"; +import { debounce } from "../../../../common/util/debounce"; import "../../../../components/ha-icon-picker"; import "../../../../components/ha-textfield"; import { Schedule, ScheduleDay, weekdays } from "../../../../data/schedule"; import { haStyle } from "../../../../resources/styles"; import { HomeAssistant } from "../../../../types"; +import { installResizeObserver } from "../../../lovelace/common/install-resize-observer"; const defaultFullCalendarConfig: CalendarOptions = { plugins: [timeGridPlugin, interactionPlugin], @@ -71,6 +73,8 @@ class HaScheduleForm extends LitElement { private _item?: Schedule; + private _resizeObserver?: ResizeObserver; + set item(item: Schedule) { this._item = item; if (item) { @@ -104,6 +108,40 @@ class HaScheduleForm extends LitElement { ); } + public connectedCallback(): void { + super.connectedCallback(); + this.updateComplete.then(() => this._attachObserver()); + } + + public disconnectedCallback(): void { + if (this._resizeObserver) { + this._resizeObserver.disconnect(); + } + } + + private _measureForm() { + const form = this.shadowRoot!.querySelector(".form"); + if (!form) { + return; + } + + this.calendar?.updateSize(); + } + + private async _attachObserver(): Promise { + if (!this._resizeObserver) { + await installResizeObserver(); + this._resizeObserver = new ResizeObserver( + debounce(() => this._measureForm(), 250, false) + ); + } + const form = this.shadowRoot!.querySelector(".form"); + if (!form) { + return; + } + this._resizeObserver.observe(form); + } + protected render(): TemplateResult { if (!this.hass) { return html``; @@ -397,12 +435,45 @@ class HaScheduleForm extends LitElement { --fc-border-color: var(--divider-color); --fc-event-border-color: var(--divider-color); } - .fc-scroller { - overflow-x: visible !important; - } + .fc-v-event .fc-event-time { white-space: inherit; } + .fc-theme-standard .fc-scrollgrid { + border: 1px solid var(--divider-color); + border-radius: var(--mdc-shape-small, 4px); + } + + .fc-scrollgrid-section-header td { + border: none; + } + :host([narrow]) .fc-scrollgrid-sync-table { + overflow: hidden; + } + table.fc-scrollgrid-sync-table + tbody + tr:first-child + .fc-daygrid-day-top { + padding-top: 0; + } + .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; + } + + .fc-timegrid-event-short .fc-event-time:after { + content: ""; /* prevent trailing dash in half hour events since we do not have event titles */ + } a { color: inherit !important;