FullCalendar：选择期间忽略事件

Question

我已经使用fullCalendar month view创建了一个每月日历。

在我的日历上，我每天只显示一个事件。此事件用于显示用户的状态（可用，不可用，忙碌...）

因为我每天总是会有1个事件，所以我设置eventLimit为true以避免多个事件，因为此事件是大概整整一天，我还设置了editable为false，以防止事件的拖动&下降。

这里是我的代码：

$('#calendar').fullCalendar({ 
    editable: false, // Prevent event drag & drop 
    events: '/json/calendar', // Get all events using a json feed 
    selectable: true, 
    eventLimit: true, // Only 1 event per day 
    header: { 
     left: 'prev,next', 
     center: 'title', 
     right: 'today' 
    }, 
    select: function(start, end) { 
     window.location.hash = '#oModal-calendar'; // Display some popup with a form 
     end.subtract(1, 'days'); 
     $('#checkboxButton').data('start', start); 
     $('#checkboxButton').data('end', end); 
     $('#calendar').fullCalendar('unselect'); 
    } 
}); 

我希望我的用户能够直接从日历中选择天，以便我在日历的选项设置selectable: true。不过，我收到很多反馈，说“它没有工作”。
经过一番调查后，我发现用户经常点击事件块而不是一天。
由于事件默认是可拖动的，所以点击事件不会触发选择，因为我已将editable设置为false，它不再执行任何操作。
这种组合导致我的用户认为存在错误。

---

我想fullCalendar选择工作，就像日历上没有事件一样。我如何实现这种行为？

编辑：这是一个基于完整的日历例如jsfiddle和我的代码要做到这一点是让用户通过eventClick回调点击事件的

Answer 1

我终于找到了解决办法。

FullCalendar事件的点击绑定到css类fc-day-grid-event。

它可以简单地忽略它与一个css行pointer-events: none;。

.fc-day-grid-event { 
    pointer-events: none; 
} 

这是Jsfiddle已更新。

Answer 2

的一种方式，但是当他们点击这些触发通过FullCalendar的API $('#calendar').fullCalendar('select', start, end)“选择”功能。

我用相关代码更新了您的jsfiddle示例。

HTML

<div id="calendar"></div> 

的Javascript

$('#calendar').fullCalendar({ 
    editable: false, // Prevent event drag & drop 
    defaultDate: '2015-02-12', 
    events: [{ 
     title: 'All Day Event', 
     start: '2015-02-01' 
    }, { 
     title: 'Lunch', 
     start: '2015-02-12T12:00:00' 
    }], 
    selectable: true, 
    eventLimit: true, // Only 1 event per day 
    header: { 
     left: 'prev,next', 
     center: 'title', 
     right: 'today' 
    }, 

    select: function (start, end) { 
     var title = prompt('Event Title:'); 
     var eventData; 
     if (title) { 
      eventData = { 
       title: title, 
       start: start, 
       end: end 
      }; 
      $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true 
     } 
     $('#calendar').fullCalendar('unselect'); 
    }, 
    eventClick: function(calEvent, jsEvent, view) { 
     var start = calEvent.start; 
     var end = calEvent.end; 
     $('#calendar').fullCalendar('select', start, end); 
    } 
});