[英]FullCalendar : Ignore events during select
I've created a monthly calendar using fullCalendar month view . 我使用fullCalendar 月视图创建了一个月历。
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 . 因为我每天总会有1个事件,所以我将
eventLimit
设置为true以避免多个事件,并且因为此事件大约是整天,所以我还将editable
设置为false以防止事件的拖放。
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. 我希望我的用户能够直接从日历中选择日期,因此我在日历选项中设置了
selectable: true
。 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. 由于事件在默认情况下是可拖动的,因此单击事件不会触发选择,因为我将
editable
设置为false,它不再执行任何操作。
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 编辑:这是一个基于完整日历示例和我的代码的jsfiddle
I finally found the solution. 我终于找到了解决方案。
FullCalendar event's click is bind to the css class fc-day-grid-event
. FullCalendar事件的click被绑定到css类
fc-day-grid-event
。
It's possible to simply ignore it with one css line pointer-events: none;
可以简单地用一个css行
pointer-events: none;
忽略它pointer-events: none;
. 。
.fc-day-grid-event {
pointer-events: none;
}
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)
. 一种方法是允许用户通过
eventClick
回调点击事件,但是当他们点击它们时,通过FullCalendar的API $('#calendar').fullCalendar('select', start, end)
触发“选择”功能$('#calendar').fullCalendar('select', start, end)
。
I updated your jsfiddle example with the relevant code. 我用相关代码更新了你的jsfiddle示例。
HTML HTML
<div id="calendar"></div>
Javascript 使用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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.