Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set momentLocalizer (moment.js) for react-big-calendar (fullcalendar.js)?

I'm using react-big-calendar And need help to implement localization which is required The example from git

import BigCalendar from 'react-big-calendar';
import moment from 'moment';

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

My code

var moment = require('moment');
var momentLocalizer = require('react-widgets/lib/localizers/moment');
import BigCalendar from 'react-big-calendar';

BigCalendar.setLocalizer(
    BigCalendar.momentLocalizer(moment.locale('en'))
);

let MyCalendar = props => (
    <div>
        <BigCalendar

        />
    </div>
);

Whatever I tried it doesn't work

Uncaught TypeError: moment is not a function

like image 678
victor zadorozhnyy Avatar asked Apr 09 '16 08:04

victor zadorozhnyy


1 Answers

I had to import the locale I wanted to get the calendar in the correct locale.

Notice the import 'moment/locale/nb';.

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

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

class Calendar extends Component {
  constructor() {
    super();
    this.state = {
      events: [],
    };
  }

  render() {
    return (
      <div className="Calendar">
        <BigCalendar
          events={this.state.events}
        />
      </div>
    );
  }
}

This is for version 0.17.0 of react-big-calendar.

like image 141
Mika Sundland Avatar answered Nov 23 '22 22:11

Mika Sundland