1
我正在使用優秀FullCalendar jQuery插件https://fullcalendar.io/作爲業務系統的核心部分計劃。目前我正在製作原型來檢查插件是否可以完成這項工作。我幾乎完成了，發現只有一個問題，我無法在互聯網上的任何地方或文檔中找到解決方案。Fullcalendar。事件發生後保存外部事件首先被拖入拖放到日曆
關鍵是瞭解我的問題是，我需要使用FullCalendar的外部事件的配置（如下面的代碼）。所以...當我在日曆之間已經在日曆之間拖動元素時，它會觸發eventdDrop事件，並且我的警報消息會返回事件對象的事件數據 - 完全如預期。所以我知道我可以輕鬆地用AJAX Post替換警報以在數據庫中註冊新的（移動的）事件數據。
但是我的問題....當我現在拖動外部事件之一（由於如GAS證書）到日曆時，第一次得到在日曆上把它丟不觸發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>
唉唉OK謝謝。我以前沒有用過這個插件。有什麼具體的我需要eventRecieve參數來獲取開始日期，結束日期和標題數據準備發佈？ – WChris
我確實試圖標記你的答案。我的聲譽似乎不夠高。但真正感謝您的幫助 – WChris
您可以隨時接受爲最佳答案:) – todes