FullCalendar will not bind to Json feed from ASP.NET MVC3 Action

Question

I cannot get the FullCalendar jquery plugin to bind to a Json array coming from an ASP.NET MVC3 action.

I removed almost everything from the code to try to track down the problem; I stayed with this, which of every SO and blog post I read should work:

Action (calendar controller)

public JsonResult Events(double start, double end) { var rows = new object[] { new { title="Event1", start= "2011-04-04" }, new { title="Event2", start= "2011-04-05" } }; return Json(rows, JsonRequestBehavior.AllowGet); } 

View

  <script type='text/javascript'> $(document).ready(function () { $('#calendar').fullCalendar({ events: '@Url.Content("~/Calendar/Events")' }) }); 

The results are an empty calendar with no related events. I checked that Json is being retrieved:

Json result

 [{"title":"Event1","start":"2011-04-04"},{"title":"Event2","start":"2011-04-05"}] 

And it works great:

  $(document).ready(function () { $('#calendar').fullCalendar({ events: [{title: 'Event1',start: '2011-04-04'}, {title: 'Event2',start: '2011-04-05'} ]}); }); 

I tried using all the number of date formats (including ISO8601 and * nix timestamps and got the same result: no related events, just an empty calendar. If I add the $ .ajax error: function function to the .fullCalendar object, it fires, so maybe something with John's return, but it looks good to me.

I am using FullCalendar 1.5 (although I also tried 1.4.11), JQuery 1.5.1, JQueryUI 1.8.11.

I have tried everything that I can think of - any ideas are greatly appreciated!

Answer 1

I took a step and found a problem - there is a clash of function names between fullcalendar.js and jquery.validate.js.

Answer 2

Use the $ .ajax () method.

Action (calendar controller)

  public JsonResult Events(string start, string end) { //convert string to date DateTime _start = DateTime.TryParse(start, out _start) ? _start : DateTime.Now.Date; DateTime _end = DateTime.TryParse(end, out _end) ? _end : DateTime.Now.Date; var rows = new object[] { new { title="Event1", start= "2011-04-04" }, new { title="Event2", start= "2011-04-05" } }; return Json(rows, JsonRequestBehavior.AllowGet); } 

View

  $(document).ready(function () { $('#calendar').fullCalendar({ events: function (start, end, callback) { $.ajax({ url: '@Url.Content("~/Calendar/Events")', dataType: 'json', data: { start: start.toLocaleString("yyyy-mm-dd"), end: end.toLocaleString("yyyy-mm-dd") }, success: function (doc) { var events = []; $.each(doc, function (key, val) { events.push({ title: val.title, start: val.start, url: 'http://google.com' }); }); callback(events); } }); } }); }) 

Hope this helps.

Answer 3

Maybe instead:

 return Json(rows, JsonRequestBehavior.AllowGet); 

Try the following:

 return Json(rows.ToArray(), JsonRequestBehavior.AllowGet); 

Or instead:

 events: '@Url.Content("~/Calendar/Events")' 

Try the following:

 events: '@Url.Action("Events", "Calendar")'