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.
Edit: here is a jsfiddle based on full calendar example and my code
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With