Jquery 全日历。在事件首次拖放到日历上后保存外部事件
我计划使用优秀的FullCalendar JQUERY插件作为操作系统的核心部分。目前，我正在制作原型，以检查插件是否能够完成这项工作。我几乎完成了，只发现了一个问题，我在互联网上或文档中找不到解决方案 理解我的问题的关键是我需要使用FullCalendar的外部事件配置（代码如下）。所以…当我在两个日期之间拖动日历上已经存在的元素时，它会触发eventdDrop事件，并且我的警报消息会返回事件对象的事件数据——所有这些都与预期完全一致。因此，我知道我可以轻松地用AJAX Post替换警报，以便在数据库中注册新的（移动的）事件数据 然而，我的问题。。。。现在，当我将其中一个外部事件（如GAS Cert due）拖到日历上时，当它第一次被拖到日历上时，不会触发eventdrop事件。因此，当事件第一次从外部事件列表中拖动到日历上时，我正在努力找出如何将事件数据（从拖动的外部事件）保存到数据库中。（仅供参考：-如果我随后将创建的新事件移动到新日历日期，则会触发eventDrop。但是，用户通常只需将外部事件拖到日历上，并将其保留几天或几周-在此期间，日历上的事件数据需要保存到数据库中，以便后续页面重新访问 我已经找了很久没有运气了。如果有人有一个好的解决方案，谢谢Jquery 全日历。在事件首次拖放到日历上后保存外部事件,jquery,events,fullcalendar,Jquery,Events,Fullcalendar,我计划使用优秀的FullCalendar JQUERY插件作为操作系统的核心部分。目前，我正在制作原型，以检查插件是否能够完成这项工作。我几乎完成了，只发现了一个问题，我在互联网上或文档中找不到解决方案 理解我的问题的关键是我需要使用FullCalendar的外部事件配置（代码如下）。所以…当我在两个日期之间拖动日历上已经存在的元素时，它会触发eventdDrop事件，并且我的警报消息会返回事件对象的事件数据——所有这些都与预期完全一致。因此，我知道我可以轻松地用AJAX Post替换警报，以便
<!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>
$（文档）.ready（函数（）{
/*初始化外部事件
-----------------------------------------------------------------*/
$（'#external events.fc event'）。每个（函数（）{
//存储数据，以便日历知道在删除时呈现事件
$（此）.data（'事件'{
title:$.trim（$（this）.text（）），//使用元素的文本作为事件标题
stick:true//在用户导航时进行维护（请参阅renderEvent方法中的文档）
});
//使用jQuery UI使事件可拖动
$（此）。可拖动({
zIndex:999，
revert:true，//将导致事件返回其初始状态
revertDuration:0//拖动后的原始位置
});
});
/*初始化日历
-----------------------------------------------------------------*/
$（“#日历”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
是的，
droppable:true，//这允许将内容拖放到日历上
/*-------问题------在日历上移动对象时触发事件，但在从外部事件列表帮助拖放事件时不触发事件？-----------------------------------*/
eventDrop:函数（事件、增量、恢复函数）{
//内部列移动下降，因此开始调用ajax函数。。。。。。
log（event.start.format（））；
console.log（event.id）；
var defaultDuration=moment.duration（$（'#calendar'）.fullCalendar（'option'，'defaultTimedEventDuration'））；//获取默认值并将其转换为正确的类型
var end=event.end | | event.start.clone（）.add（defaultDuration）；//如果没有结束，则计算它
log（'end is'+end.format（））；
警报（event.title+”已在“+event.start.format（））；//替换为AJAX以保存事件数据
},
drop:function（）{
//是否选中了“删除后删除”复选框？
如果（$（'#drop remove'）。是（':checked'））{
//如果是，请从“可拖动事件”列表中删除该元素
$（this.remove（）；
}
},
活动：[
{
标题：“全天活动”，
开始日期：2017-02-01
},
{
标题：“长期活动”，
开始日期：2017-02-07，
完：2017-02-10
},
{
身份证号码：999，
标题：“重复事件”，
开始：“2017-02-09T16:00:00”
},
{
身份证号码：999，
标题：“重复事件”，
开始：“2017-02-16T16:00:00”
},
{