我不仅需要在日历按钮上重新获取完整日历的事件,还需要根据我自己的下拉列表更改,因为它们定义了事件搜索的条件。到目前为止,我可以使用$.ajax
传递下拉值的唯一方法,但现在事件无法进入日历。我错过了一些东西,因为我似乎并不完全理解其功能。
$(function () {
InitializeCalendar();
$("#ProjectId").change(function () {
$('#calendar').fullCalendar('refetchEvents');
});
$("#JobId").change(function () {
$('#calendar').fullCalendar('refetchEvents');
});
$("#StoreId").change(function () {
$('#calendar').fullCalendar('refetchEvents');
});
$("#OrderType").change(function () {
$('#calendar').fullCalendar('refetchEvents');
});
$("#ShippingId").change(function () {
$('#calendar').fullCalendar('refetchEvents');
});
});
function InitializeCalendar() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: function (start, end) {
$.ajax({
url: '/Calendar/GetEvents/',
dataType: 'json',
data: {
start: Math.round(start.getTime() / 1000),
end: Math.round(end.getTime() / 1000),
projectId: $("#ProjectId option:selected").val(),
storeId: $("#StoreId option:selected").val(),
jobId: $("#JobId option:selected").val(),
orderType: $("#OrderType option:selected").val(),
shippingId: $("#ShippingId option:selected").val()
}
**SOMETHING MISSING HERE**
//this puts calendar into infinite loop
//$('#calendar').fullCalendar('refetchEvents');
});
}
});
}
控制器:
public JsonResult GetEvents(double start, double end, int? projectId, int? storeId, string orderType, int? shippingId, int? jobId)
{
// Some code...
IList<OrderEvent> events = orderDTOs.Select(orderDTO => new OrderEvent {
id = orderDTO.OrderId,
title = orderDTO.OrderId.ToString(),
start = ToUnixTimespan(orderDTO.CreatedDate),
end = ToUnixTimespan(orderDTO.CreatedDate.AddHours(1)),
url = "/Order/Search"
}).ToList();
return Json(events, JsonRequestBehavior.AllowGet);
}
答案 0 :(得分:4)
为了未来读者的利益,这里是FullCalendar v2的正确解决方案。
events: function (start, end, timezone, callback) {
$.ajax({
url: '/Calendar/GetEvents/',
dataType: 'json',
data: {
start: Math.round(start.getTime() / 1000),
end: Math.round(end.getTime() / 1000),
projectId: $("#ProjectId option:selected").val(),
storeId: $("#StoreId option:selected").val(),
jobId: $("#JobId option:selected").val(),
orderType: $("#OrderType option:selected").val(),
shippingId: $("#ShippingId option:selected").val()
}
success: function(data) {
callback(data)
}
});
答案 1 :(得分:1)
我认为你不应该在事件ajax调用中调用refetchEvents
。 refetchEvents
将再次调用该ajax - 因此无限循环。
另外,我认为您从下拉列表向日历发送数据的方式很好。尝试从ajax调用中删除refetchEvents
调用,看看它是否有效。
如果需要,您可以使用ajax调用的成功回调来处理来自控制器的返回事件。
答案 2 :(得分:-2)
这样的事情对你有用。只需让完整日历通过ajax调用的成功函数重新获取事件,因此它应该只在每次调用后重新获取,而不是像目前那样无限重复:
events: function (start, end) {
$.ajax({
url: '/Calendar/GetEvents/',
dataType: 'json',
data: {
start: Math.round(start.getTime() / 1000),
end: Math.round(end.getTime() / 1000),
projectId: $("#ProjectId option:selected").val(),
storeId: $("#StoreId option:selected").val(),
jobId: $("#JobId option:selected").val(),
orderType: $("#OrderType option:selected").val(),
shippingId: $("#ShippingId option:selected").val()
}
**SOMETHING MISSING HERE**
success: function(data) {
$("#calendar").fullCalendar("refetchEvents");
console.log('successfully refetched events');
}
//this puts calendar into infinite loop
//$('#calendar').fullCalendar('refetchEvents');
});