0

I tried to search here and about the project on github, but I can't find a solution to make it work.

It gives me the following error at the moment:

Cannot read property 'momentLocalizer' of undefined

Code line error:

const localizer = BigCalendar.momentLocalizer(moment);

Example: Link

Code:

import React, { Component } from "react";
import { render } from "react-dom";
import events from "./events";
import BigCalendar from "react-big-calendar";
import moment from "moment";
import "react-big-calendar/lib/css/react-big-calendar.css";

moment.locale("en");
const localizer = BigCalendar.momentLocalizer(moment);
const allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k]);

class App extends Component {
  state = {
    view: "day",
    date: new Date(2015, 3, 12),
    width: 500
  };

  render() {
    console.log(
      moment()
        .subtract(1, "months")
        .endOf("month")
        .format("YYYY-MM-DD")
    );
    return (
      <div style={{ height: 700 }}>
        <BigCalendar
          localizer={localizer}
          onRangeChange={e => {
            console.log(e);
          }}
          events={[]}
          startAccessor="start"
          endAccessor="end"
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));
Paul
  • 3,644
  • 9
  • 47
  • 113

2 Answers2

1

You are using the named import. Could you modify your import to this?

import { momentLocalizer } from "react-big-calendar";
// Rest of your code
const localizer = momentLocalizer(moment);
// Rest of your code
Mohammad Faisal
  • 46
  • 5
0

Import momentLocalizer and update the code.

import React, { useState } from 'react';
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)
const EventCalendar = (props) => {

    const myEventsList = [
        {
            title: "All Day Event very long title",
            start: new Date(2015, 3, 0),
            end: new Date(2015, 3, 1)
        },
        {
            title: "Long Event",
            start: new Date(2023, 3, 7),
            end: new Date(2023, 3, 10)
        },

        {
            title: "DTS STARTS",
            start: new Date(2016, 2, 13, 0, 0, 0),
            end: new Date(2016, 2, 20, 0, 0, 0)
        },
        {
            title: "DTS ENDS",
            start: new Date(2016, 10, 6, 0, 0, 0),
            end: new Date(2016, 10, 13, 0, 0, 0)
        },
        {
            title: "Some Event",
            start: new Date(2015, 3, 9, 0, 0, 0),
            end: new Date(2015, 3, 9, 0, 0, 0)
        },
        {
            title: "Conference",
            start: new Date(2015, 3, 11),
            end: new Date(2015, 3, 13),
            desc: "Big conference for important people"
        },
        {
            title: "Meeting",
            start: new Date(2023, 6, 12, 10, 30, 0, 0),
            end: new Date(2023, 6, 12, 12, 30, 0, 0),
            desc: "Pre-meeting meeting, to prepare for the meeting"
        },
        {
            title: "Today",
            start: new Date(new Date().setHours(new Date().getHours() - 3)),
            end: new Date(new Date().setHours(new Date().getHours() + 3))
        }
    ];
    console.log("----", new Date(new Date().setHours(new Date().getHours() - 3)));
    return (
        <>
            <section class="inner-banner-wrap">
                <div class="container">
                    <div class="lg-title text-center">Calendar</div>
                </div>
            </section>
            <section class="contact-wrap">
                <div class="container">
                    <div class="row common-text">
                        <Calendar
                            localizer={localizer}
                            events={myEventsList}
                            startAccessor="start"
                            endAccessor="end"
                            style={{ height: 500 }}
                        />
                    </div>
                </div>
            </section>
        </>
    )
}

export default EventCalendar
user17204395
  • 1