Javascript FullCalendar JQuery插件set calEvent.allDay=false，在agendaView中，移动事件会使它们消失
在FullCalendar JQuery插件中，当我设置calEvent.allDay=false时；在eventReceive函数中，切换到Agenday视图，如果我尝试移动事件，它们将消失。如果我将设置完全删除为全天，那么当我转到agenday视图时，事件将放置在全天事件部分。我可以将它们移动到任何我想要的地方，没有问题，但我想在切换到Agenday视图之前在内部设置时间。有人知道这件事吗？不确定如何在这里编写代码（我是新手），因此将在这里包括：Javascript FullCalendar JQuery插件set calEvent.allDay=false，在agendaView中，移动事件会使它们消失,javascript,jquery,fullcalendar,Javascript,Jquery,Fullcalendar,在FullCalendar JQuery插件中，当我设置calEvent.allDay=false时；在eventReceive函数中，切换到Agenday视图，如果我尝试移动事件，它们将消失。如果我将设置完全删除为全天，那么当我转到agenday视图时，事件将放置在全天事件部分。我可以将它们移动到任何我想要的地方，没有问题，但我想在切换到Agenday视图之前在内部设置时间。有人知道这件事吗？不确定如何在这里编写代码（我是新手），因此将在这里包括： <!DOCTYPE html>
<!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>
$（文档）.ready（函数（）{
var屏幕限制=12；
var scenes=[“淡入”，
“那天晚些时候”，
“第二天”，
“两三天后”，
“第二天”，
“那天晚些时候”，
“两三天后”，
“一两天后”，
“第二天”，
“那天晚些时候”，
“一两天后”，
“两三天后”]；
var FakerResponse=“[“淡入”、“当天晚些时候”、“第二天”、“两三天后”、“第二天”、“当天晚些时候”、“两三天后”、“一天或两天之后”、“第二天”、“当天晚些时候”、“一天或两天之后”、“两天或三天之后”]；
var obj=JSON.parse（fakeresponse）；
if（obj==null）{
var listlength=scenes.length；
如果（列表长度<屏幕限制）{
对于（i=0；i，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' );
},
谢谢。没有完整的日历专家？帮助！我已经到了最后期限。非常感谢你的任何想法。还有，有人能告诉我如何在日历的右侧创建第二个侧边栏（与左侧已经存在的侧边栏一起使用）？我尝试的一切似乎都不起作用，并且已经查阅了谷歌和多本书。