【问题标题】:How to set momentLocalizer (moment.js) for react-big-calendar (fullcalendar.js)?如何为 react-big-calendar (fullcalendar.js) 设置 momentLocalizer (moment.js)?
【发布时间】:2016-04-09 08:24:09
【问题描述】:

我正在使用react-big-calendar 并且需要帮助来实现所需的本地化 来自 git 的示例

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

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

我的代码

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

无论我尝试过什么都行不通

未捕获的类型错误:时刻不是函数

【问题讨论】:

    标签: javascript reactjs momentjs


    【解决方案1】:

    我必须导入我想在正确的语言环境中获取日历的语言环境。

    注意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>
        );
      }
    }
    

    这是 react-big-calendar 的 0.17.0 版。

    【讨论】:

      【解决方案2】:

      下面是我的代码,它适用于我。如果我想更改本地化,我只需在我的 BigCalendar 上设置 culture 属性。

      import React, { Component } from 'react';
      import 'react-big-calendar/lib/css/react-big-calendar.css'
      import BigCalendar from 'react-big-calendar';
      import moment from 'moment';
      
      BigCalendar.momentLocalizer(moment);
      
      class Calendar extends Component {
          constructor(props, context) {
            super(props, context);
          }
      
          render() {
            return (
              <div>
                <BigCalendar
                  culture='en-GB'
                  events={this.props.tasks}
                  views={['month', 'week']}/>
              </div>
            );
          }
        }
      

      【讨论】:

      • cldr-data and globalize... 那是我必须安装的。感谢您的帮助
      • 我有一个类似的问题:我想要我的 BigCalendar 英文版,但自定义 TimeZone,而不是 Europe/London。我怎样才能做到这一点?
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-05-22
      • 1970-01-01
      • 2018-09-30
      • 1970-01-01
      相关资源
      最近更新 更多