jquense / react-big-calendar

gcal/outlook like calendar component
http://jquense.github.io/react-big-calendar/examples/index.html
MIT License
7.91k stars 2.24k forks source link

events in month view do not display correctly #357

Closed kaijajan closed 7 years ago

kaijajan commented 7 years ago

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 commented 7 years ago

got blank under month, any update?

john-hadron commented 7 years ago

Got a blank under month and agenda too

dpkg commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

bgrubb83 commented 7 years ago

@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 commented 7 years ago

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

dpkg commented 7 years ago

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 commented 7 years ago

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