[英]fullcalendar doesn't show events
我想向全日历添加一些事件。 aspx中的一种web方法会生成一个json到js,但是我无法将web方法的结果与完整的日历链接起来,我只能添加manuals事件。
js:
$(document).ready(function () {
$('#btnInit').click(function () {
var start = Date.parse($("#MainContent_dateD").text());
var end = Date.parse($("#MainContent_dateF").text());
var cle = $("#MainContent_HF_cleU").val();
$.ajax({
type: "POST",
url: "ConsultationPlanning.aspx/getPlanning",
data: '{"start": "' + start + '", "end": "' + end + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if (msg == null) {
alert('no result');
return;
}
alert("received: " + msg.d);
document.getElementById("MainContent_dateD").innerHTML = msg.d;
$('#calendar').fullCalendar({
eventSources: JSON.parse(msg.d)
});
},
error: function(msg){
alert("marche pas : " + msg);
}
});
});
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
hiddenDays: [0],
defaultView: 'month',
editable: false,
allDaySlot: false,
selectable: false,
eventSources: [{
url: 'ConsultationPlanning.aspx/getPlanning'
}]
});})
首先,此网络方法中的参数为String和aspx.cs:
public static String getPlanning(string start, string end)
{
List<String> ls1 = new List<string>();
IList<Planning> ls2= new List<Planning>();
DateTime t = Convert.ToDateTime(start);
DateTime t2 = t.AddHours(1.0);
Planning p=new Planning();
for (int i = 0; i < 4; i++)
{
p.id = "" + i + "" ;
p.title = "event "+i ;
p.start = String.Format("{0:s}", t.AddDays(Convert.ToDouble(i)));
p.end = String.Format("{0:s}", t2.AddDays(Convert.ToDouble(i)));
ls2.Add(p);
}
System.Web.Script.Serialization.JavaScriptSerializer oSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
string sJSON = oSerializer.Serialize(ls2);
return sJSON;
}
我将json文件签入jsonlint.com并进行了验证,所以我猜错误出在js中,但我看不到哪里。
和json:
[
{"id":"0","title":"event 0","start":"2015-05-04T12:35:37","end":"2015-05-04T13:35:37"},
{"id":"1","title":"event 1","start":"2015-05-05T12:35:37","end":"2015-05-05T13:35:37"},
{"id":"2","title":"event 2","start":"2015-05-06T12:35:37","end":"2015-05-06T13:35:37"},
{"id":"3","title":"event 3","start":"2015-05-07T12:35:37","end":"2015-05-07T13:35:37"}]
添加events: [<%=getPlanning%>]
并删除eventSources
。
您应该尝试使用此代码以仅获取给定范围内的事件,然后,回调应该具有魔力:
eventSources: {
events: function (start, end, callback) {
$.ajax({
type: "POST",
url: "ConsultationPlanning.aspx/getPlanning",
data: '{ "start": "' + start.toISOString() + '", "end": "' + end.toISOString() + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
callback(msg.d);
}
}
}
}
为了使其工作,您必须用DateTime参数替换服务器方法的签名...
日历永远不会正确加载数据,因为它首先被加载到没有事件的完整日历中。 而且,我想我应该做一个addEventSource ...在document.ready(function)中移动调用之后,解决方案是在事件而不是eventSource中获取json的结果:
$(document).ready(function () {
var start = Date.parse($("#MainContent_dateD").text());
var end = Date.parse($("#MainContent_dateF").text());
var cle = $("#MainContent_HF_cleU").val();
$.ajax({
type: "POST",
url: "ConsultationPlanning.aspx/getPlanning",
data: '{"start": "' + start + '", "end": "' + end + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if (msg == null) {
alert('no result');
return;
}
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
hiddenDays: [0],
defaultView: 'month',
editable: false,
allDaySlot: false,
selectable: false,
events: JSON.parse(msg.d)
});
},
error: function(msg){
alert("function not working : " + msg);
}
});
})
如果您有任何建议可以使代码更好,那么我现在不关闭主题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.