fullcalendar-railsのeventClickが動作しない問題

タイトル通りの問題が起きていたため、原因を確認してみました。

現象

  • fullcalendar の eventClick() に処理を登録しても動作してくれない。
  • fullcalendar の dayClick() に登録した処理は動いている。

fullcalendarのイベント登録処理はこんな感じ

$(document).ready(function() {

  $('#calendar').fullCalendar({
    editable: true, 

    // カレンダーの日付クリック時に呼び出す処理(★動いている)
    dayClick: function(date, allDay, jsEvent, view) {
      // "test"のイベントを登録する
      $('#calendar').fullCalendar('addEventSource', [{
        title: "test",
        start: date,
        allDay: true
      }]);
      $(this).css('background-color', 'red');
    },

    // カレンダーのイベントクリック時に呼び出す処理(★動いていない)
    eventClick: function(calEvent, jsEvent, view) {
      // クリックしたイベントを削除する
      $('#calendar').fullCalendar('removeEvents', calEvent._id);
    },
  });
});

使用している環境

Windows + xampp + FullCalendar 使用時には問題発生していなかったので、環境依存の問題のようです。。

原因

fullcalendar.js の bindDaySeg() 内で eventElementHandlers()を呼び出すことで、ハンドラの登録(eventClickも含む)を行っているのですが、その手前の以下の処理でエラーが発生していました。

function bindDaySeg(event, eventElement, segment) {

  if (isEventDraggable(event)) {
    t.draggableDayEvent(event, eventElement, segment); // use `t` so subclasses can override
  }

t.draggableDayEvent()内で、eventElement.draggable()のパラメータの登録、処理の定義を行っているのですが、今回使用している環境ではeventElement.draggable 自体がundefinedになっているため、ここで処理が中断されていました。

回避方法

fullcalendarの設定で、draggableをoffにすることで、t.draggableDayEvent()の呼び出しを回避するようにしました。。

$(document).ready(function() {

  $('#calendar').fullCalendar({
    editable: true, 
    disableDragging: true, // ★追加！！
    // カレンダーの日付クリック時に呼び出す処理
    dayClick: function(date, allDay, jsEvent, view) {
 
    ...

課題

上記の回避方法を使うと、ドラッグイベントが使えなくなります。
根本的な解決には、eventElement.draggable が undefinedになる原因を確認して、その上で解決法を考える必要があります。

クリックだけ使うので良ければこの方法で、、よければお試し下さい。