react-big-calendar ERROR: Invalid prop `slotStart` of type `date` supplied to `Popup`, expected `number`

Question

I'm using the prop "popup" for react-big-calendar and I'm getting the above error in the console upon clicking the "+x more" link. My onEventClick function works by routing me to "calendar/" but I'm not sure what I'm missing here. I read through some documentation but couldn't find the right example to solve the issue. I suspect it has something to do with "moment," or improper formatting of the date object.

import React from "react";
import BigCalendar from "react-big-calendar";
import moment from "moment";
import "react-big-calendar/lib/css/react-big-calendar.css";

const localizer = BigCalendar.momentLocalizer(moment);
let allViews = Object.keys(BigCalendar.Views).map(k => BigCalendar.Views[k]);

class Calendar extends React.Component {

  onEventChange = event => {
    this.onEventClick(event);
  };

  onEventClick = event => {
    this.setState({
      endDate: moment(event.end.toLocaleString()).format("YYYY-MM-DDTHH:mm"),
      startDate: moment(event.start.toLocaleString()).format("YYYY-MM-DDTHH:mm"),
      eventName: event.name
    });
    this.props.history.push("calendar/" + event.eventId);
  };

  render () {
    function Event({ event }) {
      return (
        <span id="eventTitle">
          {event.number +
            " - " +
            event.name}
        </span>
      );
    }
    return(
      <React.Fragment>
        <div style={{ height: 700 }}>
          <BigCalendar
            localizer={localizer}
            toolbar={true}
            events={this.state.events}
            popup
            selectable
            onSelectSlot={(slotInfo) => alert(
              `selected slot: \n\nstart ${slotInfo.start.toLocaleString()} ` +
              `\nend: ${slotInfo.end.toLocaleString()}`
            )}
            views={allViews}
            components={{
              event: Event
            }}
            onSelectEvent={event => this.onEventChange(event)}
            eventPropGetter={(event) => {
              let newStyle = {
                backgroundColor: "",
                color: "white",
                borderRadius: "5px",
                border: "none"
              };

              if (event.eventStatusCd === "CL   ") {
                newStyle.backgroundColor = "firebrick";
              }
              return {
                className: "",
                style: newStyle
              };
            }}
          />
        </div>
      </React.Fragment>
    );
  }
}
export default Calendar;

Here's a sample from the "start" property for an event object. This object gets pushed into an array of other event objects:

eventObj.start = new Date(
    Date.parse(
      moment
        .utc(dateCreated)
        .local()
        .format("YYYY-MM-DDTHH:mm")
    )
  );

score 0 · Answer 1 · answered Feb 25 '19 at 15:57

I ran into similar issues, when first implementing. While react-big-calendar uses an internal localizer (in your case it's probably Moment), it still expects that, in the events that you provide it, all start and end dates must be valid JS Date Objects. My suggestion is, rather than running Date.parse(), you do something like:

eventObj.start = moment(dateCreated).local().toDate(); // returns valid JS Date Object

react-big-calendar ERROR: Invalid prop `slotStart` of type `date` supplied to `Popup`, expected `number`

1 Answers1