Issue loading events Fullcalendar.io

Question

We are using fullcalendar.io and we want to get an event from our api controller.

Our Controller

[Route("api/Bookings")]
public class BookingApiController
{

    // GET
    [HttpGet]
    public string Get()                   
    {

        var returnJson = new
        {
            events = new[]
            {
                new {title = "bro", start = "2018-05-06"},
                new {title = "bro2", start = "2018-05-05"}
            }
        };
        return JsonConvert.SerializeObject(returnJson);

    }
}

Our javascript file

$(function () {

    $('#calendar').fullCalendar({
        //weekends : false

        dayClick: function (date) {

            window.location.href = "/Booking/Booking?selectedDate=" + date.format();
        },

        eventSources: [
            {
                url: '/api/Booking',
                color: 'yellow',    // an option!
                textColor: 'black'  // an option!
            }
        ]

    })
});

However the the javascript script never gets the event correctly. We can see it receives the JSON but not adding the event correctly to the calendar.

Answer 1

What does the final returned JSON look like (you can see it if you watch your ajax request in the browser tools)?

fullCalendar expects a flat array of events, but it looks like you're returning them wrapped up inside another object, so fullCalendar will not see them. It will just assume there were no events to return.

I suspect you are receiving something like this:

{
  events: [ 
    //...array of events
  ]
}

whereas you need simply this:

[
    //...array of events
]

This is untested, but I'm pretty sure it will fix it:

[HttpGet]
public string Get()                   
{
    var events = new[]
    {
        new {title = "bro", start = "2018-05-06"},
        new {title = "bro2", start = "2018-05-05"}
    };

    return JsonConvert.SerializeObject(events);
}

Note the absence of the outer "returnJson" object in this version.

See https://fullcalendar.io/docs/events-json-feed for a description of the event feed system (which you're using) but also here https://fullcalendar.io/docs/events-array for an example of the object format required to form a valid list of events.