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

【问题标题】：FullCalendar events not showing when from JSON feed来自 JSON 提要的 FullCalendar 事件未显示
【发布时间】：2020-03-12 03:57:53
【问题描述】：

我的页面上有这段 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 似乎格式正确，似乎被正确获取，只是没有显示出来。是的，我正在寻找正确的日子；）

请求更新：

这是“响应”数据：

这里是这个 fetch 的 .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);
            }
        }

【问题讨论】：

您能否显示网络工具的“响应”区域中的内容，而不是“预览”？谢谢。还请显示创建事件数据并返回它的 .net 代码。我认为这是一种 API 操作方法？
@ADyson 将请求的信息添加到主帖中——希望对您有所帮助，我正在拔头发:)

标签： c# json fullcalendar razor-pages fullcalendar-4

【解决方案1】：

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

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

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

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

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

这个：

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

我认为会起作用。

【讨论】：