FullCalendar: I can't resize events in month view

Question

I get an event list from server with an AJAX call. I have the "editable" option set to "true", but it only works in agendaDay and agendaWeek views, not in month view. Why? This is the code:

$('#calendar').fullCalendar({
        header: {
            right: "agendaDay,agendaWeek,month prev,next"
        },
        firstDay: 1,
        fixedWeekCount: false,
        contentHeight: 700,
        timeFormat: "HH:mm",
        displayEventEnd: {
            month: false,
            agendaWeek: false,
            agendaDay: false,
            'default':true
        },
        axisFormat: "HH:mm",
        slotEventOverlap: false,
        editable: true,

        eventSources: [
            {   // 1st group: Miscellanea
                events: function(start,end,timezone,callback){

                    callAjax("Miscellanea",callback);
                },
                color: "#086A87",

            },{ // 2nd group: project init
                events: function(start,end,timezone,callback){

                    callAjax("Project",callback);
                },
                color: "#B40404"
            }
        ]
});

And this is my function callAjax:

function callAjax(type,callback){

    $.ajax({
        type: "GET",
        url: "/projects/{{project.id}}/get_events/",
        dataType: "json",
        data: {"data":type},
        success: function(response){
            data = eval("(" + response + ")")

            var events = [];

            for(i=0;i<data.length;i++){

                events.push({
                    id: data[i].pk,
                    title: data[i].fields['title'],
                    start: data[i].fields['start'],
                    end: data[i].fields['end'],
                    className: "event",
                    defaultTimedEventDuration: "00:30:00"
                });
            }
            callback(events);
        }
    });

}

As I said before, all work fine except resizing in month view, and I can't imagine what's the problem. Help?

Answer 1

In order to resize an event in month view, it has to be set as a "allday" event. To set an "allday" event, when getting the events from database, you have to differentiate them. I have a boolean column in the database called allday. Then, you set allday property depending on the value. This is how AJAX call differentiate them:

function callAjax(type,callback){
    $.ajax({
        type: "GET",
        url: "/projects/{{project.id}}/get_events/",
        dataType: "json",
        data: {"data":type},
        success: function(response){
            data = eval("(" + response + ")")

            var events = [];

            for(i=0;i<data.length;i++){

                if(!data[i].fields['allday']){
                    events.push({
                        id: data[i].pk,
                        title: data[i].fields['title'],
                        start: data[i].fields['start'],
                        end: data[i].fields['end'],
                        className: "event",
                        defaultTimedEventDuration: "00:30:00"
                    });
                }else{
                    events.push({
                        id: data[i].pk,
                        title: data[i].fields['title'],
                        start: data[i].fields['start'],
                        end: data[i].fields['end'],
                        allDay: true,
                        className: "event",
                        defaultTimedEventDuration: "00:30:00"
                    });
                }
            }

            callback(events);
        }
    });
}

By default, "Allday" events start and finish at 0:00:00 of both days. Days don't need to be consecutive. "Allday" events can last more than one day. That's the reason you can resize them.

Answer 2

I've found that you can't resize events on monthly view if start and end have time info, only those that have date info:

{
    title: 'Resizable',
    start: '2015-02-11',
    end: '2015-02-13'
},
{
    title: 'Not resizable',
    start: '2015-02-12T10:30:00',
    end: '2015-02-12T12:30:00'
},

see this bug report