webdad3 webdad3 - 4 months ago 24
jQuery Question

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.

Answer

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

        });
    });