Fullcalendar erhalten Ressourcen-ID auf Ereignis klicken

Question

Ich verwende Fullcalendar. Alles funktioniert einwandfrei, aber es wird keine ResourceID beim Ereignisklick angezeigt. Hier ist mein Code:

 var date = new Date(); 
     var d = date.getDate() + 1; 
     var m = date.getMonth(); 
     var y = date.getFullYear(); 

     $('#calendar').fullCalendar({ 
      theme: true, 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,resourceDay' 
      }, 
      defaultView: 'resourceDay', 
      editable: false, 
      droppable: false, 
      slotDuration: '00:15:00', 
      allDaySlot: false, 
      resources: [ 
       { 
        'id': 'resource1', 
        'name': 'Resource 1' 
       }, 
       { 
        'id': 'resource2', 
        'name': 'Resource 2' 
       }, 
       { 
        'id': 'resource3', 
        'name': 'Resource 3' 
       } 
      ], 
      resourceFilter: function(resource) { 
       var active = $("input").map(function() { 
        return this.checked ? this.name : null; 
       }).get(); 

       return $.inArray(resource.id, active) > -1; 
      }, 
      events: [ 
       { 
        title: 'R1-R2: Lunch 12.15-14.45', 
        start: new Date(y, m, d, 12, 15), 
        end: new Date(y, m, d, 14, 45), 
        allDay: false, 
        resources: ['resource1', 'resource2', 'resource3'] 
       }, 
       { 
        title: 'R1: All day', 
        start: new Date(y, m, d, 10, 30), 
        end: new Date(y, m, d, 11, 0), 
        allDay: false, 
        resources: ['resource1', 'resource2', 'resource3'] 
       }, 
       { 
        title: 'R2: Meeting 11.00', 
        start: new Date(y, m, d, 11, 0), 
        allDay: false, 
        resources: 'resource2' 
       }, 
       { 
        title: 'R1/R2: Lunch 12-14', 
        start: new Date(y, m, d, 12, 0), 
        end: new Date(y, m, d, 14, 0), 
        allDay: false, 
        resources: ['resource1', 'resource2', 'resource3'] 
       }, 
       { 
        id: 777, 
        title: 'R1: Lunch', 
        start: new Date(y, m, d, 12, 0), 
        end: new Date(y, m, d, 14, 0), 
        allDay: false, 
        resources: ['resource1', 'resource2', 'resource3'] 
       }, 
       { 
        title: 'R3: Breakfast', 
        start: new Date(y, m, d, 8, 0), 
        end: new Date(y, m, d, 8, 30), 
        allDay: false, 
        resources: ['resource1', 'resource2', 'resource3'] 
       }, 
       { 
        id: 999, 
        title: 'Repeating Event', 
        start: new Date(y, m, d - 3, 16, 0), 
        allDay: false, 
        resources: ['resource1', 'resource2', 'resource3'] 
       }, 
       { 
        id: 999, 
        title: 'Repeating Event', 
        start: new Date(y, m, d + 4, 16, 0), 
        allDay: false, 
        resources: ['resource1', 'resource2', 'resource3'] 
       } 
      ],     
      // the ev.data is the resource column clicked upon 
      selectable: false, 
      selectHelper: true, 
      select: function(start, end, ev) { 
       console.log(start); 
       console.log(end); 
       console.log(ev.data); // resources 
      }, 
      eventClick: function(event) { 
       console.log(event); 
      }, 
      eventDrop: function(event, delta, revertFunc) { 
       console.log(event); 
      } 
     }); 

Wie pro gegebenen Bild, wenn ich auf erste Spalte auf "Ressource 1" event [10.30 bis 11.00 Uhr R1: All Day], sollte es bekommen ResourceID "resource1" dieses Ereignisses mit der EventClick-Methode.

Dank

Answer 1

Try this,

<script> 
      var date = new Date(); 
     var d = date.getDate() + 1; 
     var m = date.getMonth(); 
     var y = date.getFullYear(); 

     $('#calendar').fullCalendar({ 
      theme: true, 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'agendaDay,agendaWeek,month' 
      }, 
      defaultView: 'agendaDay', 
      editable: false, 
      droppable: false, 
      slotDuration: '00:15:00', 
      allDaySlot: false, 
      views: { 
        day: { 
         groupByDateAndResource: true 
        } 
      }, 
      resources: [ 
       {id: 'resource1',name: 'Resource 1'}, 
       {id: 'resource2',name: 'Resource 2'}, 
       {id: 'resource3',name: 'Resource 3'} 
      ], 
//   resourceFilter: function(resource) { 
//    var active = $("input").map(function() { 
//     return this.checked ? this.name : null; 
//    }).get(); 
// 
//    return $.inArray(resource.id, active) > -1; 
//   }, 
      events: [ 
       { 
        title: 'R1-R2: Lunch 12.15-14.45', 
        start: new Date(y, m, d, 12, 15), 
        end: new Date(y, m, d, 14, 45), 
        allDay: false, 
        resources: ['resource1', 'resource2', 'resource3'] 
       }, 
       { 
        title: 'R1: All day', 
        start: new Date(y, m, d, 10, 30), 
        end: new Date(y, m, d, 11, 0), 
        allDay: false, 
        resources: ['resource1', 'resource2', 'resource3'] 
       }, 
       { 
        title: 'R2: Meeting 11.00', 
        start: new Date(y, m, d, 11, 0), 
        allDay: false, 
        resources: ['resource1', 'resource2', 'resource3'] 
       }, 
       { 
        title: 'R1/R2: Lunch 12-14', 
        start: new Date(y, m, d, 12, 0), 
        end: new Date(y, m, d, 14, 0), 
        allDay: false, 
        resources: ['resource1', 'resource2', 'resource3'] 
       }, 
       { 
        id: 777, 
        title: 'R1: Lunch', 
        start: new Date(y, m, d, 12, 0), 
        end: new Date(y, m, d, 14, 0), 
        allDay: false, 
        resources: ['resource1', 'resource2', 'resource3'] 
       }, 
       { 
        title: 'R3: Breakfast', 
        start: new Date(y, m, d, 8, 0), 
        end: new Date(y, m, d, 8, 30), 
        allDay: false, 
        resources: ['resource1', 'resource2', 'resource3'] 
       }, 
       { 
        id: 999, 
        title: 'Repeating Event', 
        start: new Date(y, m, d - 3, 16, 0), 
        allDay: false, 
        resources: ['resource1', 'resource2', 'resource3'] 
       }, 
       { 
        id: 999, 
        title: 'Repeating Event', 
        start: new Date(y, m, d + 4, 16, 0), 
        allDay: false, 
        resources: ['resource1', 'resource2', 'resource3'] 
       } 
      ],     
      // the ev.data is the resource column clicked upon 
      selectable: false, 
      selectHelper: true, 
      select: function(start, end, ev) { 
       console.log(start); 
       console.log(end); 
       console.log(ev.data); // resources 
      }, 
      eventClick: function(event) { 
       console.log(event); 
      }, 
      eventDrop: function(event, delta, revertFunc) { 
       console.log(event); 
      } 
     }); 
    </script>