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

To help you get started, we’ve selected a few react-big-calendar examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github DefinitelyTyped / DefinitelyTyped / types / react-big-calendar / react-big-calendar-tests.tsx View on Github external
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}
github DefinitelyTyped / DefinitelyTyped / types / react-big-calendar / react-big-calendar-tests.tsx View on Github external
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'),
github jyhwng / dashboard / src / components / Calendar / DateRange.js View on Github external
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) =>
github SE-GUC / Access-denied / client / src / Screens / Coworking.js View on Github external
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',
github revskill10 / next-template / modules / core / components / calendars / big-calendar.js View on Github external
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 (
github SE-GUC / Access-denied / Root / Frontend / src / Screens / Member.js View on Github external
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,
github the-rango / AntAlmanac / client / src / components / Calendar / Calendar.js View on Github external
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}
                        />
                        {/**/}
                        {/*//
github the-rango / AntAlmanac / src / components / Calendar / Calendar.js View on Github external
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
                )
github Tim1023 / react-scheduler-firebase / src / modules / web / pages / dashboard / Calendar.js View on Github external
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 = []
github gazab / togglol / src / routes / Togglol / components / Calendar / TogglolCalendar.js View on Github external
/* @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 => (
    
);