Having trouble loading events on Fullcalendar.io?

Question

Having trouble loading events on Fullcalendar.io?

Our team is utilizing fullcalendar.io and aiming to retrieve an event from our API controller.

The 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', // a option!
                textColor: 'black' // a option!
            }
        ]
        
    })
});

However, the JavaScript script fails to receive the event correctly. Although it does obtain the JSON data, it doesn't add the event accurately to the calendar.

javascript asp.net json asp.net-web-api fullcalendar

Answer 1

Answer №1

When observing the ajax request in your browser tools, what does the final returned JSON resemble?

fullCalendar is looking for a simple array of events, but it seems that you are returning them nested within another object. As a result, fullCalendar may not recognize these events and will assume there are no events to display.

You might be receiving something along these lines:

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

Instead, you should provide a structure like this:

[
    //...array of events
]

Although untested, the following code snippet should resolve the issue:

[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.

For information on the event feed system being utilized, refer to https://fullcalendar.io/docs/events-json-feed. You can also check out https://fullcalendar.io/docs/events-array for an example of the required object format for creating a valid list of events.

Answer 2

When observing the ajax request in your browser tools, what does the final returned JSON resemble?

fullCalendar is looking for a simple array of events, but it seems that you are returning them nested within another object. As a result, fullCalendar may not recognize these events and will assume there are no events to display.

You might be receiving something along these lines:

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

Instead, you should provide a structure like this:

[
    //...array of events
]

Although untested, the following code snippet should resolve the issue:

[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.

For information on the event feed system being utilized, refer to https://fullcalendar.io/docs/events-json-feed. You can also check out https://fullcalendar.io/docs/events-array for an example of the required object format for creating a valid list of events.

Having trouble loading events on Fullcalendar.io?

Answer №1

Similar questions

Waiting for all API queries in VueJS is important to ensure that all data has been

Guide to fetching a phone number from MySQL in Android using JSON

Using React to easily rearrange images by dragging and dropping them

There was a TypeError encountered in a Node application, stating: "Unable to access the 'trim' property of an undefined

Having trouble getting ngAnimate to work properly?

Creating a radial progress chart using Plotly JavaScript

What is the best way to set up a server in React using Express or HTTP?

Support for Big Decimal in Org.json

When I click, I expect to retrieve the tr element, but instead, I am receiving the td element

Error encountered while returning JSON from a RESTful API in Quarkus due to LazyInitializationException

Unlocking JSON with various structures using Swift

What steps should I follow to obtain the return value after invoking these functions?

Understanding how to use the 'this' variable in Vue components is essential for efficiently modifying DOM elements. Let's dive into a clarification on the usage of 'this'

Action of Submit Button Based on Field Matching Another Form

What are the best practices for securely using JSON.stringify in JavaScript?

What is the correct way to format a Json content type?

Fetching dynamic JavaScript generated by PHP

Interpreting JSON outcomes in C#

Shifting the position of personalized tabs using Jquery

Converting Persian calendar date to Gregorian in JavaScript