Skip to content

Commit

Permalink
fix: TimeGrid display on DST change days when min is after the transi…
Browse files Browse the repository at this point in the history
…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
  • Loading branch information
favila authored and jquense committed May 7, 2019
1 parent 239f0a3 commit b436017
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 30 deletions.
12 changes: 6 additions & 6 deletions src/utils/TimeSlots.js
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
121 changes: 97 additions & 24 deletions stories/Durations.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
/>
)
})

0 comments on commit b436017

Please sign in to comment.