Fullcalender json feeds

Question

I'm trying to make dynamic calendarevents. It calls controller function when date/month changes. My controller filters value which comes from ajax call(start, end). So thees are my functions

  events: function (start, end, callback) {
                    $.ajax({
                         type: "POST",
                        url: "/Home/GetData",
                        dataType: 'json',
//this automaticly adds Start and End param to controller. Datetime
                        data: {
                             
                        },
                        error: function (xhr, type, exception) { alert("Error: " + exception); },
                        success: function (response) {
                            console.log(response);
//Response works fine, it return all objects what I  need.
                        }
                        });
                      },

So basicly this function calls GetData json form Home controller with start and end parameter in every month changes. Also I can log this data it comes. but this events are not filled. console log says in eventrender

  eventRender: function (event, element) {

                console.log("event");
                console.log(event);
--
event
undefined

It doesn't fill events but also I'm using it with same way in other page but it works.

events: {
            type: "POST",
            url: "/home/GetEvents",
            data: function () { // a function that returns an object
               
                return {
                   
                };
            }
        },

What just I need to add this to fill events. Thank you

Also I added evetnSoucers but its same

 eventSources: [

                   
                    {
                       
                        url: "/Home/GetData",
                        method: 'POST',
                        
                        failure: function () {
                            alert('there was an error while fetching events!');
                        }, success: function (response) {
                            console.log(response);
                            myfunc(response);
                        }
                       
                    }

                ],

NEW2

This code below call controller with start, end parameter and returns expected value. I can call another function with response value also I can console.log this reponse values. When I add callback to set them my events it says callback is not a function

 events: {
                    type: "POST",
                    url: "/home/GetData",
                    data: function (start, end, timezone, callback) { // a function that returns an object

                        return {
                            // dynamic_value: Math.random()
                        };
                    }, success: function (response) {
                       
                        callback(response);
                        console.log("response");
                        console.log(response);
                        some_func(response);
                        
                    }
                },

    

Answer 1

Edit: as noted by @ADyson in the comments, I bypassed the FullCalendar version assuming you are using the last version. I updated the signature to the v3 one, even so you are wrong with the way you are using it.

I think you are getting stuck because you are missunderstanding the events (as a fuction). If you check the documentation you will see that the signature for the events function is:

function( start, end, timezone, callback ) { }

where:

• start and end are Moments denoting the range the calendar needs events for.
• timezone is a string/boolean describing the calendar’s current timezone..
• callback is a function that must be called when the custom event function has generated its events.

So, if you are using AJAX, you could do it in this way:

{
  events: function(start, end, timezone, callback) {
    const data = {
      start: start,
      end: end
      // ...
    }

    $.ajax({
      type: 'post',
      url: 'url',
      data: data,
      dataType: 'json'
    })
      .done(function(res) {
        if (res.error) {
          // Show error logic
          // ...
        } else {
          const events = res.data.events;
          callback(events);
        }
      })
      .fail(function(res){
        // Show error logic
        // ...
      });
    }
  }
}

The way you make your request may vary, but in essence, the main thing is to call callback() when everything went fine or failureCallback() when something went wrong handle the error if exists. Thus you'll be able to view the events through the eventRender function if you need to customize your events.

If you have filters or similar stuff (or simply need to refresh the events) you could do it by calling .fullCalendar('refetchEvents'). Remember to manage the filtering data on the events: function (...) {}. Calling to this function will call the events function to fetch and render the events.