Fullcalendar event population issue: javascript does not fire

Question

I am having a good deal of trouble populating the jQuery FullCalendar with events.

Browser: IE8

Tech: MVC 3 Razor

Scripts in use: jquery-1.5.1, fullcalendar.js

Controller and supporting method: (even though my issue is that it never gets here in the first place)

     public JsonResult GetCalendarData()
    {
        List<CourseSection> courseSecs = //genarates list of course sections from db context
        var listOfEvents = new List<object>();

        foreach (CourseSection courseSec in courseSecs)
        {
            Course course = db.Course.Find(courseSec.CourseID);
            listOfEvents.Add(
            new
            {
                id = courseSec.ID,
                title = course.Name + "Section " + courseSec.Name,
                start = ToUnixTimespan(courseSec.sectionBeginDateAndDailyStartTime),
                end = ToUnixTimespan(courseSec.sectionEndDateAndDailyEndTime),
                allDay = false //none of the course sections run all day
            });
        }

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

    }
    private string ToUnixTimespan(DateTime date) //supporting method
    {
        TimeSpan tspan = date.ToUniversalTime().Subtract(
        new DateTime(1970, 1, 1, 0, 0, 0));

        return Math.Truncate(tspan.TotalSeconds).ToString();
    }

View:

    @model Web.Models.Registration

     @{
     ViewBag.Title = "ViewSchedule";
     Layout = "~/Views/Shared/_SiteLayout.cshtml";
     }

     <script>
     $(document).ready(function () {
     // page is now ready, initialize the calendar...
     $('#calendar').fullCalendar({
              defaultView: "agendaWeek",
              year: 2013,
              month: 0,
              date: 25,
              minTime: 6,
              maxTime: 18,
              aspectRatio: 1.5,
              allDaySlot: false,
              events: "/Course/GetCalandarData"
              });
     });
     </script>


     <div class="wrapper col3">
       <div id="container">
         <h1>View Schedule</h1>
           <div id = 'calendar'>
           </div>
        <br />
        @Html.ActionLink("Home", "Home", "Static")
        <br />
       </div>
     </div>

Issue: The calendar itself and all of the configurations load fine. However, the last line of configuration (events: "/Course/GetCalendarData") does NOT fire. Period. It never trips any of the debug blocks I have placed in the controller method, and no JSON is returned.

I have tried adding in the obligatory "@Url.Content..." prefix to the access URL. I have tried housing the method in a different controller. I have tried using a different version of jQuery. I have removed all extraneous scripts that may have been causing a conflict. All for nada.

I've been tearing my hair out over this. Any ideas?

Answer 1

So after many hours of debugging, I discovered a workaround.

Instead of initiating a JSON request from the view to the GetCalendarData method, I modified the controller code and moved it to a separate static class. I then use that to return a plain array of objects, and then convert the array to JSON on the fly in the view. Observe:

Controller and support method:

    public static object[] GetCalendarData()
    {
    List<CourseSection> courseSecs = //list of course sections from db context
    var listOfEvents = new List<object>();

        foreach (CourseSection courseSec in courseSecs)
        {
            Course course = db.Course.Find(courseSec.CourseID);
            listOfEvents.Add(
                new
                {
                    id = courseSec.ID,
                    title = course.Name + "Section " + courseSec.Name,
                    start = ToUnixTimespan(courseSec.sectionBeginDateAndDailyStartTime),
                    end = ToUnixTimespan(courseSec.sectionEndDateAndDailyEndTime),
                    allDay = false
                });
        }

        return listOfEvents.ToArray();

    }

    public static string ToUnixTimespan(DateTime date)
    {
        TimeSpan tspan = date.ToUniversalTime().Subtract(
     new DateTime(1970, 1, 1, 0, 0, 0));

        return Math.Truncate(tspan.TotalSeconds).ToString();
    }

View: @model Web.Models.Registration

    @{  
        ViewBag.Title = "ViewSchedule";
        Layout = "~/Views/Shared/_SiteLayout.cshtml";
    }

    @{
        object[] events = Web.Extensions.CourseOps.GetCalendarData();
    }

    <script>
        $(document).ready(function () {
            var allSections = @Html.Raw(Json.Encode(events));
            // page is now ready, initialize the calendar...
            $('#calendar').fullCalendar({
        defaultView: "agendaWeek",
        year: 2013,
        month: 0,
        date: 25,
        minTime: 6,
        maxTime: 18,
        aspectRatio: 1.5,
        allDaySlot: false,
        events: allSections,
        // put your options and callbacks here
    });

        });
    </script>


    <div class="wrapper col3">
      <div id="container">
        <h1>View Schedule</h1>
        <div id = 'calendar'>
        </div>
         <br />
        @Html.ActionLink("Home", "Home", "Static")
        <br />
      </div>
    </div>

The fact that my original javascript configuration (events: "/Course/GetCalendarData") did not fire could possibly be attributed to the Authorization Attributes I have on my controllers, or the rather aggressive way I check for authenticated cookies, but that's kind of getting into the weeds.

The point is, I found a successful workaround and I am satisfied.

Special thanks to "charlietfl" for sticking with me and doing his best to help.

Till next time...