FullCalendar事件函数无法加载事件问题求助

我最近在把现有业务方案集成到FullCalendar日历组件中，卡了个小问题——明明后端接口能正常返回事件数据，但日历就是加载不出来。我Web开发经验不算多，感觉问题应该挺简单，折腾了半天没搞定，来求助下大家。

先说说我目前的实现：

前端代码（Agenda.aspx） #

我按照官方文档写的初始化代码，用了events函数来异步拉取数据：

$(document).ready(function() { 
  $('#calendar').fullCalendar({ 
    header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay,listWeek' 
    }, 
    defaultDate: '2017-12-18', 
    navLinks: true, 
    editable: true, 
    eventLimit: true, 
    events: function(start, end, timezone, callback) { 
      $.ajax({ 
        type: 'POST', 
        url: 'Agenda.aspx/GetEvents', 
        dataType: 'json', 
        data: "{'eventStart': " + start.unix() + ", 'eventEnd': " + end.unix() + "}", 
        contentType: "application/json; charset=utf-8", 
        success: function(doc) { 
          var events = []; 
          $(doc).find('event').each(function() { 
            events.push({ 
              title: $(this).attr('title'), 
              start: $(this).attr('start'), 
              end: $(this).attr('end') 
            }); 
          }); 
          callback(events); 
        } 
      }); 
    } 
  }) 
});

后端代码（C#） #

后端写了个GetEventsWebMethod，从数据库查事件然后返回JSON字符串：

[WebMethod] 
public static string GetEvents(double eventStart, double eventEnd) { 
  dbHandler m_dbHandler = new dbHandler(); 
  string JSONString; 
  DateTime dt_eventStart = UnixTimeStampToDateTime(eventStart); 
  DateTime dt_eventEnd = UnixTimeStampToDateTime(eventEnd); 
  DataTable dtEvents = new DataTable(); 
  if (!m_dbHandler.GetCalendarEventsByDateRange(ref dtEvents)) { 
    throw new Exception("Error retrieving client tokens"); 
  } else { 
    JSONString = string.Empty; 
    JSONString = JsonConvert.SerializeObject(dtEvents); 
  } 
  return JSONString; 
}

奇怪的现象 #

这个GetEvents方法确实能被AJAX调用到，而且返回的JSON内容是对的——我把返回的JSON直接替换到events里，日历就能正常显示所有事件，比如这段测试数据：

[{ "title": "Booking1", "start": "2017-12-18T09:00:00", "end": "2017-12-18T10:00:00" }, { "title": "Booking2", "start": "2017-12-18T09:00:00", "end": "2017-12-18T11:00:00" }, { "title": "Booking3", "start": "2017-12-18T10:00:00", "end": "2017-12-18T11:00:00" }, { "title": "Booking4", "start": "2017-12-18T12:00:00", "end": "2017-12-18T13:00:00" }, { "title": "Booking5", "start": "2017-12-18T10:00:00", "end": "2017-12-18T12:00:00" }]

问题根源 #

仔细看前端的success回调代码就发现问题了：你用了$(doc).find('event')来遍历数据，这是处理XML结构的方式，但后端返回的是纯JSON数组啊！这种DOM查找的方式根本找不到任何元素，所以最后events数组是空的，日历自然没东西显示。

解决方案 #

把前端AJAX的success回调逻辑改一下，直接处理返回的JSON数组就行：

修改后的前端代码（重点改success部分）：

$(document).ready(function() { 
  $('#calendar').fullCalendar({ 
    header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay,listWeek' 
    }, 
    defaultDate: '2017-12-18', 
    navLinks: true, 
    editable: true, 
    eventLimit: true, 
    events: function(start, end, timezone, callback) { 
      $.ajax({ 
        type: 'POST', 
        url: 'Agenda.aspx/GetEvents', 
        dataType: 'json', 
        // 建议用JSON.stringify生成数据，避免手动拼接出错
        data: JSON.stringify({
          eventStart: start.unix(),
          eventEnd: end.unix()
        }), 
        contentType: "application/json; charset=utf-8", 
        success: function(doc) { 
          // 后端返回的已经是符合要求的事件数组，直接传给callback就行
          // 如果字段名和FullCalendar要求的一致，甚至不需要转换
          var events = doc.map(function(item) {
            return {
              title: item.title,
              start: item.start,
              end: item.end
            };
          });
          callback(events);
          // 或者更简单：如果DataTable的列名就是title/start/end，直接callback(doc)就行
          // callback(doc);
        } 
      }); 
    } 
  }) 
});

额外调试建议 #

平时遇到这种AJAX数据问题，可以用浏览器F12打开开发者工具：

• 看Network面板，找到对应的AJAX请求，查看Response内容，确认返回的JSON格式是否正确
• 看Console面板，有没有报错信息，比如找不到元素、JSON解析错误之类的，能快速定位问题

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