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

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 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 prabeen04 / ant-dashboard / src / container / calendar / calendarInstance.js View on Github external
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>
github webkom-co / airframe-next / pages / interface / calendar.js View on Github external
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)
github codefordenver / Comrad / client / src / components / Traffic / TrafficCalendar.js View on Github external
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',
github san-diego-tech-hub / sdth-site / src / components / calendar / index.js View on Github external
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 },
    })
github mthorry / tv-lineup-app / frontend-my-lineup-app / src / components / shows / ShowCalendar.js View on Github external
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})
github egovernments / egov-services / npm-modules / ui-react-framework / lib / components / UiCalendar.js View on Github external
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) =&gt; {
        let allViews = Object.keys(BigCalendar.Views).map(k =&gt; {
            return BigCalendar.Views[k]
        })
        switch (this.props.ui) {
            case 'google':
                return (
                    <div>
                        </div>