jquery FullCalendar using MVC and JSON

问题

I'm just trying to do something very simple to start off with.

I'm using the jQuery FullCalendar found here: http://fullcalendar.io/

When I add the event data as an array (as the documentation example provides), the calendar populates. However, when I try to do it via jQuery I get a valid JSON response, but the event doesn't populate.

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

The response I get from my GetCalendarData call is the following:

{"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/"}

I've seen others on Stack have similar issues, but I don't see an example on how to use AJAX and JSON with this calendar.

I've also tried to use the eventSources: documentation/example with the same results.

UPDATE:

I updated my code based off of different things I've tried. Still with no luck. I've looked at the date formats. I've tried system generated dates but everything I've seen seems to point to string based dates (which is what I've tried in my updated code). Unfortunately that still doesn't work (at least for me).

Still looking for help.

回答1:

The answer is in the function parameters. Once those are put in then the data populated in the calendar.

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

        });
    });

回答2:

I don't know if this is still an issue for you, but I did manage to make it work for me. I have almost an exact case. Here is my example:

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

What made the difference for me was changing the method return type from ActionResult to JsonResult and also adding the second parameter "JsonRequestBehavior.AllowGet" to the return function.

Hope this helps.

来源：https://stackoverflow.com/questions/27766405/jquery-fullcalendar-using-mvc-and-json

标签

javascript

jquery

asp.net-mvc

json

fullcalendar