完整的日历刷新事件

Question

我不仅需要在日历按钮上，而且需要在我自己的下拉更改上重新获取完整日历的事件，因为它们定义了事件搜索的标准。到目前为止，我可以通过使用$.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);
}

Answer 1

为了未来读者的利益，以下是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)
        }
    });

Answer 2

我认为不应该将refetchEvents调用放在events-ajax调用中。refetchEvents将再次调用该ajax，从而实现无限循环。

此外，我认为你从下拉列表向日历发送数据的方式很好。尝试从ajax调用中删除refetchEvents调用，看看它是否有效。

如果需要的话，您可以使用ajax调用的成功回调来处理控制器返回的事件。

Answer 3

这样的东西应该对你有用。只需让完整的日历通过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');
    });