Fullcalendar get resource id on event click

Question

I am using Fullcalendar. Everything is working fine but not getting Resourceid on event click. Here is my 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);
            }
        });

As per given image, if I click on First column "Resource 1" event [10:30 - 11:00 R1: All Day], it should get ResourceID "resource1" of that event on EventClick method.

Thanks

Answer 1

please replace your select function with the bellow code and you can get the resource id from resource paramenter:

select: function(start, end, jsEvent, view, resource) {
      console.log(
        'select',
        start.format(),
        end.format(),
        resource ? resource.id : '(no resource)'
      );
    },