How to map a list of object arrays to display in calendar?

Question

I am using react-big-calendar insipired by Full Calendar to display a list of events. I am able to display a hard coded date in the calendar but I am struggling with displaying an object of start and end times. How would I be able to map this list of information so I can display all the events. The calendar displays events that are in this.state.events.

This is the list of data that I am trying to display:

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {start: "2020-09-16 17:00:00", end: "2020-09-16 17:15:00"}
1: {start: "2020-09-16 17:15:00", end: "2020-09-16 17:30:00"} 
2: {start: "2020-09-16 17:30:00", end: "2020-09-16 17:45:00"} 
3: {start: "2020-09-16 17:45:00", end: "2020-09-16 18:00:00"} 
4: {start: "2020-09-16 18:00:00", end: "2020-09-16 18:15:00"} 
5: {start: "2020-09-16 18:15:00", end: "2020-09-16 18:30:00"}
6: {start: "2020-09-16 18:30:00", end: "2020-09-16 18:45:00"}

This my current code:

 class SchedulePage extends Component {
    
      constructor(props) {
        super(props);
        this.state = {
          events: [
            {
              start: start_date,
              end: end_date,
              title: "15 minute interview",
            },
          ],
        };
      }
     
      render() {
        return (
          <div className="calendar-container">
            <Calendar
              localizer={localizer}    
              events={this.state.events}
              style={{ height: "100vh" }}
              onSelectEvent={this.test}
            />
          </div>
        );
      }
    }

score 0 · Answer 1 · answered Sep 11 '20 at 08:26

0

Their demo uses the following format for events, convert your events to this format:

[
    {
    id: 0,
    title: 'All Day Event very long title',
    allDay: true,
    start: new Date(2015, 3, 0),
    end: new Date(2015, 3, 1),
    },
    {
    id: 1,
    title: 'Long Event',
    start: new Date(2015, 3, 7),
    end: new Date(2015, 3, 10),
    },

answered Sep 11 '20 at 08:26

Çağatay Sel

801
7
14

thank you for the heads up. Will covert them to that format. Do you have any idea on how I can map through all my data and display them easily? – Michael Lee Sep 11 '20 at 17:56

score 0 · Answer 2 · answered Sep 12 '20 at 00:32

format your data as Çağatay Sel suggested,

events = [
    {
      id: 0,
      title: 'All Day Event very long title',
      allDay: true,
      start: new Date(2015, 3, 0),
      end: new Date(2015, 3, 1),
    },
    {
      id: 1,
      title: 'Long Event',
      start: new Date(2015, 3, 7),
      end: new Date(2015, 3, 10),
    },
]

then destructure your state between render and return (easier to handle that way)

 const { events } = this.state

and then map through your data and pass everything down to your Calendar component as props

<div className="calendar-container">
  {events.map((event, index) => {
      return (
        <Calendar key={index} id={event.id} title={event.title} start= 
        {event.start.toString()} end={event.end.toString()} />
      );
    })}
</div>

your Calendar component should receive data also using destructuring

const Calendar = ({ id, title, start, end }) => {
  return (
   ...
  );
};

...

render() {
  const { events } = this.state 

  return (
     <div className="calendar-container">
      {events.map((event, index) => {
          return (
            <Calendar key={index} id={event.id} title={event.title} start= 
            {event.start.toString()} end={event.end.toString()} />
          );
        })}
     </div> 
  );
}

How to map a list of object arrays to display in calendar?

2 Answers2