javascript - 发布加载事件 Fullcalendar.io

Question

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

我们的控制者

[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有关形成有效事件列表所需的对象格式的示例。