FullCalendar не отображает данные

Question

Я использую fullCalendar в своем проекте MVC. Я загрузил fullCalendar из Nuget, но он не отображает мои данные в календаре. Я могу получить свои данные, но они не отображаются.

Что не так в моем коде?

Метод действия 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, совпадают с форматами, принятыми моментомJS (поскольку для работы с датами используется момент_Я). Это задокументировано здесь: https://fullcalendar.io/docs/moment и более подробно здесь: http://momentjs.com/docs/#/parsing/

Для этого вы можете либо

1) (рекомендуется) Переписать код на стороне сервера, чтобы он возвращал даты в формате ISO. Как правило, если вы используете объекты DateTime в своем коде C #, то сериализатор .NET JSON сделает это автоматически. Поскольку вы напрямую сериализуете результат запроса Entity Framework в 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
});

Подробную документацию по функциям синтаксического анализа в формате моментов можно найти здесь: http://momentjs.com/docs/#/parsing/string-format/