Events are not showing in month view when default calendar is loaded

Question

I'm using React Big Calendar for calendar purposes.

<BigCalendar
    selectable
    events={this.state.events}
    step={60}
    defaultDate={new Date()}
    localizer={localizer}
    dayPropGetter={this.dayStyleGetter}
    onSelectSlot = {this.handleSelect}
    eventPropGetter={(this.eventStyleGetter)}/>

This is my Component. Events are not showing in month view when the default calendar is loaded. I know one reason for that. My events which are in state is empty, so the calendar is not showing any events in month view.

Then if I provide any static events to the state, can I get those in month view or not?

score 0 · Answer 1 · answered Mar 12 '19 at 20:50

I've experienced this in the past, if the start and end values of an event were not JavaScript Date objects. If you only passed strings, the initial view would not work correctly. Navigating views would then pass the values through your localizer (during view change) and convert them, if possible. So you don't see them on load, and then you do after navigating to another view. Confusing and frustrating.

I've even written helper methods, in my own code, to convert these values.

import eventData from './somefile.json';

const myData = eventData.map(event => {
  event.start = new Date(event.start);
  event.end = new Date(event.end);
  return event;
});

Of course, that only works if my start and end values are strings the Date Object constructor can properly parse. The important part (and this is in the documentation) is that these keys require proper Date object values.

Events are not showing in month view when default calendar is loaded

1 Answers1