Month and day does not work preview

Do you want to request a feature or report a bug?

Bug

What’s the current behavior?

Code:

...
import BigCalendar from 'react-big-calendar';
import moment from 'moment';
import { getEvents } from '~/services/google-calendar';

import styles from './styles';

moment.locale('pt-BR');
BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));

require('react-big-calendar/lib/css/react-big-calendar.css');

class Contatos extends Component {
  state = {
    events: [],
  };

  componentDidMount() {
    getEvents((events) => {
      this.setState({ events });
    });
  }

  render() {
    const { location } = this.props;

    return (
      <Layout loading={false} title="Agenda" location={location}>
        <BigCalendar events={this.state.events} />
      </Layout>
    );
  }
}

...

What’s the expected behavior?

Should work normally

[igoramos77]

Hello guys, i’m from Brazil, and i want change all react-big-calendar to portuguese-br (pt-BR/ptBR). With lib moment thats works, but, i need use date-fns, and thats not working, someone can help me, please ?

import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import 'moment/locale/pt-br';
const localizer = momentLocalizer(moment);

const messages = {
        allDay: 'Dia Inteiro',
        previous: '<',
        next: '>',
        today: 'Hoje',
        month: 'Mês',
        week: 'Semana',
        day: 'Dia',
        agenda: 'Agenda',
        date: 'Data',
        time: 'Hora',
        event: 'Evento',
        showMore: (total) => `+ (${total}) Eventos`,

<Calendar
    style={{ height: '95%' }}
    eventPropGetter={(event) => {
        return {
            style: {
                backgroundColor: '#3f51b5',
                borderRadius: '8px',
                minHeight: '10px',
            },
        };
    }}
    messages={messages}
    selectable
    localizer={localizer}
    events={events}
    startAccessor="start"
    endAccessor="end"
    onSelectSlot={(slot) => handleOpenDialog(slot)}
    onSelectEvent={(event) => handleOpenEvent(event)}
/>

Using date-fns:

  import { Calendar, dateFnsLocalizer } from 'react-big-calendar';
  
  import {  parse, startOfWeek, getDay } from 'date-fns';
  
  import 'date-fns/locale/pt-BR';
  
  const locales = {
      'pt-BR': require('date-fns/locale/pt-BR'),
  };
  
  const localizer = dateFnsLocalizer({
      format,
      parse,
      startOfWeek,
      getDay,
      locales,
  });

Conseguiu resolver, @GusMartins499? Obrigado!

[jquense]

I’m gonna guess your events start and end dates are not Date objects?