Problema al recargar div

[Montes28]

hola amigos del foro espero me puedan ayudar

tengo el siguiente codigo con el cual inserto,consulto y elimino un evento , trabajo con fullcalendar

el inconveniente es :

si inserto mas de un evento el programa lo hace sin problemas , pero si en ese momento necesito eliminar uno de los eventos insertados en ese momento ya que elimina todos los eventos insertados, funciona bien si recargo bien la pagina .

Código Javascript:

<script type='text/javascript'>
 
        $(document).ready(function() {
    
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        
        var calendar = $('#calendar').fullCalendar({
        
        theme: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) {
                var title = prompt('Evento:');
                if (title) {
                    $.ajax({
                         url:'archivo.php',
                         type:'post',
                         data:{
                            title: title,
                            start: start.toUTCString(),
                            end: end.toUTCString(),
                            allDay: allDay,
                         }
                    }).done(function(data) {
                            alert("Evento Guardado");
                         //alert("Datos guardados, respuesta: " + start);
                    });
                    calendar.fullCalendar('renderEvent',
                        {
                            
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay,
                        
                            
                        },
                        true // make the event "stick"/ make the event "stick"
                        
                    );
                }
                calendar.fullCalendar('unselect');
            },
            editable: false,
            
    
        
    eventClick:function filter(event) { 
           if (!confirm("Realmente desea eliminar este evento")) {
                        revertFunc();
                   }
                   else {
        $('#calendar').fullCalendar('removeEvents',event.id)
        
                       $.ajax({
                         url:'eliminar.php',
                         type:'post',
                         data:{
                            id:event.id,
                                                     }
                    }).done(function(data) {
                         alert("Evento Eliminado");
                    });
        
          }
         },
        
        
                     
            eventMouseover: function(calEvent, jsEvent, view) {
                                savBg = $(this).css("background-color");
                                savClr = $(this).css("color");
                                $(this).css( { color:'#ffff00', backgroundColor:"#006" } );
                                $("#test").css( { color:'#ffff00', backgroundColor:"#006" } );
                                $(this).fadeTo('slow',.5);//.css(text-align,'right');
                        },
                    eventMouseout: function(calEvent, jsEvent, view) {
                                $(this).css( { color:savClr, backgroundColor:savBg } );
                                $("#test").css( { color:savClr, backgroundColor:savBg } );
                                $(this).fadeTo('slow',1);
                        },
 
            
 
            
            events: "eventos.php",
                
        eventRender: function (event, element) {
        element.qtip({    
            content: {    
                title: { text: event.title },
                
                text:'<span class="title">Id:</span>'+ event.id+'<br><span class="title">Inicio: </span>' + ($.fullCalendar.formatDate(event.start, 'hh:mmtt')) + '<br><span class="title">Fin: </span>' + ($.fullCalendar.formatDate(event.end, 'hh:mmtt'))       
            },
            
            show: { solo: true },
            //hide: { when: 'inactive', delay: 3000 }, 
            style: { 
                width: 200,
                padding: 5,
                color: 'black',
                textAlign: 'left',
                border: {
                width: 1,
                radius: 3
             },
                tip: 'topLeft',
 
                classes: { 
                    tooltip: 'ui-widget', 
                    tip: 'ui-widget', 
                    title: 'ui-widget-header', 
                    content: 'ui-widget-content' 
                } 
            } 
        });
    }
            
        });
        
    });
    
    
 
</script>
 

Código HTML:

<body>
<div id='loading' style='display:none'>loading...</div>
<div id='calendar'></div>
</body>
 

[Montes28]

especulando seria

problema con el listener

[Montes28]

hola amigos

ya he identificado algo

Código Javascript:

select: function(start, end, allDay) {
                var title = prompt('Evento:');
                if (title) {
                    $.ajax({
                         url:'archivo.php',
                         type:'post',
                         data:{
                            title: title,
                            start: start.toUTCString(),
                            end: end.toUTCString(),
                            allDay: allDay,
                            }
                            
                    })
                    calendar.fullCalendar('refetchEvents');
 

si pongo esta linea calendar.fullCalendar('refetchEvents');
al insertar se visualizan doble el evento
y en la base detos solo se inserta un evento


como debo de arreglarlo