Lors de l'ajout d'événements à FullCalendar, ils sont dupliqués - plusieurs appels effectués pour ajouter un événement sans cause

Question

J'utilise FullCallendar et Jquery. J'ai fait un google calendrier comme interface et tire des événements à partir d'un fichier json. Lorsqu'un utilisateur clique sur un jour où un div s'ouvre pour les saisir, cliquez sur Ajouter un événement et l'événement est ajouté. Au second clic, lorsque l'utilisateur clique sur ajouter un événement, deux événements sont ajoutés, un le premier jour sur lequel vous avez cliqué et le second le jour sélectionné. Au troisième clic, 3 événements sont ajoutés et ainsi de suite. Voici le code: var c = 0;

function cleanEventBubble(){ 
    $('#event').hide(); 
    $('td').removeClass('selDay'); 
    $('#eventDate').text(''); 
    $('#calEvent,input:text').val(''); 
} 

function createEvent(date, allDay, jsEvent, View, selCell){ 
    //Clean the event bubble and calendar 
    cleanEventBubble(); 
    $(selCell).addClass('selDay'); 
    $('#eventDate').append(date.toDateString()); 
    $('#event').css('left', jsEvent.pageX); 
    $('#event').css('top', jsEvent.pageY); 
    $('#event').show(); 

    $('#btnAddEvent').click(function(){addEvent(date, $('#title').val(), c)}); 
} 

function addEvent(date, title, id){ 
    $.ajax({ 
      type:'get', 
    <cfoutput>url: '#strURL#'</cfoutput>, 
      data:{ 
       method:'addEvent', 
       user:1, 
       title:title, 
       allDay:'true', 
       start:$.fullCalendar.formatDate(date, 'yyyy-MM-dd') 
       }, 
      dataType: 'json', 
      success: function(data, status){alert('response: ' + data);}, 
      error: function(data){$('#returnMess').html(data);} 

    }); 
    $('#calendar').fullCalendar('refetchEvents') 
    cleanEventBubble(); 
} 

/**/ 
function removeEvent(id){ 
    $('#calendar').fullCalendar('removeEvents', id); 
} 

function updateEvent(id, title){ 
    var event = $('#calendar').fullCalendar('clientEvents', id); 
    event.title = title; 
    $('#calendar').fullCalendar('updateEvent', event); 
} 


$(document).ready(function() { 
    //Create JQuery connection to obj 
    $('#event').hide(); 
    //Make event bubble draggable 
    $('#event').draggable(); 

    $('#evBubbleClose').click(cleanEventBubble); 
    // page is now ready, initialize the calendar... 
    $('#calendar').fullCalendar({ 
     // put your options and callbacks here date, allDay, jsEvent, view 
     dayClick:function(date, allDay, jsEvent, view){ 
      createEvent(date, allDay, jsEvent, view, this); 
     }, 
     <cfoutput>events: '#strURL#'+'?wsdl&method=getEvents'</cfoutput> , 
     theme: true, 
     header: {left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, 
     editable:true 
    }); 

    //$('#calendar').fullCalendar('renderEvents'); 

}); 

Answer 1

Est-ce parce que vous avez deux événements de clic qui créent des événements? (Je ne sais pas où vous bouton 'est)

Le premier « événement ajouter » est appelée sur le dayClick:

dayClick:function(date, allDay, jsEvent, view){ 
      createEvent(date, allDay, jsEvent, view, this); 
     }, 

Ainsi est le deuxième événement créé lorsque le bouton est cliqué addEvent? Essayez de n'utiliser que dayClick pour ajouter des événements et voir si cela fonctionne comme prévu et ensuite partir de là.

Answer 2

OK, voici la solution sans drapeaux booléens :)

Au lieu de $(this).remove();

d'utilisation

$('#calendar').fullCalendar('removeEvents', event.id); 

See documentation