Fix Schedule Helper UI (#13515)

src/common/datetime/format_time.ts

@@ -71,7 +71,8 @@ export const formatTime24h = (dateObj: Date) =>
 
 const formatTime24hMem = memoizeOne(
   () =>
-    new Intl.DateTimeFormat(undefined, {
+    // en-GB to fix Chrome 24:59 to 0:59 https://stackoverflow.com/a/60898146
+    new Intl.DateTimeFormat("en-GB", {
       hour: "numeric",
       minute: "2-digit",
       hour12: false,

src/panels/config/helpers/forms/ha-schedule-form.ts

@@ -6,6 +6,7 @@ import interactionPlugin from "@fullcalendar/interaction";
 import timeGridPlugin from "@fullcalendar/timegrid";
 // @ts-ignore
 import timegridStyle from "@fullcalendar/timegrid/main.css";
+import { isSameDay } from "date-fns";
 import {
   css,
   CSSResultGroup,
@@ -39,7 +40,6 @@ const defaultFullCalendarConfig: CalendarOptions = {
   locales: allLocales,
   firstDay: 1,
   dayHeaderFormat: { weekday: "short", month: undefined, day: undefined },
-  slotLabelFormat: { hour: "numeric", minute: undefined, meridiem: "narrow" },
 };
 
 @customElement("ha-schedule-form")
@@ -168,10 +168,17 @@ class HaScheduleForm extends LitElement {
     const config: CalendarOptions = {
       ...defaultFullCalendarConfig,
       locale: this.hass.language,
+      slotLabelFormat: {
+        hour: "numeric",
+        minute: undefined,
+        hour12: useAmPm(this.hass.locale),
+        meridiem: useAmPm(this.hass.locale) ? "narrow" : false,
+      },
       eventTimeFormat: {
         hour: useAmPm(this.hass.locale) ? "numeric" : "2-digit",
-        minute: useAmPm(this.hass.locale) ? "numeric" : "2-digit",
+        minute: undefined,
         hour12: useAmPm(this.hass.locale),
+        meridiem: useAmPm(this.hass.locale) ? "narrow" : false,
       },
     };
 
@@ -235,18 +242,17 @@ class HaScheduleForm extends LitElement {
   private _handleSelect(info: { start: Date; end: Date }) {
     const { start, end } = info;
 
-    if (start.getDay() !== end.getDay()) {
-      this.calendar!.unselect();
-      return;
-    }
-
     const day = weekdays[start.getDay()];
     const value = [...this[`_${day}`]];
     const newValue = { ...this._item };
 
+    const endFormatted = formatTime24h(end);
     value.push({
       from: formatTime24h(start),
-      to: formatTime24h(end),
+      to:
+        isSameDay(start, end) || endFormatted === "0:00"
+          ? "24:00"
+          : endFormatted,
     });
 
     newValue[day] = value;
@@ -254,45 +260,51 @@ class HaScheduleForm extends LitElement {
     fireEvent(this, "value-changed", {
       value: newValue,
     });
+
+    if (isSameDay(start, end)) {
+      this.calendar!.unselect();
+    }
   }
 
   private _handleEventResize(info: any) {
     const { id, start, end } = info.event;
 
-    if (start.getDay() !== end.getDay()) {
-      info.revert();
-      return;
-    }
-
     const [day, index] = id.split("-");
     const value = this[`_${day}`][parseInt(index)];
     const newValue = { ...this._item };
 
+    const endFormatted = formatTime24h(end);
     newValue[day][index] = {
       from: value.from,
-      to: formatTime24h(end),
+      to:
+        isSameDay(start, end) || endFormatted === "0:00"
+          ? "24:00"
+          : endFormatted,
     };
 
     fireEvent(this, "value-changed", {
       value: newValue,
     });
+
+    if (isSameDay(start, end)) {
+      info.revert();
+    }
   }
 
   private _handleEventDrop(info: any) {
     const { id, start, end } = info.event;
 
-    if (start.getDay() !== end.getDay()) {
-      info.revert();
-      return;
-    }
-
     const [day, index] = id.split("-");
     const newDay = weekdays[start.getDay()];
     const newValue = { ...this._item };
 
+    const endFormatted = formatTime24h(end);
     const event = {
       from: formatTime24h(start),
-      to: formatTime24h(end),
+      to:
+        isSameDay(start, end) || endFormatted === "0:00"
+          ? "24:00"
+          : endFormatted,
     };
 
     if (newDay === day) {
@@ -307,6 +319,10 @@ class HaScheduleForm extends LitElement {
     fireEvent(this, "value-changed", {
       value: newValue,
     });
+
+    if (isSameDay(start, end)) {
+      info.revert();
+    }
   }
 
   private _handleEventClick(info: any) {
@@ -367,6 +383,9 @@ class HaScheduleForm extends LitElement {
         .fc-scroller {
           overflow-x: visible !important;
         }
+        .fc-v-event .fc-event-time {
+          white-space: inherit;
+        }
       `,
     ];
   }