Giving FullCalendar the json feed url based on a data from html select value

Question

Here I'm trying to customize the json feed url that is usually given. I want to add an input data as a GET request to the php file events.php

The script:

<script>
    $(document).ready(
        function eventcaller() {
            $('#calendar').fullCalendar(
            {
                events: 'events.php?room='+$( "#room_num" ).find( "option:selected" ).prop("value"),

                header: {
                    left: 'prev,next,today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                defaultView: 'agendaWeek'
            });
        }
    );
</script>

events.php:

$room_num = $_GET['room_num'];
//I do queries and get an associative events array exactly the way fullcalendar likes it
$events=array();
echo json_encode($events);

html:

<select class="select form-control" id="room_num" name="room_num" onchange="eventcaller()">
    <option value="0">Select a room</option>
    <option value="1">1</option>
    // and so on.
</select>

I get the following error in the console:

Uncaught ReferenceError: eventcaller is not defined

Pointing to the html select tag where I mentioned onchange.

I don't understand what is my mistake here. If there is an alternate method to get my job done, I'll be more than happy. Thanks in advance.

Think you have to define eventcaller outside document.ready() . Iirc, as written you'll run the function once on startup and then it disappears, it's not a function the onchange handler can reach. — Shilly, Jul 07 '16 at 09:36
Yes. That eliminated the error, but i'm still unable to get the events updated on my calendar, i'm not that fluent in javascript or ajax, not able to find the problem. — fathaahansar, Jul 07 '16 at 12:48
Just debug in steps: Doubleheck if your GET request responds with the correct data. Then check if the object you use in .fullCalendar() function is correct compared to the docs of that plugin. Then check if the plugin needs something else to work, maybe you forgot an init or a setting somewhere. — Shilly, Jul 07 '16 at 12:53
You can pass a parameter on the url with [jQuery $.ajax options](http://fullcalendar.io/docs/event_data/events_json_feed/) for the JSON feed instead of creating the calendar on click - then bind a change event to the select to trigger a [refetchEvents](http://fullcalendar.io/docs/event_data/refetchEvents/) — smcd, Jul 07 '16 at 19:56

score 0 · Accepted Answer · edited May 23 '17 at 11:58

This solved the issue for me with my PHP grabbing the POST variable dynamicValue.

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

This question was asked before, so here it is jquery fullcalendar send custom parameter and refresh calendar with JSON

Giving FullCalendar the json feed url based on a data from html select value

1 Answers1