FullCalendar: I can't resize events in month view

ajax, fullcalendar, jquery

Solution

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.

Problem

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?

Original source