WCh*_*ris 1 jquery events fullcalendar
我打算将EXCELLENT FullCalendar JQUERY插件https://fullcalendar.io/ 用作操作系统的核心部分。目前，我正在制作原型，以检查插件是否可以完成这项工作。我快完成了，只发现了一个问题，我找不到任何解决方案可以在Internet上或文档中找到。
理解我的问题的关键是我需要使用FullCalendar的外部事件配置（如下代码）。所以...当我在日期之间的日历上拖动一个元素时，它会触发eventdDrop事件，而我的警报消息将返回事件对象的事件数据-完全符合预期。因此，我知道我可以轻松地用AJAX帖子替换警报，以在数据库中注册新的（移动的）事件数据。
但是，我的问题是....当我现在将一个外部事件（例如，GAS Cert到期）拖到日历上时，它第一次触发时就不会触发eventdrop事件。因此，我很难弄清楚如何将事件数据（从拖动的外部事件中保存）到数据库中-当通过从外部事件列表中将事件首次拖放到日历上时，该事件就被保存了。（有关信息： -如果我接着移动创建一个新的日历日期的新事件，eventDrop 被触发但是常常用户将简单地将外部事件到日历，让他们有几天甚至几个星期-在此期间该事件。日历上的数据需要保存到数据库中以供以后重新访问页面。
我一直在寻找没有运气的年龄。如果有人有一个好的解决方案，谢谢。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../lib/jquery-ui.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events .fc-event').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
/*-------Problem------Event is triggered when object is moved on calendar-but not when event is dragged and dropped from external events list-help?----------------------------------*/
eventDrop: function(event, delta, revertFunc) {
//inner column movement drop so get start and call the ajax function......
console.log(event.start.format());
console.log(event.id);
var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration')); // get the default and convert it to proper type
var end = event.end || event.start.clone().add(defaultDuration); // If there is no end, compute it
console.log('end is ' + end.format());
alert(event.title + " was dropped on " + event.start.format()); //REPLACE WITH AJAX TO SAVE EVENT DATA
},
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
events: [
{
title: 'All Day Event',
start: '2017-02-01'
},
{
title: 'Long Event',
start: '2017-02-07',
end: '2017-02-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-02-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-02-16T16:00:00'
},
{
title: 'Conference',
start: '2017-02-11',
end: '2017-02-13'
},
{
title: 'Meeting',
start: '2017-02-12T10:30:00',
end: '2017-02-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-02-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-02-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-02-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-02-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-02-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-02-28'
}
]
});
});
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#wrap {
width: 1100px;
margin: 0 auto;
}
#external-events {
float: left;
width: 150px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
text-align: left;
}
#external-events h4 {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
#external-events .fc-event {
margin: 10px 0;
cursor: pointer;
}
#external-events p {
margin: 1.5em 0;
font-size: 11px;
color: #666;
}
#external-events p input {
margin: 0;
vertical-align: middle;
}
#calendar {
float: right;
width: 900px;
}
</style>
</head>
<body>
<div id='wrap'>
<div id='external-events'>
<h4>Draggable Events</h4>
<div class='fc-event' style="color:red">Gas Cert Due Today</div>
<div class='fc-event'>Electricity Cert is Due</div>
<div class='fc-event'></div>
<div class='fc-event'>My Event 4</div>
<div class='fc-event'>My Event 5</div>
<p>
<input type='checkbox' id='drop-remove' />
<label for='drop-remove'>remove after drop</label>
</p>
</div>
<div id='calendar'></div>
<div style='clear:both'></div>
</div>
</body>
</html>
问题在于这是错误的回调，在文档中它说：当外部事件到达日历时，不会调用eventDrop。eventReceive被称为。
https://fullcalendar.io/docs/event_ui/eventDrop/
所以你必须使用 eventReceive
https://fullcalendar.io/docs/dropping/eventReceive/