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

[mtt87]

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?

[martinnov92]

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...

[mtt87]

@martinnov92 what versions are you using?
I have react-big-calendar: 0.14.0 and moment: 2.18.1
And that doesn't work for me, the first day of the week is always Sunday 😢

[martinnov92]

@mtt87 Hmm that is odd. I am using moment 2.17.1 and same version of react-big-calendar as you.

[mtt87]

@martinnov92
Do you see something wrong here by any chance?

import React, { Component } from 'react';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';

moment.locale('en-GB');
BigCalendar.momentLocalizer(moment);

const Calendar = () =>
  <BigCalendar
    messages={{
      date: t('date'),
      time: t('time'),
      event: t('event'),
      allDay: t('allDay'),
      week: t('week'),
      day: t('day'),
      month: t('month'),
      previous: t('previous'),
      next: t('next'),
      yesterday: t('yesterday'),
      tomorrow: t('tomorrow'),
      today: t('today'),
      agenda: t('agenda'),
    }}
    eventPropGetter={e => ({ style: { backgroundColor: '#89C540', borderColor: '#777' } })}
    culture="en-GB"
    events={couponRules}
    defaultView='week'
    views={['week','agenda']}
    step={30}
    onNavigate={(newDate) => renderEventsOnChange(newDate)}
    onView={(view) => {
      if(view === 'week') {
        setTimeout(() => {
          document.querySelector('.rbc-time-header').childNodes[1].remove();
        }, 0);
      }
    }}
    timeslots={2}
    components={{
      eventWrapper: SingleEventWrapped,
      week: {
        event: EventWeekComponent,
      },
      agenda: {
        event: EventAgendaComponent,
      }
    }}
    scrollToTime={new Date()}
    formats={{
      timeGutterFormat: (date, culture, localizer) => 
        localizer.format(date, 'HH:mm', culture),
      eventTimeRangeFormat: ({ start, end }, culture, localizer) => {
        let s = localizer.format(start, 'HH:mm', culture);
        let e = localizer.format(end, 'HH:mm', culture);
        return `${s} - ${e}`;
      },
      agendaTimeRangeFormat: ({ start, end }, culture, localizer) => {
        let s = localizer.format(start, 'HH:mm', culture);
        let e = localizer.format(end, 'HH:mm', culture);
        return `${s} - ${e}`;
      },
      dayRangeHeaderFormat: ({ start, end }, culture, localizer) => {
        let s = localizer.format(start, 'MMM DD', culture);
        let e = localizer.format(end, 'MMM DD', culture);
        return `${s} - ${e}`;
      }          
    }}
  />;

export default translate('Calendar')(Calendar);

[martinnov92]

@mtt87 I don´t know sorry, I tried your code and it is not working for me either, it just weird that it is ok in my app...

[mtt87]

At this point it could be

• the new version of moment
• a conflict with one of the options props for BigCalendar

I remember it was working in the past few months then I've updated something and now it doesn't work anymore, I'll do a bit of testing.

[mtt87]

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';

[eminx]

For me this doesn't work still. When I assign any of the locales, say en-GB or sv, although the language change happens; the start day of the week is still Sunday.

Any suggestions?

Yes, I tried both of the suggested ways and even more.

[jquense]

@eminx please put together a repro using the sandbox template and open a new issue if you have a bug, thanks!

[posijuur]

It is working for me

moment.locale('en-gb');
BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));

[danadn]

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

[prozdrljivac]

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?

[hungpv-2039]

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
...
culture="en-GB
/>

[prozdrljivac]

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
...
culture="en-GB
/>

Thank you!

[hungpv-2039]

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 [e-mail] đã
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
...
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
.