My Events will now show up? - Jquery Full Calendar

I am using asp.net mvc 3 and jquery 1.5.2 with jquery full calendar 1.5.1

I have this

$('#calendar').fullCalendar ({
    theme: true,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: false,
    eventSources:[{
        url: '/Home/GetCurrentMonth',
        type: 'Get',
        color: 'yellow',   // a non-ajax option
        textColor: 'black' // a non-ajax option
    }]
});

It goes off and does hit my JsonResult Method and returns something like this

[{"id":9,"title":"test4","start":"4/1/2011 5:00:00 AM","end":"4/1/2011 6:30:00 AM","allDay":false},
{"id":9,"title":"test4","start":"5/1/2011 12:00:00 PM","end":"5/1/2011 1:30:00 PM","allDay":false}]

Yet nothing shows up. What am I doing wrong?

List<CalendarAppointment> appointments = 
    calendarService.GetAppointment("test@hotmail.com", start, end);

List<CalendarEventViewModel> vm = Mapper.Map<List<CalendarAppointment>,
    List<CalendarEventViewModel>&开发者_如何学运维gt;(appointments);

return Json(vm, JsonRequestBehavior.AllowGet);

This is what is in GetCurrentMonth.

public class CalendarEventViewModel
{
    public int id { get; set; }
    public string title { get; set; }
    public string start { get; set; }
    public string end { get; set; }
    public bool allDay { get; set; }
}

That is my ViewModel.

The following worked for me:

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult GetCurrentMonth()
    {
        var vm = new[]
        {
            new CalendarEventViewModel
            {
                id = 1,
                title = "title 1",
                start = "start 1",
                end = "end 1",
                allDay = false
            },
            new CalendarEventViewModel
            {
                id = 2,
                title = "title 2",
                start = "start 2",
                end = "end 2",
                allDay = true
            },
        };
        return Json(vm, JsonRequestBehavior.AllowGet);
    }
}

View:

<script src="@Url.Content("~/fullcalendar-1.5.1/fullcalendar/fullcalendar.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#calendar').fullCalendar({
            theme: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            editable: false,
            eventSources: [{
                url: '@Url.Action("GetCurrentMonth", "Home")',
                type: 'GET',
                color: 'yellow',   // a non-ajax option
                textColor: 'black' // a non-ajax option
            }]
        });
    });
</script>

<div id="calendar"></div>

Not sure what could be wrong with your code. I see that you haven't wrapped the fullCalendar call in a $(document).ready handler so the DOM might not yet be loaded at the time you try to attach the calendar to the #calendar element.

The problem was with jquery validate 1.7 effecting it. Not sure why it effected it only when a json result came through but that was the problem.