映射对象数组以显示在 calendar/table

Question

我正在尝试使用 react-big-calendar 在日历中显示一组数据。以下是我要显示的数据。由于某种原因，它没有显示任何数据。我能够在单个事件中进行硬编码，但我希望能够映射我的数据并显示我的所有 7 个事件。 events 是日历获取其数据以显示的位置。我尝试将其更改为 events:{data}，但最终没有结果。

this.state.interview_dates:

0: {start: Wed Sep 16 2020 17:00:00 GMT-0700 (Pacific Daylight Time), end: Wed Sep 16 2020 17:15:00 GMT-0700 (Pacific Daylight Time), title: "30 minutes"},
1: {start: Wed Sep 16 2020 17:15:00 GMT-0700 (Pacific Daylight Time), end: Wed Sep 16 2020 17:30:00 GMT-0700 (Pacific Daylight Time), title: "30 minutes"},
2: {start: Wed Sep 16 2020 17:30:00 GMT-0700 (Pacific Daylight Time), end: Wed Sep 16 2020 17:45:00 GMT-0700 (Pacific Daylight Time), title: "30 minutes"},
3: {start: Wed Sep 16 2020 17:45:00 GMT-0700 (Pacific Daylight Time), end: Wed Sep 16 2020 18:00:00 GMT-0700 (Pacific Daylight Time), title: "30 minutes"},
4: {start: Wed Sep 16 2020 18:00:00 GMT-0700 (Pacific Daylight Time), end: Wed Sep 16 2020 18:15:00 GMT-0700 (Pacific Daylight Time), title: "30 minutes"},
5: {start: Wed Sep 16 2020 18:15:00 GMT-0700 (Pacific Daylight Time), end: Wed Sep 16 2020 18:30:00 GMT-0700 (Pacific Daylight Time), title: "30 minutes"},
6: {start: Wed Sep 16 2020 18:30:00 GMT-0700 (Pacific Daylight Time), end: Wed Sep 16 2020 18:45:00 GMT-0700 (Pacific Daylight Time), title: "30 minutes"}

我的代码：

var start_date = new Date("2020-09-09 18:00:00");
start_date.toString();
var end_date = new Date("2020-09-09 19:00:00");
end_date.toString();

 class SchedulePage extends Component {
    
      constructor(props) {
        super(props);
        this.state = {
          events: [
            {
              start: start_date,
              end: end_date,
              title: "15 minute interview",
            },
          ],
        };
      }

  render() {
    if (this.state.interview_dates === undefined) {
      return null;
    }

    const data = this.state.interview_dates.map((item) => {
      return {
        start: item.start,
        end: item.end,
        title: item.title,
      };
    });
    console.log(data);

    return (
      <div className="calendar-container">
        <Calendar
          localizer={localizer}
          views={["month", "week"]}
          defaultDate={new Date()}
          defaultView="week"
          events={this.state.events}
          style={{ height: "100vh" }}
          onSelectEvent={this.test}
          step={15}
          min={new Date(2020, 1, 0, 6, 0, 0)}
          max={new Date(2020, 1, 0, 23, 0, 0)}
        />
        <ScheduleInterview
          onClose={this.showCreateInterview}
          show={this.state.createInterview}
        />
      </div>
    );
  }

Answer 1

这可能是正确读取对象数组中日期的问题。文档说 'start' 和 'end' 值应该是日期。这也可能是由于您在日历上的 min/max 道具。您似乎将日历限制在 1 月 1 日 06:00 和 1 月 1 日 23:00 之间的范围内。试试这个（假设 moment 是你的定位器）：

class SchedulePage extends Component {
    
      constructor(props) {
        super(props);
        this.state = {
          events: [
            {
              start: start_date,
              end: end_date,
              title: "15 minute interview",
            },
          ],
        };
      }

  render() {
    if (!this.state.interview_dates) { // Updated to cover null, undefined, false
      return null;
    }

    const data = this.state.interview_dates.map((item) => {
      return {
        start: moment(item.start).toDate(),
        end: moment(item.end).toDate(),
        title: item.title,
      };
    });
    console.log(data);

    return (
      <div className="calendar-container">
        <Calendar
          localizer={localizer}
          views={["month", "week"]}
          defaultDate={new Date()}
          defaultView="week"
          events={data}
          style={{ height: "100vh" }}
          onSelectEvent={this.test}
          step={15}
          //min={new Date(2020, 1, 0, 6, 0, 0)}
          //max={new Date(2020, 1, 0, 23, 0, 0)}
        />
        <ScheduleInterview
          onClose={this.showCreateInterview}
          show={this.state.createInterview}
        />
      </div>
    );
  }

映射对象数组以显示在 calendar/table

Map object arrays to display in a calendar/table

javascript

jsx

reactjs

react-big-calendar