jQuery FullCalendar加载超199条事件时日历不显示问题排查

问题现象 #

• 基于jQuery FullCalendar对接数据库返回数据开发日程调度功能，测试阶段出现异常：加载的事件数据量超过199条时，日历组件无法正常显示；将返回数据量截断到199条及以内时，日历可恢复正常渲染。
• 初期排查方向误判为FullCalendar存在事件数据量承载上限，超过199条数据就会触发组件崩溃。

相关初始化代码 #

$('#calendarIO').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay,add_event'
    },
    firstDay: 0,
    defaultDate: moment().format('YYYY-MM-DD'),
    handleWindowResize: true,  
    eventOrder: "time",
    editable: true,
    eventLimit: true, // 事件过多时显示"更多"链接
    selectable: true,
    selectHelper: true,
    eventDrop: function(event, delta, revertFunc) {
        editDropResize(event);
    },
    eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
        editDropResize(event);
    },
    eventClick: function(event, element)
    {
        detail(event);
        editData(event);
        deleteData(event);
    },
    events: JSON.parse(get_data),
    eventRender: function(event, element)
    { 
        element.find('.fc-title').prepend(event.starttime + "-" + event.endtime + " ");
    },
    displayEventTime: false
});

最终排查结论 #

经后续多轮验证确认，该问题和FullCalendar组件本身的承载能力无关，不存在199条的数量上限，问题根源为数据库侧返回的数据异常：前199条事件数据格式完全符合组件要求，从第200条开始存在脏数据（常见为必填的时间字段缺失、时间格式不合法、特殊字符未转义、字段值为空/非法类型），导致JSON解析或组件渲染流程中断，才会出现刚好超过199条就渲染失败的现象。

同类问题排查建议：拿到接口返回的全量事件数据后，优先做JSON格式合法性校验，再逐批核对事件字段是否符合FullCalendar的格式要求，重点检查时间字段的合法性，不需要在组件本身的性能限制方向浪费排查时间，正常配置下FullCalendar可稳定承载上千条事件的渲染。

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