環境

FullCalendar 2.3.1
http://fullcalendar.io/

Ruby 2.1.5 p273
Rails 4.2.1

問題

FullCalenderというjQueryのプラグインを使ってRailsとajaxで書き換えのできるカレンダーを作成しています.
イベントの作成・読取・更新・削除について、ほぼうまく動いたのですが、一定の場合だけ削除できません.
また、問題の原因も特定できない状況です.
なにか問題の特定方法についてアイデアがあれば教えて下さい.

削除できる場合

  • 通常のデータの読取をして描画したイベント (eventSources)
  • renderEventで描画をしたイベント (renderEvent)

削除できない場合

  • 外からドラッグアンドドロップで描画したイベント (eventReceive)
    削除を実行しても、描画上削除されないだけで、データベースのデータは削除されています.
    ただし、ブラウザをリロードすれば正常に削除できます.

コード

http://fullcalendar.io/docs/event_data/removeEvents/
removeEventは、eventのidを指定するだけです.
railsのコードとしては、カレンダーのイベントをクリックするとjQueryUIのダイアログでフォームが立ち上がって、そこから編集と削除ができるという仕組みです.
削除は普通のリンクです.

フォーム

<%= link_to l(:link_to_ttevent_destroy), ttevent_path(@ttevent), method: :delete, 
  data: { confirm: l(:message_destroy_confirm) },remote: true, 
  class: 'button destroy' %>

コントローラー

def destroy
  id = params[:id] 
  @ttevent = Ttevent.find(id)
  @ttevent.destroy
  respond_to do |format|
    format.js
  end
end

ビュー(destroy.js.coffee)
fullCalendarは特にエラーも吐いておらず、JavaScriptも最後まで実行されてリストが書き換えられます.

$('#dialog').dialog('close')
$('#modal_area').html('')
id = <%= @ttevent.id %>

$('#fullcalendar').fullCalendar('removeEvents', id)
$.ajax
  type: 'GET'
  url: "ttevents/issue_lists"

ちなみに、FullCalendarのドラッグアンドドロップのコードは次のとおりです.
下に書いたイベントdivがカレンダーにドラッグアンドドロップされると、'eventReceive'イベントが発生します.そして、divのdataアトリビュートからEventオブジェクトを作成します.
それを$.ajaxでrailsにPOSTします.
すると、railsでidをつけてデータを返し、またイベントの色を自動で計算して返してきます.
そこで、もともとのEventオブジェクトをアップデートします.
色も変わりますし、クリックするとイベントを編集できるので、ここまではうまくいっている気がします.

  eventReceive: function(event, element){
    title = event.title;
    start = event.start.format();
    end = event.end.format();
    issue_id = event.issue_id;
    stick = event.stick;
    $.ajax({
      type: "POST",
      url: "ttevents",
      data: {
        ttevent: {
        start_time: start,
        end_time: end,
        issue_id: issue_id
      }},
      success: function(ttevent,status){
        event.color = ttevent.color;
        event.id = ttevent.id;
        $('#fullcalendar').fullCalendar('updateEvent', event);
        $.ajax({
          type: 'GET',
          url: "ttevents/issue_lists"
        })
      }
    });
  },

ドラッグアンドドロップ用のイベントのビュー

<div class="draggable tt-event box ui-draggable-disabled <%= set_due_date(issue) %>"
  data-duration="00:30" 
  data-issue_id='<%=issue.id %>'
  >
  <%= issue.project.name%> - <%= issue.subject %>
</div>

問題の切り分け

たぶん他のケースでdestroy.js.coffeeが機能しているからdestroyの機能としてはミスはなさそう.
idがStringとかNumberとか型違いかもと思い、console.logでtypeofを出してみましたがすべてnumberのようでした.
作りたてのイベントでもきちんと色も変わりますので、更新はうまくできてると思います.つまり、イベントには有効なidが保持されているようです.
また、一度編集した後は、リロードしなくても削除できました.