From b43601764c55d705690233eab95f8c01526639ce Mon Sep 17 00:00:00 2001
From: Francis Avila <favila@breezeehr.com>
Date: Tue, 7 May 2019 07:05:34 -0500
Subject: [PATCH] fix: TimeGrid display on DST change days when min is after
 the transition (#1303)

If the "min" start time of a calender view is after the moment of
transition in or out of Daylight Saving time (2am), the values in the
time grid can be off by an hour. This is because the extra +/- 60
minutes was not included in minutesFromMidnight.

Fixes #1098, #1273, possibly others
---
 src/utils/TimeSlots.js |  12 ++--
 stories/Durations.js   | 121 +++++++++++++++++++++++++++++++++--------
 2 files changed, 103 insertions(+), 30 deletions(-)

diff --git a/src/utils/TimeSlots.js b/src/utils/TimeSlots.js
index 5374e22c2..d70e01475 100644
--- a/src/utils/TimeSlots.js
+++ b/src/utils/TimeSlots.js
@@ -11,14 +11,14 @@ const getKey = (min, max, step, slots) =>
 export function getSlotMetrics({ min: start, max: end, step, timeslots }) {
   const key = getKey(start, end, step, timeslots)
 
+  // if the start is on a DST-changing day but *after* the moment of DST
+  // transition we need to add those extra minutes to our minutesFromMidnight
+  const daystart = dates.startOf(start, 'day')
+  const daystartdstoffset = getDstOffset(daystart, start)
   const totalMin =
     1 + dates.diff(start, end, 'minutes') + getDstOffset(start, end)
-  const minutesFromMidnight = dates.diff(
-    dates.startOf(start, 'day'),
-    start,
-    'minutes'
-  )
-
+  const minutesFromMidnight =
+    dates.diff(daystart, start, 'minutes') + daystartdstoffset
   const numGroups = Math.ceil(totalMin / (step * timeslots))
   const numSlots = numGroups * timeslots
 
diff --git a/stories/Durations.js b/stories/Durations.js
index a6a06565d..f4f61f080 100644
--- a/stories/Durations.js
+++ b/stories/Durations.js
@@ -4,27 +4,100 @@ import moment from 'moment'
 
 import { Calendar, DragableCalendar } from './helpers'
 
-storiesOf('Event Durations').add('Daylight savings', () => {
-  return (
-    <DragableCalendar
-      defaultView={Calendar.Views.DAY}
-      min={moment('12:00am', 'h:mma').toDate()}
-      max={moment('11:59pm', 'h:mma').toDate()}
-      events={[
-        {
-          title: 'on DST',
-          start: new Date(2017, 2, 12, 1),
-          end: new Date(2017, 2, 12, 2, 30),
-          allDay: false,
-        },
-        {
-          title: 'crosses DST',
-          start: new Date(2017, 2, 12, 1),
-          end: new Date(2017, 2, 12, 6, 30),
-          allDay: false,
-        },
-      ]}
-      defaultDate={new Date(2017, 2, 12)}
-    />
-  )
-})
+storiesOf('Event Durations')
+  .add('Daylight savings starts', () => {
+    return (
+      <DragableCalendar
+        defaultView={Calendar.Views.DAY}
+        min={moment('12:00am', 'h:mma').toDate()}
+        max={moment('11:59pm', 'h:mma').toDate()}
+        events={[
+          {
+            title: 'on DST',
+            start: new Date(2017, 2, 12, 1),
+            end: new Date(2017, 2, 12, 2, 30),
+            allDay: false,
+          },
+          {
+            title: 'crosses DST',
+            start: new Date(2017, 2, 12, 1),
+            end: new Date(2017, 2, 12, 6, 30),
+            allDay: false,
+          },
+          {
+            title: 'After DST',
+            start: new Date(2017, 2, 12, 7),
+            end: new Date(2017, 2, 12, 9, 30),
+            allDay: false,
+          },
+        ]}
+        defaultDate={new Date(2017, 2, 12)}
+      />
+    )
+  })
+  .add('Daylight savings ends', () => {
+    return (
+      <DragableCalendar
+        defaultView={Calendar.Views.DAY}
+        min={moment('12:00am', 'h:mma').toDate()}
+        max={moment('11:59pm', 'h:mma').toDate()}
+        events={[
+          {
+            title: 'on DST',
+            start: new Date(2017, 10, 5, 1),
+            end: new Date(2017, 10, 5, 3, 30),
+            allDay: false,
+          },
+          {
+            title: 'crosses DST',
+            start: new Date(2017, 10, 5, 1),
+            end: new Date(2017, 10, 5, 6, 30),
+            allDay: false,
+          },
+          {
+            title: 'After DST',
+            start: new Date(2017, 10, 5, 7),
+            end: new Date(2017, 10, 5, 7, 45),
+            allDay: false,
+          },
+        ]}
+        defaultDate={new Date(2017, 10, 5)}
+      />
+    )
+  })
+  .add('Daylight savings starts, after 2am', () => {
+    return (
+      <DragableCalendar
+        defaultView={Calendar.Views.DAY}
+        min={moment('3:00am', 'h:mma').toDate()}
+        max={moment('11:59pm', 'h:mma').toDate()}
+        events={[
+          {
+            title: 'After DST',
+            start: new Date(2017, 2, 12, 7),
+            end: new Date(2017, 2, 12, 9, 30),
+            allDay: false,
+          },
+        ]}
+        defaultDate={new Date(2017, 2, 12)}
+      />
+    )
+  })
+  .add('Daylight savings ends, after 2am', () => {
+    return (
+      <DragableCalendar
+        defaultView={Calendar.Views.DAY}
+        min={moment('3:00am', 'h:mma').toDate()}
+        max={moment('11:59pm', 'h:mma').toDate()}
+        events={[
+          {
+            title: 'After DST',
+            start: new Date(2017, 10, 5, 7),
+            end: new Date(2017, 10, 5, 9, 30),
+            allDay: false,
+          },
+        ]}
+        defaultDate={new Date(2017, 10, 5)}
+      />
+    )
+  })