来自 JSON 提要的 FullCalendar 事件未显示

Question

我的页面上有这段代码的 FullCalendar 部分，用于从 Razor Pages 项目中的 API 控制器中提取事件：

    var calendar;
        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');
            calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['dayGrid', 'interaction', 'list', 'timeGrid'],
                defaultView: 'dayGridMonth',
                customButtons: {
                    newEventButton: {
                        text: 'new event',
                        click: function () {
                            window.location.assign("Calendars/EditPersonnelEvent/0");
                        }
                    }
                },
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'newEventButton,dayGridMonth,timeGridWeek,timeGridDay'
                },
                events: "/api/fetchEvents"
            });
            calendar.render();
        })

它似乎运行良好，这是获取的片段：

问题是，获取的事件没有显示在日历上，也没有显示在任何视图上。当我将 JSON 粘贴到硬编码事件中时，它工作正常并且我看到了该事件，只是当它来自 GET 时看不到。我用 eventSources 试过这个没有用。我在这里搜索了大约 30 个不同的答案，但仍然没有运气。 JSON 似乎格式正确，它似乎被正确提取，只是没有显示出来。是的，我正在寻找正确的日期 ;)

请求的更新：

这里是 "response" 数据：

这里是这次获取的 .NET 代码：

    [Route("api/fetchEvents")]
        [ApiController]
        public class FetchEventsController : ControllerBase
        {
            private readonly IPersonnelEventService _personnelEventService;

            public FetchEventsController(IPersonnelEventService personnelEventService)
            {
                _personnelEventService = personnelEventService;
            }

            // GET: api/FetchEvents/5
            [HttpGet]
            public string Get(string start, string end)
            {
                int currentUserId = User.Identity.GetUserId();
                DateTime objStart = DateTime.Parse(start, null, System.Globalization.DateTimeStyles.RoundtripKind);
                DateTime objEnd = DateTime.Parse(end, null, System.Globalization.DateTimeStyles.RoundtripKind);
                List<Entities.PersonnelEvent> events = new List<Entities.PersonnelEvent>(_personnelEventService.GetPersonnelEventsByUserId(currentUserId, objStart, objEnd));
                return JsonConvert.SerializeObject(events.Select(pe => pe.GetEventAsFullCalendarJson()).ToList());

            }
        }

这是 "GetEventAsFullCalendarJson" 的代码：

    public string GetEventAsFullCalendarJson()
            {
                var info = new
                {
                    title = Name,
                    start = StartDate,
                    end = EndDate
                };
                return JsonConvert.SerializeObject(info);
            }
        }

Answer 1

问题是您正在对数据进行双重序列化。

当您执行 return JsonConvert.SerializeObject(info); 时，您在 GetEventAsFullCalendarJson() 中单独序列化每个事件对象。所以那时你已经有了一个代表单个事件的 JSON 字符串。

但是当你在 Get() 方法中写 return JsonConvert.SerializeObject(events.Select(pe => pe.GetEventAsFullCalendarJson()).ToList()); 时，你将所有这些组合在一起并再次序列化整个事情。这意味着已经序列化的 JSON 事件字符串被再次序列化 - 这就是为什么你在事件对象周围有引号（例如 "{ ... }" 然后在其中转义引号（\"） .

结果是，对于 fullCalendar，您的数据看起来只是一个字符串数组，而不是一个事件对象数组。

修复很简单 - 删除单个事件的序列化。 object/array 必须一次全部序列化以创建连贯的单个 JSON.

这个：

return JsonConvert.SerializeObject(events.Select(pe => {
  title = pe.Name,
  start = pe.StartDate,
  end = pe.EndDate
}).ToList());

我认为可以。

来自 JSON 提要的 FullCalendar 事件未显示

FullCalendar events not showing when from JSON feed

c#

json

fullcalendar

razor-pages

fullcalendar-4