How to use the react-big-calendar.momentLocalizer function in react-big-calendar

import React, { Component } from 'react';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import './DateRange.css';

BigCalendar.momentLocalizer(moment);

class DateRange extends Component {
  render() {
    let events = [];
    const views = ['month'];
    const messages = {
      previous: 'back',
      next: 'next'
    };
    let formats = {};

    //   weekdayFormat: (date, culture, local) => {
    //     local.format(date.getDay(), 'DD', 'ko')
    //     // return date.getDay()
    //   },
    //   eventTimeRangeFormat: ({ start, end }, culture, local) =>

import BigCalendar from 'react-big-calendar'
import profile from '../Images/profile.png'
import profileBG from '../Images/profile-header.png'
import moment from 'moment'
import Button from '@material-ui/core/Button'

import Dialog from '@material-ui/core/Dialog'
import DialogActions from '@material-ui/core/DialogActions'
import DialogContent from '@material-ui/core/DialogContent'
import DialogTitle from '@material-ui/core/DialogTitle'
import TextField from '@material-ui/core/TextField'
const axios = require('axios')

// Setup the localizer by providing the moment (or globalize) Object
// to the correct localizer.
const localizer = BigCalendar.momentLocalizer(moment) // or globalizeLocalizer
function isNumber(n) {
  return !isNaN(parseFloat(n)) && !isNaN(n - 0)
}

class Coworking extends Component {
  constructor(props) {
    super(props)
    this.state = {
      id: props.id,
      email: props.email,
      verified: props.verified,

      name: null,
      basicInfo: null,
      schedule: null,
      activeId: '1',

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') {
    require('moment/locale/vi.js');
  } else {
    require('moment/locale/vi.js');
  }
  
  const localizer = BigCalendar.momentLocalizer(moment) // or globalizeLocalizer
  return (

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.css";
import qs from "query-string";
import "../App.css";
import "react-big-calendar/lib/css/react-big-calendar.css";
import BigCalendar from "react-big-calendar";
import profile from "../Images/profile.jpg";
import profileBG from "../Images/profile-header.png";
import moment from "moment";
import { Link } from "react-router-dom";
// Setup the localizer by providing the moment (or globalize) Object
// to the correct localizer.
const localizer = BigCalendar.momentLocalizer(moment); // or globalizeLocalizer
function isNumber(n) {
  return !isNaN(parseFloat(n)) && !isNaN(n - 0);
}
class Member extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: props.id,
      email: props.email,
      verified: props.verified,
      name: null,
      basicInfo: null,
      certification: null,
      calendar: null,
      memberSince: null,
      expiryDate: null,

import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { StyledBigCalendar } from '../../components/UI/Elements';
import { momentLocalizer } from 'react-big-calendar'
import moment from 'moment'
import 'react-big-calendar/lib/css/react-big-calendar.css';
const localizer = momentLocalizer(moment)


const CalendarInstance = (props) => {
  return (
    <div style="{{">
       new Date(event.start)}
        endAccessor={(event) =&gt; new Date(event.end)}
        selectable={props.selectable}
        popup={props.popup}
        onSelecting={(range) =&gt; console.log(range)}
        onSelectSlot={(range) =&gt; {</div>

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
    
        const idx = events.indexOf(event)

render() {
    const { date } = this.props;
    const localizer = BigCalendar.momentLocalizer(moment);

    const events = [
      //sample traffic
      {
        show_details: {
          guests: [null],
          title: 'Legal ID',
          summary: 'Late night freeform radio',
          description:
            '<p>This freeform show makes room for everything, combining the aesthetics of the Morning and Afternoon shows and leaving the door open for more extreme and intense audio excursions.</p>',
          producer: null,
          host: null,
          custom: {
            record_audio: '1',
            url: 'sleepless',
            source: 'KGNU',

import React, { useState } from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import BigCalendar from 'react-big-calendar'

import Details from './details'
import './styles.css'
import 'react-big-calendar/lib/css/react-big-calendar.css'
const localizer = BigCalendar.momentLocalizer(moment)

function Calendar({ events }) {
  const [eventInfo, setEventInfo] = useState(null)

  const clearEventInfo = () => setEventInfo(null)

  const handleSelectEvent = (event, { pageX, pageY }) => {
    if (eventInfo) {
      clearEventInfo()
      return
    }

    setEventInfo({
      event,
      position: { x: pageX, y: pageY },
    })

import BigCalendar from 'react-big-calendar'
import moment from 'moment'
import React from 'react'
import { Divider, Modal, Button, Transition } from 'semantic-ui-react'
import { connect } from 'react-redux'
import { formatSummary } from '../../services/formatting'
import { addEpisode, removeEpisode, fetchMyLineup } from '../../actions/episodes'
import { addShow, fetchOnTonight } from '../../actions/shows'
require('react-big-calendar/lib/css/react-big-calendar.css')

BigCalendar.momentLocalizer(moment)


class ShowCalendar extends React.Component {
  state = { open: false }

  componentDidMount() {
    const userId = localStorage.getItem("id")
    this.props.fetchMyLineup(userId)
    this.props.fetchOnTonight()
  }

  handleAdd = (event, episode) => {
    event.preventDefault()
    let show = episode.episode.episode.show
    this.props.addShow(show)
    let ep = JSON.stringify({episode: episode.episode.episode, show_id: show.id})

import React, { Component } from 'react';
import { translate } from 'egov-common-utility';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';
import { connect } from "react-redux";
import _ from "lodash";


BigCalendar.momentLocalizer(moment);

export default class UiCalendar extends Component {
    constructor(props) {
        super(props);
    }

    renderCalendar = (item) => {
        let allViews = Object.keys(BigCalendar.Views).map(k => {
            return BigCalendar.Views[k]
        })
        switch (this.props.ui) {
            case 'google':
                return (
                    <div>
                        </div>