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

Question

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' }
      ]}
    />
  );
}

Does the current code include the very place where occurs that error? — keikai, Mar 17 '20 at 02:48
@keikai Yes. Error occurs when I try to setState in handleSelect() method. — Zaman, Mar 17 '20 at 02:54
Didn't see any error you mentioned, online demo here: https://codesandbox.io/s/wispy-sea-vzkfr, please provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) — keikai, Mar 17 '20 at 03:05
@keikai Thank you for creating the demo. Please check here. When I select any time, the error occurs. https://codesandbox.io/s/holy-monad-hpud5 — Zaman, Mar 17 '20 at 04:07

score 0 · Answer 1 · answered Mar 19 '20 at 22:52

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.

@Nelles yes it does resolve the error of the initial question. I modified and tested the code and it prints out the console.log message. Something that wasn't possible — Eric Aig, Mar 20 '20 at 07:28

score 0 · Accepted Answer · answered Jun 01 '20 at 12:59

0

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

answered Jun 01 '20 at 12:59

tomkra

322
4
10

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

2 Answers2