FullCalendar : Ignore events during select

Question

I've created a monthly calendar using fullCalendar month view.

On my calendar, I've displayed only one event per day. This event is used to display user's status (available, not available, busy...)

Because I'll always have 1 event per day, I've set eventLimit to true to avoid multiple events and because this event is about the entire day, I've also set editable to false to prevent events' drag & drop .

Here is my code:

$('#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');
    }
});

I want my user to be able to select days directly from the calendar so I've set selectable: true in the calendar's option. However, I've got many feedback that "it didn't worked".
After some investigation, I found that users often click on the event block instead of the day.
Because events are draggable by default, a click on an event doesn't trigger the select and because I've set editable to false it doesn't do anything anymore.
This combination leads my users to think that there is a bug.

---

I would like the fullCalendar select to work like there was no event on the calendar. How can I achieve this behavior ?

Edit: here is a jsfiddle based on full calendar example and my code

Answer 1

I finally found the solution.

FullCalendar event's click is bind to the css class fc-day-grid-event.

It's possible to simply ignore it with one css line pointer-events: none;.

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

Here is the Jsfiddle updated.

Answer 2

One way to do this would be to allow the user to click on event's through the eventClick callback, but when they click on them trigger the "select" function through FullCalendar's API $('#calendar').fullCalendar('select', start, end).

I updated your jsfiddle example with the relevant code.

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