populate events for FullCalendar 5 with a Json URL in .NET Core

Question

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,

score 1 · Accepted Answer · answered Jun 08 '22 at 06:06

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

populate events for FullCalendar 5 with a Json URL in .NET Core

1 Answers1