加载 fullcalendar.io 事件时出错 - 未显示数据答案

【问题标题】：Error when loading fullcalendar.io events - no data displayed加载 fullcalendar.io 事件时出错 - 未显示数据
【发布时间】：2022-01-04 08:04:06
【问题描述】：

我正在尝试从我的数据库中提取事件。进入功能后，当我想在日历上显示事件时，可以在events.push({})事件中将数据带到控制台，但是日历上看不到数据。

JavaScript 代码

function getByMeetings() {
    debugger;
    $.ajax({
        type: 'GET',
        url: '@Url.Action("GetMeetingList", "Meeting", new {area="admin" })',
        success: function (response) {
            debugger;
            events = [];
            var sources = calendar.getEventSources();
            for (var i = 0; i < sources.length; i++) {
                sources[i].remove();
            }
            for (var i = 0; i < response.length; i++) {
                console.log(response[i]);
                events.push({
                    id: response[i].Id,
                    title: response[i].Title,
                    requesting: response[i].Requesting,
                    organizer: response[i].Organizer,
                    start: moment(response[i].StartDate).format('DD/MM/YYYY HH:mm'),
                    end: moment(response[i].EndDate).format('DD/MM/YYYY HH:mm'),
                    description: response[i].Description,
                    linkUrl: response[i].LinkUrl,
                    meetingCategoryId: response[i].MeetingCategoryId
                });
            }
            calendar.addEventSource(events);
            debugger;
        },
        error: function () {
            $('#saveModal').modal('hide');
            toastr.error('bir sorun ile karşılaşıldı toplantılar şu an için takvime getirilemiyor.');
        }
    });
}

ASP.NET MVC 代码：

public JsonResult GetMeetingList()
{
    var model = _db.GetDefaultRepo<Meeting>()
        .GetAll()
        .Select(s =>
            new MeetingItemViewModel
            {
                Id = s.Id,
                Title = s.Title,
                Description = s.Description,
                Requesting = s.Requesting,
                Organizer = s.Organizer,
                StartDate = s.StartDate,
                EndDate = s.EndDate,
                LinkUrl = s.LinkUrl,
                MeetingCategoryId = s.MeetingCategoryId
            }).AsEnumerable();

            return Json(model, JsonRequestBehavior.AllowGet);
            //return Json(model);
        }

【问题讨论】：

calendar.addEventSource(events); 0：{id：6，标题：'aaaa'，请求：'cccc'，组织者：'bbbb'，开始：'24/11/2021 08:00'，...} 详细信息：描述：“
dddd" 结束："24/11/2021 08:30" id：6 linkUrl："eee" meetingCategoryId：1 组织者："bbbb" 请求："cccc" 开始："24/11/2021 08:00" 标题: "aaaa" 长度: 5 [[原型]]: Array(0)

标签： fullcalendar fullcalendar-5

【解决方案1】：

fullCalendar 不接受 DD/MM/YYYY 格式的日期字符串。造成这种情况的一个原因是，它们可能与同样流行的 MM/DD/YYYY 格式不明确......一旦它只是一个字符串，就无法判断 01/03/2021 是 3 月 1 日还是 1 月 3 日。

fullCalendar 的Date Parsing 文档中列出了可接受的格式。如果您要传递一个字符串，那么它会接受与 ISO8601 兼容的字符串，这将包括像 YYYY-MM-DDTHH:mm 这样的格式（例如 2018-06-01T12:30）

将开始和结束定义更改为

start: moment(response[i].StartDate).format('YYYY-MM-DDTHH:mm')
end: moment(response[i].EndDate).format('YYYY-MM-DDTHH:mm'),

应该解决问题（假设您没有任何其他未提及的 JS 错误）。

附：一直添加和删除事件源有点低效。我建议研究 fullCalendar 的自动事件馈送功能 - 请参阅 https://fullcalendar.io/docs/events-json-feed 和 https://fullcalendar.io/docs/events-function 了解您可以采用的两种方法。（如果你只是让你的 C# 代码以正确的格式输出 JSON，而不是必须使用 JavaScript 再次转换它，那肯定会更整洁。）

【讨论】：