React-big-calendar: Cannot read property '0' of undefined

[rottenoats]

Do you want to request a _feature_ or report a _bug_?

Bug

What's the current behavior?

https://stackoverflow.com/questions/50210199/react-big-calendar-cannot-read-property-0-of-undefined

While implementing the basic project, the back and next buttons do not work. I get the following error:

Month.js:217 Uncaught TypeError: Cannot read property '0' of undefined
at MonthView.renderHeaders (Month.js:217)
at MonthView.render (Month.js:209)
at finishClassComponent (react-dom.development.js:8389)
at updateClassComponent (react-dom.development.js:8357)
at beginWork (react-dom.development.js:8982)
at performUnitOfWork (react-dom.development.js:11814)
at workLoop (react-dom.development.js:11843)
at HTMLUnknownElement.callCallback (react-dom.development.js:100)
at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
at invokeGuardedCallback (react-dom.development.js:187)

Upon closer inspection it fails here:

MonthView.prototype.renderHeaders = function renderHeaders(row, format, culture) {
    //failes here.
    var first = row[0];
    var last = row[row.length - 1];
    var HeaderComponent = this.props.components.header || _Header2.default;

    return _dates2.default.range(first, last, 'day').map(function (day, idx) {
      return _react2.default.createElement(
        'div',
        { key: 'header_' + idx, className: 'rbc-header' },
        _react2.default.createElement(HeaderComponent, {
          date: day,
          label: _localizer2.default.format(day, format, culture),
          localizer: _localizer2.default,
          format: format,
          culture: culture
        })
      );
    });
  };

After playing around with the project, it would appear the current date is not correctly set. Once I click on the button "today" it works as intended.

My code:

import React, {Component} from 'react';
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.setLocalizer(BigCalendar.momentLocalizer(moment))

export default class CalendarComponent extends Component {

    constructor(props){
        super(props);



        this.state = {
            events: []
        }

    }

    render(){
        return (
            <div style={{flex: 1}}>
                <BigCalendar
                    events={this.state.events}
                    startAccessor='startDate'
                    endAccessor='endDate'
                />
            </div>
        );
    }
}

What's the expected behavior?

Expected to have working back and next buttons to change dates.

[SLYtiger16]

I believe you need to set a date prop or defaultDate prop to solve this
... I experienced this as well and solved it with date prop:

                <BigCalendar
                    events={this.state.events}
                    startAccessor='startDate'
                    endAccessor='endDate'
                    date={moment().toDate()}
                />

[rottenoats]

@SLYtiger16 I had also tried doing that but it throws this error:

warning.js:33 Warning: Failed prop type: You have provided a date prop to Calendar without an onNavigate handler. This will render a read-only field. If the field should be mutable use defaultDate. Otherwise, set onNavigate
in Uncontrolled(Calendar) (created by CalendarComponent)
in CalendarComponent (created by main)
in main (created by Route)
in Route (created by DashboardComponent)
in div (created by DashboardComponent)
in div (created by DashboardComponent)
in DashboardComponent (created by App)
in MuiThemeProvider (created by App)
in App
in Router (created by BrowserRouter)
in BrowserRouter

I haven't looked at the onNavigate method yet, so I'll try implementing it and see if that solves the problem.

EDIT: After implementing it, it would seem I need to implement the date changes when the button is clicked, which I guess isn't how this whole project is supposed to work by default.

[rottenoats]

According to the documentation, if date isn't specified the default value is used.

date : controlled by: onNavigate, initialized with: defaultDate
The current date value of the calendar. Determines the visible view range

type: Date
default: now

[rottenoats]

@SLYtiger16 I tried with defaultDate prop and it worked. Thanks.

<div style={{flex: 1}}>
                <BigCalendar
                    events={this.state.events}
                    startAccessor='startDate'
                    endAccessor='endDate'
                    defaultDate={moment().toDate()}
                />
</div>

Though I don't believe it should be specified (?), and it needs to be mentioned somewhere in the documentation other than the example source in the docs.

[FranciscoGileno]

+1