Fullcalendar.io无法正确加载API返回事件的问题求助

云上老周

2026-5-27

解决FullCalendar无法加载API返回事件的问题

看起来问题出在几个关键细节上，我帮你逐一排查并修复：

1. 路由地址不匹配

你的控制器路由标注的是[Route("api/Bookings")]，但JavaScript里请求的URL是/api/Booking——注意末尾少了个s！这会导致请求找不到对应的API接口，甚至返回404错误。

2. API返回格式不正确

你现在手动用JsonConvert.SerializeObject把对象序列化成字符串返回，这种方式会让ASP.NET默认返回text/plain类型的响应，而FullCalendar需要的是application/json类型的响应，这可能导致它无法正确解析返回的JSON数据。

修复后的代码示例

修改后的API控制器代码

[Route("api/Bookings")]
public class BookingApiController : Controller
{
    // GET api/Bookings
    [HttpGet]
    public IActionResult Get()
    {
        var events = new[]
        {
            new { title = "bro", start = "2018-05-06" },
            new { title = "bro2", start = "2018-05-05" }
        };
        // 直接返回JsonResult，框架会自动处理序列化和响应头
        return Json(new { events = events });
    }
}

修改后的JavaScript代码

$(function () {
    $('#calendar').fullCalendar({
        dayClick: function (date) {
            window.location.href = "/Booking/Booking?selectedDate=" + date.format();
        },
        eventSources: [
            {
                url: '/api/Bookings', // 修正路由地址，加上末尾的s
                color: 'yellow',
                textColor: 'black'
            }
        ]
    })
});