I'm attempting to successfully collect all of the event data from a drag-and-drop. I was partially successful in doing so by utilizing eventReceive. It managed to fetch the title, start and end but not the resourceID.
Apparently eventReceive (and subsequently 'Event Object') only permits for title, start and end but not resourceID which is what is causing the issue.
I noticed that however the section right above drop: is grabbing and console.logging the resourceId using arg.resource.id.
So the question I have is how I can possibly combine the two, and output all of title, start, end and resourceID. Any help would be deeply appreciated.
drop: function(arg) {
console.log('drop date: ' + arg.dateStr)
if (arg.resource) {
console.log('drop resource: ' + arg.resource.id)
const resourceID = arg.resource.id;
console.log('TESTING: ' + resourceID);
}
if (document.getElementById('drop-remove').checked) {
arg.draggedEl.parentNode.removeChild(arg.draggedEl);
}
},
eventReceive: function(arg) { // called when a proper external event is dropped
console.log('eventReceive', arg.event);
const eventData = {
title: arg.event.title,
resourceId: arg.event.resourceId,
start: arg.event.start,
end: arg.event.end,
};
console.log(eventData);
In the drop callback, the resource ID is part of the general drop info, since at that moment there isn't a calendar event yet. So there's no particularl the resource info would be accessible in a similar manner from an event object - the two things are unrelated.
Frustratingly though, the event object documentation doesn't actually specify how to read the associated resource data from an event. It seems like the associated resources aren't intended to be a public property of an event, for some reason.
From examining the internals of arg.event when it's logged to the console, we can see that instead of a resourceId property, there's actually a resourceIds property within the _def property, which is an array of resource IDs - an event can be associated with multiple resources.
So you could access that property, but it's not really supposed to be public, so we shouldn't rely on it. Fortunately a quick look at the fullCalendar documentation shows that the event object has a handy getResources method you can call.
So if in the eventReceive callback you write:
const eventData = {
title: arg.event.title,
resourceIds: arg.event.getResources().map(function(resource) { return resource.id }),
start: arg.event.start,
end: arg.event.end,
};
This will retrieve the array of resourceIds the event is assigned to. Of course in the context of having just dropped the event onto the calendar in a specific location, in practice this array will only ever contain one entry.