reactjs - 如何将所有反应大日历更改为法语？

Question

我尝试添加culture='fr'，BigCalendar但是，我得到一个错误。

我的代码是：

   import moment from "moment";
    BigCalendar.momentLocalizer(moment);

        export default class Agenda extends Component {
    constructor(props){
        super(props);
        this.state = {
          events: [
            {
              title: 'Calendar 1',
              start: new Date(2019, 2, 19, 15, 0, 0), //03:00 PM
              end: new Date(2019, 2, 19, 16, 30, 0), //04:30 PM
            },
            {
              title: 'Calendar 2 ',
              start: new Date(2019, 2, 20, 12, 30, 0), //08:30 AM
              end: new Date(2019, 2, 20, 18, 0, 0), //18:00 PM      
            },
            {
              title: 'Calendar 3 ',
              start: new Date(2019, 2, 22, 10, 30, 0), //10:30 AM
              end: new Date(2019, 2, 22, 19, 0, 0), //07:00 PM      
            },
            {
              title: 'Calendar 4 ',
              start: new Date(2019, 2, 23, 7, 30, 0), //08:30 AM
              end: new Date(2019, 2, 23, 11, 0, 0), //11:00 AM      
            },
          ],
    }


render() {
     return (
    <div>
     <BigCalendar
                selectable
                events={this.state.events}
                defaultDate={new Date(2019, 2, 19)}
                defaultView="week"
                culture = 'fr'
                style={{ height: "100vh" }}
              />
    </div>
    )
    }
    };

当我运行它时，我得到：

我该如何解决？

Answer 1

我通过添加import 'moment/locale/fr';我的组件来解决这个问题。

Answer 2

你可以这样做，我强烈建议你使用“时刻”库它使事情变得更容易在日期方面你可以翻译成你选择的语言

import React, { Fragment, useState } from 'react'
import { Calendar, momentLocalizer } from 'react-big-calendar'
import "react-big-calendar/lib/css/react-big-calendar.css";
import moment from "moment";
require('moment/locale/es.js')
const localizer = momentLocalizer(moment);

function Citas() {
    const [Events, setEvents] = useState([
        {
          start: moment().toDate(),
          end: moment()
            .add(1, "days")
            .toDate(),
          title: "Some title"
        }
      ]);
    return (
        <Fragment>
            <div className="font-weight-bold mb-2 px-3 shadow-sm p-2 bg-light">CITAS </div>
            <div className="px-3">mas datos sobre citas
                <Calendar
                   localizer={localizer}
                   defaultDate={new Date()}
                   defaultView="month"
                   events={Events}
                   style={{ height: "100vh" }}
                   messages={{
                    next: "sig",
                    previous: "ant",
                    today: "Hoy",
                    month: "Mes",
                    week: "Semana",
                    day: "Día"
                  }}
                />
            </div>
        </Fragment>
    )
}

export default Citas

Answer 3

您发布的错误可能是因为您没有将本地化程序作为道具传递给 BigCalendar。要解决这个问题，您可以尝试分配一个变量

const localizer = BigCalendar.momentLocalizer(moment);

然后将其作为道具传递

<BigCalendar
  localizer={localizer}
  ...
/>

希望能帮助到你！

参考：http: //intljusticemission.github.io/react-big-calendar/examples/index.html#intro

Answer 4

这适用于我在西班牙语中使用react-big-calendar.

import { Calendar, momentLocalizer } from "react-big-calendar"
import moment from "moment"
import 'moment/locale/es'; 
//...
const localizer = momentLocalizer(moment) 
//...
  <DragAndDropCalendar localizer={localizer} /*otherprops*/ />