react-big-calendar: Start week from Monday instead of Sunday? (localizer not working)

I’m not sure but this seems that it’s not working anymore and there is a bit of inconsistency from docs and github repo.

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

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

// Setup the localizer by providing the moment (or globalize) Object
// to the correct localizer.
BigCalendar.momentLocalizer(moment); // or globalizeLocalizer

I tried this also with moment.locale('en-GB') before passing the object.

Then I checked the master repo and seems different:

BigCalendar.setLocalizer(
  BigCalendar.momentLocalizer(moment)
);

Both of them are not working for me anyway, the week is always starting on Sunday when it’s supposed to start on Monday.

Which one is supposed to be correct?

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 16 (4 by maintainers)

Most upvoted comments

Found the issue, for some reason using webpack it’s not importing the locales so it always default to en which is en-us not en-gb

This is the fix:

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

+44

mtt87 on Jun 5, 2017

for me only the following worked:

import moment from 'moment';
import BigCalendar from 'react-big-calendar';
moment.locale("es-es", {
	week: {
		dow: 1 //Monday is the first day of the week.
	}
});
BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));

danadn on Jul 29, 2018

Please, mind that in your proposal (that, by the way, fixed my problem), your startOfWeek property doesn’t return a thing. The correct code would be:

  // ...

  startOfWeek: ()=> startOfWeek(new Date(), { weekStartsOn: 0 }),
  // ...

gdpdils on Nov 7, 2022

you can setup start week in package date-fns for all language by way.

import startOfWeek from 'date-fns/startOfWeek’import getDay from 'date-fns/getDay’const locales = { ‘en-US’: require(‘date-fns/locale/en-US’), }const localizer = dateFnsLocalizer({ format, parse, startOfWeek: ()=> { startOfWeek(new Date(), { weekStartsOn: 0 }) }, getDay, locales, })

with 0 - Sunday 1 - Monday …

Vào 22:01, Th 2, 30 thg 11, 2020 Petar Ćevriz notifications@github.com đã viết:

for me only the following worked:

import moment from ‘moment’; import BigCalendar from ‘react-big-calendar’; moment.locale(“es-es”, { week: { dow: 1 //Monday is the first day of the week. } }); BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));

How can something like this be done in date-fns?

you can add props for Calendar <Calendar … culture="en-GB />

Thank you!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/jquense/react-big-calendar/issues/419#issuecomment-735838508, or unsubscribe https://github.com/notifications/unsubscribe-auth/AM757B2DMFP4XXBVED7LVYTSSOXTFANCNFSM4DNIABCA .

hungpv-2039 on Nov 30, 2020

Hello,

I am using moment to set locale as well and this is working for me:

moment.locale('cs');
BigCalendar.momentLocalizer(moment);

Hope it helps…

martinnov92 on Jun 5, 2017

for me only the following worked:

import moment from 'moment';
import BigCalendar from 'react-big-calendar';
moment.locale("es-es", {
	week: {
		dow: 1 //Monday is the first day of the week.
	}
});
BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));

How can something like this be done in date-fns?

you can add props for Calendar <Calendar … culture="en-GB />

hungpv-2039 on Nov 23, 2020

for me only the following worked:
import moment from 'moment';
import BigCalendar from 'react-big-calendar';
moment.locale("es-es", {
	week: {
		dow: 1 //Monday is the first day of the week.
	}
});
BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));
How can something like this be done in date-fns?
you can add props for Calendar <Calendar … culture="en-GB />

Thank you!

prozdrljivac on Nov 30, 2020