Fullcalendar: how to show multiple resources with multiple events

Question

I am trying to use the Fullcalendar where I need to show multiple resources with respective multiple events. The same source may have more events, including the situation of overbooking. In the front-end I use Ajax to retrieve the datas for the resources and the events separately. The following is my code; but it does not work. It fetches the resources and the events, shows the resources but unable to show the respective events. How can I do it? Thanks a lot.

var calendar = new FullCalendar.Calendar(calendarEl, {
        schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
        plugins: [ 'interaction', 'resourceTimeline' ],
        timeZone: 'Europe/Rome',
        defaultDate: today,
        locale: 'it',
        views: {
            timelineFourDays: {
              type: 'timeline'
              //,duration: { months: 4 }
            }
        },
        defaultView: 'resourceTimelineMonth',
        lang: 'it',
        aspectRatio: 1.5,
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth,resourceTimelineYear'
        },
        footer: {
            left: 'prev,next',
            center: 'title',
            right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth,resourceTimelineYear'
        },
        resourceAreaWidth: '30%',
        resourceLabelText: 'IMPIANTI',
        resourceGroupField: 'nome_tipologia',
        resourceOrder: 'id',
        resourcesInitiallyExpanded: true,
        resourceText: 'title',
        refetchResourcesOnNavigate: true,
        resourceColumns: [
            {
                labelText: 'IMPIANTO',
                field: 'id_impianto',
                width: '5%'
            },
            {
                labelText: 'IDENTIFICATIVO',
                field: 'impianto_codifica',
                width: '15%'
            }
            ,
            {
                labelText: 'COMUNE',
                field: 'nome_comune',
                width: '15%'
            },
            {
                labelText: 'ARTICOLO',
                field: 'nome_articolo',
                width: '15%'
            }
          ],
        resources:{
            url: '/listallimpiantos',
            method: 'get',
            _token: CSRF_TOKEN
        },
        resourceRender: function(renderInfo) {
             renderInfo.el.style.backgroundColor = 'green';
             renderInfo.el.style.color = '#ffffff';
        },
        eventSources:{
            url: '/listimpiantosperofferta',
            method: 'get',
            _token: CSRF_TOKEN,
            resourceIds:'title'
        },
        eventRender: function(event, element) {
            $(element).tooltip({title: event.title});
             if (event.statovendita == 'VENDUTO') {
                element.css("background-color", '#378006');
              }
             if (event.statovendita == 'OPZIONATO') {
                element.css("background-color", '#FFA500');
              }

        },
        eventColor: '#378006',
        eventBackgroundColor: event.color,
        editable: true,
        eventStartEditable: true,
        eventResizableFromStart: true,
        eventDurationEditable: true,
        eventResize: function(info) {
            alert("Per il cliente " + info.event.title + " dal " + info.event.start.toISOString() + " al " + info.event.end.toISOString());
            if (!confirm("Confermi?")) {
              info.revert();
            } else {
              alert('Aggiornamento sul db!');
            }
          },
        selectable: true,
        selectAllow: function(select) {
            return moment().diff(select.start) <= 0
         },

                    });
                }
    });

    calendar.render();

  });

Answer 1

Your eventSources definition is incorrect.

The documentation for eventSources it states that you must provide an array for this option. However, you have provided an object instead.

Since you are only providing one event source, you can either

a) change eventSources to events (because that option will accept a single object), i.e.

events: {
    url: '/listimpiantosperofferta',
    method: 'get',
    _token: CSRF_TOKEN,
    resourceIds:'title'
},

or

b) give eventSources an array containing a single item:

eventSources: [{
    url: '/listimpiantosperofferta',
    method: 'get',
    _token: CSRF_TOKEN,
    resourceIds:'title'
}],

---

The other issue you might have is a similar data-type error: The resourceIds option of the event source object expects an array (again you should check the documentation carefully), not a string.

So again to fix that you can either a) use the singular resourceId option instead:

resourceId: 'title'

or continue to use resourceIds but give it an array containing a single item:

resourceIds: ["title"]

Always remember to study the documentation closely and ensure you're matching the relevant syntax, data types, option names etc. Since JavaScript doesn't have compile-time type checking it's easy to overlook this kind of issue, and it will also often fail silently. That's why you have to pay close attention to examples and specifications beforehand.