Asp.net:FullCalendar не загружает события

Question

Здравствуйте, я следовал нескольким учебникам по реализации fullcalendar в моем приложении asp.net, но когда я запускаю свое приложение, календарь не загружает события.вот мой 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>
}

и функция, которую я использую для его отображения:

  public JsonResult getConges()
        {
            using (dbContext dbmodel = new dbContext())
            {
                var events = dbmodel.conges.ToList();
                return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
            }

        }

Я не получил никаких ошибок, поэтому я не знаю, какреши это .Я использую базу данных MySQL.

, поэтому, если вы знакомы с этой ошибкой, помогите мне.

[Обновлено]

Answer 1

Эти строки

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

являются проблемой.

fullCalendar не распознает свойства DateDebut и DateFin - он распознает только start и end какдействительные имена свойств для дат.Вместо этого напишите

start: v.DateDebut,
end: v.DateFin != null ? v.DateFin : null

У вас есть похожая проблема в вашем коде настройки календаря, где

conges: conges

должно быть

events: conges

Эти два изменения следует исправитьтвоя проблема.NB. Я удалил конструкторы moment () - если предположить, что ваши строки дат находятся в допустимом формате, который моментальный JS может распознать без заданного пользовательского формата, то fullCalendar также распознает его без необходимости сначала оборачивать его в объект момент.

См. https://fullcalendar.io/docs/event-object для получения списка обязательных и необязательных имен свойств, распознаваемых fullCalendar для события.