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

Answer 1

我终于找到了解决办法。

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

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

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

Jsfiddle 已更新。

Answer 2

执行此操作的一种方法是允许用户通过eventClick 回调单击事件，但当他们单击它们时会通过 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);
    }
});