Я изо всех сил пытаюсь заставить FullCalendar заполнять события из веб-метода.

Веб-метод выглядит следующим образом:

Imports System.ServiceModel
Imports System.ServiceModel.Activation
Imports System.ServiceModel.Web
Imports Newtonsoft.Json

<ServiceContract(Namespace:="")>
<AspNetCompatibilityRequirements(RequirementsMode:=AspNetCompatibilityRequirementsMode.Allowed)>
Public Class TestService


  <OperationContract()>
  <WebGet>
  Public Function GetEventList(start As Date, [end] As Date) As String

    Dim a As String
    a = "[  { ""id"": ""46_l"",   ""title"": ""CustomEvent-Chargement"",   ""allDay"": false,  ""start"": ""2018-03-10T14:00:00"", ""end"": ""2018-03-10 15:00""}]"
    Return a

  End Function

End Class

Мой код для инициализации полного календаря на веб-странице:

var initializeCalendar = function () {
  $('.calendar').fullCalendar({
    events: "../../WebServices/TestService.svc/GetEventList",
    //events: d=[  { "id": "46_l",   "title": "CustomEvent-Chargement",   "allDay": false,  "start": "2018-03-10T14:00:00", "end": "2018-03-10 15:00"}],
    height: screen.height - 160,

  });
};

Используя Fiddler, я вижу, что вызывается веб-метод и возвращает следующее:

enter image description here

Это допустимая строка JSON, но FullCalendar не заполняет событие в календаре.

Если я заменю линию

events: "../../WebServices/TestService.svc/GetEventList",

С участием

events: d=[  { "id": "46_l",   "title": "CustomEvent-Chargement",   "allDay": false,  "start": "2018-03-10T14:00:00", "end": "2018-03-10 15:00"}],

FullCalendar заполнит календарь событием.

Что я делаю не так?

Заранее благодарим за помощь.

РЕДАКТИРОВАТЬ:

Если я изменю код для свойства событий fullcalendar на

events: function( start, end, timezone, callback ) { 
  //manually specified ajax call to the server:
  $.ajax({
    url: "../../WebServices/TestService.svc/GetEventList",
    data: { "start": start.toISOString(), "end": end.toISOString() }, //pass     in start and end so the server can return the correct events for the time period being displayed
    dataType: "json",
    method: "GET",
  }).done(function(data) { //success
    callback(data.d); //pass the array contained in the "d" property to     fullCalendar
  }).fail(function(jqXHR) { //failure
    alert("An error occurred while fetching events: " + jqXHR.statusText);
  });

}

И метод для возврата списка событий

Imports System.ServiceModel
Imports System.ServiceModel.Activation
Imports System.ServiceModel.Web
Imports Newtonsoft.Json

Public Class [Event]
  Public Property id() As String
  Public Property title() As String
  Public Property allDay As Boolean
  Public Property start() As String
End Class

<ServiceContract(Namespace:="")>
<AspNetCompatibilityRequirements(RequirementsMode:=AspNetCompatibilityRequirementsMode.Allowed)>
Public Class TestService

  <OperationContract()>
  <WebGet(ResponseFormat:=WebMessageFormat.Json)>
  Public Function GetEventList(start As String, [end] As String) As List(Of [Event])

    Dim results As New List(Of [Event])()

    results.Add(New [Event]() With {
            .id = "46_l",
            .title = "CustomEvent-Chargement",
            .allDay = False,
            .start = "2018-03-10T14:00:00"
})
    Return results

  End Function

End Class

Он возвращает объект (см. снимок экрана Fiddler ниже), но не заполняет календарь.

enter image description here

0
Saul 14 Мар 2018 в 23:36

1 ответ

Лучший ответ

Fullcalendar требует, чтобы массив событий находился на верхнем уровне JSON, то есть весь JSON является массивом. В то время как ваш веб-метод возвращает объект с единственным свойством «d». Поэтому fullCalendar не распознает события, потому что он не знает, как искать в этом свойстве массив событий.

Это кажется нормальным поведением веб-методов, и я не уверен, что есть какой-то способ обойти это, поэтому проще всего использовать настраиваемые функции «событий» fullCalendar. Затем вы можете указать ему, чтобы он специально просматривал свойство «d» вашего JSON, чтобы найти данные.

events: function( start, end, timezone, callback ) { 
  //manually specified ajax call to the server:
  $.ajax({
    url: "../../WebServices/TestService.svc/GetEventList",
    data: { "start": start.toISOString(), "end": end.toISOString() }, //pass in start and end so the server can return the correct events for the time period being displayed
    dataType: "json",
    method: "GET",
  }).done(function(data) { //success
    callback(data.d); //pass the array contained in the "d" property to fullCalendar
  }).fail(function(jqXHR) { //failure
    alert("An error occurred while fetching events: " + jqXHR.statusText);
  });
}

Дополнительные сведения см. В https://fullcalendar.io/docs/events-function.

Возможно, вам придется настроить некоторые параметры вызова ajax, если он не подключается должным образом, но он должен быть правильным или почти правильным.


P.S. Я предполагаю, что приведенные выше данные в вашем веб-методе предназначены только для тестирования, но я настоятельно рекомендую не создавать ваш JSON вручную таким образом - гораздо проще и надежнее использовать сериализатор объект-в-JSON, такой как JSON.NET, вместо этого при работе с реальные данные о событии.

0
ADyson 15 Мар 2018 в 12:41