Attempted to implement react-calendar and the back and next buttons (to change dates) are throwing this error:
Uncaught TypeError: Cannot read property '0' of undefined
It WAS previously working and I haven't changed anything within my code, so I'm quite confused.
Why am I unable to use the next and back buttons (to change dates) on react-big-calendar?
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.momentLocalizer(moment); // or globalizeLocalizer
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>
);
}
}
It seems to be failing at this line within the library:
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
})
);
});
};
Applying a defaultDate property solved this problem.
<div style={{flex: 1}}>
<BigCalendar
events={this.state.events}
startAccessor='startDate'
endAccessor='endDate'
defaultDate={moment().toDate()}
/>
</div>
https://github.com/intljusticemission/react-big-calendar/issues/834