I'm using FullCalendar's external drag and drop, with his code. http://arshaw.com/js/fullcalendar-1.5.2/demos/external-dragging.html
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
Every thing is okay, but I want to add this dropped event to my database. So I added my add dialog codes here.
var eventToAdd = {
title: $.trim($(this).text()),
//title: $(this).attr('id'),
description: $(this).attr('original-title'),
start: date.format("dd-MM-yyyy hh:mm:ss tt"),
end: date.format("dd-MM-yyyy hh:mm:ss tt")
};
if (checkForSpecialChars(eventToAdd.title) || checkForSpecialChars(eventToAdd.description)) {
alert("please enter characters: A to Z, a to z, 0 to 9, spaces");
}
else {
//alert("sending " + eventToAdd.title);
PageMethods.addEvent(eventToAdd, addSuccess);
}
So the result is,
drop: function (date, allDay) { // this function is called when something is dropped
if($(this).attr('id')=='')
return;
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
$(this).remove();
var eventToAdd = {
title: $.trim($(this).text()),
//title: $(this).attr('id'),
description: $(this).attr('original-title'),
start: date.format("dd-MM-yyyy hh:mm:ss tt"),
end: date.format("dd-MM-yyyy hh:mm:ss tt")
};
if (checkForSpecialChars(eventToAdd.title) || checkForSpecialChars(eventToAdd.description)) {
alert("please enter characters: A to Z, a to z, 0 to 9, spaces");
}
else {
//alert("sending " + eventToAdd.title);
PageMethods.addEvent(eventToAdd, addSuccess);
}
}
Event is shown, event is draggable, but it doesn't get the Id. I think the event which rendered at this row isn't related with the event sent to the database:
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
Best Answer
FYI you can also set an id for the draggable div in your HTML, then do something like:
inside the "drop:" attribute (right after:
in the "external-dragging.html" example.