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

/* @flow */
import React from 'react';
import PropTypes from 'prop-types';

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 => (
    
);

import RemindersActions from "../actions/RemindersActions";
import RemindersStore from "../stores/RemindersStore";
import $ from "jquery";
import PaperlessComponent from "../components/PaperlessComponent";
import ToolbarActions from "../actions/ToolbarActions";
import BigCalendar from "react-big-calendar";
import moment from "moment";

// IPC hack (https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c#.gi5l2hzbq)
const electron = window.require("electron");
const fs = electron.remote.require("fs");
const remote = electron.remote;
const dialog = remote.dialog;
const ipcRenderer = electron.ipcRenderer;

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

class Reminders extends React.Component {
	// CONSTRUCTOR
	constructor(props) {
		super(props);
		this.state = RemindersStore.getState();
		this.onChange = this.onChange.bind(this);
	}

	// COMPONENT DID MOUNT
	componentDidMount() {
		$(window).trigger("tabs.replace", {
			idx: 0,
			tab: {
				title: "Reminders",
				route: "/reminders"

import React from 'react'
import moment from 'moment'
import * as R from 'ramda'
import BigCalendar from 'react-big-calendar'

import Event from 'components/Event'
import Layout from 'components/Layout'
import Loading from 'components/LoadingIcon'
import Toolbar from 'components/Toolbar'

import 'style-loader!css-loader!react-big-calendar/lib/css/react-big-calendar.css'

const localizer = BigCalendar.momentLocalizer(moment)
BigCalendar.setLocalizer(localizer)

// BigCalendar needs inline styles :(
const styles = {
  cell: {
    backgroundColor: 'transparent',
    color: '#555',
  },
}

// Custom components given to BigCalendar
const calendarComponents = (currentUser, offices, filters, filterActions) => {
  const filtersWithActions = {
    showFilter: {
      value: filters.showFilter.value,
      onChange: filterActions.changeShowFilter,
    },

import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";

/* eslint-disable */
import { render } from "react-dom";
import React from "react";
/* eslint-enable */
import BigCalendar from "react-big-calendar";
import moment from "moment";
import { EventsMixin } from "../../mixins/events-mixin";

import "../../resources/ha-style";

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

const DEFAULT_VIEW = "month";

class HaBigCalendar extends EventsMixin(PolymerElement) {
  static get template() {
    return html`
      
      <style>
        div#root {
          height: 100%;
          width: 100%;
        }
      </style>

top: "50%",
    left: "50%",
    width: "500px",
    right: "auto",
    bottom: "auto",
    transform: "translate(-50%, -50%)"
  }
};

const GAS_LIMIT = 300000;

const CONTRACT_ADDRESSES = {
  ropsten: "0x2c1492ab59c787ffe302b26e9eb425c51a77cddd"
};

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

class App extends SugarComponent {
  state = {
      slots: [],
      pricePerSecond: "100000000000000000",
      pricePerHour: "100000000000000000",
      pendingTx: null
  };

  async refreshDapp() {
    const { contractInstance } = this.state;
    const pricePerHour = await contractInstance.methods.pricePerHour().call();
    const pricePerSecond = await contractInstance.methods.pricePerSecond().call();
    const numberOfSlots = await contractInstance.methods.numberOfSlots().call();
    let slots = [];
    for (var i = 0; i < numberOfSlots; i++) {

},
    date: {
        fontSize: 16,
        marginBottom: 15,
        display: 'block',
        fontWeight: 400,
    },
    container: {
        position: 'relative',
    },
    spinner: {
        zIndex: 1000,
    },
};

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

class WorkoutsCalendar extends Component {
    state = initialState;

    componentWillMount() {
        this.updateDimensions();
        this.props.setTitle('Workouts');

        this.setState({ loadApi: { isExecuting: true }}, () => {
            Promise.all([
                this.props.fetchWorkouts(),
                this.handleUpdate(new Date(), 'month', 'loadApi'),
            ])
            .then(response => {
                this.setState({ loadApi: { isExecuting: false, isErrored: false }});
            }, error => {

render() {

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

    return (
      <div>
        
        <div>
          <menu>
          <div>
            <h4>Add your meetings / busy times on this calendar.</h4>
            </div></menu></div></div>

import React from 'react';
import {observer} from 'mobx-react';
import moment from 'moment';
import _ from 'lodash';
import {Button} from 'react-bootstrap'


import BigCalendar from 'react-big-calendar';
require('react-big-calendar/lib/css/react-big-calendar.css');
BigCalendar.setLocalizer(
    BigCalendar.momentLocalizer(moment)
);

const eventStyleGetter = (event, start, end, isSelected) => {
    return {
        style: {
            backgroundColor: event.shift.color,
            borderRadius: '2px',
            color: 'black',
            border: '0px',
            display: 'block'
        }
    };
}

const Event = ({event: {shift, onEdit, onDelete}}) =>