fullcalendar赢得't让我调整事件大小(光标不显示,我做错了)
fullcalendar won't let me resize an event (cursor doesn't show, i'm doing it wrong)
Hi-stack跟踪bug追逐者,我在这里寻求帮助。。。我在symfony2上,使用twitter引导程序,我正在拼命尝试通过执行以下操作来调整通过JSON发送到日历的元素的大小,我可以拖动事件,但不能调整它们的大小…:
屏幕截图:http://nimga.fr/f/oDrdH.png
进入控制器:
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)));
并且在视图中:
$('#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');
}
})
我得到了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>
最终我找到了解决方案:为每个活动添加allDay!
var event = {
start: startEvent,
end: endEvent,
title: "Test",
allDay: true
}
好吧,我刚刚发现问题的来源:"fullcalendar.print.css"覆盖了基本的"fullcalellar.css",并将调整大小的句柄设置为"display:none"因此,通过擦除打印css,它是有效的。感谢阅读。
只有长事件是可重新调整大小的。该事件没有时间和日期。示例:
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'
}
]
您可以将allDay:True添加到每个事件中,或者只将allDayDefault={True}放入日历属性中。它也会这么做。
希望能有所帮助。
您可以使用该方法。
calendarOptions: CalendarOptions = {
eventResize: this.resizeCalendarEvent.bind(this)
}
function resizeCalendarEvent(event){
console.log('event:', event)
}
相关文章:
- 图像阵列预加载时显示沙漏光标
- 同时在两个文本框上显示光标
- fullcalendar赢得't让我调整事件大小(光标不显示,我做错了)
- Don'在IE中调用find next时,不要高亮显示Codemirror中的光标
- 如何在网页加载asp.net上显示文本框中第二个字母的光标位置
- javascript在foucs()后显示光标
- 我可以在HTML5画布中创建图形形状对象吗?以及当用户将鼠标悬停在形状上时如何将光标显示为指针
- 谷歌可视化时间线显示鼠标光标的时间
- 在 Twitter 引导程序中自动显示工具提示,而无需放置光标
- 显示进程(或等待)光标,而 jQuery 不起作用
- 实时显示所有当前访问者光标
- 如何在 SVG 上的鼠标光标旁边显示工具提示,尽管网站上有非 SVG 元素
- 键入.js脚本在iPhone6中不起作用,如果任何单词将在该行完成,在这种情况下,另一个单词不键入,仅显示光标
- 如何创建一个上下文菜单,该菜单仅在单击容器时显示在光标位置上
- 显示 404 找不到“蛞蝓”模板,当发布返回空光标 - 流星 - 铁路由器
- 在拖动时显示光标
- 切换光标以显示我可以放置元素的位置
- 使用 Javascript 同时显示 2 个光标
- IE9 内容可编辑中显示错误的光标
- 保存文本中光标高亮显示的位置