Question

我想在FullCalendar中添加一个新的自定义数组“资源”来组合CITIES信息，而不是直接在事件数组中插入城市元素（名称，纬度，经度等）（以防止大量数据加载.. ）。

要检索资源，存在一个特定的功能：

$('#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

在点击事件时明确（从评论中）你想要这样做，这是一个简化的例子。它不使用Scheduler或bootstrap模式，但它为您提供了一般原则，您可以轻松地对其进行调整以添加这些细节。

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/。

在FullCalendar

1 个答案: