尝试将外部事件拖入fullcalendar。我遇到了一些问题。
用户可以将外部事件拖入日历(两种情况)
案例1:如果他拖到过去的日期(我的意思是小于当前日期),则提示无法添加事件。
案例2:如果他将事件拖到未来的日期,事件将会粘在日历上。
我遇到第二种情况的问题,不能将事件粘贴到日历中。
这是我的代码,
HTML :
<div id='wrap'>
<div id='external-events'>
<div id='external-events-listing'>
<h4>Draggable Events</h4>
<div class='fc-event'>My Event 1</div>
<div class='fc-event'>My Event 2</div>
<div class='fc-event'>My Event 3</div>
<div class='fc-event'>My Event 4</div>
<div class='fc-event'>My Event 5</div>
</div>
<p>
<input type='checkbox' id='drop-remove' checked='checked' />
<label for='drop-remove'>remove after drop</label>
</p>
</div>
<div id='calendar'></div>
<div style='clear:both'></div>
</div>
我的 JS :
$('#external-events .fc-event').each(function() {
var externalEvents = {
title: $.trim($(this).text())
}; // creating event object and makes event text as its title
$(this).data('externalEvents', externalEvents); //saving events into DOM
// 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
});
});
$('#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
dragRevertDuration: 0,
theme: true,
drop: function(date, jsEvent) {
// is the "remove after drop" checkbox checked?
if (date > new Date()) {
var externalEvents = $(this).data('externalEvents');
alert(externalEvents.title);
$(this).data('event', {
title: externalEvents.title,
start: moment(date).format('HH:mm:ss'),
allDay: false,
stick: true
});
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
} else {
alert("can't add event");
}
},
});
任何人都可以帮我调试一下。