Full Calendar in React TypeError: Cannot read property 'calendar' of undefined

user_12224391 0
Viewed 2011

I am getting an error when trying to store information about selected time in state. Any help is appreciated, thank you for your time! Please let me know if you guys are needing anymore specific information.

Following is my code snippet from my component:

  const Calendar = (props) => {

  const [startTime, setStartTime] = React.useState('');

  const handleSelect = (selectedInfo) => {
    //alert(selectedInfo.startStr);
    setStartTime(selectedInfo.startStr);
  }

  return (
    <FullCalendar 
      defaultView="timeGridWeek" 
      weekends={false} 
      allDaySlot={false}
      plugins={[ timeGridPlugin, dayGridPlugin, interactionPlugin ]} 
      minTime="08:00:00"
      selectable={true}
      selectMirror={true}
      selectOverlap={false}
      select={handleSelect}
      header={{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      }}
      events={[
        { title: 'event 1', start: '2020-03-16 10:00:00', end: '2020-03-16 12:00:00' },
        { title: 'event 2', start: '2020-03-19' }
      ]}
    />
  );
}
reactjs fullcalendar javascript
2 Answers
export default class Calendar extends React.Component{
    state = {startTime: ''}

    handleSelect = (selectedInfo) => {
        //alert(selectedInfo.startStr)
        this.setState({ startTime: selectedInfo.startStr})
        console.log("working!!", this.state.startTime)
    }

    render(){
        return (
            <FullCalendar
                defaultView="dayGridMonth"
                weekends={false}
                allDaySlot={false}
                plugins={[timeGridPlugin, dayGridPlugin, interactionPlugin]}
                minTime="08:00:00"
                selectable={true}
                selectMirror={true}
                selectOverlap={false}
                select={this.handleSelect}
                header={{
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                }}
                events={[
                    { title: 'event 1', start: '2020-03-16 10:00:00', end: '2020-03-16 12:00:00' },
                    { title: 'event 2', start: '2020-03-19' }
                ]}
            />
        )
    }
}

I also had the same exact problem. Same error message. I've been searching the internet and the solution I came up with is this.

user_34106600

Upgrading fullcalendar and fullcalendar-react to version 4.4.1 resolved this issue for me. It appears It was a bug.

user_34427590
Related