javascript - Fullcalendar:如何显示具有多个事件的多个资源

Question

我正在尝试使用 Fullcalendar，我需要在其中显示多个资源以及相应的多个事件。同一个源可能有更多的事件，包括超售的情况。 在前端，我使用 Ajax 分别检索资源和事件的数据。 以下是我的代码；但它不起作用。它获取资源和事件，显示资源但无法显示相应的事件。 我该怎么做？非常感谢。

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

您的 eventSources 定义不正确。

documentation对于 eventSources，它声明您必须为此选项提供一个数组。但是，您提供了一个对象。

由于您只提供一个事件源，您可以任一个

a) 将eventSources 更改为events(因为that option 将接受单个对象)，即

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

或

b) 给 eventSources 一个包含单个项目的数组:

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

---

您可能遇到的另一个问题是类似的数据类型错误:事件源对象的 resourceIds 选项需要一个数组(同样您应该 check the documentation carefully )，而不是一个字符串。

再次修复，您可以 a) 使用单数 resourceId 选项:

resourceId: 'title'

或者继续使用 resourceIds 但给它一个包含单个项目的数组:

resourceIds: ["title"]

始终记得仔细研究文档并确保您匹配相关语法、数据类型、选项名称等。由于 JavaScript 没有编译时类型检查，因此很容易忽略此类问题，而且它会也常常默默地失败。这就是为什么您必须事先密切注意示例和规范。