fix: TimeGrid display on DST change days when min is after the transition (jquense#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 jquense#1098, jquense#1273, possibly others

Author: favila

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
 

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)}
+      />
+    )
+  })