ERROR-реактивного-большого-календаря: неверный объект `slotStart` типа` date` предоставлен для `Popup`, ожидаемый` номер`

Question

Я использую команду "popup" для response-big-calendar и получаю вышеуказанную ошибку в консоли после нажатия на ссылку "+ x more".Моя функция onEventClick работает, направляя меня к «calendar /», но я не уверен, что мне здесь не хватает.Я прочитал некоторую документацию, но не смог найти правильный пример для решения проблемы.Я подозреваю, что это как-то связано с «моментом» или неправильным форматированием объекта даты.

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;

Вот пример из свойства «start» для объекта события.Этот объект помещается в массив других объектов событий:

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

Answer 1

Я столкнулся с подобными проблемами при первой реализации.Несмотря на то, что response-big-calendar использует внутренний локализатор (в вашем случае это, вероятно, Moment), он все еще ожидает, что в предоставленном вами events, все start и end даты должны быть действительным JS Date Objects.Мое предложение, вместо того, чтобы запустить Date.parse(), вы делаете что-то вроде:

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