Issue in displaying events in Fullcalendar.js

Question

Hi I am trying to implement FullCalendar.js with Asp.Net MVC. I am abl to show empty calendar but my events are not getting loaded in the Calendar.

 $.ajax({
                type: 'Get',
                url: "/Matter/GetMatterEventsSummary",
                data: data,

                datatype: "Json",

                contentType: "application/json",
                success: function (doc) {
                    debugger;
                    $('#calendar').fullCalendar();
                    var events = [];
                    $(doc).find('[object Object],[object Object]').each(function () {
                        debugger;
                    events.push({

                            title: $(this).attr('title'),
                            start: $(this).attr('start') // will be parsed
                        });
                   // });
                    $('#calendar').fullCalendar('refetchEvents');
                  //  callback(events);
                }

            });

it comes to success method and it has two events in it . but dont know why theseevents are not loaded into FullCalendar and also after this Calendar is not comingg automatically. I guess it is not going in events.push. When I do hover on doc it shows "[object Object],[object Object]" and in this it has two records on [0] and [1].

Please help me in this.

Answer 1

Try using

$('#calendar').fullCalendar( 'rerenderEvents' )

after your events have been pulled.

Also, make sure to use the code from the official documentation properly. Try the following (untested):

$('#calendar').fullCalendar({
  events: function(start, end, timezone, callback) {
    $.ajax({
        type: 'Get',
        url: "/Matter/GetMatterEventsSummary",
        data: data,
        datatype: "Json",
        contentType: "application/json",,
        success: function(doc) {
            var events = [];
            $(doc).find('event').each(function() {
                events.push({
                    title: $(this).attr('title'),
                    start: $(this).attr('start') // will be parsed
                });
            });
            callback(events);
        }
    });
  }
});

If you now want to refetch your events, call :

  $('#calendar').fullCalendar('refetchEvents');

where necessary.

EDIT: Since your are actually pulling data from a JSON feed, the following code may even be enough:

$('#calendar').fullCalendar({
    events: '/Matter/GetMatterEventsSummary'
});

Check the documentation here:

EDIT2:

To dynamically modify the request you send to the backend (depending on a dropdown or something else), may be achieved as follows:

 var myValue = 10;

 $('#calendar').fullCalendar({
    events: '/Matter/GetMatterEventsSummary',
    data: function() { // a function that returns an object
        return {
            dynamic_value: myValue
        };
    }
});