CODEWITHSUNDEEP
jqueryasp.net-mvcfullcalendar
mishap
mishap

Reputation: 8505

Fullcalendar refetch events

I need to re-fetch events for full calendar not only on calendar buttons, but on my own drop-down changes, because they define the criteria for events search. The only way I could pass values of dropdowns so far by using the $.ajax, but now the events don't get to the calendar. I'm missing something, as I don't fully seem to understand the functionality.

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

Controller:

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

Upvotes: 4

Views: 9923

Answers (3)

Thomas
Thomas

Reputation: 11888

In the interests of future readers, here is the correct solution for 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)
        }
    });

Upvotes: 4

MrFirthy
MrFirthy

Reputation: 67

Something like this should work for you. Just have full calendar refetch the events through the success function of your ajax call, therefore it should only refetch after each call and not infinitely like it currently does:

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

Upvotes: -2

ganeshk
ganeshk

Reputation: 5621

I don't think you should put the refetchEvents call in the events ajax call. The refetchEvents will call that ajax again - thus the infinite loop.

Also, I think the way you are sending data to the calendar from your drop-downs is fine. Try with removing the refetchEvents call from the ajax call and see if it works.

And you can use the success callback of the ajax call to process the returned events from your controller - if you need to.

Upvotes: 1

Related Questions