twitter-bootstrap fullcalendar 不会让我调整事件的大小（光标不显示，我做错了）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20615779/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fullcalendar won't let me resize an event (cursor doesn't show, i'm doing it wrong)
提问by kuzko
Hi stack trace bug chasers, I'm here to ask for help... I'm on symfony2, with twitter bootstrap and I'm desperately trying to enable resizing of my elements sent to the calendar through JSON by doing the following, I can drag the events, but not resize them... :
嗨堆栈跟踪错误追逐者，我在这里寻求帮助......我在 symfony2 上，使用 twitter bootstrap，我正在拼命尝试通过执行以下操作来调整通过 JSON 发送到日历的元素的大小，我可以拖动事件，但不能调整它们的大小...：
Screenshot : http://nimga.fr/f/oDrdH.png
截图：http: //nimga.fr/f/oDrdH.png
into the controller :
进入控制器：
foreach($events as $event) {
$start = $event - > getDate();
$allDay = ($event - > getLength() >= 8);
$newevent = array('title' = > $event - > getTask() - > getName(),
'start' = > $start - > format('Y-m-d H:i:s'),
'id' = > $event - > getId(),
'allDay' = > $allDay,
'end' = > $start - > modify('+'.$event - > getLength().
' hour') - > format('Y-m-d H:i:s'));
$eventsArray[] = $newevent;
}
return $this - > render('IntranetTimesheetBundle:Task:displayall.html.twig', array('htmlTree' = > $htmlTree, 'eventlist' = > json_encode($eventsArray)));
and in the view :
并在视图中：
$('#calendar').fullCalendar({
droppable: true, // this allows things to be dropped onto the calendar !!!
weekends: false, // will hide Saturdays and Sundays
defaultView: 'agendaWeek',
slotMinutes: 60,
minTime: 7,
maxTime: 19,
events: {
{
eventlist | raw
}
},
editable: true,
resizable: true,
eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
var DATA = {
"event_title": event.title,
"event_id": event.id,
"event_date": event.start,
"dayDelta": dayDelta,
"minuteDelta": minuteDelta,
"allDay": allDay
};
$.ajax({
type: "POST",
url: "move",
data: DATA,
cache: false,
success: function (data) {
//to do in case of success
}
});
},
eventResizeStart: function (event, jsEvent, ui, view) {
console.log('RESIZE START ' + event.title);
},
eventResizeStop: function (event, jsEvent, ui, view) {
console.log('RESIZE STOP ' + event.title);
},
eventResize: function (event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
console.log('RESIZE!! ' + event.title);
console.log(dayDelta + ' days'); //this will give the number of days you extended the event
console.log(minuteDelta + ' minutes');
}
})
I got jQuery and it's UI and droppable extensions loaded and still no arrow cursor to indicate that i can resize the event. Here is my head with the "dependencies"
我得到了 jQuery，它加载了 UI 和可放置的扩展，但仍然没有箭头光标指示我可以调整事件的大小。这是我的“依赖关系”
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel='stylesheet' type='text/css' href="http://arshaw.com/js/fullcalendar-1.6.4/fullcalendar/fullcalendar.css" />
<link rel='stylesheet' type='text/css' href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.print.css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script>
回答by kuzko
OK, I just found where the problem comes from : The "fullcalendar.print.css" overrides the basic "fullcalendar.css" and sets the resizing handle in "display: none" So with wiping the print css, it works. Thanks for reading.
好的，我刚刚发现问题出在哪里：“fullcalendar.print.css”覆盖基本的“fullcalendar.css”并在“display：none”中设置调整大小的句柄，因此通过擦除打印css，它可以工作。谢谢阅读。
回答by Sanith
Only Long Event is re sizable. that event not have time along with the date. Example:
只有长事件是可调整的。那个事件没有时间和日期。例子：
events: [
{
title: 'All Day Event',
start: '2014-06-01'
},
{
title: 'Long Event',
start: '2014-06-07',
end: '2014-06-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2014-06-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2014-06-16T16:00:00'
},
{
title: 'Meeting',
start: '2014-06-12T10:30:00',
end: '2014-06-12T12:30:00'
},
{
title: 'Lunch',
start: '2014-06-12T12:00:00'
},
{
title: 'Birthday Party',
start: '2014-06-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2014-06-28'
}
]
回答by IfThenElse
Finaly i find the solution: Add allDay to each event!
最后我找到了解决方案：将 allDay 添加到每个事件中！
var event = {
start: startEvent,
end: endEvent,
title: "Test",
allDay: true
}
回答by Somesh
You can add allDay : True to each event or just put allDayDefault={true} in calendar property. It will do the same.
您可以将 allDay : True 添加到每个事件或仅将 allDayDefault={true} 放在日历属性中。它会做同样的事情。
Hope it helps.
希望能帮助到你。
