I want time intervals, occupied by events, to be not clickable. If I just set event property editable
to false
, it does not help: I am still able to click near that event. Any way to make all the time interval, occupied by the event not clickable? Maybe somehow stretch its width to cover the whole day (actually, this would b开发者_如何学运维e a desirable behaviour)?
This code will fire if a day is occupied by an event. So in theory you can block a click by doing return false; in that logic.
http://jsfiddle.net/ppumkin/2QAY4/
The code that does the magic needs jquery. and you need this piece of code.
dayClick: function(date, allDay, jsEvent, view) {
if ($('div.fc-event').length > 0) {
//
var containerD = $(this).offset();
var containerH = $(this).height();
var mousex = jsEvent.pageX;
$('div.fc-event').each(function(index) {
var offset = $(this).offset();
if (((offset.left + $(this).outerWidth()) > mousex && offset.left < mousex) && ((offset.top > containerD.top) && (offset.top < (containerD.top + containerH)))) {
alert($(this).html());
//This will only fire if an empty space is clicked
//This will not fire if an event is clicked on a day
}
});
}
else {
//Put code here to do things if no events on a day
alert('There are no events on this day');
}
},
Well, you can stretch the events to the full height of a day, using the following CSS:
.fc-event-skin { height: 60px; }
But I would call that a workarround.
fullCalendar is designed to display multiple events on a day. Hence the bars are small enough to display overlapping events.
A better solution for a booking system would be a calendar that does not support overlapping events. Unfortunately there is none I could recommend.
精彩评论