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，因此我怀疑您的Date类的EndDate和Schedule属性是字符串而不是DateTimes，这反过来意味着您可能将日期存储为数据库中的字符串。如果是这样，那么通过将日期存储为datetime列，您应该立即修复这种做法。日期不是字符串，而是日期。您在屏幕上看到的内容（例如09/05/2018）仅仅是人类可读形式的该日期的许多可能的表示之一。它实际上存储日期信息并不是一个好的格式。

OR

2）（替代）如果情况不是这样，或由于某种原因不可能，那么告诉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/

FullCalendar不显示数据

1 个答案: