Javascript 使用FullCalendar拖放事件
我正在尝试使用FullCalendar.js实现拖放功能,其基本思想是在左侧有一个菜单,其中包含可拖动的事件列表,您可以将其拖放到日历上(然后执行一个将这些事件添加到GoogleCalendar的函数) 我的问题是,由于某种原因,“drop”不起作用,我可以将文本拖到顶部,但FullCalendar上没有触发“drop”事件: HTML: Js小提琴: 是什么导致了这个问题Javascript 使用FullCalendar拖放事件,javascript,jquery,html,css,fullcalendar,Javascript,Jquery,Html,Css,Fullcalendar,我正在尝试使用FullCalendar.js实现拖放功能,其基本思想是在左侧有一个菜单,其中包含可拖动的事件列表,您可以将其拖放到日历上(然后执行一个将这些事件添加到GoogleCalendar的函数) 我的问题是,由于某种原因,“drop”不起作用,我可以将文本拖到顶部,但FullCalendar上没有触发“drop”事件: HTML: Js小提琴: 是什么导致了这个问题 提前感谢,事实证明,我小提琴中的问题是一个外部css文件: 显然,fullcalender.print.css打破了拖
提前感谢,事实证明,我小提琴中的问题是一个外部css文件:
显然,fullcalender.print.css打破了拖放操作。Yow!我使用的是完整的日历,它有一个和你想要的一样的演示。
<div class="wrapper wrapper-content" id="calendar-wrap">
<div class="row animated fadeInDown">
<div class="col-lg-3">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Draggable Events</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div id='external-events'>
<p>Drag a event and drop into calendar.</p>
<div id="evt1" class='external-event navy-bg'>Call Client.</div>
<div id="evt2" class='external-event navy-bg'>Confirm Client Happy with Quote.</div>
<div id="evt3" class='external-event navy-bg'>Send Quote.</div>
<div id="evt4" class='external-event navy-bg'>Something Else.</div>
<div id="evt5" class='external-event navy-bg'>One more for luck.</div>
<p class="m-t">
<input type='checkbox' id='removeEventAfterDrop' checked /> <label for='removeEventAfterDrop'>remove after drop</label>
</p>
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Calendar Monthly View </h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div id="myFullCalendar"></div>
</div>
</div>
</div>
</div>
</div>
$(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------*/
$('div.external-event').each(function() {
console.log("external event");
// 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: 1000,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#myFullCalendar').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
drop: function(){
console.log("dropped");
},
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
]
});
});