jquery 使用 MVC 和 JSON 的 FullCalendar

Question

我只是想做一些非常简单的事情。

我正在使用在此处找到的 jQuery FullCalendar：http://fullcalendar.io/

当我将事件数据添加为数组时（如文档示例提供的那样），日历会填充。但是，当我尝试通过 jQuery 执行此操作时，我得到了有效的 JSON 响应，但事件并未填充。

    $(document).ready(function () {
        // page is now ready, initialize the calendar...
        $('#calendar').fullCalendar({
            events: {
                url: '../calendar/GetCalendarData',
                type: 'GET',
                data: {},
                success: function (doc) {
                        //alert(doc.title + ' ' + doc.start);
                        var events = [];
                        events.push(doc);
                        alert(events[0].title + ' ' + events[0].start);
                },
                error: function() {
                    alert('there was an error while fetching events!');
                },

                color: 'yellow',   // a non-ajax option
                textColor: 'black' // a non-ajax option
            }
        });
        // Code and Documents: http://fullcalendar.io/
    });


    [HttpPost]
    public ActionResult PostCalendarData()
    {
        return Json(new { title = "Free Pizza", allday = "false", borderColor = "#5173DA", color = "#99ABEA", textColor = "#000000", description = "<p>This is just a fake description for the Free Pizza.</p><p>Nothing to see!</p>", start = "2015-01-04T22:00:49", end = "2015-01-01", url = "http=//www.mikesmithdev.com/blog/worst-job-titles-in-internet-and-info-tech/" });
    }

    [HttpGet]
    public ActionResult GetCalendarData()
    {
        return Json(new { title = "Free Pizza", allday = "false", borderColor = "#5173DA", color = "#99ABEA", textColor = "#000000", description = "<p>This is just a fake description for the Free Pizza.</p><p>Nothing to see!</p>", start = "2015-01-04T22:00:49", end = "2015-01-01", url = "http=//www.mikesmithdev.com/blog/worst-job-titles-in-internet-and-info-tech/" }, JsonRequestBehavior.AllowGet);
    }

我从 GetCalendarData 调用中得到的响应如下：

{"title":"Free Pizza","allday":"false","borderColor":"#5173DA","color":"#99ABEA","textColor":"#000000","description":"\u003cp\u003eThis is just a fake description for the Free Pizza.\u003c/p\u003e\u003cp\u003eNothing to see!\u003c/p\u003e","start":"2015-01-04T22:00:49","end":"2015-01-01","url":"http=//www.mikesmithdev.com/blog/worst-job-titles-in-internet-and-info-tech/"}

我在 Stack 上看到其他人也有类似的问题，但我没有看到有关如何在此日历中使用 AJAX 和 JSON 的示例。

我也尝试使用 eventSources: documentation/example 得到相同的结果。

更新：

我根据我尝试过的不同事情更新了我的代码。仍然没有运气。我看过日期格式。我已经尝试过系统生成的日期，但我所看到的一切似乎都指向基于字符串的日期（这是我在更新的代码中尝试过的）。不幸的是，这仍然不起作用（至少对我而言）。

仍在寻求帮助。

Answer 1

答案在函数参数中。一旦将这些放入日历中，数据就会填充。

    $(document).ready(function () {
        var events = [];
        $('#calendar').fullCalendar({
            events: function(start, end, timezone, callback) { 
                $.ajax({ 
                    url: source, 
                    type: 'POST', 
                    data: { }, 
                    success: function (doc) { 
                        events.push(doc); 
                        callback(events);
                    } 
                }); 
            }

        });
    });

Answer 2

我不知道这对您来说是否仍然是个问题，但我确实设法让它对我有用。我几乎有一个确切的案例。这是我的例子：

[HttpGet]
public JsonResult SerializeEvent(int id)
{
    var sesh = Umbraco.TypedContent(id).Descendants("courseSession");
            var eventList = new List<EventModel>();
            foreach (var item in sesh)
            {
                var eventObj = new EventModel();
                eventObj.start = item.GetPropertyValue<DateTime>("startDate").ToString("yyyy-MM-dd");
                eventObj.end = item.GetPropertyValue<DateTime>("endDate").ToString("yyyy-MM-dd");
                eventObj.title = item.Parent.Name;
                eventObj.url = item.Parent.Url;

                eventList.Add(eventObj);
            }           

            return Json(eventList, JsonRequestBehavior.AllowGet);
}

对我来说不同的是将方法 return 类型从 ActionResult 更改为 JsonResult 并将第二个参数“JsonRequestBehavior.AllowGet”添加到 return函数。

希望对您有所帮助。

jquery 使用 MVC 和 JSON 的 FullCalendar

jquery FullCalendar using MVC and JSON

javascript

asp.net-mvc

jquery

json

fullcalendar