How to display multiple event in fullcalendar using Reactjs

Question

I am trying to display multiple event from few objects into fullcalendar.

This is my event sources

this.state = { 
 calendarEvents2: {

      "events": [{
          "id": 10,
          "subtasks": [{
            "id": 29,
            "days": 1,
            "start": "2021-01-12T00:00:00+00:00",
            "end": "2021-01-12T00:00:00+00:00",
          }],
        },
        {
          "id": 20,
          "subtasks": [],
        },
        {
          "id": 6,
          "subtasks": [{
            "id": 21,
            "days": 2,
            "start": "2021-01-04T00:00:00+00:00",
            "end": "2021-01-05T00:00:00+00:00",
          },
          {
            "id": 23,
            "days": 3,
            "start": "2021-01-04T00:00:00+00:00",
            "end": "2021-01-06T00:00:00+00:00",
          }]
    
        }
    
      }
}

I need to dislay all the subtask into the calendar.

 <FullCalendar
    defaultView="dayGridMonth"
    header={{
       left: "prev,next today",
       center: "title",
       right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
    }}
    editable={true}
    droppable={true}
    plugins={[dayGridPlugin, interactionPlugin]}
    events={this.state.calendarEvents2}


    />

I have no idea how to format the calendarEvents2 data to fit FullCalendar data configuration. I have tried to read the documentation on eventDataSources, eventSources, yet quite blurr.. Really appreciate any help..Thank you

user3431310 · Accepted Answer · 2021-01-19 09:27:57Z

If I understand correctly.. you want to display all your subtasks right? in event place, put your subtask data

        calendarEvents2: [
            {
                events: [
                    {
                        title: 'Event 1',
                        start: '2021-01-04'
                    },
                    {
                        title: 'Event 2',
                        start: '2021-01-25'
                    }
                ],
                color: 'yellow', //OPTIONAL IF YOU WANT TO PUT DIFFERENT COLOR
                textColor: 'black'
            },
            {
                events: [
                    {
                        title: 'Event 3',
                        start: '2021-01-11'
                    },
                    {
                        title: 'Event 4',
                        start: '2021-01-20'
                    }
                ],
                color: 'black',
                textColor: 'white'
            }
        ]

ADyson · Accepted Answer · 2021-01-18 23:54:14Z

The format is simply a flat array. Examples are given at https://fullcalendar.io/docs/events-array

e.g.

[
{
  title  : 'event1',
  start  : '2010-01-01'
},
{
  title  : 'event2',
  start  : '2010-01-05',
  end    : '2010-01-07'
},
{
  title  : 'event3',
  start  : '2010-01-09T12:30:00',
  allDay : false // will make the time show
}
]

In your case, since you're assigning this.state.calendarEvents2 as the event array, it would be:

this.state = { 
  calendarEvents2: 
  [
    {
      "id": 29,
      "title": "event 29",
      "days": 1,
      "start": "2021-01-12T00:00:00+00:00",
      "end": "2021-01-12T00:00:00+00:00",
    },
    {
      "id": 21,
      "title": "event 21",
      "days": 2,
      "start": "2021-01-04T00:00:00+00:00",
      "end": "2021-01-05T00:00:00+00:00",
    },
    {
     "id": 23,
      "title": "event 23",
      "days": 3,
      "start": "2021-01-04T00:00:00+00:00",
      "end": "2021-01-06T00:00:00+00:00",
    }
  ]
}

Note that "title" is a useful field to use, as it gives some text to your event when it's displayed. I added this to the example for you. See https://fullcalendar.io/docs/event-parsing for more about the fields fullCalendar recognises.

Collectives™ on Stack Overflow

How to display multiple event in fullcalendar using Reactjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related