How to use the react-big-calendar/lib/addons/dragAndDrop function in react-big-calendar

defaultDate={new Date(2015, 3, 1)}
            localizer={localizer}
        />
    );

    const localizer = momentLocalizer(moment);

    ReactDOM.render(, document.body);
}

// Drag and Drop Example Test
{
    interface Props {
        localizer: DateLocalizer;
    }
    const DragAndDropCalendar = withDragAndDrop(Calendar);
    const DnD = ({ localizer }: Props) => (
         true}
            resizableAccessor={() => true}

GetEvents,
  UpdateEvents,
  GetEquipments,
  UpdateEquipments,
  GetPeople,
  UpdatePeople
} from "../../../../helpers/db";
//Styles
import './styles/dragAndDrop/styles.css'
import './styles/less/styles.css'
import './styles/css/react-big-calendar.css'


BigCalendar.momentLocalizer(moment); // or globalizeLocalizer

const DragAndDropCalendar = withDragAndDrop(BigCalendar, {backend: false})

class Dnd extends Component {

  constructor(props) {
    super(props)

    this.state = calendarInitialState

    this.moveEvent = this.moveEvent.bind(this)
  }

  componentDidMount() {
    const newEvents = []
    const newEquipments = []
    const newPeople = []

import React from 'react'
import events from '../src/events'
import BigCalendar from 'react-big-calendar'
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
import 'react-big-calendar/lib/css/react-big-calendar.css';
import 'react-big-calendar/lib/addons/dragAndDrop/styles.less'
import moment from 'moment';

let allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k]);

moment.locale('en-GB');
const localizer = BigCalendar.momentLocalizer(moment);

const DragAndDropCalendar = withDragAndDrop(BigCalendar);

class CalendarPage extends React.Component {
    constructor(...args) {
        super(...args);
        this.state = {
            events: events,
        };

        this.moveEvent = this.moveEvent.bind(this);
        this.newEvent = this.newEvent.bind(this)
    }

    moveEvent({ event, start, end, isAllDay: droppedOnAllDaySlot }) {
        const { events } = this.state;

        const idx = events.indexOf(event);

import React from 'react';
import BigCalendar from 'react-big-calendar';
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
import moment from 'moment';

import {
    Container
} from './../../components';

import events from './../../features/Calendar/events';
import { HeaderMain } from "./../../features/HeaderMain";

const DragAndDropCalendar = withDragAndDrop(BigCalendar)
const localizer = BigCalendar.momentLocalizer(moment) 

export default class Calendar extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            events: events,
        }
    
        this.moveEvent = this.moveEvent.bind(this)
        this.newEvent = this.newEvent.bind(this)
    }
  
    moveEvent({ event, start, end, isAllDay: droppedOnAllDaySlot }) {
        const { events } = this.state

import React, { Component } from "react";
import Calendar from "react-big-calendar";
import moment from "moment";
import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";

import "./App.css";
import "react-big-calendar/lib/addons/dragAndDrop/styles.css";
import "react-big-calendar/lib/css/react-big-calendar.css";

const localizer = Calendar.momentLocalizer(moment);
const DnDCalendar = withDragAndDrop(Calendar);

class App extends Component {
  state = {
    events: [
      {
        start: new Date(),
        end: new Date(moment().add(1, "days")),
        title: "Some title"
      }
    ]
  };

  onEventResize = (type, { event, start, end, allDay }) => {
    this.setState(state => {
      state.events[0].start = start;
      state.events[0].end = end;

title: 'Birthday Party',
    start: new Date(2018, 0, 30, 7, 0, 0),
    end: new Date(2018, 0, 30, 10, 30, 0),
    resourceId: 7,
  },
]

const resourceMap = [
  { resourceId: 1, resourceTitle: 'Board room' },
  { resourceId: 2, resourceTitle: 'Training room' },
  { resourceId: 3, resourceTitle: 'Meeting room 1' },
  { resourceId: 4, resourceTitle: 'Meeting room 2' },
  { resourceId: 6, resourceTitle: 'Meeting room 2' },
  { resourceId: 7, resourceTitle: 'Meeting room 2' },
]
const DragAndDropCalendar = withDragAndDrop(BigCalendar)
const Dnd = ({
  events = events,
  resourceMap = resourceMap,
  resizeEvent,
  moveEvent,
  newEvent,
  lng = 'vi',
  components = {
    toolbar: CalendarToolbar
  },
  defaultDate=new Date(2018, 11, 19),
  views=['day', 'work_week'],
  min=moment('6:00', 'h:mm').toDate(),
  max=moment('21:00', 'h:mm').toDate(),
}) => {
  if (lng === 'vi') {

import LoadingContainer from '../../../components/design/loading-container';
import history from '../../../utilities/history';
import { fetchJsonGet, fetchJsonPost } from '../../../utilities/rest';
import EditModal from '../../page/edit/EditModal';
import {
    dayStyle,
    renderAgendaEvent,
    renderDateHeader,
    renderEvent,
    renderMonthEvent,
} from './CalendarRendering';
import CalendarToolBar from './CalendarToolBar';

const localizer = momentLocalizer(moment);

const DragAndDropCalendar = withDragAndDrop(Calendar);

const convertJsonDates = e => Object.assign({}, e, {
    start: new Date(e.start),
    end: new Date(e.end),
});


class CalendarPanel extends React.Component {
    static getDerivedStateFromProps({ location }, { prevLocation }) {
        const newState = {
            prevLocation: location,
        };

        if (
            location.state !== prevLocation.state
            && location.state

import moment from 'moment';
require('moment-duration-format');

import HTML5Backend from 'react-dnd-html5-backend';
import { DragDropContext } from 'react-dnd';

import BigCalendar from 'react-big-calendar';
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';

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

const DragAndDropCalendar = withDragAndDrop(BigCalendar);

import CreateTimeEntryModal from '../TimeEntryModal/CreateTimeEntryModal';
import TimeEntryEvent from './TimeEntryEvent';
import WeekHeader from './WeekHeader';
import MonthDayCell from './MonthDayCell';
import { createTogglEntry } from '../../../../toggl/toggl.js';
import Toolbar from './Toolbar';

const CustomToolbar = ({events}) => props => (
    
);

const DynamicWeekHeader = ({events}) => props => (
    
);

import React from 'react';
import BigCalendar from 'react-big-calendar';
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
import moment from 'moment';

import {
    Container
} from './../../../components';

import { HeaderMain } from "../../components/HeaderMain";
import events from './events';

const DragAndDropCalendar = withDragAndDrop(BigCalendar)
const localizer = BigCalendar.momentLocalizer(moment) 


export class Calendar extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            events: events,
        }
    
        this.moveEvent = this.moveEvent.bind(this)
        this.newEvent = this.newEvent.bind(this)
    }
  
    moveEvent({ event, start, end, isAllDay: droppedOnAllDaySlot }) {
        const { events } = this.state

import React from 'react'
import { Calendar } from 'react-big-calendar'
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'

import 'react-big-calendar/lib/addons/dragAndDrop/styles.scss'

const DragAndDropCalendar = withDragAndDrop(Calendar)

const events = [
  {
    id: 0,
    title: 'Board meeting',
    start: new Date(2018, 0, 29, 9, 0, 0),
    end: new Date(2018, 0, 29, 13, 0, 0),
    resourceId: 1,
  },
  {
    id: 1,
    title: 'MS training',
    start: new Date(2018, 0, 29, 14, 0, 0),
    end: new Date(2018, 0, 29, 16, 30, 0),
    resourceId: 2,
  },