React-big-calendar: events in month view do not display correctly

[kaijajan]

I tried to create some long events across days. But some events did not display correctly.

let testEvents = [
    {
      "start": new Date(2017, 3, 4),
      "end": new Date(2017, 3, 7),
      "title":"Event 1"
    },
    {
      "allDay":true,
      "start": new Date(2017, 3, 13),
      "end":new Date(2017, 3, 16),
      "title":"Event 2"
    },
    {
      "allDay":true,
      "start":new Date(2017, 3, 22),
      "end":new Date(2017, 3, 25),
      "title":"Event 3"
    }
  ];

BigCalendar.setLocalizer(
  BigCalendar.momentLocalizer(moment)
);

class App extends Component {
  render() {
    return (
      <div>
        <div>
          <BigCalendar
            defaultDate={ new Date() }
            events={testEvents}
            views={['month']}
          />
        </div>
      </div>
    );
  }
}

I got the result as the link below. All events were all three 3 days long event. But 1 of them showed 4 days across. And all of the were built in the same rule
http://imgur.com/QET5NMf
Any ideas for this issue?

[apn-jun]

got blank under month, any update?

[john-hadron]

Got a blank under month and agenda too

[dpkg]

https://github.com/intljusticemission/react-big-calendar/pull/380 fixes it.

not very throughly tested though, will appreciate if anyone can test if their calendars are showing correct data with my forked branch :)

[jquense]

Thanks for the fix. To test you can create and run a few stories testing different event setups. See: npm run storybook and the stories directory

[dpkg]

thanks. already tested with some test events in my calendar using the default popup demo. going to do what you suggested above now.

[bgrubb83]

@apn-jun, @john-hadron I had this problem too until I read the docs a bit more thoroughly :)

"note: The default styles use height: 100% which means your container must set an explicit height (feel free to adjust the styles to suit your specific needs)."

[john-hadron]

@bkgrubb Yup, that was my issue too :+1:

[dpkg]

I guess the original issue as mentioned in the very first comment was something else (see screenshot). The events ending at time 00:00:00 are not rendered on the specified end date, as designed. But they do render if the end date is the first day of the week.

Do I understand wrong?

[dpkg]

https://github.com/intljusticemission/react-big-calendar/issues/315 was a duplicate