Я использую внешнее перетаскивание FullCalendar с его кодом. 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 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();
}
}
Все в порядке, но я хочу добавить это событие в базу данных. Поэтому я добавил здесь свои коды для ввода.
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);
}
Итак, результат:
drop: function (date, allDay) { // this function is called when something is dropped
if($(this).attr('id')=='')
return;
// retrieve the dropped element 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);
}
}
Событие отображается, событие перетаскивается, но оно не получает идентификатор. Я думаю, что событие, которое отображается в этой строке, не связано с событием, отправленным в базу данных:
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
У меня была аналогичная проблема, а не при удалении внешнего элемента, но при создании нового события, нажав на временной интервал.
Если вам нужен идентификатор, вы не должны отображать непосредственно событие, но его данные (название, начало, конец, allday), сохранить его в базе данных, получить сохраненное событие и выполнить его. Таким образом, у него будет ID, связанный с ним.
Метод, используемый для сохранения его в базе данных, должен возвращать информацию о событии, требуемую для полного календарного отображения.
Это код, который я использовал:
select: function(start, end, allDay) {
//code required to initialise the variables used in the ajax call
//...
//URL used to call my cakephp controller/action along with the data required to save the event to the database
var url = "/eugdef/availabilities/add?start="+startyear+"-"+startmonth+"-"+startday+" "+starthour+":"+startminute+":00&end="+endyear+"-"+endmonth+"-"+endday+" "+endhour+":"+endminute+":00&allday="+allday+"&teacher_id="+teacher_id+"&teacher_name="+teacher_name+"&semester="+semester+"&year_id="+year_id;
$.post(
url,
function(data){ //callback function retrieving the response sent by the controller/action
//event is the object that will actually be rendered to the calendar
var event = jQuery.parseJSON(data.substr(1,data.length-2));
//actually rendering the new event to the calendar
calendar.fullCalendar('renderEvent', event, false);
calendar.fullCalendar('unselect');
}
);
}
Я надеюсь, что это поможет
FYI вы также можете установить id для перетаскиваемого div в свой HTML, а затем сделать что-то вроде:
copiedEventObject.id = $( this ).attr('id');
внутри атрибута "drop:" (сразу после:
var copiedEventObject = $.extend({}, originalEventObject);
в примере "external-dragging.html".
Для внешних событий обратный вызов drop
предназначен только для данных "низкого уровня". Обратный вызов eventReceive
- это то, что вы хотите:
eventReceive: function(event, view) {
alert("Dropped event: " + event['title']); // any data linked to the dropped event
},
Документы: https://fullcalendar.io/docs/dropping/eventReceive/