Passing data to background event object in FullCalendar

Question

Is there a way to get a data that I passed to eventObj when user clicks on background event? My sample background event looks like this:

{
 id: 'availableForMeeting',
 title: 'Test Background Event #1',
 start: '2015-08-13T07:30:00',
 end: '2015-08-13T12:30:00',
 rendering: 'background',
 sampleId: 214,
 color: 'red'
}

But I can't get sampleId field, 'cause it doesn't exist in jsEvent.

Answer 1

First, in order to actually get a click handler on a background event, you have to use a delegated jquery .on() because FullCalendar's eventClick doesn't work for background events.

$("#calendar").on("click",".fc-bgevent",function(event){
    console.log($(this).data());
});

With just that, you will get an empty console log. We need to add the event data to the event element. We can do this in eventRender

eventRender: function(event,element,view){
    $(element).data(event);
},

Working JSFiddle

Answer 2

The accepted answer didnt worked for me as I cant trigger the click due to multiple issues(z-index, height). I think I found a much cleaner solution.

The solution is to use the fullcalendar clientEvents method. It will use the client side copy of the events. So no extra api call.

Both select and dayClick will gets fired when selecting a date. So choose the one that best suits your needs. I think select is a good choice as it gets fired for multiple days selection aswell if needed.

    select: function (startDate, endDate, jsEvent, view, resource) {

       //below code for passing events in bg events of fullcalender
                          var events = $('#calendar').fullCalendar('clientEvents', function (evt) {
                        //if same date as clicked date add element to events array
                          return evt.start.isSame(startDate);//must return boolean
                    });



                    console.log(events);
}

Hope this helps someone.