FullCalendarで余分なカスタムリソーステーブルを追加

Question

FullCalendarに新しいカスタム配列 "resource"を追加して、都市要素（名前、緯度、経度など）をイベント配列の中に直接挿入します。大量のデータロードを防ぐ...）。

リソースを取得するには、特定の機能が存在します。

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

私のようなスニペットが必要ですevent.id = 1

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

出力で例えば

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

を：

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/を参照してください。