Unable to bind api json data to javascript code

Question

My problem is that i call an api which gives me a set of json data which i need to bind through javascript. I am using fullcalendar API to show the calendar. Below i just paste my code please help me. In console i donot have any error but still it is not working.

I am using asp.net mvc 5 for my api and to fetch the request i directly use javascript js6 fetch .

My javascript code

 document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');
        //fetch data for events
        var eventdata = fetch('@Url.Action("GetTsdates", "Remo")')
                .then(function (responce) {
                    responce.json().then(function (data) {
                        console.log(data);
                        return data;
                    })
                })
                .catch(function (err) {
                    console.log('Fetch Error :-S', err);
                });

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['interaction', 'dayGrid'],
            //defaultDate: '2019-06-12',
            editable: true,
            eventLimit: true,
            events: eventdata
        });
        calendar.render();
    });

The json data in console

{start: "2019-06-01", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-02", overlap: false, rendering: "background", color: "#f44242"},
 {start: "2019-06-03", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-04", overlap: false, rendering: "background", color: "#f44242"},
 {start: "2019-06-05", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-06", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-07", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-08", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-09", overlap: false, rendering: "background", color: "#f44242"},
 {start: "2019-06-10", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-11", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-12", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-13", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-14", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-15", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-16", overlap: false, rendering: "background", color: "#f44242"}

i Donot hava any error in console. But still it is not working . Thanks in advance.

Answer 1

FullCalendar provides ways for you to define dynamic event sources. You don't have to provide an array of data directly - instead you can either just provide a URL which will return the JSON data in the correct format, and let fullCalendar do the rest, or you can provide a callback function which fullCalendar will run in order to get the events.

It will then call the provided URL / run the provided function whenever it needs to fetch new events (which occurs whenever the user changes the calendar view to a date range for which events were not previously fetched - normally, for efficiency, your server should only send events for the dates actually being displayed. FullCalendar can tell your server which dates it needs data for.)

You can read in more detail about each of these features in the fullCalendar documentation:

1) URL Event Source

2) Function Event Source

In your case, it appears that your server already returns data in the correct format via a GET request, so I think you can go with option 1, and just provide fullCalendar with the URL and let it get on with the job itself. Therefore you can change your code to simply:

document.addEventListener('DOMContentLoaded', renderCalendar);

function renderCalendar() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: ['interaction', 'dayGrid'],
        //defaultDate: '2019-06-12',
        editable: true,
        eventLimit: true,
        events: '@Url.Action("GetTsdates", "Remo")'
    });
    calendar.render();
}

N.B. As per that documentation, your server should ideally be programmed to accept the start and end date parameters which fullCalendar will attach to its fetch request, and then filter the list of events returned so that it only returns events which fall within those dates. This will be beneficial for performance if you have a large number of historical events, since you won't spend time and bandwidth loading events where there is a high chance that the user will never view them.