Fullcalendar 重新获取事件

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);
}

- mishap

---

我想知道这个问题是如何解决的！谢谢 - Mathieu

你解决了吗？答案不起作用。 - user2537701

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)
        }
    });

- Thomas

Answer 2

我认为你不应该把refetchEvents调用放在事件ajax调用中。 refetchEvents会再次调用该ajax - 从而导致无限循环。

此外，我认为你从下拉菜单向日历发送数据的方式是正确的。尝试从ajax调用中删除refetchEvents调用，看看是否有效。

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

- ganeshk

Answer 3

你可以尝试使用类似这样的代码。在您的AJAX调用成功函数中，让full calendar通过重新获取事件来刷新日历，这样它就只会在每次调用后重新获取而不是像目前一样无限制地重新获取：

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');
    });

- MrFirthy