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

我想在FullCalendar添加新的自定义数组“资源”，以城市群信息，而不是插入的城市元素（名称，纬度，经度，...）直接在活动组（到防止太多的数据加载...）。添加额外的自定义资源表中FullCalendar

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

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

但我怎么能得到我的自定义数组“customArrayCities”，从“cityID”在我的事件？可能吗？

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。

来源

2017-10-05 Giuseppe Lodi Rizzini

你的措辞不是很清楚。你是说你想限制以便只从服务器获取事件的特定城市或城市的基础上，customArrayCities'的'的内容？或者每个资源是否与某个特定城市相关联？就像我说的那样，你的意思不是很清楚。也许输入和期望输出的例子会有所帮助？ – ADyson

我添加了一个例子，我需要 –

如果你只是想提取从目前的事件列表中的一些信息，并将其过滤，您可以使用clientEvents功能（https://fullcalendar.io/docs/event_data/clientEvents/ ）来获得你感兴趣的事件，而且看起来你已经有了一个想法，你可以如何循环访问城市阵列 - 据我所知，这个城市阵列不需要整合到fullCalendar中，除非我误解了你的目的。 – ADyson

已经澄清（从评论）要被点击的事件时，要做到这一点，这里是一个简单的例子。它不使用调度程序或引导程序模式，但它提供了一般原则，并且可以轻松调整它以添加这些详细信息。

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/作为一个工作示例。

来源

2017-10-06 09:24:29 ADyson

非常好！谢谢！ –

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

回答

相关问题