2016-10-10 23 views
3

私はFullcalendarを使用しています。すべて正常に動作していますが、イベントクリックでResourceidを取得していません。私が最初にコラム「リソース1」イベントをクリックすると、指定した画像を1としてFullcalendarイベントでリソースIDを取得

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

enter image description here

[10:30 - 11:00 R1::すべての日]ここに私のコードですが、それは取得する必要EventClickメソッドのそのイベントのResourceID "resource1"。

おかげ

答えて

0

は、それはそのイベントに関連付けられたすべてのリソースを与えて

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

enter image description here

+0

、これを試してみてください。しかし、この画像(http://i.stack.imgur.com/veycV.png)によると、私が最初の列をクリックすると、私はresourceID "Resource1"よりもイベントをクリックします。 – Jayesh

+0

イベント別にグループ化したいですか? –

+0

私は答えを編集してください@Jayeshを試してください –

関連する問題