CODEWITHSUNDEEP
javascriptreactjsreact-big-calendar
Umbro
Umbro

Reputation: 2204

React Big Calendar Error: Element type is invalid: expected a string (for built-in components)

First error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

Second error:

Uncaught TypeError: Cannot read property 'momentLocalizer' of undefined

Code here: https://stackblitz.com/edit/react-bcvdd6

import BigCalendar from 'react-big-calendar';
import { momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';
const localizer = momentLocalizer(moment);

class App extends Component {
  constructor() {
    super();
    this.state = {
      events: [{
          id: 0,
          title: 'All Day Event very long title',
          allDay: true,
          start: new Date(2015, 3, 0),
          end: new Date(2015, 3, 1),
        },
        {
          id: 1,
          title: 'Long Event',
          start: new Date(2015, 3, 7),
          end: new Date(2015, 3, 10),
        },

        {
          id: 2,
          title: 'DTS STARTS',
          start: new Date(2016, 2, 13, 0, 0, 0),
          end: new Date(2016, 2, 20, 0, 0, 0),
        },

        {
          id: 3,
          title: 'DTS ENDS',
          start: new Date(2016, 10, 6, 0, 0, 0),
          end: new Date(2016, 10, 13, 0, 0, 0),
        },

        {
          id: 4,
          title: 'Some Event',
          start: new Date(2015, 3, 9, 0, 0, 0),
          end: new Date(2015, 3, 10, 0, 0, 0),
        }
      ]
    };  
  }

  render() {
    return (
      <div>
        <BigCalendar
          localizer={localizer}
            events={this.state.events}
            startAccessor="start"
            endAccessor="end"
          />
        </div>
    );
  }
}

Upvotes: 1

Views: 1158

Answers (3)

user11910739
user11910739

Reputation:

You can try this

BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));

Upvotes: 0

Jojo Tutor
Jojo Tutor

Reputation: 890

check the docs, i've fixed this with this code:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';
const localizer = momentLocalizer(moment);

class App extends Component {
  constructor() {
    super();
    this.state = {
      events: [{
          id: 0,
          title: 'All Day Event very long title',
          allDay: true,
          start: new Date(2015, 3, 0),
          end: new Date(2015, 3, 1),
        },
        {
          id: 1,
          title: 'Long Event',
          start: new Date(2015, 3, 7),
          end: new Date(2015, 3, 10),
        },

        {
          id: 2,
          title: 'DTS STARTS',
          start: new Date(2016, 2, 13, 0, 0, 0),
          end: new Date(2016, 2, 20, 0, 0, 0),
        },

        {
          id: 3,
          title: 'DTS ENDS',
          start: new Date(2016, 10, 6, 0, 0, 0),
          end: new Date(2016, 10, 13, 0, 0, 0),
        },

        {
          id: 4,
          title: 'Some Event',
          start: new Date(2015, 3, 9, 0, 0, 0),
          end: new Date(2015, 3, 10, 0, 0, 0),
        }
      ]
    };  
  }

  render() {
    return (
      <div>
        <Calendar
          localizer={localizer}
            events={this.state.events}
            startAccessor="start"
            endAccessor="end"
          />
        </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Upvotes: 1

Mohamed Ramrami
Mohamed Ramrami

Reputation: 12691

You should import like this : 

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

<Calendar
    localizer={localizer}
    events={this.state.events}
    startAccessor="start"
    endAccessor="end"
  />

Upvotes: 1

Related Questions