jquery fullcalendar send custom parameter and refresh calendar with JSON

问题

im trying to use the jquery fullcalendar. The event data comes from the server using JSON. My page has a dropdown element and the fullcalendar div.

What i need is to refresh the calendar each time the user changes the dropdown. The selected value of the dropdown should be posted to the server in order to fetch the new event data

Here is my code

     $(document).ready(function() {
        $('#calendar').fullCalendar({
            events: {
                url : '/myfeed',
                data : {personId : $('#personDropDown').val() }
            }
        });

        $('#personDropDown').change(function(){
            $('#calendar').fullCalendar('refetchEvents');
        });

    });

The code above however doesnt work. Any help?

回答1:

try this:

$(document).ready(function () {
    $('#calendar').fullCalendar({
        events: {
            url: '/myfeed',
            data: function () { // a function that returns an object
                return {
                    personId: $('#personDropDown').val(),
                };

            }
        });


    $('#personDropDown').change(function () {
        $('#calendar').fullCalendar('refetchEvents');
    });

});

回答2:

Finally it worked with the following code:

$(document).ready(function() {
        loadCalendar();
        $('#siteSelect').change(function(){
            var selectedSite = $('#siteSelect').val();
            var events = {
                  url: '/myfeed2',
                  type: 'POST',
                  data: {
                    siteid: selectedSite
                  }
            }
            $('#calendar').fullCalendar('removeEventSource', events);
            $('#calendar').fullCalendar('addEventSource', events);
        });

    });

回答3:

This works on at least 2.0.2. data becomes a function that returns an object populated with dynamic dropdown values. change is added to refresh the calendar when a new dropdown value is selected.

$("#calendar").fullCalendar({
    events: {
        url: "/myfeed",
        data: function() {
            return {
                dynamicValue: $("#dropdownList").val()
            };
        },
        type: "POST"
    }
});

$("#dropdownList").change(function () {
    $("#calendar").fullCalendar("refetchEvents");
});

回答4:

I refresh this way after an ajax event adds an event using a modal for instance:

$('#cal').fullCalendar('removeEvents');
$('#cal').fullCalendar('addEventSource', "../calendar/json-events2.php")
$('#cal').fullCalendar('rerenderEvents');

回答5:

The problem is that you are changing the value of the dropdown after you have created the event object, which has a copy of the original value of the dropdown. The following is what you need:

$('#dropdownId').change(function () {
    events.data.customParam = $(this).val();
    $('#calendar').fullCalendar('refetchEvents');
});

This relies on the event object being created in an area where it can be accessed from the dropdown onchange and the fullcalendar initialisation (e.g. document onload)

回答6:

I solved like this

         data: function() { // a function that returns an object
         return {
                 custom_param1: date_start,
             custom_param2: date_end
            };
         },

after modifying the values date_start and date_end, this function gets the new values. In my case i take the dates when the view changes

viewRender: function(view,element){
       date_start = $.fullCalendar.formatDate(view.start,'dd/MM/yyyy');
       date_end   = $.fullCalendar.formatDate(view.end,'dd/MM/yyyy');
},

回答7:

I could not get that to work either. So I ended up with solution similar to this:

$('#personDropDown').change(function () {
            var source = {
                data: {
                    filter: $('#personDropDown').val()
                },
                 url : '/myfeed'
            };
            $('#calendar').fullCalendar('removeEvents');
            $('#calendar').fullCalendar('addEventSource', source);
        });

回答8:

This can be achieved by using function as event source. On refetchEvents event fullCalendar calls function that returns custom value and will post it to service.

$(document).ready(function() {
        $('#valueSelect').change(function(){
            if ($('#calendar').hasClass('fc'))
            {
                $('#calendar').fullCalendar('refetchEvents');
            }
            else
            {
                $('#calendar').fullCalendar({
                    events: function(start, end, callback) {
                        $.ajax({
                            url: 'web-service-link',
                            type: 'GET',
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            data: {
                                start: Math.round(start.getTime() / 1000),
                                end: Math.round(end.getTime() / 1000),
                                customValue: GetCustomValue()
                            }
                        });
                    }
                });
            }
        });
});

function GetCustomValue()
{
    return $('#valueSelect').val();
{

回答9:

I just ran into this myself and there is a more dynamic way of doing this since the value is stored when the calendar is initialized and the data object needs modified.

 $(document).ready(function() {
        $('#calendar').fullCalendar({
            events: {
                url : '/myfeed',
                data : {personId : $('#personDropDown').val() }
            }
        });

        $('#personDropDown').change(function(){
            $('#calendar').data('fullCalendar').options.events.data.personId = $(this).val();
            $('#calendar').fullCalendar('refetchEvents');
        });

    });

回答10:

This is right way.

$.ajax({
    url: 'ABC.com/Calendar/GetAllCalendar/',
    type: 'POST',
    async: false,
    data: { Id: 1 },
    success: function (data) {
        obj = JSON.stringify(data);
    },
    error: function (xhr, err) {
        alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
        alert("responseText: " + xhr.responseText);
    }
});

/* initialize the calendar
-----------------------------------------------------------------*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

var calendar = $('#calendar').fullCalendar({
    //isRTL: true,
    buttonHtml: {
        prev: '<i class="ace-icon fa fa-chevron-left"></i>',
        next: '<i class="ace-icon fa fa-chevron-right"></i>'
    },
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    //obj that we get json result from ajax
    events: JSON.parse(obj)
    ,
    editable: true,
    selectable: true    
});

回答11:

I did it using this :

$('#calendar').fullCalendar( 'destroy' );

when I select other option in the dropdown, I don't know if is elegant but works!

来源：https://stackoverflow.com/questions/9801095/jquery-fullcalendar-send-custom-parameter-and-refresh-calendar-with-json