FullCalendar won't bind to Json feed from ASP.NET MVC3 Action
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!
我介入并发现问题 - fullcalendar.js和jquery.validate.js之间存在函数名冲突。
Use $.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);
}
});
}
});
})
Hopes this will help.
Maybe instead of this:
return Json(rows, JsonRequestBehavior.AllowGet);
Try This:
return Json(rows.ToArray(), JsonRequestBehavior.AllowGet);
Or instead of this:
events: '@Url.Content("~/Calendar/Events")'
Try this:
events: '@Url.Action("Events", "Calendar")'