Asp.net:FullCalendar 不加载事件

Question

您好，我正在按照几个教程在我的 asp.net 应用程序上实现 fullcalendar，但是当我启动我的应用程序时，日历不会加载事件。 这是我的 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

这两个更改应该可以解决您的问题。注：我已经删除了 moment() 构造函数 - 假设您的日期字符串是 momentJS 可以识别的有效格式，而无需给出自定义格式，那么 fullCalendar 也会识别它，而无需先将其包装在 moment 对象中。

请参阅https://fullcalendar.io/docs/event-object 以获取 fullCalendar 为事件识别的必需和可选属性名称的列表。