Add support for calendar event description (#14522)

src/data/calendar.ts

@@ -29,6 +29,7 @@ export interface CalendarEventData {
   dtstart: string;
   dtend: string;
   rrule?: string;
+  description?: string;
 }
 
 export interface CalendarEventMutableParams {
@@ -36,6 +37,7 @@ export interface CalendarEventMutableParams {
   dtstart: string;
   dtend: string;
   rrule?: string;
+  description?: string;
 }
 
 // The scope of a delete/update for a recurring event
@@ -84,6 +86,7 @@ export const fetchCalendarEvents = async (
       const eventData: CalendarEventData = {
         uid: ev.uid,
         summary: ev.summary,
+        description: ev.description,
         dtstart: eventStart,
         dtend: eventEnd,
         recurrence_id: ev.recurrence_id,

src/panels/calendar/dialog-calendar-event-detail.ts

@@ -87,6 +87,11 @@ class DialogCalendarEventDetail extends LitElement {
               ${this._data!.rrule
                 ? this._renderRruleAsText(this._data.rrule)
                 : ""}
+              ${this._data.description
+                ? html`<br />
+                    <div class="description">${this._data.description}</div>
+                    <br />`
+                : html``}
             </div>
           </div>
 
@@ -239,6 +244,11 @@ class DialogCalendarEventDetail extends LitElement {
         .field {
           display: flex;
         }
+        .description {
+          color: var(--secondary-text-color);
+          max-width: 300px;
+          overflow-wrap: break-word;
+        }
       `,
     ];
   }

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -7,6 +7,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { isDate } from "../../common/string/is_date";
 import "../../components/ha-date-input";
+import "../../components/ha-textarea";
 import "../../components/ha-time-input";
 import {
   Calendar,
@@ -42,6 +43,8 @@ class DialogCalendarEventEditor extends LitElement {
 
   @state() private _summary = "";
 
+  @state() private _description = "";
+
   @state() private _rrule?: string;
 
   @state() private _allDay = false;
@@ -127,6 +130,15 @@ class DialogCalendarEventEditor extends LitElement {
             error-message=${this.hass.localize("ui.common.error_required")}
             dialogInitialFocus
           ></ha-textfield>
+          <ha-textarea
+            class="description"
+            name="description"
+            .label=${this.hass.localize(
+              "ui.components.calendar.event.description"
+            )}
+            @change=${this._handleDescriptionChanged}
+            autogrow
+          ></ha-textarea>
           <ha-combo-box
             name="calendar"
             .hass=${this.hass}
@@ -252,6 +264,10 @@ class DialogCalendarEventEditor extends LitElement {
     this._summary = ev.target.value;
   }
 
+  private _handleDescriptionChanged(ev) {
+    this._description = ev.target.value;
+  }
+
   private _handleRRuleChanged(ev) {
     this._rrule = ev.detail.value;
   }
@@ -291,6 +307,7 @@ class DialogCalendarEventEditor extends LitElement {
     );
     const data: CalendarEventMutableParams = {
       summary: this._summary,
+      description: this._description,
       rrule: this._rrule,
       dtstart: "",
       dtend: "",
@@ -390,6 +407,7 @@ class DialogCalendarEventEditor extends LitElement {
     this._dtstart = undefined;
     this._dtend = undefined;
     this._summary = "";
+    this._description = "";
     this._rrule = undefined;
   }
 
@@ -400,9 +418,12 @@ class DialogCalendarEventEditor extends LitElement {
         state-info {
           line-height: 40px;
         }
-        ha-textfield {
+        ha-textfield,
+        ha-textarea {
           display: block;
-          margin-bottom: 24px;
+        }
+        ha-textarea {
+          margin-bottom: 16px;
         }
         ha-formfield {
           display: block;
@@ -435,7 +456,6 @@ class DialogCalendarEventEditor extends LitElement {
         }
         ha-combo-box {
           display: block;
-          margin-bottom: 24px;
         }
         ha-svg-icon {
           width: 40px;

src/translations/en.json

@@ -666,7 +666,8 @@
               "daily": "days"
             }
           },
-          "summary": "Summary"
+          "summary": "Summary",
+          "description": "Description"
         }
       },
       "attributes": {