react-big-calendar: Cannot read property 'momentLocalizer' of undefined

Question

In my project I am trying to initialize react-big-calendar but it's saying that it doesn't exist. Here's the error from the console:

home.tsx:18 Uncaught TypeError: Cannot read property 'momentLocalizer' of undefined
    at Object../src/main/webapp/app/modules/home/home.tsx (home.tsx:18)
    at __webpack_require__ (bootstrap:709)
    at fn (bootstrap:94)...

I checked my dependencies and even checked my node_modules folder for the library and it's there. There's something else going on. Here's my code:

import './home.scss';

import * as React from 'react';
import { connect } from 'react-redux';
import { getSession } from 'app/shared/reducers/authentication';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';

// Setup the localizer by providing the moment (or globalize) Object
// to the correct localizer.
BigCalendar.momentLocalizer(moment); // or globalizeLocalizer

export interface IHomeProp extends StateProps, DispatchProps {}


const MyCalendar = props => (
  <div>
    <BigCalendar
      events={[]}
      startAccessor='startDate'
      endAccessor='endDate'
      defaultDate={moment().toDate()}
    />
  </div>
);

export class Home extends React.Component<IHomeProp> {
  componentDidMount() {
    this.props.getSession();
  }

  render() {
    const { account } = this.props;
    return (
      <MyCalendar/>
    );
  }
}

const mapStateToProps = storeState => ({
  account: storeState.authentication.account,
  isAuthenticated: storeState.authentication.isAuthenticated
});

const mapDispatchToProps = { getSession };

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(mapStateToProps, mapDispatchToProps)(Home);

and here's my package versions:

"react": "16.3.0", "react-big-calendar": "^0.19.1", "moment": "2.22.0",

Any ideas?

score 1 · Accepted Answer · answered Jun 27 '18 at 01:35

1

you can try this: BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));

answered Jun 27 '18 at 01:35

Angelki

103
8

score 1 · Answer 2 · answered Dec 21 '19 at 01:18

if anyone to add this dependencies must be careful some properties change. Bigcalendar change to Calendar and momentLocalizer must be import from react-big-calendar.

here is the working example =>

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

import moment from "moment";

const localizer = momentLocalizer(moment);```



    <div style={{ height: 500 }}>
              <Calendar
                views={["month"]}
                events={this.state.events}
                defaultDate={new Date(Date.now())}
                localizer={localizer}
              />
            </div>

react-big-calendar: Cannot read property 'momentLocalizer' of undefined

2 Answers2