I want to populate events for a FullCalendar 5 with a Json URL in .NET Core
Here's the initialization of the calendar :
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
//themeSystem: 'bootstrap5',
//plugins: [ timeGridPlugin ],
initialView: 'timeGridWeek',
selectable: true,
selectOverlap: false,
headerToolbar: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,dayGridDay'
},
buttonText: {
today: 'Aujourdhui',
month: 'mois',
week: 'semaine',
timeGridWeek: 'jour',
day: 'jour',
list: 'liste'
},
initialDate: '2020-09-12',
navLinks: true, // can click day/week names to navigate views
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
events:'@Url.Action("ListeAnnoncesJSON","Vendeur")'
Here's the URL "ListeAnnoncesJSON" :
{"sr":1,"title":"exemple","desc":"azazazaza","start":"2022-06-06T12:30:00","end":"2022-06-10T12:30:00"}
There's no data in the calendar.
If somebody can help me please
Thanks,
The accepted json should be:
[{"sr":1,"title":"exemple","desc":"azazazaza","start":"2022-06-06T12:30:00","end":"2022-06-10T12:30:00"}]
A simple demo like below:
Model
public class Rootobject
{
public int sr { get; set; }
public string title { get; set; }
public string desc { get; set; }
public DateTime start { get; set; }
public DateTime end { get; set; }
}
View
<div id="FullCalendar"></div>
@section scripts{
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
<script>
$(document).ready(function () {
$('#FullCalendar').fullCalendar({
header: {
left: '',
center: 'prev title next',
right: ''
},
events:'@Url.Action("ListeAnnoncesJSON","Vendeur")'
});
});
</script>
}
Backend
[HttpGet]
public IActionResult ListeAnnoncesJSON()
{
var model = new List<Rootobject>(){
new Rootobject
{
sr = 1,
title = "exemple",
desc = "azazazaza",
start = DateTime.Parse("2022-06-06T12: 30:00"),
end = DateTime.Parse("2022-06-10T12: 30:00")
}
};
return new JsonResult(model);
}
Result