Correct dates and times do not show up on calendar correctly

Do you want to request a feature or report a bug?

Bug report

What's the current behavior?

We cannot get our dates to show up correctly on the calendar, and have tried about every way to customize the data before hitting the calendar to adjust it to no avail.

Example use case

As you can see by the screenshot below, our two test events on this calendar, Yoga mat & bundle and iPhone Max (the first one that starts on the 20th) seem to appear ok, but upon further review we can show that the alignment and length of our events are not consistently inline with the event data we are sending the component.

In the code snippet below, we show the data that is being sent to the component directly, and the two example events highlighted on the calendar are exploded...

[
    {
        allDay: true
        bookingEnd: Thu Mar 28 2019 17:00:00 GMT-0700 (Pacific Daylight Time) {}
        bookingStart: Tue Mar 26 2019 17:00:00 GMT-0700 (Pacific Daylight Time) {}
        end: Thu Mar 28 2019 11:00:00 GMT-0700 (Pacific Daylight Time) {}
        id: 48
        start: Tue Mar 26 2019 09:00:00 GMT-0700 (Pacific Daylight Time) {}
        timeframes: ["9am - 11am"]
        title: "Yoga Mat & Bundle"
        tooltipAccessor: "Yoga Mat & Bundle"
        type: "order"
    },
    {id: 49, title: "iPhone Max", tooltipAccessor: "iPhone Max", bookingStart: Sat Mar 23 2019 17:00:00 GMT-0700 (Pacific Daylight Time), …},
    {
        allDay: true
        bookingEnd: Sat Mar 23 2019 17:00:00 GMT-0700 (Pacific Daylight Time) {}
        bookingStart: Wed Mar 20 2019 17:00:00 GMT-0700 (Pacific Daylight Time) {}
        end: Sat Mar 23 2019 19:00:00 GMT-0700 (Pacific Daylight Time) {}
        id: 50
        start: Wed Mar 20 2019 17:00:00 GMT-0700 (Pacific Daylight Time) {}
        timeframes: ["5pm to 7pm"]
        title: "iPhone Max"
        tooltipAccessor: "iPhone Max"
        type: "order"
    },
    {id: 53, title: "iPhone Max", tooltipAccessor: "iPhone Max", bookingStart: Sun Mar 31 2019 17:00:00 GMT-0700 (Pacific Daylight Time), …},
    {id: 54, title: "Really fun bus", tooltipAccessor: "Really fun bus", bookingStart: Thu Apr 18 2019 17:00:00 GMT-0700 (Pacific Daylight Time), …},
    {id: 55, title: "Really fun bus", tooltipAccessor: "Really fun bus", bookingStart: Sat Apr 06 2019 17:00:00 GMT-0700 (Pacific Daylight Time), …},
]

From what we can tell, this behavior is not consistent across events, unless it has something to do with time, timezones, and slippage on the component layout. Any help appreciated. We have a basic UI implementation and most customizations go into the event data before sending it to the calendar.

// Moment localizer
const localizer = BigCalendar.momentLocalizer(moment) // or globalizeLocalizer

// Fetch and map event data
const mappedEventsForDashboard = transactions && hasTransactions ? txToCalendarModel(transactions, ...) : null;

// Event props
const customEventPropGetter = (event, start, end, isSelected) => {
    if (event.type === 'sale')
      return {
        className: 'rbc-sale',
      }
    else return {
      className: 'rbc-order',
    }
  }

  // Calendar views
  const allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k]);
  const customViews = { month: true, week: true, day: true }

<BigCalendar
  className={css.calendar}
  events={mappedEventsForDashboard}
  views={customViews}
  defaultView={allViews.MONTH}
  step={60}
  defaultDate={new Date()}
  localizer={localizer}
  drilldownView="day"
  onSelectEvent={event => routeEventClick(event.uuid, event.type, event)}
  eventPropGetter={customEventPropGetter}
  timeslots={24}
  selectable
  popup
/>

What's the expected behavior?

After spending A LOT of time of this, we definitely don't have a PR for this let alone our own working code, but our search here and in StackOverflow show that this has been an issue from time to time, but I'm hoping something you can see that we don't is our problem.

jquense / react-big-calendar