Fetching events on FullCalendar

Question

I'm trying to make FullCalendar works on my app, but I'm not able to fetch the events I have on my mysql database. Here is my code:

.cshtml

<div class="panel-body">
                    <script type="text/javascript">
                        $(document).ready(function () {
                            $('#calendar').fullCalendar({
                                height: 600,
                                width: 500,
                                theme: false,
                                fixedWeekCount: false,
                                header: {
                                    left: 'prev,next today',
                                    center: 'title',
                                    right: 'month,agendaWeek,agendaDay',

                                },
                                weekends: false,
                                editable: false,
                                eventSources: [

                                       'Agenda/getEvents'

                                ],
                            });
                        });
                    </script>
                    <div id="calendar"></div>
                </div>

.cs controller

{
public class AgendaController : Controller
{
    // GET: Agenda
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Agenda()
    {
        ViewBag.id = Session["id"];
        ViewBag.usuario = Session["usuario"];
        ViewBag.tipo_usuario = Session["tipo_usuario"];
        return View();
    }

    [HttpPost]
    public JsonResult getEvents(double start, double end)
    {
        try
        {
            DataTable dt = new DataTable();


            using (MySqlConnection con = new MySqlConnection(BD.CadConMySQL()))
            {
                using (MySqlCommand cmd = new MySqlCommand("SELECT tareas.tipo as title, tareas.fecha_inicio as start, tareas.fecha_fin as end FROM tareas", con))
                {


                    using (MySqlDataAdapter da = new MySqlDataAdapter(cmd))
                    {
                        da.Fill(dt);
                    }
                }
            }

            return Json(dt.ToList());
        }
        catch (Exception e)
        {
            RespGeneric resp = new RespGeneric("KO");
            resp.msg = e.Message;
            return Json(resp);
        }
    }

So the Agenda/getEvents give me back this following JSON that seems ok for FullCalendar: JSON

However, the calendar doesnt show any event and I dont get why because the JSON looks good and if I fetch the events one by one on the .cshtml with exactly the same data it works. Thanks!

Answer 1

I think that you didn't respect the structure of a standard eventSource fetch which is described in the documentation as :

$('#calendar').fullCalendar({

  eventSources: [

    // your event source
    {
      url: '/myfeed.php',
      type: 'POST',
      data: {
        custom_param1: 'something',
        custom_param2: 'somethingelse'
      },
      error: function() {
        alert('there was an error while fetching events!');
      },
      color: 'yellow',   // a non-ajax option
      textColor: 'black' // a non-ajax option
    }

    // any other sources...

  ]

});