拖动开始时向fullcalendar添加更多事件
[英]Add more events to fullcalendar when dragging starts
问题描述
我需要能够让用户在我的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', rendering: 'background', } ]; $('#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>
2 个解决方案
解决方案1
2 已采纳 2017-05-02 22:43:02
作为解决方法，尝试预加载所有后台事件，但通过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, jsEvent, ui, view){
$(".fc-bgevent").addClass("show-background-events");
},
eventDragStop: function(event, jsEvent, ui, view){
$(".fc-bgevent").removeClass("show-background-events");
}
解决方案2
1
我的坏，我现在看到了问题。 而你的错误就是放置你的$('#calendar').fullCalendar('renderEvents', busyTimes); 以及你编写数组的方式，我也稍微改变了ISO8601时间字符串。 您可以从时间字符串中删除秒数并写入2017-04-27T12:35Z而不是2017-04-27T12:35:02Z例如
<script>
$(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-27T10:00',
editable: false,
color: "gray",
},
{
title: 'Meeting with Bob',
start: '2017-04-27T10:35:02Z',
end: '2017-04-27T11:35:02Z',
editable: true,
},
],
eventDragStart: function(event, jsEvent, ui, view){
}
});
//this is the new place for the fetching and calling renderEvents
// fetch Bob's busy times and add them as background
var busyTimes = [
{title: 'Event One', start: '2017-04-27T12:35:02Z', end: '2017-04-27T13:35:02Z'},
{title: 'Event Two', start: '2017-04-27T14:35:02Z', end: '2017-04-27T15:35:02Z'}
];
$('#calendar').fullCalendar('renderEvents', busyTimes);
});
</script>
将事件拖动到FullCalendar时防止重叠
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.