完整日历：我无法在月视图中调整事件大小

Question

我从服务器获得带有AJAX调用的事件列表。我将"可编辑"选项设置为"true"，但它仅适用于议程日和议程周视图，而不适用于月视图。为什么？这是代码：

$('#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"
            }
        ]
});

这是我的函数调用Ajax：

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);
        }
    });
}

正如我之前所说，除了在月视图中调整大小外，所有工作正常，我无法想象有什么问题。帮助？

Answer 1

为了在月视图中调整事件的大小，必须将其设置为"全天"事件。要设置"全天"事件，从数据库获取事件时，必须区分它们。我在数据库中有一个名为 allday 的布尔列。然后，根据值设置allday属性。这就是 AJAX 调用区分它们的方式：

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);
        }
    });
}

默认情况下，"全天"事件在两天的 0：00：00 开始和结束。天数不需要连续。"全天"活动可以持续一天以上。这就是您可以调整它们大小的原因。

Answer 2

我发现如果start和end，则无法在每月视图中调整事件的大小有时间信息，只有那些有日期信息的：

{
    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'
},

查看此错误报告

Answer 3

检查您的数据库，全天列。我，我有它"空"或空，并且有同样的问题。将列的默认值从"NULL"更改为"0"并在 allDay 列中显式插入"0"或"1"后，它开始工作。

Answer 4

演示

您必须设置 editable : true ，以使事件大小可调整。

但是我有一个完整的日历演示正在运行，我必须同时设置allDay: true和editable : true。

{
    title: 'Your Event',
    start: new Date(y, m, d - 5),
    end: new Date(y, m, d - 2),
    allDay: true, // optional
    editable : true
}