MVC项目集成Fullcalendar后日历无法显示事件问题求助

安全阿岳

2026-10-1

故障根因与修复方案

1. 事件字段不符合FullCalendar规范

FullCalendar 5.x版本要求事件必须包含start时间字段，默认读取title作为事件标题，你接口返回的字段是startDate、endDate、eventName，和规范完全不匹配，无法被识别为有效事件。
你可以选择修改后端返回字段，或者前端做字段映射：

后端修改示例

public JsonResult CalEvents()
{
   using (_context)
   {
       var events = _context.CalendarEventsNews.Select(e => new 
       {
           id = e.id,
           title = e.eventName,
           start = e.startDate,
           end = e.endDate,
           allDay = e.allDay,
           description = e.eventDescription,
           location = e.eventLocation
       }).ToList();
       return Json(events.ToArray(), JsonRequestBehavior.AllowGet);
   }
}

前端字段映射示例

var calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'dayGridMonth',
  eventDataTransform: (rawEvent) => {
    return {
      id: rawEvent.id,
      title: rawEvent.eventName,
      start: rawEvent.startDate,
      end: rawEvent.endDate,
      allDay: rawEvent.allDay
    }
  },
  events: 'CalEvents/'
});

2. 日期格式不兼容

当前接口返回的是ASP.NET默认的\/Date(时间戳)\/格式，FullCalendar无法直接解析该格式，需要转换为ISO 8601标准日期格式。
可以在后端序列化时配置日期格式：

return Json(events.ToArray(), JsonRequestBehavior.AllowGet, Encoding.UTF8, new JsonSerializerSettings
{
    DateFormatHandling = DateFormatHandling.IsoDateFormat
});

也可以在前端eventDataTransform里加日期解析逻辑：

function parseAspNetDate(dateStr) {
  if (!dateStr) return null
  const timestamp = parseInt(dateStr.match(/\d+/)[0])
  return new Date(timestamp)
}
// 调用示例
start: parseAspNetDate(rawEvent.startDate)