Events from an array not showing in the actual calendar in FullCalendar 4

Question

I try to mock events in my FullCalendar generated calendar.

For the moment I just get my data from static objects, which is an array of parsable objects, in order to initialize events in the calendar.

After I'll get it from my localstorage for this PoC.

var calendar = new FullCalendar.Calendar(calendarEl, {
        timezone: 'UTC',
        events: [
          {title: "Repos de cycle", start: "2019-11-07T07:00:00.000Z", end: "2019-11-07T11:00:00.000Z"},
          {title: "Repos de cycle", start: '2019-11-07T07:00:00.000Z', end: '2019-11-07T11:00:00.000Z'}
        ],
...

When I call the eventRender, I actually see Event Objects parsed from the "events" property of my calendar

        eventRender(info) {
          console.log('rendered event : ', info.event)
        },

In the web developer tools, I actually get my two Event objects

rendered event :  e {_calendar: e, _def: {…}, _instance: {…}}

rendered event :  e {_calendar: e, _def: {…}, _instance: {…}}

But nothing is displaying in the calendar.

What do I do wrong ? Should I force a rerender or something ? Because whatever happens, I already render my calendar when I finished configuring it.

Here is the codepen of the current situation : https://codepen.io/nurovek/pen/zYYWGyX

Answer 1

When you use the resource you need to define the resourceId for the event. So you should set it like this.

events: [
   {resourceId: '2', title: "Repos de cycle", start: "2019-11-07T07:00:00.000Z", end: "2019-11-07T11:00:00.000Z"},
   {resourceId: '4', title: "Repos de cycle", start: '2019-11-07T07:00:00.000Z', end: '2019-11-07T11:00:00.000Z'}
],

Here is the updated DEMO https://codepen.io/nasser-ali-karimi/pen/abbPyJj