jQuery fullcalendar send custom parameter and refresh calendar with JSON

Question

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?

what does /myfeed see / do ? I presume that it receives the querystring value "personId" and performs a lookup to return the json source? refetchEvents should do it (according to the doco) but perhaps you also need to also call 'rerenderEvents'. Have you done a trace (e.g. Fiddler, if you are on Windows) to capture the data being posted / returned? — frumbert, Mar 21 '12 at 08:52

score 42 · Accepted Answer · edited Oct 27 '16 at 13:59

42

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

});

edited Oct 27 '16 at 13:59

Oleg Sg

5
4

answered Oct 26 '13 at 03:56

Jairo Cordero

640
6
8

This is THE solution. According to the documentation of fullcalendar http://fullcalendar.io/docs/event_data/events_json_feed/ in the section `Dynamic data parameter` – inye Apr 14 '15 at 22:38

score 31 · Answer 2 · edited Nov 04 '14 at 10:41

31

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

    });

edited Nov 04 '14 at 10:41

Community

1
1

answered Apr 19 '12 at 14:13

user711189

4,383
4
30
48

2

Maybe this work but the fullcalendar documentation say @jairo answer is the correct. http://fullcalendar.io/docs/event_data/events_json_feed/ in `Dynamic data parameter` – inye Apr 14 '15 at 22:41
This solution is outdated. The better one is now what @inye and jairo are suggesting. – pierrea Apr 18 '17 at 21:55

score 4 · Answer 3 · answered Jul 21 '14 at 16:05

4

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

answered Jul 21 '14 at 16:05

jamesSampica

12,230
3
63
85

This worked perfectly for me. At least put me on the right track to get my calendar figured out. Thank you! – Shawn Gavett Nov 19 '15 at 03:26
Not works for me. $("#overviewDatePicker").datepicker( { onSelect: function(event){ var start=$("#overviewDatePicker").val(); var end="2016-10-21"; $.ajax({ url:"fullcalendar/demos/php/get-events.php?mode=customdate&start="+start+"&end="+end, type:"GET", success:function(result){ console.log(result); $('#calendar').fullCalendar('removeEvents'); $('#calendar').fullCalendar('addEventSource', result); $('#calendar').fullCalendar('rerenderEvents' ); } }); }, }); – Harish Mahajan Oct 26 '16 at 12:05

score 3 · Answer 4 · answered Jul 10 '12 at 16:15

3

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

answered Jul 10 '12 at 16:15

Dan Carter

201
3
12

Not works for me. $("#overviewDatePicker").datepicker( { onSelect: function(event){ var start=$("#overviewDatePicker").val(); var end="2016-10-21"; $.ajax({ url:"fullcalendar/demos/php/get-events.php?mode=customdate&start="+start+"&end="+end, type:"GET", success:function(result){ console.log(result); $('#calendar').fullCalendar('removeEvents'); $('#calendar').fullCalendar('addEventSource', result); $('#calendar').fullCalendar('rerenderEvents' ); } }); }, }); – Harish Mahajan Oct 26 '16 at 12:05

score 2 · Answer 5 · answered Nov 21 '12 at 03:27

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)

score 1 · Answer 6 · edited Oct 26 '13 at 04:07

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

score 0 · Answer 7 · answered Apr 19 '12 at 14:04

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

score 0 · Answer 8 · answered Jul 30 '12 at 13:20

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

score 0 · Answer 9 · answered Sep 30 '14 at 23:44

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

    });

score 0 · Answer 10 · answered May 16 '17 at 09:42

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

score 0 · Answer 11 · edited May 09 '18 at 07:50

0

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!

edited May 09 '18 at 07:50

DaFois

2,197
8
26
43

answered May 09 '18 at 06:54

Amber Gondal

1

jQuery fullcalendar send custom parameter and refresh calendar with JSON

11 Answers11

Linked