通过$.Ajax绑定事件无法在FullCalendar 1.6.4日历上显示

我需要维护一个使用旧版FullCalendar（版本1.6.4）的现有MVC应用。此前视图通过Model在加载时传递数据，事件加载方式如下：

$('#divAgenda').fullCalendar({ 
    header: { left: 'prev,next today', center: 'title', right: '' }, 
    editable: false, 
    disableDragging: true, 
    events: eventsJson, 
    eventClick: function (calEvent, jsEvent, view) { 
        eventDetail(calEvent.IdsEventi, calEvent.tipo, calEvent.start); 
    }, 
    function EventsJsonFunc() { 
        var events = '<%= Html.Raw(Model.EventiJson) %>'; 
        return jQuery.parseJSON(events); 
    } 
});

现在我将事件加载逻辑移至ComboBox的选择事件（需根据筛选条件展示数据），代码如下：

var dropdownlist = $('#divAgendaFilter').kendoComboBox({ 
    dataTextField: "text", 
    dataValueField: "value", 
    dataSource: data, 
    select: function (e) { 
        if (e.item) { 
            var dataItem = this.dataItem(e.item.index()); 
            $.ajax({ 
                url: '<%= Url.Action("LoadData", "Agenda")%>', 
                type: "GET", 
                dataType: "json", 
                data: { 
                    userId: '<%= Request.QueryString["userId"] == null ? string.Empty : Request.QueryString["userId"].ToString() %>', 
                    selectedFilter: dataItem.value 
                }, 
                success: function (data) { 
                    var calendar = $('#divAgenda').data("fullCalendar"); 
                    // var items = jQuery.parseJSON(data); 
                    calendar.events=data; 
                    debugger; 
                } 
            }); 
        } 
    }
});

目前已通过Ajax获取到事件数据，但赋值后日历无任何变化，请问我哪里操作有误？

你踩了FullCalendar 1.x版本API的一个常见小坑——在1.6.4这个旧版本里，不能直接通过赋值calendar.events=data来更新日历事件，这个属性只是初始化时用来设置数据源的，运行时直接赋值不会触发日历的重新渲染。

正确的做法是用FullCalendar 1.x提供的专门方法来更新事件，步骤如下：

1. 先清除日历中现有的所有事件（如果需要完全替换的话）
2. 再把新获取的事件数据添加到日历中

修改你的Ajax success回调函数即可：

success: function (data) {
    var calendar = $('#divAgenda').data("fullCalendar");
    // 第一步：清除现有所有事件
    calendar.removeEvents();
    // 第二步：添加新的事件数据源
    calendar.addEventSource(data);
    // 或者如果data是纯事件数组，也可以用renderEvents方法
    // calendar.renderEvents(data);
}

补充说明： #

• removeEvents()方法如果不带参数，会清空日历里的所有事件；如果需要保留部分事件，可以传入过滤函数作为参数。
• addEventSource(data)会把新的事件源添加到日历，并且自动渲染；如果你的data是标准的FullCalendar事件对象数组（包含start、title等必要字段，你的数据里有start应该没问题），这个方法完全适用。
• 另外要确保Ajax返回的data已经是解析好的JSON数组，不需要再用jQuery.parseJSON()（你代码里注释掉的那行是对的，因为已经指定了dataType: "json"，jQuery会自动解析）。

这样修改后，选择ComboBox选项时，日历就会更新显示新的事件数据了。

内容的提问来源于stack exchange，提问作者advapi