ASP.NET MVC(C#)项目FullCalendar排班时所有事件显示在同一天的问题排查

所有事件堆积在同一天、数据库日期正确的问题，90%以上出在后端数据序列化→前端日期解析的链路中，和数据库存储本身无关，具体成因如下：

• 旧版ASP.NET MVC默认日期序列化格式不兼容：旧版本使用JavaScriptSerializer将C# DateTime序列化为/Date(时间戳)/的私有格式，FullCalendar无法原生识别该格式，会直接丢弃日期值，默认将所有事件挂载到日历初始加载的日期
• 字段映射错误：C#属性默认是PascalCase命名（如StartTime），如果前端未做显式映射，FullCalendar找不到要求的start、end标准字段，会使用默认日期填充所有事件
• 日期格式解析错位：后端返回的日期字符串格式（如dd/MM/yyyy）和前端解析规则不匹配，或月份、日期顺序错位，导致所有事件被解析为同一日期
• 时区处理偏差：未统一前后端时区规则，序列化时的时区转换导致所有日期被偏移到同一固定时间点

1. 修正后端序列化配置 #

优先解决序列化格式和命名规则问题，在项目的Global.asax.cs的Application_Start方法中添加以下配置，替换默认序列化逻辑：

// 引入Newtonsoft.Json（MVC5默认已引用，旧版本需通过NuGet安装）
using Newtonsoft.Json;
using Newtonsoft.Json.Serialization;

protected void Application_Start()
{
    // ... 原有路由、视图引擎配置
    var jsonSettings = new JsonSerializerSettings
    {
        // 转camelCase命名，匹配前端JS的命名习惯
        ContractResolver = new CamelCasePropertyNamesContractResolver(),
        // 输出FullCalendar原生支持的ISO 8601格式日期
        DateFormatHandling = DateFormatHandling.IsoDateFormat,
        // 统一时区规则：如果数据库存本地时间则设为Unspecified，存UTC则设为Utc
        DateTimeZoneHandling = DateTimeZoneHandling.Unspecified
    };

    // 适配Web API项目
    GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings = jsonSettings;
    // 适配普通MVC控制器返回JsonResult的场景
    System.Web.Mvc.ValueProviderFactories.Factories.Remove(
        System.Web.Mvc.ValueProviderFactories.GetFactory(typeof(System.Web.Mvc.JsonValueProviderFactory))
    );
    System.Web.Mvc.ValueProviderFactories.Factories.Add(new System.Web.Mvc.JsonValueProviderFactory { SerializerSettings = jsonSettings });
}

修复后后端返回的事件格式应为：

{
  "id": 1,
  "title": "早班",
  "startTime": "2024-05-20T08:00:00",
  "endTime": "2024-05-20T16:00:00"
}

该格式可被FullCalendar直接识别。

2. 修正前端事件加载逻辑 #

在FullCalendar初始化的事件源配置中，显式做字段映射，避免解析偏差：

$('#calendar').fullCalendar({
  // ... 其他日历配置
  eventSources: [
    {
      url: '/Schedule/GetEvents', // 你的后端事件查询接口
      method: 'GET',
      // 显式映射后端字段到FullCalendar标准字段
      success: function (response) {
        return response.map(event => ({
          id: event.id,
          title: event.title,
          // 显式指定日期字段，避免隐式解析错误
          start: event.startTime,
          end: event.endTime,
          // 其他业务字段
          backgroundColor: event.color
        }));
      }
    }
  ]
});

3. 校验与排查工具 #

如果上述配置修改后仍有问题，可通过以下方式定位具体错误：

• 打开浏览器开发者工具→网络面板，找到事件查询接口的响应，复制原始日期值，和数据库存储的日期对比，确认后端输出是否正确
• 在前端success回调中打印解析后的事件值：console.log('原始值:', event.startTime, '解析后:', moment(event.startTime).format())，如果解析后的日期和原始值不一致，调整日期格式或时区配置
• 全量排班事件需添加allDay: true标识，避免时间部分被FullCalendar解析为UTC时间导致的日期偏移

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