Fullcalendar重新获取事件

时间:2012-07-16 18:40:52

标签: jquery asp.net-mvc fullcalendar

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

3 个答案:

答案 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调用中调用refetchEventsrefetchEvents将再次调用该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');
    });