Fullcalendar. Delete dragged events from external list

0
votes

I am using Fullcalendar 4 and have a problem refeching events. I am changing the event source with a dropdown menu but I can only refetch events that are stored in json, not events that have been dragged dynamically. I am using the following code. 

calendar.destroy();
var eventSources = calendar.getEventSources();
var len = eventSources.length;
for (var i = 0; i < len; i++) { 
eventSources[i].remove(); 
}
var url = './demo2/contents/calendar/get.php?source='+source;
calendar.addEventSource(url);
calendar.refetchEvents();
calendar.render();

How can I add all dragged events to a new source using eventReceive?

eventReceive: function(info) {
calendar.addEvent(event,  [, source ]);    
},

The external list is generated with the below code, I tried to specify the source location but doesnt seem to work when I drag and drop from the external list:

var initDrag = function(el,value) {

 var eventObject = {

 id: el.attr("data-id"),
 startEditable: true,
 allDay: false,
 durationEditable: true,
 title: $.trim(el.text()), // use the element's text as the event title
 stick: true, // maintain when user navigates (see docs on the renderEvent method)
 classNames: [el.attr("data-color"),],
 description: 'Lorem ipsum dolor eius mod tempor labore',
 source: 'planificacion'
 };

 // store the Event Object in the DOM element so we can get to it later
 el.data('event', eventObject);

 };
1
javascriptfullcalendarfullcalendar-4
if you didn't associate the dragged event with an event source when you added it to the calendar, then they will exist outside any events sources, and you'd have to remove them directly (you could use fullcalendar.io/docs/Calendar-getEvents to get all the events, or fullcalendar.io/docs/Calendar-getEventById to get a specific event if you know the ID, and fullcalendar.io/docs/Event-remove to delete a specific event). – ADyson
P.S. if you want to refetch events from a dynamic source (such as a URL), you generally don't need to destroy the calendar, remove the event source and re-create it. If the URL can change, then if you are following the events-as-JSON pattern, you can set dynamic parameters for fullCalendar to collect and append to the URL each time it fetches the events - see the section "Dynamic extraParams parameter" in the linked page. That way you can simply call the refetchEvents method and fullCalendar will do the rest. – ADyson
(And even if you still wanted to add/remove the event source manually for some reason, the destroy/render steps are definitely overkill. refetchEvents will cause the events to be re-rendered, but there's not really any need to re-render the whole calendar) – ADyson
I had a play around with this. It's possible only through what is really a bit of a clumsy workaround - you have to wait for the event to be received, then remove it from the calendar, do a property-wise clone of it, and add it back to the calendar again via the addEvent method, specifying the desired event source as the second argument. addEvent appears to be the only method by which you can successfully associate an event with a source, apart from actually delivering the event in that source's feed to begin with. – ADyson
Demo of that: codepen.io/ADyson82/pen/MWWgQKQ?editors=1010 . Drag a couple of events onto the calendar and then press the "remove event source" button, and you'll see that the dragged events get removed along with the original event source data. The fact that this process is necessary feels like a small hole in the fullCalendar feature set, to me. – ADyson

1 Answers

1
votes

thanks ADyson you fixed my problem. this solution worked. 

eventReceive: function(info) { // called when a proper external event is dropped

 var evt = info.event;
 evt.remove();
 var newEvent = {};
 //clone the object - doesn't work if we just pass evt straight to the addEvent method
 for (prop in evt) {
 newEvent[prop] = evt[prop];
 }

 calendar.addEvent(newEvent,'planificacion');

}