.NET Core中通过JSON URL为FullCalendar5加载事件无显示问题

核心问题1：后端返回的JSON格式不符合要求 #

FullCalendar的JSON事件源必须返回事件对象的数组格式，哪怕只有1条事件，也需要用[]包裹。你当前接口直接返回单个事件对象，组件无法识别解析。

修复后端接口（.NET Core） #

调整Action返回值为集合类型：

public IActionResult ListeAnnoncesJSON()
{
    var eventList = new List<object>()
    {
        new {
            sr = 1,
            title = "exemple",
            desc = "azazazaza",
            start = "2022-06-06T12:30:00",
            end = "2022-06-10T12:30:00"
        }
        // 其余事件可继续往集合中追加
    };
    return Json(eventList);
}

正确的响应格式参考：

[
  {"sr":1,"title":"exemple","desc":"azazazaza","start":"2022-06-06T12:30:00","end":"2022-06-10T12:30:00"}
]

核心问题2：前端初始化代码缺失关键逻辑 #

你当前贴的初始化代码存在两个致命遗漏：

• 未注册功能依赖的插件，视图、交互相关能力无法生效
• 初始化实例后未调用render()方法，日历不会执行渲染，更不会拉取事件数据

修复前端代码 #

// 如果是模块化引入方式需先导入插件，CDN引入可跳过import步骤直接使用全局变量
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction'; // 选中、编辑功能必须依赖此插件

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new Calendar(calendarEl, {
    // 注册所有用到的插件
    plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
    initialView: 'timeGridWeek',
    selectable: true,
    selectOverlap: false,
      
    headerToolbar: {
      left: 'prevYear,prev,next,nextYear today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,dayGridDay'
    },
    
    buttonText: {
      today:    'Aujourdhui',
      month:    'mois',
      week:     'semaine',
      day:      'jour',
      list:     'liste'
    },
    
    initialDate: '2020-09-12',
    navLinks: true,
    editable: true,
    dayMaxEvents: true,
    
    events:'@Url.Action("ListeAnnoncesJSON","Vendeur")'
  });

  // 必须调用render方法才会渲染日历、拉取事件
  calendar.render();
});

其他排查点 #

改完上述问题仍不显示时，按以下顺序验证：

• 打开浏览器F12网络面板，检查ListeAnnoncesJSON接口是否返回200状态，有没有404/500错误，响应内容是否为标准数组格式
• 你设置的initialDate为2020年9月，测试事件在2022年6月，默认打开的视图时间段不包含事件，自然看不到内容，可临时把initialDate改为2022-06-06，或手动切换日期到对应时间段验证
• 如果项目配置了统一响应包装（比如返回结构为{code:200, data:[事件数组]}），FullCalendar无法直接解析，需要改用函数式事件源手动处理返回值：

  events: function(info, successCallback, failureCallback) {
    fetch('@Url.Action("ListeAnnoncesJSON","Vendeur")')
      .then(res => res.json())
      .then(res => {
        // 根据实际返回结构取出事件数组传入回调
        successCallback(res.data);
      })
      .catch(err => failureCallback(err))
  }
  

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