Component updates but new props do not render into calendar events

Question

UPDATE:

I have also tried using

$('#calendar').fullCalendar({
  events: this.props.events
});

inside of componentDidUpdate instead of what is shown in the code snippet, and that produces the same result (no change upon click).

---

I have a parent React component that is rendering to the DOM and a child React component that contains the fullcalendar. I want the calendar to show a list of dynamically changing events.

The child component takes in the list of events as a prop, which originates from the parent component's state (in my actual application code it originates from a redux store, but I've isolated redux out of the picture for this code snippet). The calendar is initialized in the componentDidMount() method of the child component and then I use the refetchEvents functionality of fullcalendar within componentDidUpdate() in order to try to display the changed events if new props are passed in. In the code snippet below, I change the parent component's state (list of events) through the use of a simple click event handler. However, this doesn't seem to work.

I've also tried using 'rerenderEvents' instead of 'refetchEvents' to no avail.

class Application extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = { eventslist: [] };
  }
  handleClick() {
    this.setState({ eventslist: [{ id: '12345', title: 'Temp', start: '10:00:00', end: '11:50:00', dow: [1, 3, 5] }]});
  }
  render() {
    return (
      <div>
        <h1 onClick={() => this.handleClick()}>Add Test Event</h1>
        <Cal events={this.state.eventslist} />
     </div>
    );
  }
}

class Cal extends React.Component {
  componentDidMount() {
    $('#calendar').fullCalendar({
      editable: false, // Don't allow editing of events
      weekends: false, // Hide weekends
      defaultView: 'agendaWeek', // Only show week view
      header: false, // Hide buttons/titles
      minTime: '07:30:00', // Start time for the calendar
      maxTime: '22:00:00', // End time for the calendar
      columnFormat: 'ddd',
      allDaySlot: false, // Get rid of "all day" slot at the top
      height: 'auto', // Get rid of  empty space on the bottom
      events: this.props.events
    });
  }
  componentDidUpdate() {
    console.log(this.props.events);
    $('#calendar').fullCalendar('refetchEvents');
  }
  render() {
    return <div id='calendar'></div>;
  }
}

ReactDOM.render(<Application />, document.getElementById('app'));

<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" rel="stylesheet"/>

<div id="app"></app>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script>

Any help would be much appreciated!

The CodePen with the same snippet, if you'd like to fiddle around.

Answer 1

I don't wanted to use Jquery, so figured out some other solution:

class CalendarPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fullCalendar: "",
    }
    this.updateCalendar = this.updateCalendar.bind(this);
  }

  componentDidMount() {
    this.updateCalendar(this.props.tasks);
  }
  componentWillReceiveProps(nextProps){
    this.setState({fullCalendar: ""})
    this.updateCalendar(nextProps.tasks);
  }
  updateCalendar(props){
    let calendarEvents = [];
    props.forEach(function(each,index) {
      let today = new Date()
      let sevenDayAfter = new Date().setDate(new Date().getDate() + 7);
      each.dueDate > today
        ? each.dueDate > sevenDayAfter
          ? calendarEvents[index] =  {end: each.dueDate, title:each.name, start: each.taskDate, color:"blue"}
          : calendarEvents[index] =  {end: each.dueDate, title:each.name, start: each.taskDate, color:"orange"}
        : calendarEvents[index] =  {end: each.dueDate, title:each.name, start: each.taskDate, color:"red"}
    });

    const calendarOptions = Promise.resolve({
      schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      defaultView: 'month',
      defaultDate: new Date(),
      timezone: 'local',
      editable: false,
      droppable: false,
      selectable: false,
      displayEventTime : false,
      slotDuration: '00:30',
      scrollTime: '08:00',
      displayTime: true,
      firstDay: 1,
      events: calendarEvents,
    });
    calendarOptions.then(function(result){
      this.setState({fullCalendar: <FullCalendar options={result} />})
    }.bind(this))
  }
  render() {
    return (
      <div className="container" id="calendar">
        {this.state.fullCalendar}
      </div>
    )
  }
}

The Major idea, that I am passing the state in the dom. If the componentWillReceiveProps, the state sets up to null, and the update function fires, and sets up a new state.

You need to setState to "" because its similar like code above $('#calendar').fullCalendar('destroy');

But, if the page refresh the calendar starts to scroll back to the top. Any solution for that? (You can not use event.preventDefault())

Answer 2

This article pointed me in the right direction: I decided to destroy and re-create the entire fullcalendar upon every mount and update. The working child component looks like this:

class Cal extends React.Component {
  constructor(props) {
    super(props);
    this.updateEvents = this.updateEvents.bind(this);
  }
  componentDidMount() {
    this.updateEvents(this.props.events);
  }
  componentDidUpdate() {
    this.updateEvents(this.props.events);
  }
  updateEvents(eventsList) {
    console.log(eventsList);
    $('#calendar').fullCalendar('destroy');
    $('#calendar').fullCalendar({
      editable: false, // Don't allow editing of events
      weekends: false, // Hide weekends
      defaultView: 'agendaWeek', // Only show week view
      header: false, // Hide buttons/titles
      minTime: '07:30:00', // Start time for the calendar
      maxTime: '22:00:00', // End time for the calendar
      columnFormat: 'ddd',
      allDaySlot: false, // Get rid of "all day" slot at the top
      height: 'auto', // Get rid of  empty space on the bottom
      events: eventsList
    });
  }
  render() {
    return <div id='calendar'></div>;
  }
}