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