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... :
Screenshot : .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"
<script src="//cdnjs.cloudflare/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src=".10.3/jquery-ui.min.js"></script>
<link rel='stylesheet' type='text/css' href=".6.4/fullcalendar/fullcalendar.css" />
<link rel='stylesheet' type='text/css' href=".6.4/fullcalendar.print.css" />
<script type="text/javascript" src=".6.4/fullcalendar.min.js"></script>
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... :
Screenshot : 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"
<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>
5 Answers
Reset to default 9Finaly i find the solution: Add allDay to each event!
var event = {
start: startEvent,
end: endEvent,
title: "Test",
allDay: true
}
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.
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'
}
]
You can add allDay : True to each event or just put allDayDefault={true} in calendar property. It will do the same.
Hope it helps.
You can use the method.
calendarOptions: CalendarOptions = {
eventResize: this.resizeCalendarEvent.bind(this)
}
function resizeCalendarEvent(event){
console.log('event:', event)
}
function x called with arguments: [object Object] function x called with arguments: .ui-resizable-handle, [object Object]– pj_gineste Commented Dec 17, 2013 at 10:35