使用来自 Web 方法的事件填充 FullCalendar

Question

我正在努力让 FullCalendar 通过网络方法填充事件。

web方法如下：

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，我可以看到 web 方法被调用，并返回以下内容：

这是一个有效的 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 属性的代码更改为

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 屏幕截图），但不填充日历。

Answer 1

Fullcalendar 要求事件数组位于 JSON 的顶层 - 即整个 JSON 是一个数组。而您的 webmethod 返回的是具有单个属性“d”的对象。因此 fullCalendar 无法识别事件，因为它不知道在该属性中查找事件数组。

这似乎是 webmethods 的正常行为，我不确定是否真的有任何解决方法，所以最简单的方法是使用 fullCalendar 的自定义“事件”功能。然后，您可以告诉它专门查看 JSON 的“d”属性以查找数据。

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 调用没有正确连接，您可能需要调整它的一些设置，但它应该是正确的或几乎正确的。

---

附：我假设您的 webmethod 中的上述数据仅用于测试，但我强烈建议不要像那样手动构建您的 JSON - 在处理真实事件数据。