3

我正在为 react-big-calendar 使用道具“popup”，单击“+ x more”链接后，我在控制台中收到上述错误。我的 onEventClick 函数通过将我路由到“日历/”来工作，但我不确定我在这里缺少什么。我通读了一些文档，但找不到解决问题的正确示例。我怀疑这与“时刻”或日期对象的格式不正确有关。

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;

这是事件对象的“开始”属性的示例。该对象被推送到其他事件对象的数组中：

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

1 回答 1

0

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
于 2019-02-25T15:57:35.077 回答