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

Question

我正在努力让 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，我可以看到 Web 方法被调用，return如下：

这是一个有效的 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);
  });

}

和 return 事件列表的方法

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

它 return 是对象（请参阅下面的 Fiddler 屏幕截图），但不会填充日历。

Answer 1

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

这似乎是 webmethods 的正常行为，我不确定是否真的有任何解决方法，所以最简单的方法是使用 fullCalendar 的自定义 "events" 功能。然后你可以告诉它专门在你的 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 调用的一些设置，但它应该是正确的或接近正确的。

P.S。我假设您的 webmethod 中的上述数据仅用于测试，但我强烈建议您不要像那样手动构建 JSON - 使用 object-to-JSON 序列化程序（例如 [=28] 更容易、更可靠=] 而不是在处理真实事件数据时。

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

Populate FullCalendar with events from web method

vb.net

webmethod

fullcalendar