2010-09-24 60 views
2

我正在使用FullCallendar和Jquery。我做了一個像界面一樣的Google日曆,並從json文件中提取事件。當用戶點擊一天div打開他們進入信息點擊添加事件和事件被添加。在第二次點擊時,當用戶點擊添加事件時,添加兩個事件,一個在第一個點擊日,第二個在選定日期。在第三次點擊3個事件被添加等等。代碼如下: var c = 0;將事件添加到FullCalendar時,它們將被複制 - 多次調用無因添加事件

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'); 

}); 

回答

1

是因爲你有兩個點擊事件創建事件? (我不知道你在哪裏「按鈕」是)

第一個「添加事件」被稱爲上dayClick:

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

所以是在點擊的addEvent按鈕時創建的第二個事件?

嘗試只使用dayClick添加事件,看看是否按預期工作,然後從那裏去。

+0

其實createEvent方法只能說明有一個表單一個div設置事件屬性。在div上有一個按鈕,當點擊時將事件添加到數據庫並調用refetchEvents方法。我認爲正在發生的事情是內存不會被清除,所以第二次點擊日曆jsevent會發生兩次。第三次點擊發生3次,等等。我查看了輸出,它顯示內存沒有清除上一個事件,因此再次出現。反正就是這樣。我設置了一個不允許該事件發射多次的旗幟。 – kevin 2010-10-01 12:54:22

2

OK,這裏是沒有布爾標誌:)

而不是$(this).remove();

使用該解決方案

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

See documentation