asp.net-mvc-4 - 如何将数据从 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/'
})

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

fullcalendar 的文档真的很好，随便看看：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...

    ]

});