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...

    ]

});

如何将数据从WEB API JSON提供给FullCalendar

2 个答案: