jquery FullCalendar using MVC and JSON

本文关键字：and JSON MVC using FullCalendar jquery 更新时间：2023-09-26

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

我正在使用在这里找到的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：文档/示例。

更新：

我

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

仍在寻求帮助。

我不知道

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

[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);
}

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

希望这有帮助。

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

    $(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);
                    } 
                }); 
            }
        });
    });