9

use react-big-calendar.js and moment.js

setLocalizer code

moment.locale('ko');
BigCalendar.setLocalizer(
  BigCalendar.momentLocalizer(moment)
);

first day of the week is always Sunday

I want to see it from Monday.

The associated url.

https://github.com/intljusticemission/react-big-calendar/issues/28

But there is no example.

what should I do?

find answer

moment.locale('ko',{
  week:{
    dow : 1
  }
});

http://momentjs.com/docs/#/i18n/changing-locale/

kyunghwanjung
  • 490
  • 6
  • 17

1 Answers1

17

I also wanted to change react-big-calendar first day of week to Monday.
Thank you for your question, because it helped me to find a way of changing it.
Try the following code snippet is from my project:

moment.locale('ko', {
    week: {
        dow: 1,
        doy: 1,
    },
});

BigCalendar.momentLocalizer(moment);

So the full extract looks something like:

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

moment.locale('ko', {
    week: {
        dow: 1,
        doy: 1,
    },
});
BigCalendar.momentLocalizer(moment);

const Main = (props) => <BigCalendar
    events={props.events}
    startAccessor={'start'}
    endAccessor={'end'}
    titleAccessor={'title'}
    allDayAccessor={'allDay'}
    onNavigate={props.onNavigate}
/>;

Hope that helps.

Roman Kotov
  • 1,039
  • 1
  • 15
  • 13
  • Thanks @Roman. This works for me. What is `ko`, `dow` and `doy` means in `moment.locale`? – Hemantha Dhanushka Jan 20 '20 at 06:25
  • 3
    @HemanthaDhanushka. In this context 'ko' represents the required locale name (Korean in this case). [List of available locales](https://stackoverflow.com/a/55827203/8013693). 'dow' represents, that the week will start with Monday. 'doy' works together with 'dow' to determine first week of the year. More informtion about 'doy' can be found [here](https://momentjs.com/docs/#/customization/dow-doy/). – Roman Kotov Feb 10 '20 at 09:57