Javascript fullCalendar:从控制器JSON获取数据
我正在使用Visual Studio 2015中的fullCalendar库。我无法从AJAX命令填充事件。日历上未填充任何事件。如果我只传递一个datetime并设置allDay=true,它将填充事件。我需要它的工作时间以及每天有多个事件 JS代码:Javascript fullCalendar:从控制器JSON获取数据,javascript,c#,json,fullcalendar,Javascript,C#,Json,Fullcalendar,我正在使用Visual Studio 2015中的fullCalendar库。我无法从AJAX命令填充事件。日历上未填充任何事件。如果我只传递一个datetime并设置allDay=true,它将填充事件。我需要它的工作时间以及每天有多个事件 JS代码: $(document).ready(function () { $(".calendar").fullCalendar ({ header: { left: 'month,basicWeek,b
$(document).ready(function () {
$(".calendar").fullCalendar
({
header: {
left: 'month,basicWeek,basicDay,today',
center: 'title',
right: 'prev,next'
},
weekends: false,
eventLimit: true,
theme: true,
editable: false,
fixedWeekCount: false,
events: function(start, end, timezone, callback)
{$.ajax
({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Calendar/GetCalendarEvents",
dataType: 'json',
success: function (data)
{
var events = [];
$.each(data, function (index, value) {
events.push({
id: value['id'],
title: value['title'],
date: value['date']
//all data
});
console.log(value)
});
callback(events);
},
error: function (xhr, err) {
alert("ERROR! - readyState: " + xhr.readyState + "<br/>status: " + xhr.status + "<br/>responseText: " + xhr.responseText);
}
});
} });})
我使用URL操作命令调用了控制器,并将JSON数据作为ActionResult返回 Fullcalendar可能不喜欢日期字段中的斜杠“/”。请尝试使用连字符“-”。 文档()更详细地介绍了日期/时间工作的格式 以下是我使用AJAX中的JSON编写的完整日历代码(请注意,我的事件没有结束时间,但这是可以选择的): 以及JSON文件(example.JSON):
你的“$”循环有什么意义?在我看来,来自控制器的数据已经是正确的格式,无需翻译。您只需执行
回调(数据)
,而无需任何中间步骤。此外,您的控制器应该接受“开始”和“结束”参数,并且只返回当前显示日期的数据,否则每次用户转到日历中的新日期或视图时,它都会一次又一次地下载您的所有事件,这是非常低效的。就日期而言,您最好以ISO格式输出日期,以避免任何格式不明确或国际化的问题。目前看来,他们可能采用美国M/D/Y格式,但在这种情况下,fullCalendar不知道“2017年3月5日”是5月3日还是3月5日。YYYY-MM-DD是明确的。可能是日历对某些日期的解释不正确,甚至失败,因为它无法理解这些日期-加载事件时是否检查了浏览器控制台中的错误或警告?我的代码正常工作。您的解决方案似乎有所帮助,但经过一些调整后,我在没有AJAX的情况下实现了它。我将在上面发布解决方案。谢谢你的意见!
public ActionResult GetCalendarEvents()
{
var events = new List<VMCalendarEvents>();
var db_events = db.PatientVisits.ToList();
foreach(var e in db_events)
{
DateTime visit_start = Convert.ToDateTime(e.VisitStart);
DateTime visit_end = Convert.ToDateTime(e.VisitEnd);
var calEvent = new VMCalendarEvents
{
id = e.PatientVisitID.ToString(),
title = "Placeholder Title" + e.PatientVisitID.ToString(),
date = visit_start.ToShortDateString(),
start = visit_start.ToString(),
end = visit_end.ToString(),
editable = true,
allDay = false
};
events.Add(calEvent);
}
var rows = events.ToArray();
return Json(rows, JsonRequestBehavior.AllowGet);}
$(function () {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2017-06-12',
editable: true,
events: '@Url.Action("GetCalendarEvents", "Calendar")',
});
});
{
$.ajax({
url: 'example.json',
dataType: 'json',
success: function(doc) {
var events = [];
$.each(doc, function(index, element) {
events.push({
title: element.title,
start: element.time,
url: element.url,
});
});
callback(events);
}
}) //ajax
}
[
{"time": "2017-06-06 09:00:00", "title": "Get It Done in June ", "url": "http://example.org"},
{"time": "2017-06-07 14:00:00", "title": "Fighting Imposter Syndrome for Dissertating Students ", "url": "http://example.com"},
{"time": "2017-06-14 14:00:00", "title": "Entering into the Academic Conversation", "url": "http://example.biz"}
]