Fullcalendar: как показать несколько ресурсов с несколькими событиями

Я пытаюсь использовать 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();

  });

javascript fullcalendar fullcalendar-4
person Ladis    schedule 15.09.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ваше eventSources определение неверно.

В документации для eventSources указано, что вы должны предоставить массив для этой опции. Однако вместо этого вы предоставили объект.

Поскольку вы предоставляете только один источник событий, вы можете либо

а) измените eventSources на events (потому что этот параметр будет принимать один объект), т.е.

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

или

б) дать eventSources массив, содержащий единственный элемент:

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

Другая проблема, которая может возникнуть у вас, - это аналогичная ошибка типа данных: параметр resourceIds объекта источника события ожидает массив (опять же, вы должны внимательно проверьте документацию), а не строку.

И снова, чтобы исправить это, вы можете а) использовать вместо этого единственную опцию resourceId:

resourceId: 'title'

или продолжайте использовать resourceIds, но дайте ему массив, содержащий единственный элемент:

resourceIds: ["title"]

Всегда не забывайте внимательно изучать документацию и проверять соответствие синтаксиса, типов данных, названий параметров и т. Д. Поскольку JavaScript не имеет проверки типов во время компиляции, этот тип проблемы легко упустить из виду, и он также часто дает сбой. молча. Поэтому заранее стоит обратить внимание на примеры и спецификации.

person ADyson    schedule 16.09.2019