我需要能够让用户在我的fullcalendar周围移动一些事件.而且我想要去服务器并获取交易对手的忙碌时间,并在拖曳状态下将它们显示为日历上的背景事件.但是,当拖动发生时,当我调用.fullcalendar(‘renderEvents’,[…])时,fullcalendar中的拖动机制会中断并停止.
有没有办法添加事件而不破坏拖动或其他方式突出显示繁忙时间必须用ajax调用检索？
示例在这里：https://jsbin.com/qikiganelu/1/edit?js,output.尝试拖动“与Bob会面”.
$(function() { // document ready
$('#calendar').fullCalendar({
header: {
left: '',center: '',right: ''
},defaultView: 'agenda',duration: {days: 2},allDaySlot: false,defaultDate: '2017-04-27',minTime: '9:00',maxTime: '17:00',events: [
{
title: 'Keynote',start: '2017-04-27T09:00',end: '2017-04-27T11:00',editable: false,color: "gray",},{
title: 'Meeting with Bob',start: '2017-04-27T12:30',end: '2017-04-27T13:00',editable: true,],eventDragStart: function(event,jsEvent,ui,view){
// fetch Bob's busy times and add them as background events
var busyTimes = [
{
start: '2017-04-27T14:00',end: '2017-04-27T16:00',rendering: 'background',{
start: '2017-04-28T9:00',end: '2017-04-28T12:00',}
];
$('#calendar').fullCalendar('renderEvents',busyTimes);
},});
});
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
<!DOCTYPE html> <html> <head> <Meta charset='utf-8' /> <link href='https://fullcalendar.io/js/fullcalendar-3.4.0/fullcalendar.css' rel='stylesheet' /> <link href='https://fullcalendar.io/js/fullcalendar-3.4.0/fullcalendar.print.css' rel='stylesheet' media='print' /> <script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script> <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://fullcalendar.io/js/fullcalendar-3.4.0/fullcalendar.js'></script> <!-- the code from the JavaScript tab will go here --> <!-- the code from the CSS tab will go here --> </head> <body> <div id='calendar'></div> </body> </html>
解决方法
作为解决方法,请尝试预加载所有后台事件,但通过CSS隐藏,直到拖动操作发生.例如：
// hide all background events by default
.fc-bgevent {
display: none;
}
// redisplay once "show-background-events" class toggled on
.fc-bgevent.show-background-events {
display: block;
}
通过切换.show-background-events类来显示/隐藏背景事件,如下所示：
eventDragStart: function(event,view){
$(".fc-bgevent").addClass("show-background-events");
},eventDragStop: function(event,view){
$(".fc-bgevent").removeClass("show-background-events");
}