jquery fullCalendar pass parameter to resources passing null

As we know we can bind events and resources to a jquery full Calendar. I was able to do this, but I have a drop down filter which refetch the resources and events. While refetch on drop down change it was working fine for the events but the resources every time passing parameter value as null.

I spend approximately 4-5 hours to debug, google but didn’t get sufficient solution. At the end I just read more about the resources doc in detail and found I was doing it totally with wrong approach.

I was using resources (as a JSON feed) that was passing null every time I filter the by drop down. But I have to use another way
resources (as a function)
.

So here the working approach when filter from the drop down it fetch resources and events based on drop down filter change.

Here the drop down filter code.

   $("#ddlGridMechanicCity").on('keyup change', function () {
                $('#scheduler').fullCalendar('refetchResources');
                $("#scheduler").fullCalendar("refetchEvents");               
            });

Here the calendar code with resources and events.

 defaultView: 'timelineDay',
                        resourceLabelText: 'Mechanics',
                        resources: function (callback) {
                            $.ajax({
                                url: '@Url.Action("GridCalendarResources", "Calendar", new {@area = "Admin"})?city=' + $("#ddlGridMechanicCity").val(),
                                success: function (response) {
                                        var resources = [];
                                        for (var c = 0; c < response.length; c++) {
                                            resources.push({
                                                id: response[c].id,
                                                title: response[c].title
                                            });
                                        }
                                        callback(resources);
                                }, error: function () {
                                    if (typeof console == "object") {
                                        console.log(xhr.status + "," + xhr.responseText + "," + textStatus + "," + error);
                                    }
                                }
                            });
                        },
                        events: {
                            url: '@Url.Action("GridCalendarEvents", "Calendar", new {@area = "Admin"})',
                            data: function () {
                                return {
                                    city: $("#ddlGridMechanicCity").val()
                                };
                            },
                            type: "POST"
                        },

Hope this will help you out and save your valuable time. If you have any question or query feel free to contact me.

happy coding..

Posted by | View Post | View Group