CODEWITHSUNDEEP
jqueryjsonfullcalendar
user711189
user711189

Reputation: 4483

jQuery fullcalendar send custom parameter and refresh calendar with JSON

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

    });

However, the code above doesn't work. Any help?

Upvotes: 32

Views: 62714

Answers (11)

Amber Gondal
Amber Gondal

Reputation: 1

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!

Upvotes: 0

Jigs17
Jigs17

Reputation: 49

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

Upvotes: 0

Jairo Cordero
Jairo Cordero

Reputation: 640

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

});

Upvotes: 42

user711189
user711189

Reputation: 4483

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

    });

Upvotes: 31

Larry
Larry

Reputation: 1

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

    });

Upvotes: 0

jimSampica
jimSampica

Reputation: 12410

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

Upvotes: 4

Jairo Cordero
Jairo Cordero

Reputation: 640

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

Upvotes: 1

tocallaghan
tocallaghan

Reputation: 9522

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)

Upvotes: 2

vadim
vadim

Reputation: 1726

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();
{

Upvotes: 0

Dan Carter
Dan Carter

Reputation: 201

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

Upvotes: 3

Kristian H&#248;jklint Schneider
Kristian H&#248;jklint Schneider

Reputation: 93

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

Upvotes: 0

Related Questions