Question

I want to delete event from fullCalender and I face problem with removing the element from the calender.

when I put
current.remove(); before the condition that confirm the deletion process, it woks well and the event is removed, but when punting it in the success method it doesn’t affect the element, even I am cashing the $(this) selector !

 $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month'
        },

        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar !
        events : url+"CalEvent",
        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;  

            //save event to db
            jQuery.ajax({
                url: url+"addCalEvent",
                type: "POST",
                dataType: 'JSON',
                data:{
                    'eventObj':copiedEventObject
                },

                error: function (request, status, error) {  
                    alert('خطأ في إضافة الحدث ');
                    revertFunc();
                }
            });

            // 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();
            }

        } ,
//////////////////////////////////////////////////////
// here is the problem I face with deleting the event ////
        eventClick: function(event, element) {

        var current = $(this);

     if(confirm('هل متأكد من حذف الحدث')){
                jQuery.ajax({
                    url: url+"delCalEvent",
                    type: "POST",
                    dataType: 'JSON',
                    data:{
                        'eventId':event.id
                    },
                    success:function(){

                        current.remove();
                        $('#calendar').fullCalendar('updateEvent', event);
                    },
                    error: function (request, status, error) {  
                        alert('خطأ في حذف الحدث ');
                        revertFunc();
                    }
                });


            } 

        },

        eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
            //check for changes
            if (!confirm("هل أنت متأكد من تغيير موعد الحدث ؟")) {
                revertFunc();
            }else{
                //update current event 
                jQuery.ajax({
                    url: url+"updateCalEvent",
                    type: "POST",
                    dataType: 'JSON',
                    data:{
                        'eventObj':event
                    },

                    error: function (request, status, error) {  
                        alert('خطأ في تعديل الحدث ');
                        revertFunc();
                    }
                });
            }





        } 


    });

Answer 1

Rather than using JQuery remove() and updateEvent, you can use the fullCalendar removeEvents to remove the event:

 eventClick: function(event, element) {

     var current = event;

     if(confirm('هل متأكد من حذف الحدث')){
            jQuery.ajax({
                url: url+"delCalEvent",
                type: "POST",
                dataType: 'JSON',
                data:{
                    'eventId':event.id
                },
                success:function(){
                    $('#calendar').fullCalendar('removeEvents', current.id);
                },
                error: function (request, status, error) {  
                    alert('خطأ في حذف الحدث ');
                    revertFunc();
                }
            });
       } 
    },