How to change all react-big-calendar to French?

Question

I try to add culture='fr' on the BigCalendar but, I get an error.

My code is:

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

When I run it, I get :

How can I fix that ?

score 10 · Accepted Answer · answered Mar 22 '19 at 08:42

10

I resolve that by adding import 'moment/locale/fr'; on my component.

answered Mar 22 '19 at 08:42

Ichrak Mansour

1,850
11
34
61

4

the toolbar language stays in English rather than the language requested – Ray Dec 29 '19 at 17:11
not enough, you need culture props check my comments – Canonne Gregory Nov 16 '22 at 19:35

score 5 · Answer 2 · answered Aug 30 '20 at 05:53

You could do it this way, I highly recommend you use the "moment" library It makes things much easier in terms of dates apart you can translate to the language of your choice

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

score 2 · Answer 3 · edited Jan 08 '21 at 15:08

2

This works for me in Spanish using 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*/ />

edited Jan 08 '21 at 15:08

phoenixstudio

1,776
1
14
19

answered Jan 07 '21 at 23:54

Jordi Parra Crespo

81
2

score 2 · Answer 4 · answered Nov 16 '22 at 19:34

you need provide the culture props :

import { Calendar, dateFnsLocalizer } from "react-big-calendar";
import format from "date-fns/format";
import parse from "date-fns/parse";
import startOfWeek from "date-fns/startOfWeek";
import getDay from "date-fns/getDay";
import fr from "date-fns/locale/fr";

const messages = {
    allDay: "Tous les jours",
    previous: "Précédent",
    next: "Suivant",
    today: "Aujourd'hui",
    month: "Mois",
    week: "Semaine",
    day: "Jour",
    agenda: "Agenda",
    date: "Date",
    time: "Heure",
    event: "Evenement",
};
const locales = {
    fr: fr,
};
const localizer = dateFnsLocalizer({
    format,
    parse,
    startOfWeek,
    getDay,
    locales,
});

..........

<Calendar
       localizer={localizer}
       culture="fr"

Thanks!! Your solution solved my problem using DragAndDropCalendar@16.0.1 — Angel Auñón, Aug 09 '23 at 11:34

score 1 · Answer 5 · answered Mar 21 '19 at 18:42

1

The error that you posted is likely because you didn't pass localizer as props to the BigCalendar. To fix that, you can try assigning a variable

const localizer = BigCalendar.momentLocalizer(moment);

and then pass it as a prop

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

Hope it helps!

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

answered Mar 21 '19 at 18:42

Ken Yung

44
3

I get the calendar but on English and not on French – Ichrak Mansour Mar 22 '19 at 08:11
you need culture props check my comments ! – Canonne Gregory Nov 16 '22 at 19:35

How to change all react-big-calendar to French?

5 Answers5