Calendar Panel: FullCalendar (#5742)

* WIP * remove big calendar * remove file * Convert to lit * More * Ready for the public to see? prob not * Fix types and imports * Remove dependencies * ignore the typing that hasnt been finished in Beta * Convert paper to MWC * Styling * View list as name of view | MWC components version * Updates action directive for ripple. MWC 14.1.0 * Update * Updates * Update height styling * Toggle Button Group * Adds Toggle group transition * style updates * Few fixes * Fix Yarn lock from merge | height of celndar as parent * Update package Json and yarn | remove unneeded pkg * Remove mwc-list * Search hass.states for calendars instead of api * Move function to file in data | event fetch logic * compute state name * add ha button menu | refresh * Remove Event ffetch logic * copy pasta * Types * Fix for toggling * Translations * Update ha-button-toggle-group * Update ha-button-toggle-group.ts * Update ha-button-toggle-group.ts * Change mobile view * Locale in fullcalendar * Comments * ha-button-menu trigger slot * Comments * icon-x * Update src/panels/calendar/ha-panel-calendar.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl> * Update src/panels/calendar/ha-panel-calendar.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl>
2025-11-04 08:29:52 +00:00 · 2020-05-06 17:22:12 -04:00
parent 9630a58ea7
commit 71492d0467
21 changed files with 1330 additions and 924 deletions
--- a/src/components/ha-button-toggle-group.ts
+++ b/src/components/ha-button-toggle-group.ts
@@ -0,0 +1,86 @@
+import {
+  customElement,
+  html,
+  TemplateResult,
+  property,
+  LitElement,
+  CSSResult,
+  css,
+} from "lit-element";
+
+import "./ha-icon-button";
+
+import { fireEvent } from "../common/dom/fire_event";
+import type { ToggleButton } from "../types";
+
+@customElement("ha-button-toggle-group")
+export class HaButtonToggleGroup extends LitElement {
+  @property() public buttons!: ToggleButton[];
+
+  @property() public active?: string;
+
+  protected render(): TemplateResult {
+    return html`
+      <div>
+        ${this.buttons.map(
+          (button) => html` <ha-icon-button
+            .label=${button.label}
+            .icon=${button.icon}
+            .value=${button.value}
+            ?active=${this.active === button.value}
+            @click=${this._handleClick}
+          >
+          </ha-icon-button>`
+        )}
+      </div>
+    `;
+  }
+
+  private _handleClick(ev): void {
+    this.active = ev.target.value;
+    fireEvent(this, "value-changed", { value: this.active });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      div {
+        display: flex;
+        --mdc-icon-button-size: var(--button-toggle-size, 36px);
+        --mdc-icon-size: var(--button-toggle-icon-size, 20px);
+      }
+      ha-icon-button {
+        border: 1px solid var(--primary-color);
+        border-right-width: 0px;
+        position: relative;
+      }
+      ha-icon-button::before {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        background-color: currentColor;
+        opacity: 0;
+        pointer-events: none;
+        content: "";
+        transition: opacity 15ms linear, background-color 15ms linear;
+      }
+      ha-icon-button[active]::before {
+        opacity: var(--mdc-icon-button-ripple-opacity, 0.12);
+      }
+      ha-icon-button:first-child {
+        border-radius: 4px 0 0 4px;
+      }
+      ha-icon-button:last-child {
+        border-radius: 0 4px 4px 0;
+        border-right-width: 1px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-button-toggle-button": HaButtonToggleGroup;
+  }
+}