Question

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

I have removed almost everything from the code to try to hunt down the problem; I’m left with this, which from every SO and blog post I’ve read, ought to 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 a blank calendar, with no bound events. I have verified that the Json is being retrieved:

Json result

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

And this works fine:

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

I have tried using all number of date formats (including ISO8601 and *nix timestamps and gotten the same result: no bound events, just a blank calendar. If I add an $.ajax error: function to the .fullCalendar object, it fires, so presumably something’s up with the Json being returned — but it looks fine to me.

I’m using FullCalendar 1.5 (though I also tried 1.4.11), JQuery 1.5.1, JQueryUI 1.8.11.

I’ve tried everything I can think of — any ideas are very much appreciated!

Answer 1

I stepped through and found the issue — there’s a function name collision between fullcalendar.js and jquery.validate.js.