FullCalendar 不显示数据

Question

我在我的 MVC 项目中使用 fullCalendar。我从 Nuget 下载了 fullCalendar，但它没有在日历上显示我的数据。我可以获取我的数据，但它没有显示。

我的代码出了什么问题？

MVC 动作方法：

  public JsonResult GetEvents()
  {
    dbContext = new Context();
    var events = dbContext.Schedule.ToList();

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

查看：

我认为 GenerateCalendar 功能不起作用。

    <link href="~/Content/fullcalendar.min.css" rel="stylesheet" />
    <script src="~/Content/PanelJS/jquery.min.js"></script>
    <script src="~/Content/PanelJS/moment.min.js"></script>
    <script src="~/Scripts/fullcalendar.min.js"></script>
    <script>

        $(document).ready(function () {
            var events = [];
            $.ajax({
                type: "GET",
                url:"@Url.Action("GetEvents","Schedule")",
                success: function (data) {
                    $.each(data,function(i,v)
                    {
                        events.push({
                            title: v.Name,
                            start: v.Date,
                            end: v.EndDate,
                            location:v.Location

                        });
                        console.log(events);
                    })
                    GenerateCalendar(events);
                },
                error:function(error)
                {
                    alert('Error');
                }
            });

            function GenerateCalendar(events)
            {
                $('#calendar').fullCalendar('destroy');
                $('#calendar').fullCalendar(
                    {
                        contentHeight: 400,
                        defaultDate: new Date(),
                        color:'lightBlue',
                        timeFormat: 'h(:mm)a',
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right:'month,basicWeek,basicDay,agenda'
                        },
                        eventLimit: true,
                        eventColor: '#378006',
                        events:events
                    })
            }
        });
</script>

控制台结果；

end: "10/05/2018 "location: "Chicago" start: "09/05/2018" title: "MyEvent"

Answer 1

从控制台输出看来，您的日期是以不明确的格式作为字符串提供的。 fullCalendar / momentJS 在没有明确告知您使用的格式的情况下将无法理解。可能是dd/mm/yyyy 或mm/dd/yyyy。解析器无法知道如何处理它。

因此，fullCalendar 将无法将此数据用作事件，因为它不了解开始和结束日期。

fullCalendar 接受的日期和时间格式与 momentJS 接受的相同（因为它使用 momentJS 处理日期）。这记录在这里：https://fullcalendar.io/docs/moment，更详细的在这里：http://momentjs.com/docs/#/parsing/

因此，你可以

1) （推荐） 重新编写服务器端代码，使其返回 ISO 格式的日期。通常，如果您在 C# 代码中使用 DateTime 对象，那么 .NET JSON 序列化程序会自动为您执行此操作。由于您将实体框架查询的结果直接序列化为 JSON，因此我怀疑您的 Schedule 类的 Date 和 EndDate 属性是字符串而不是 DateTimes，这反过来意味着您可能是将日期作为字符串存储在数据库中。如果是这样，这是一种不好的做法，您应该立即通过将日期存储为 datetime 列来解决此问题。日期不是字符串，它们是日期。您在屏幕上看到的内容（例如 2018 年 9 月 5 日）只是该日期的许多可能表示之一，以人类可读的形式。对于实际存储日期信息来说，这不是一个好的格式。

或

2) (alternative) 如果不是这样，或者由于某种原因不可能，然后告诉 momentJS 根据您提供的格式解析日期，然后将数据传递给 fullCalendar作为矩对象，例如

events.push({
  title: v.Name,
  start: moment(v.Date, "DD/MM/YYYY"),
  end: moment(v.EndDate, "DD/MM/YYYY"),
  location: v.Location
});

momentJS 中格式特定解析功能的深入文档可以在这里找到：http://momentjs.com/docs/#/parsing/string-format/