问题加载事件 Fullcalendar.io

Question

我们正在使用 fullcalendar.io，我们想从我们的 api 控制器获取一个事件。

我们的控制者

[Route("api/Bookings")]
public class BookingApiController
{

    // GET
    [HttpGet]
    public string Get()                   
    {

        var returnJson = new
        {
            events = new[]
            {
                new {title = "bro", start = "2018-05-06"},
                new {title = "bro2", start = "2018-05-05"}
            }
        };
        return JsonConvert.SerializeObject(returnJson);

    }
}

我们的 javascript 文件

$(function () {

    $('#calendar').fullCalendar({
        //weekends : false

        dayClick: function (date) {

            window.location.href = "/Booking/Booking?selectedDate=" + date.format();
        },

        eventSources: [
            {
                url: '/api/Booking',
                color: 'yellow',    // an option!
                textColor: 'black'  // an option!
            }
        ]

    })
});

然而，javascript 脚本永远无法正确获取事件。我们可以看到它接收了 JSON，但没有将事件正确添加到日历中。

Answer 1

最终返回的 JSON 是什么样的（如果您在浏览器工具中查看您的 ajax 请求，您可以看到它）？

fullCalendar 需要一个扁平的事件数组，但看起来您将它们包裹在另一个对象中，因此 fullCalendar 不会看到它们。它只是假设没有要返回的事件。

我怀疑你收到的是这样的：

{
  events: [ 
    //...array of events
  ]
}

而你只需要这个：

[
    //...array of events
]

这是未经测试的，但我很确定它会解决它：

[HttpGet]
public string Get()                   
{
    var events = new[]
    {
        new {title = "bro", start = "2018-05-06"},
        new {title = "bro2", start = "2018-05-05"}
    };

    return JsonConvert.SerializeObject(events);
}

请注意此版本中缺少外部“returnJson”对象。

请参阅https://fullcalendar.io/docs/events-json-feed 了解事件馈送系统（您正在使用）的描述，也请参阅https://fullcalendar.io/docs/events-array 了解形成有效事件列表所需的对象格式示例。