Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

FullCalendar : Ignore events during select

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

like image 410
Gary Olsson Avatar asked Oct 16 '15 13:10

Gary Olsson


People also ask

What is FullCalendar in Salesforce?

FullCalendar is useful for appointment booking, event scheduling, task management, and see which peoples are leave in this current month, etc. You can select one date or multiple dates in this example and JSON type of data pass to events to display the calendar. you can add events for a particular date or update the event.

Is the end date exclusive to the event object?

In line with the discussion about the Event object, it is important to stress that the end date property is exclusive. For example, if the selection is all-day and the last day is a Thursday, end will be Friday.

What is the resource object in the calendar view?

The current Calendar view. Resource object. If the current view is a resource view, this is the Resource object that was selected. This is only available when using one of the resource plugins.


1 Answers

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.

like image 102
Gary Olsson Avatar answered Sep 30 '22 06:09

Gary Olsson