在FullCalendar JQuery插件中，当我设置calEvent.allDay = false时;在eventReceive函数中切换到agendaDay视图，如果我尝试移动事件就会消失。如果我将设置完全删除到全天，那么当我转到agendaDay View时，事件将被放置在allDay事件部分中。我可以在任何地方移动它们，没有问题，但我想在切换到agendaDay视图之前在内部设置时间。有人知道解决这个问题吗？不知道如何在这里做代码（我是新手），所以将它包含在这里：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='lib/jquery-ui.custom.min.js'></script>
<script src='fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
var screenLimit = 12;
var scenes = ["FADE IN",
"LATER THAT DAY",
"THE NEXT DAY",
"TWO OR THREE DAYS LATER",
"THE NEXT DAY",
"LATER THAT DAY",
"TWO OR THREE DAYS LATER",
"ONE OR TWO DAYS LATER",
"THE NEXT DAY",
"LATER THAT DAY",
"ONE OR TWO DAYS LATER",
"TWO OR THREE DAYS LATER"];
var fakeresponse = '["FADE IN","LATER THAT DAY","THE NEXT DAY","TWO OR THREE DAYS LATER","THE NEXT DAY","LATER THAT DAY","TWO OR THREE DAYS LATER","ONE OR TWO DAYS LATER","THE NEXT DAY","LATER THAT DAY","ONE OR TWO DAYS LATER","TWO OR THREE DAYS LATER"]';
var obj = JSON.parse(fakeresponse);
if (obj == null) {
var listlength = scenes.length;
if (listlength < screenLimit) {
for(i=0;i<listlength;i++) {
var lstid = "Sc" + (i+1);
document.getElementById(lstid).innerHTML = scenes[i];
}
for(i=listlength;i<screenLimit;i++) {
var lstid1 = "Sc" + (i+1);
document.getElementById(lstid1).style.display = "none";
}
} else {
for(i=0;i<scenes.length;i++) {
if (screenLimit > i) {
var lstid = "Sc"+(i+1);
document.getElementById(lstid).innerHTML = scenes[i];
}
}
}
} else {
var listlength = obj.length;
if (listlength < screenLimit) {
for(i=0;i<listlength;i++) {
var lstid = "Sc" + (i+1);
document.getElementById(lstid).innerHTML = obj[i];
}
for(i=listlength;i<screenLimit;i++) {
var lstid1 = "Sc" + (i+1);
document.getElementById(lstid1).style.display = "none";
}
} else {
for(i=0;i<obj.length;i++) {
if (screenLimit > i) {
var lstid = "Sc"+(i+1);
document.getElementById(lstid).innerHTML = obj[i];
}
}
}
}
/* 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
-----------------------------------------------------------------*/
var currDate;
$('#calendar').fullCalendar({
header: {
left: 'prevYear,prev',
center: 'title',
right: 'next,nextYear agendaDay month'
},
buttonText: {
agendaDay: 'Action Scheduler',
month: 'Scene Scheduler'
},
editable: true,
fixedWeekCount: false,
slotDuration: '00:05:00',
defaultTimedEventDuration: '00:15:00',
scrollTime: '09:00:00',
droppable: true, // this allows things to be dropped onto the calendar
drop: function() {
$(this).remove();
},
eventReceive: function(calEvent) {
currDate = $.fullCalendar.moment(calEvent.start.format()); // Create a clone of the dropped date
// calEvent.allDay = false;
// calEvent.overlap = false;
var sdate = $.fullCalendar.moment(calEvent.start.format()); // Create a clone of the dropped date
sdate.stripTime(); // The time should already be stripped but lets do a sanity check.
sdate.time('09:00:00'); // Set a default start time.
calEvent.start = sdate;
var edate = $.fullCalendar.moment(calEvent.start.format()); // Create a clone of the dropped date
edate.stripTime(); // The time should already be stripped but lets do a sanity check.
edate.time('09:30:00'); // Set a default start time.
calEvent.end = edate;
$('#calendar').fullCalendar('clientEvents', function(event) {
if (calEvent.start.format() == event.start.format() && calEvent.title != event.title) {
calEvent.start = edate;
var nedate = $.fullCalendar.moment(calEvent.start.format()); // Create a clone of dropped date
nedate.stripTime(); // The time should already be stripped but lets do a sanity check.
nedate.time('10:00:00'); // Set a default start time.
calEvent.end = nedate;
}
});
$('#calendar').fullCalendar('rerenderEvents' );
},
viewRender: function(view,element) {
if (view.name == "agendaDay") {
$('#calendar').fullCalendar('gotoDate', currDate);
}
}
});
});
</script>
<style>
body {
margin-top: 20px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#wrap {
width: 950px;
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: 18px;
margin-top: 0;
padding-top: 1em;
}
#external-events h5 {
font-size: 16px;
margin-top: 0;
}
#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: 700px;
}
</style>
</head>
<body>
<div id='wrap'>
<div id='external-events'>
<h4>Story Navigator</h4>
<h5>Byte Me!</h5>
<div class='fc-event' id='Sc1'>Sc 1 - FADE IN</div>
<div class='fc-event' id='Sc2'>Sc 2 - LATER THAT DAY</div>
<div class='fc-event' id='Sc3'>Sc 3 - THE NEXT DAY</div>
<div class='fc-event' id='Sc4'>Sc 4 - TWO OR THREE DAYS LATER</div>
<div class='fc-event' id='Sc5'>Sc 5 - THE NEXT DAY</div>
<div class='fc-event' id='Sc6'>Sc 6 - LATER THAT DAY</div>
<div class='fc-event' id='Sc7'>Sc 7 - TWO OR THREE DAYS LATER</div>
<div class='fc-event' id='Sc8'>Sc 8 - ONE OR TWO DAYS LATER</div>
<div class='fc-event' id='Sc9'>Sc 9 - THE NEXT DAY</div>
<div class='fc-event' id='Sc10'>Sc 10 - LATER THAT DAY</div>
<div class='fc-event' id='Sc11'>Sc 11 - ONE OR TWO DAYS LATER</div>
<div class='fc-event' id='Sc12'>Sc 12 - TWO OR THREE DAYS LATER</div>
</div>
<div id='calendar'></div>
<div style='clear:both'></div>
</div>
</body>
</html>
答案 0 :(得分：0)
似乎FullCalendar对我设置拖放事件的结束时间并不满意。如果我只设置一个开始时间并让defaultTimedEventDuration为我设置结束，它工作正常。所以代码应该是：
eventReceive: function(calEvent) {
calEvent.allDay = false;
currDate = $.fullCalendar.moment(calEvent.start.format()); // Create a clone of the dropped date
var sdate = $.fullCalendar.moment(calEvent.start.format()); // Create a clone of the dropped date
sdate.stripTime(); // The time should already be stripped but lets do a sanity check.
sdate.time('09:00:00'); // Set a default start time.
calEvent.start = sdate;
$('#calendar').fullCalendar('clientEvents', function(event) {
if (calEvent.start.format() == event.start.format() && calEvent.title != event.title) {
var edate = $.fullCalendar.moment(calEvent.start.format()); // Create a clone of the dropped date
edate.stripTime(); // The time should already be stripped but lets do a sanity check.
edate.time('09:05:00'); // Set a default start time.
calEvent.start = edate;
}
});
$('#calendar').fullCalendar('rerenderEvents' );
},
感谢。