DavidRguez DavidRguez - 1 month ago 11
Ajax Question

FullCalendar: I can't resize events in month view

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

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.