Uncaught TypeError: Cannot read property 'setLocalizer' of undefined

Question

import Calendar from 'react-big-calendar'
Calendar.setLocalizer(Calendar.momentLocalizer(moment))

With plugins version:

"moment": "^2.24.0"
"react-big-calendar": "^0.23.0"

After updating react big calendar package i'm getting this error. I have installed the package multiple times after update .

But getting this error "Uncaught TypeError: Cannot read property 'setLocalizer' of undefined ".

I have already read answers related to "Cannot read property 'momentLocalizer' of undefined " , but its not working for me. please help.

Thanks in advance

Answer 1

This would work:

import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'

const localizer = momentLocalizer(moment)

const MyCalendar = props => (
  <div>
    <Calendar
      localizer={localizer}
      events={myEventsList}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
    />
  </div>
)

Answer 2

You need to do the following:

import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';

const localizer = momentLocalizer(moment);

In your JSX:

  <div style={{ height: '500pt'}}>
              <Calendar
                 ....
                defaultDate={moment().toDate()}
                localizer={localizer}
              />
            </div>

I hope it helps!