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

Posted 2023-05-08

【中文标题】加载 fullcalendar.io 事件时出错 - 未显示数据

【英文标题】：Error when loading fullcalendar.io events - no data displayed

【发布时间】：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'，... 详细信息：描述：“

【参考方案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 再次转换它，那肯定会更整洁。）