Bad request fetching json from razor post with fullcalendar - asp.net-core

Question

I have implemented full calendar. It does show as it supposed to, but fetching data goes wrong
.cshtml
<div id='calendar'></div>
.cshtml.cs
public class IndexModel : PageModel
{
public JsonResult OnPost(DateTime start, DateTime end)
{
return new JsonResult(new
{
url = "something",
title = "something else",
start = ConvertToUnixTimestamp(DateTime.Now).ToString(),
end = ConvertToUnixTimestamp(DateTime.Now.AddDays(2)).ToString(),
allDay = false,
backgroundColor = "red",
textColor = "green"
});
}
}
.js
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
events: {
url: '/Overview/Employee/Index',
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
method: 'POST'
},
plugins: ['dayGrid']
});
calendar.render();
});
When i load the page, i see a request happening, but it returns a 400, bad request. Any idea why?
The request:

Answer 1

I tried your code without 400 error( use #Html.AntiForgeryToken() in the form), but the event is not added to the calendar successfully. It works when I return a List Model, try to use below code to add events:
public class EventModel
{
public int id { get; set; }
public string start { get; set; }
public string end { get; set; }
public string title { get; set; }
public bool allDay { get; set; }
public string url { get; set; }
public string color { get; set; }
public string textColor { get; set; }
}
public class IndexModel : PageModel
{
public JsonResult OnPost(DateTime start, DateTime end)
{
IEnumerable<EventModel> events = new List<EventModel>()
{
new EventModel()
{
url = "something",
title = "something else",
start = (DateTime.Now).ToString(),
end = (DateTime.Now.AddDays(2)).ToString(),
allDay = false,
color = "red",
textColor = "green"
}
};
return new JsonResult(events);
}
}
Results: