使用网络方法中的事件填充FullCalendar [英] Populate FullCalendar with events from web method

查看:133
本文介绍了使用网络方法中的事件填充FullCalendar的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在努力让FullCalendar从Web方法填充事件.

I'm struggling to get FullCalendar to populate events from a web method.

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

我初始化网页上的全日历的代码是:

My code to initialise the fullcalendar on the web page is:

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方法被调用,并返回以下内容:

By using Fiddler, I can see that the web method gets called, and returns the following:

这是有效的JSON字符串,但是FullCalendar不会在日历上填充事件.

This is a valid JSON string, but FullCalendar doesn't populate the event on the calendar.

如果我替换行

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 will populate the calendar with the event.

我在做什么错了?

在此先感谢您的帮助.

如果我将fullcalendar的events属性的代码更改为

If I change the code for events property of fullcalendar to be

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

}

以及返回事件列表的方法

and the method to return a list of events

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屏幕截图),但不填充日历.

it returns the object (see Fiddler screenshot below), but doesn't populate the calendar.

推荐答案

Fullcalendar要求事件数组位于JSON的顶层,即整个JSON是一个数组.而您的web方法返回的是一个具有单个属性"d"的对象.因此,fullCalendar无法识别事件,因为它不知道在该属性的内部查找事件数组.

Fullcalendar requires the event array to be at the top level of the JSON - i.e. the whole of the JSON is an array. Whereas what your webmethod returns is an object with a single property "d". Therefore fullCalendar doesn't recognise the events, because it doesn't know to look inside that property for the event array.

这似乎是web方法的正常行为,我不确定是否真的有办法解决它,因此最简单的方法是使用fullCalendar的自定义事件"功能.然后,您可以告诉它在JSON的"d"属性中专门查找数据.

This seems to be the normal behaviour of webmethods, and I'm not sure there's really any way round it, so the easiest thing to do is use fullCalendar's custom "events" functionality. Then you can tell it to look specifically in the "d" property of your JSON to find the data.

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

See https://fullcalendar.io/docs/events-function for more details.

如果ajax调用无法正确连接,则可能需要对其进行一些调整,但是它应该是正确的或接近正确的.

You may need to tweak some settings of the ajax call if it doesn't connect properly, but it should be right or nearly right.

P.S.我假设上面的数据中的数据仅用于测试,但我强烈建议您不要像这样手动构建JSON-在处理时,使用JSON.NET等对象到JSON序列化程序要容易得多,也更健壮真实事件数据.

P.S. I assume the data above in your webmethod is just for testing, but I would highly recommend not building your JSON by hand like that - far easier and more robust to use an object-to-JSON serialiser such as JSON.NET instead when dealing with the real event data.

这篇关于使用网络方法中的事件填充FullCalendar的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆