События FullCalendar не отображаются, когда канал JSON - PullRequest
Новая
       10

События FullCalendar не отображаются, когда канал JSON

1 голос
/ 12 марта 2020

У меня есть часть кода FullCalendar на моей странице для извлечения событий из контроллера API в проекте Razor Pages: 

    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();
        })

, и, похоже, он работает просто отлично, вот фрагмент выборки :

enter image description here

Проблема в том, что извлеченное событие не отображается ни в календаре, ни в одном из представлений. Когда я вставляю это JSON в жестко запрограммированное событие, оно работает нормально, и я вижу событие, но только не из GET. Я пробовал это с eventSources безрезультатно. Я искал около 30 различных ответов здесь и все еще не повезло. JSON, похоже, правильно отформатирован, похоже, правильно выбирается, просто не отображается. И да, я смотрю в правильные дни;)

ЗАПРОШЕННОЕ ОБНОВЛЕНИЕ:

Вот данные "ответа":

enter image description here

и вот код. 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());

            }
        }

и вот код для "GetEventAsFullCalendar Json": 

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

1 Ответ

1 голос
/ 12 марта 2020

Проблема в том, что вы дважды сериализуете свои данные.

Вы сериализуете каждый объект события индивидуально в GetEventAsFullCalendarJson(), когда делаете return JsonConvert.SerializeObject(info);. Таким образом, в этот момент у вас уже есть строка JSON, представляющая одно событие.

Но затем вы объединяете все это вместе и снова сериализуете все это, когда пишете return JsonConvert.SerializeObject(events.Select(pe => pe.GetEventAsFullCalendarJson()).ToList()); в методе Get(). Это означает, что уже сериализованные JSON строки событий снова сериализуются - вот почему у вас есть кавычки вокруг объекта события (например, "{ ... }", а затем экранированные кавычки (\") внутри него.

В результате для fullCalendar ваши данные выглядят как массив строк, а не как массив объектов событий.

Исправление простое - удалите сериализацию отдельных событий. Объект / массив должен быть Сериализовал все сразу, чтобы создать единый кусок JSON.

Это: 

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

будет работать, я думаю.

...