Add extra custom resource table in FullCalendar

Question

I'd like to add a new custom array "resource" in FullCalendar to group CITIES information instead insert cities elements (name, latitude, longitude, ...) directly inside events array (to prevent to much data loading...).

To retrieve a resource exist a specific function:

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

But how can I get my custom array "customArrayCities" from "cityID" inside my events? Is it possible?

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' }
]

For example i need a snippet like:

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

For example with event.id = 1

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

Output:

C1
New York

I need it when I click on a Event. I get a Bootstrap Modal with info about event and further info about city.

Answer 1

Having clarified (from the comments) that you want to do this when the event is clicked, here is a simplified example. It does not use Scheduler, or a bootstrap modal, but it gives you the general principle, and you can adapt it easily to add those details.

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
        }
      });
    }
  });
});

See http://jsfiddle.net/sbxpv25p/31/ for a working example.