Map object arrays to display in a calendar/table

Question

I am trying to display a set of data in a calendar using react-big-calendar. The following is my data that I am trying to display. For some reason it is not displaying any data. I was able to hard code in a single event, but I want to be able to map through my data and display all 7 of my events. events is where the calendar gets its data to display. I've tried changing it to events:{data} but that ended up with no results.

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"}

my code:

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

score 0 · Accepted Answer · answered Sep 11 '20 at 19:16

This is likely an issue with reading the dates correctly in your array of objects. The documentation says that the 'start' and 'end' values should be dates. It also might be due to your min/max props on the calendar. You seem to be restricting the calendar to a range between Jan 1 06:00 and Jan 1 23:00. Try this (assuming moment is your localizer):

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

Map object arrays to display in a calendar/table

1 Answers1