Trouble with FullCalendar rendering events using .getJSON() from controller action

Question

I am having problems rendering an event to a day while in month view of FullCalendar. Below is the .getJSON call in the razor page, followed by the controller JsonResult and the object as seen in the web console.

Hardcoding as per the examples works perfectly but I am struggling to debug what is actually being passed as _calendarEvents to _calendarInit().

var _calendarEvents = [];
    $.getJSON('/Timesheets/GetAll', function (data) {
        var _calendarEvents = data;
    })

public JsonResult GetAll()
    {

        var timesheet = _context.Timesheet
            .Include(t => t.Program)
            .Include(t => t.Task)
            .Select(t => new
            {
                id = t.Id.ToString(),
                title = t.Name,
                start = t.TaskStart,
                end = t.TaskEnd,
                className = "['bg-primary']",
                description = t.Description,
                icon = "fa-clock-o",
                program = t.Program.Name,
                task = t.Task.Name,
                allDay = t.AllDay
            }).ToList();

        return Json(timesheet);
    }

To me, the data looks OK. I am wondering whether it is an issue with the asynchronous getJSON() meaning it is not inscope for the render event or something along those lines.

Many thanks all.

Answer 1

Not understanding the logical order of things was my issue. The below worked thanks to the answers here LogicalOrder and here Returning Response of Async Call

/*GET*/
    function getEvents(callback) {
        $.getJSON('/Timesheets/GetAll', callback);
    }

    var _calendarEvents = [];
    getEvents(function (json) {
        _calendarEvents = json;
        // your logic here
    });