How to use react-big-calendar - 10 common examples

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}

toolbar: Toolbar,
                        eventWrapper: EventWrapper,
                    }}
                    dayPropGetter={customDayPropGetter}
                    slotPropGetter={customSlotPropGetter}
                    defaultDate={new Date()}
                    resources={getResources()}
                    resourceAccessor={event => event.resourceId}
                    resourceIdAccessor={resource => resource.id}
                    resourceTitleAccessor={resource => resource.title}
                />
            );
        }
    }

    const localizer = globalizeLocalizer(globalize);
    ReactDOM.render(, document.body);
}

// Test fixtures
function getEvents(): CalendarEvent[] {
    const events: CalendarEvent[] = [
        new CalendarEvent('All Day Event', new Date(2015, 3, 0), new Date(2015, 3, 0), true),
        new CalendarEvent('Long Event', new Date(2015, 3, 7), new Date(2015, 3, 10)),
        new CalendarEvent('DTS STARTS', new Date(2016, 2, 13, 0, 0, 0), new Date(2016, 2, 20, 0, 0, 0)),
        new CalendarEvent('DTS ENDS', new Date(2016, 10, 6, 0, 0, 0), new Date(2016, 10, 13, 0, 0, 0)),
        new CalendarEvent('Some Event', new Date(2015, 3, 9, 0, 0, 0), new Date(2015, 3, 9, 0, 0, 0)),
        new CalendarEvent('Conference', new Date(2015, 3, 11), new Date(2015, 3, 13), undefined, 'Big conference for important people'),
        new CalendarEvent('Meeting', new Date(2015, 3, 12, 10, 30, 0, 0), new Date(2015, 3, 12, 12, 30, 0, 0), undefined, 'Pre-meeting meeting, to prepare for the meeting'),
        new CalendarEvent('Lunch', new Date(2015, 3, 12, 12, 0, 0, 0), new Date(2015, 3, 12, 13, 0, 0, 0), undefined, 'Power lunch'),
        new CalendarEvent('Meeting', new Date(2015, 3, 12, 14, 0, 0, 0), new Date(2015, 3, 12, 15, 0, 0, 0)),
        new CalendarEvent('Happy Hour', new Date(2015, 3, 12, 17, 0, 0, 0), new Date(2015, 3, 12, 17, 30, 0, 0), undefined, 'Most important meal of the day'),

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,

date.getMinutes() > 0
                                        ? ''
                                        : localizer.format(
                                              date,
                                              'h A',
                                              culture
                                          ),
                                dayFormat: 'ddd',
                            }}
                            defaultView={BigCalendar.Views.WORK_WEEK}
                            views={[BigCalendar.Views.WORK_WEEK]}
                            step={15}
                            timeslots={2}
                            defaultDate={new Date(2018, 0, 1)}
                            min={new Date(2018, 0, 1, 7)}
                            max={new Date(2018, 0, 1, 23)}
                            events={this.getEventsForCalendar()}
                            eventPropGetter={Calendar.eventStyleGetter}
                            showMultiDayTimes={false}
                            components={{ event: CustomEvent({ classes }) }}
                            onSelectEvent={this.handleEventClick}
                        />
                        {/**/}
                        {/*//

date.getMinutes() > 0
                    ? ""
                    : localizer.format(date, "h A", culture),
                dayFormat: "ddd"
              }}
              defaultView={BigCalendar.Views.WORK_WEEK}
              views={["work_week"]}
              step={15}
              timeslots={2}
              defaultDate={new Date(2018, 0, 1)}
              min={new Date(2018, 0, 1, 7)}
              max={new Date(2018, 0, 1, 23)}
              events={this.props.classEventsInCalendar}
              eventPropGetter={Calendar.eventStyleGetter}
              showMultiDayTimes={false}
              components={{ event: CustomEvent }}
              onSelectEvent={event =>
                this.props.onClassDelete(
                  event.courseID,
                  event.courseTerm,
                  event.customize
                )

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 = []

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