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

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 ?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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*/ />

Answer 5

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"