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 bination 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

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 bination 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

• javascript
• jquery
• fullcalendar

Share Improve this question Follow edited Oct 16, 2015 at 13:37 Gary Olsson asked Oct 16, 2015 at 13:04 Gary OlssonGary Olsson 1,2172222 silver badges3434 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

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