fix: TimeGrid display on DST change days when min is after the transi…

…tion (#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
jquense · May 7, 2019 · b436017 · b436017
1 parent 239f0a3
commit b436017
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 30 deletions.
diff --git 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
@@ -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)}
+      />
+    )
+  })