fullcalendar 不会让我调整事件的大小（光标不显示，我做错了）

Question

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>

Answer 1

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.

Answer 2

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'
    }
]

Answer 3

Finaly i find the solution: Add allDay to each event!

var event = {
    start: startEvent,
    end: endEvent,
    title: "Test",
    allDay: true
}

Answer 4

You can add allDay : True to each event or just put allDayDefault={true} in calendar property. It will do the same.

Hope it helps.

Answer 5

Add editable to the following code ( Working code on version 1.6.4 of fullcalendar, newer versions do not work)

var DATA = {
        "event_title": event.title,
        "event_id": event.id,
        "event_date": event.start,
        "dayDelta": dayDelta,
        "minuteDelta": minuteDelta,
        "allDay": allDay
        "editable":true     <<<<<<<<<--THIS
    };