при добавлении событий в Fullcalendar внешним перетаскиванием элемент не получает идентификатор

8

Я использую внешнее перетаскивание 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);
Теги:
fullcalendar

3 ответа

2
Лучший ответ

У меня была аналогичная проблема, а не при удалении внешнего элемента, но при создании нового события, нажав на временной интервал.

Если вам нужен идентификатор, вы не должны отображать непосредственно событие, но его данные (название, начало, конец, 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');
        }
    );
}

Я надеюсь, что это поможет

  • 0
    Да, это помогает, я понял. Спасибо Степанек.
3

FYI вы также можете установить id для перетаскиваемого div в свой HTML, а затем сделать что-то вроде:

copiedEventObject.id = $( this ).attr('id');

внутри атрибута "drop:" (сразу после:

var copiedEventObject = $.extend({}, originalEventObject);

в примере "external-dragging.html".

  • 0
    Круто, это работает! Спасибо! На самом деле я обрабатываю события, чтобы скрыть и показать, когда внешние события помещаются в календарь или удаляются из календаря.
0

Для внешних событий обратный вызов drop предназначен только для данных "низкого уровня". Обратный вызов eventReceive - это то, что вы хотите:

eventReceive: function(event, view) {
                alert("Dropped event: " + event['title']);  // any data linked to the dropped event 
            },

Документы: https://fullcalendar.io/docs/dropping/eventReceive/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню