0

Problem

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.

Question

Why am I unable to use the next and back buttons (to change dates) on react-big-calendar?

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

Library error line:

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

1 Answer 1

1

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.