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定义不正确。

eventSources的{{3}}指出必须为此选项提供一个数组。但是，您提供了一个对象。

由于您仅提供一个事件源，因此可以之一

a）将eventSources更改为events（因为documentation将接受单个对象），即

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

或

b）给eventSources一个包含单个项目的数组：

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

您可能遇到的另一个问题是类似的数据类型错误：事件源对象的resourceIds选项期望使用数组（同样应使用that option），而不是字符串。

因此，为了再次解决该问题，您可以a）改为使用单数resourceId：

resourceId: 'title'

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

resourceIds: ["title"]

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

Fullcalendar：如何显示具有多个事件的多个资源

1 个答案: