0

I am using the following module: react-big-calendar

In the project in which I am using it, user has the possibility to change the system language.

I would like to make the days of the week change according to the language selected by the user.

Link: Codesanbox

Code:

const React = require("react");
const { Calendar, momentLocalizer } = require("react-big-calendar");
const moment = require("moment");
const localizer = momentLocalizer(moment);

const ReportCalendar = ({ eventList }) => {
  return (
    <Calendar
      localizer={localizer}
      events={eventList}
      startAccessor="start"
      endAccessor="end"
      style={{ height: "550px", width: "850px" }}
    />
  );
};
module.exports = ReportCalendar;
Paul
  • 3,644
  • 9
  • 47
  • 113

1 Answers1

1

First, If you are using I18n in your project you have to take current language of your system in i18n you can use i18n.language for this process and you can import moment localize as you want, For example in my case i want to change calendar localization with english and turkish. My i18n.language property return two value for my language of system en,tr;

import 'moment/locale/en-gb';
import 'moment/locale/tr';


const ReportCalendar = ({ eventList }) => {
return (
   <Calendar
     culture={i18n.language}
     localizer={localizer}
     events={eventList}
     startAccessor="start"
     endAccessor="end"
     style={{ height: "550px", width: "850px" }}
 />

); };

Your code will look like above. You can use culture property to change language according to your app's language

Serhat Kaya
  • 49
  • 3