如何将数据从WEBAPI JSON馈送到FullCalendar

Question

<script type="text/javascript">
    $(document).ready(function() {
    // page is now ready, initialize the calendar...
        $('#calendar').fullCalendar({

            url: 'http://localhost/CalendarAPI/api/calendar/'
    })
    });
    </script>

我想从 WebAPI JSON 提供日历数据。当我单击上面的链接时，我可以看到 JSON 数据，并且可以下载格式良好的 JSON 数据。

需要帮助将上述JSON馈送到FullCalender JQuery插件。

Answer 1

你的 js 代码应该是这样的：

$('#calendar').fullCalendar({
   url: '/api/ControllerName/GetEvents/'
})

获取事件 - 操作名称。

您的事件模型应如下所示：

public class EventModel
{
    public int id { get; set; }
    public DateTime? start { get; set; }
    public DateTime? end { get; set; }
    public string title { get; set; }
    public bool allDay { get; set; }
}

在控制器中，使用如下代码创建一个操作 （GetEvents）：

public IEnumerable<EventModel> GetEvents()
    {
        //data from database
        CalendarEntities _db = new CalendarEntities();
        var events = _db.Events.ToList();
        IEnumerable<EventModel> listEvents = events.Select(_event => new EventModel
        {
            id = _event.Id,
            title = _event.Caption,
            start = _event.TimeStart,
            end = _event.TimeEnd,
            allDay = _event.AllDay
        });
        return listEvents;
    }

Answer 2

完整日历的文档真的很好，看看就知道了：http://arshaw.com/fullcalendar/docs/event_data/events_json_feed/

您可以通过多种方式包含脚本中的数据。最简单的方法是：

$('#calendar').fullCalendar({
    events: '/myfeed.php'
});

您还可以使用扩展表单来传递更多选项：

$('#calendar').fullCalendar({
    eventSources: [
        // your event source
        {
            url: '/myfeed.php',
            type: 'POST',
            data: {
                custom_param1: 'something',
                custom_param2: 'somethingelse'
            },
            error: function() {
                alert('there was an error while fetching events!');
            },
            color: 'yellow',   // a non-ajax option
            textColor: 'black' // a non-ajax option
        }
        // any other sources...
    ]
});