Btukfyl

Hello i was following several tutorials on to implement fullcalendar on my asp.net application but when i launch my application the calendar doesn't load the events .
here's my index.chtml :

@{

    ViewBag.Title = "Index";

}



<div id="calender"></div>





<div id="myModal" class="modal fade" role="dialog">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal">&times;</button>

                <h4 class="modal-title"><span id="eventTitle"></span></h4>

            </div>

            <div class="modal-body">

                <p id="pDetails"></p>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

            </div>

        </div>

    </div>

</div>



<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />

<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print" />







@section scripts{

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>



    <script>

        $(document).ready(function () {

            var events = ;

            $.ajax({

                type: "GET",

                url: "/conge/getConges",

                success: function (data) {

                    $.each(data, function (i, v) {

                        events.push({

                            title: v.Subject,

                            description: v.Description,

                            start: moment(v.DateDebut),

                            end: v.DateFin != null ? moment(v.DateFin) : null,

                            color: v.themecolor,

                            allDay: v.IsFullDay

                        });

                    })



                    GenerateCalender(events);

                },

                error: function (error) {

                    alert('failed');

                }

            })



            function GenerateCalender(events) {

                $('#calender').fullCalendar('destroy');

                $('#calender').fullCalendar({

                    contentHeight: 400,

                    defaultDate: new Date(),

                    timeFormat: 'h(:mm)a',

                    header: {

                        left: 'prev,next today',

                        center: 'title',

                        right: 'month,basicWeek,basicDay,agenda'

                    },

                    eventLimit: true,

                    eventColor: '#378006',

                    events: events,

                    eventClick: function (calEvent, jsEvent, view) {

                        $('#myModal #eventTitle').text(calEvent.title);

                        var $description = $('<div/>');

                        $description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));

                        if (calEvent.end != null) {

                            $description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));

                        }

                        $description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));

                        $('#myModal #pDetails').empty().html($description);



                        $('#myModal').modal();

                    }

                })

            }

        })

    </script>

}

and the function i'm using to display it :

  public JsonResult getConges()

        {

            using (dbContext dbmodel = new dbContext())

            {

                var events = dbmodel.conges.ToList();

                return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

            }



        }

I didn't get any errors so i don't know how to solve it . i'm using mysql database .

so please if you're familiar with this error help me.

[Updated]

These lines

DateDebut: moment(v.DateDebut),

DateFin: v.DateFin != null ? moment(v.DateFin) : null

are the problem.

fullCalendar doesn't recognise the DateDebut and DateFin properties - it only recognises start and end as valid property names for the dates. Instead write

start: v.DateDebut,

end: v.DateFin != null ? v.DateFin : null

You have a similar problem in your calendar setup code, where

conges: conges

needs to be

events: conges

Those two changes ought to fix your problem. N.B. I have removed the moment() constructors - assuming your date strings are in a valid format that momentJS can recognise without being given a custom format, then fullCalendar will recognise it too, without needing to wrap it in a moment object first.

See https://fullcalendar.io/docs/event-object for a list of the required and optional property names recognised by fullCalendar for an event.