React-big-calendar: `min` & `max` to offset full 24 hour days

Created on 11 Apr 2017 · 1Comment · Source: jquense/react-big-calendar

I'm using moment.tz.setDefault to set the calendar in the local timezone, which may be different than the browser's timezone. Since react-big-calendar starts at 12am by default, with UTC-local = +4, the calendar starts at 4am instead, for example. I would like to make the calendar always start at 12am, in the time of the locale the calendar is for (not in the time of the user's browser).

Anyway, I tried several variations of

import moment from 'moment'
import 'moment-timezone'

moment.tz.setDefault(timezoneOfMyLocationOfInterest)

//...etc
  <MyCalendar
    min={moment().startOf('day').toDate()}
    max={moment().endOf('day').toDate()}
    ...otherProps
  />

and it seems react-big-calendar is consistently pushing all my events in a big whitespace below the calendar, outside of the row time labels. It also does this if you just make a <24hr min-max range, if you have events that fall out of this range. So it looks like it's not recognizing that the events really are inside this specified 24hr range, and that's why it's forcing them outside of the grid.

Am I doing something wrong with the props, or is this a real bug?

If I set the timezone so the events and my browser are in the same timezone, the calendar looks fine. But when there is an offset, the calendar renders events outside of the grid, or each 30min event spans the whole 24h grid and there's a big white space below it.

Thanks!

PS if this did work it might help with https://github.com/intljusticemission/react-big-calendar/issues/118

Looks like https://github.com/intljusticemission/react-big-calendar/issues/253

Source