FullCalendar.js：事件回调不会触发添加的事件被调整大小/点击/放弃？ [英] FullCalendar.js: Event callbacks not firing for added events that get resized/clicked/dropped?
本文介绍了FullCalendar.js：事件回调不会触发添加的事件被调整大小/点击/放弃？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
添加一个事件然后再次更改它后，没有任何反应， // *没有回调。我甚至用 fullCalendar（'refetchEvents'）仍然没有运气。我错过了什么吗？这里是代码：
$（'＃calendar'）。fullCalendar（{
header：{
left：'prev，next today'，
center：'title'，
right：'agendaweek'
}，
defaultDate：'2015-04-20'，
editable：false，
eventLimit：true，
firstDay：1，
defaultView：'agendaweek'，
timeFormat：'HH：mm'，
lang ：'de'，
columnFormat：'dddd DM'，
allDaySlot：false，
slotDuration：'00：30：00'，//默认为30分钟
minTime： '12：00：00'，
// maxTime：'23：00：00'，
contentHeight：600，
events：[
{
title： ''，
start：'2014-09-01T18：00：00'，
结束：'2014-09-01T20：00：00'，
dow：[1]，/ /重复同一个工作日
r '：背景'，
颜色：'＃6BA5C2'
}，
{
title：''，
start：'2014-09-02T20：00 ：00'，
结束：'2014-09-02T22：00：00'，
dow：[2]，//重复同一个工作日
渲染：'background'，
颜色：'＃6BA5C2'
}，
{
标题：'Event'，
start：'2015-04-24 13:00:00'，
结束：'2015-04-24 14:00:00'，
color：'＃F77'
}，
]，
// *无回叫
viewDisplay：function（element）{
alert（element）;
}，
//添加一个事件
selectable：true，
selectHelper：true，
select：function（start，end）{
var title = prompt（'Deine E-Mail：'）;
var eventData;
if（title）{
eventData = {
title：title，
start：start，
end：end，
color：'＃00AA00' ，
editable：true，
eventDurationEditable：true，
// *无回调
eventResizeStop：function（event，jsEvent，ui，view）{
alert（'结束'）;
}，
// *无回调
eventClick：function（calEvent，jsEvent，view）{
alert（'clicked'）;
}，
// *无回调
eventDrop：function（event，delta，revertFunc，jsEvent，ui，view）{
alert（'dropped'）;
}，
// * no callback
eventResize：function（event，delta，revertFunc，jsEvent，ui，view）{
alert（event.title +'end is now '+ event.end.format（））;
}，
};
$（'＃calendar'）。fullCalendar（'renderEvent'，eventData，true）; // stick = true
$（'＃calendar'）。fullCalendar（'refetchEvents'）;
//不帮助
$（'＃calendar'）。fullCalendar（'rerenderEvents'）;
}
$（'＃calendar'）。fullCalendar（'unselect'）;
}，
}）;
可见证明：
解决方案
<这些回调不是事件的属性。他们是顶级fullcalendar选项。 文档的每个部分代表一个FC顶级选项。某些选项也可能是特定于某些事件的，但它们在文档中被提及。如果您查看事件对象，您会发现没有 eventResize 属性，例如。
所以解决的办法就是将回调移动到顶层：
$（'＃calendar'）。fullCalendar（{
/*...other options * /
eventResizeStop：function（event，jsEvent， ui，view）{
alert（'end'）;
}，
// * no callback
eventClick：function（calEvent，jsEvent，view）{
alert（'clicked'）;
}，
// * no callback
eventDrop：function（event，delta，revertFunc，jsEvent，ui，view）{
alert（' ）;
}，
// *无回调
eventResize：function（event，delta，revertFunc，jsEvent，ui，view）{
alert（event.title + 'end is now'+ event.end.format（））;
}，
events：[{
title：''，
/ * ... etc * /
以下是 JSFiddle 与它一起工作。
After adding an event and then changing it again, nothing happens, // * no callback. I even used fullCalendar('refetchEvents') still no luck. Am I missing something? Here is the code:
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaWeek'
},
defaultDate: '2015-04-20',
editable: false,
eventLimit: true,
firstDay: 1,
defaultView: 'agendaWeek',
timeFormat: 'HH:mm',
lang: 'de',
columnFormat: 'dddd D.M.',
allDaySlot: false,
slotDuration: '00:30:00', // default is 30 min
minTime: '12:00:00',
// maxTime: '23:00:00',
contentHeight: 600,
events: [
{
title: '',
start: '2014-09-01T18:00:00',
end: '2014-09-01T20:00:00',
dow: [1], // repeat same weekday
rendering: 'background',
color: '#6BA5C2'
},
{
title: '',
start: '2014-09-02T20:00:00',
end: '2014-09-02T22:00:00',
dow: [2], // repeat same weekday
rendering: 'background',
color: '#6BA5C2'
},
{
title: 'Event',
start: '2015-04-24 13:00:00',
end: '2015-04-24 14:00:00',
color: '#F77'
},
],
// * no callback
viewDisplay: function (element) {
alert(element);
},
// adding an event
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Deine E-Mail:');
var eventData;
if(title) {
eventData = {
title: title,
start: start,
end: end,
color: '#00AA00',
editable: true,
eventDurationEditable: true,
// * no callback
eventResizeStop: function(event, jsEvent, ui, view) {
alert('end');
},
// * no callback
eventClick: function(calEvent, jsEvent, view) {
alert('clicked');
},
// * no callback
eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
alert('dropped');
},
// * no callback
eventResize: function(event, delta, revertFunc, jsEvent, ui, view) {
alert(event.title + ' end is now ' + event.end.format());
},
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick = true
$('#calendar').fullCalendar('refetchEvents');
// not helping either
$('#calendar').fullCalendar('rerenderEvents');
}
$('#calendar').fullCalendar('unselect');
},
});
Visible proof:
解决方案
Those callbacks are not properties of the events. They are top level fullcalendar options. Each section of the docs represents one FC top level option. Some options can also be specific to certain events, but they are mentioned as such in the docs. If you look at event object you see that there is no eventResize property, for example.
So the fix is to just move the callbacks to the top level:
$('#calendar').fullCalendar({
/*...other options*/
eventResizeStop: function (event, jsEvent, ui, view) {
alert('end');
},
// * no callback
eventClick: function (calEvent, jsEvent, view) {
alert('clicked');
},
// * no callback
eventDrop: function (event, delta, revertFunc, jsEvent, ui, view) {
alert('dropped');
},
// * no callback
eventResize: function (event, delta, revertFunc, jsEvent, ui, view) {
alert(event.title + ' end is now ' + event.end.format());
},
events: [{
title: '',
/*... etc*/
Here's a JSFiddle with it working.
这篇关于FullCalendar.js：事件回调不会触发添加的事件被调整大小/点击/放弃？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
