fullcalendar：事件不显示在日历中

Question

我正在尝试在我呈现的日历上呈现我的事件。我正在关注它的官方示例 here

下面是我的代码

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<div id="calender"></div>

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
        $(document).ready(function () {

            var eventList = [];

            $.ajax({
                type: "GET",
                url: "/home/GetEvents",
                success: function (data) {
                    $.each(data, function (i, content) {
                        eventList.push({
                            title: content.title,                           
                            start: content.start,
                            end: content.end != null ? content.end : "",
                            color: content.color,
                        });
                    })
                    GenerateCalendar(eventList);
                },

                error: function (error) {
                    console.log("unable to generate calendar, the error is: ", error);
                }
            })


            function GenerateCalendar(events) {
                console.log("GenerateCalendar Enter ", events);
                // do not create another calendar if one exist
                var calendarEl = document.getElementById('calender');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                    },
                    initialView: 'dayGridMonth',
                    navLinks: true, // can click day/week names to navigate views
                    businessHours: true,
                    editable: true,
                    selectable: true,
                    events: events

                });
                calendar.render();
            }
        })
</script>
<style>
    body {
        margin: 40px 10px;
        padding: 0;
        font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
        font-size: 14px;
    }

    #calendar {
        max-width: 1100px;
        margin: 0 auto;
    }

    .fc-header-toolbar {
        /*
            the calendar will be butting up against the edges,
            but let's scoot in the header's buttons
        */
        padding-top: 1em;
        padding-left: 1em;
        padding-right: 1em;
    }
</style>

以上代码呈现了一个没有事件的日历。所以我控制台记录我的事件，下面是我的结果

[
  {
    "title": "some subject",
    "start": "1/28/2022 7:18:32 AM",
    "end": "1/1/1900 12:00:00 AM",
    "color": "pink"
  },
  {
    "title": "some subject 2",
    "start": "1/28/2022 7:19:13 AM",
    "end": "1/1/1900 12:00:00 AM",
    "color": "black"
  }
]

预期结果

事件应该出现在日期

实际结果

它只是呈现一个空日历

如有任何建议，我们将不胜感激

Answer 1

~~尝试将函数参数名称更改为与事件不同的名称。~~

编辑：对 - 与命名无关。

        $(document).ready(function () {

            var eventList = [
              {
                "title": "some subject",
                "start": "2022-01-28T13:00:00",
                "color": "pink"
              }
            ];
            
                        GenerateCalendar(eventList);

            function GenerateCalendar(myevents) {
                console.log("GenerateCalendar Enter ", myevents);
                // do not create another calendar if one exist
                var calendarEl = document.getElementById('calender');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                    },
                    initialView: 'dayGridMonth',
                    navLinks: true, // can click day/week names to navigate views
                    businessHours: true,
                    editable: true,
                    selectable: true,
                    events: myevents

                });
                calendar.render();
            }
        })

<style>
    body {
        margin: 40px 10px;
        padding: 0;
        font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
        font-size: 14px;
    }

    #calendar {
        max-width: 1100px;
        margin: 0 auto;
    }

    .fc-header-toolbar {
        /*
            the calendar will be butting up against the edges,
            but let's scoot in the header's buttons
        */
        padding-top: 1em;
        padding-left: 1em;
        padding-right: 1em;
    }
</style>

<h2>Index</h2>
<div id="calender"></div>

<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Answer 2

我必须将我的开始时间和结束时间转换为文档中的正确格式

var momentStart = moment(content.start, 'MM-DD-YYYY');
var momentStartString = momentStart.format('YYYY-MM-DD'); 

var momentEnd = null;
var momentEndString = "";

if (content.end != null) {
  momentEnd = moment(content.end, 'MM-DD-YYYY');
  momentEndString = momentEnd.format('YYYY-MM-DD');
}

fullcalendar：事件不显示在日历中

fullcalender: Events not displaying in calendar

html

fullcalendar