javascript - 在 FullCalendar 中添加额外的自定义资源表

Question

我想在 FullCalendar 中添加一个新的自定义数组“资源”来对城市信息进行分组，而不是将城市元素(名称、纬度、经度等)直接插入到事件数组中(以防止加载大量数据.. .).

要检索资源，存在一个特定的函数:

$('#calendar').fullCalendar( 'getEventResource', event.id );

但是如何从事件中的“cityID”获取自定义数组“customArrayCities”？可能吗？

customArrayCities: [
  { id: 'C1', name: 'New York', latitude: '44.111111', longitude: '10.111111'},
  { id: 'C2', name: 'Houston', latitude: '45.111111', longitude: '11.111111'}             
]
resources: [
  { id: 'a', impianti: 'Impianto 1', title: 'Linea 1' },
  { id: 'b', impianti: 'Impianto 2', title: 'Linea 2' }
],
events: [
  { id: '1', resourceId: 'a', start: '2017-09-07T02:00:00', end: '2017-09-07T04:00:00', title: 'Title 1', cityID: 'C1'},
  { id: '2', resourceId: 'b', start: '2017-09-07T04:00:00', end: '2017-09-07T13:00:00', title: 'Title 2', cityID: 'C1' }
]

例如，我需要一个片段，例如:

var array_cities = $('#calendar').fullCalendar( 'getCustomArrayCitiesByEventID', event.id );

例如 event.id = 1

for (i in array_cities) {
  echo array_cities[i].id;
  echo array_cities[i].name;
}

输出:

C1
New York

当我点击一个事件时我需要它。我得到一个 Bootstrap Modal，其中包含有关事件的信息和有关城市的更多信息。

Answer 1

(从评论中)澄清了您希望在单击事件时执行此操作，这是一个简化的示例。它不使用调度程序或引导模式，但它为您提供了一般原则，您可以轻松地调整它以添加这些细节。

var cities = [{
  id: 'C1',
  name: 'New York',
  latitude: '44.111111',
  longitude: '10.111111'
}, {
  id: 'C2',
  name: 'Houston',
  latitude: '45.111111',
  longitude: '11.111111'
}];

$(document).ready(function() {
  $('#calendar').fullCalendar({
    defaultView: 'month',
    defaultDate: "2017-09-07",
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    events: [{
      id: '1',
      resourceId: 'a',
      start: '2017-09-07T02:00:00',
      end: '2017-09-07T04:00:00',
      title: 'Title 1',
      cityID: 'C1'
    }, {
      id: '2',
      resourceId: 'b',
      start: '2017-09-07T04:00:00',
      end: '2017-09-07T13:00:00',
      title: 'Title 2',
      cityID: 'C1'
    }, {
      id: '3',
      resourceId: 'b',
      start: '2017-09-10T04:00:00',
      end: '2017-09-10T13:00:00',
      title: 'Title 3',
      cityID: 'C2'
    }],
    eventClick: function(calEvent, jsEvent, view) {
      //loop through the cities until we find the right one
      $.each(cities, function(index, city) {
        if (city.id == calEvent.cityID)
        {
          //display the city information however you wish to:
          alert("City: " + city.name);
          return false; //stop looping now we've found the correct record
        }
      });
    }
  });
});

参见http://jsfiddle.net/sbxpv25p/31/一个工作示例。