全日历插件不渲染日历上的事件

Question

我正在使用fullCalendar插件来显示来自 ASP.NET ASMX 网络服务的事件。JSON 数据获取正确，并在控制台中正常显示。但事件不会在日历视图上呈现。我错过了什么？

$('#divcalendar').fullCalendar({
defaultDate: '2018-03-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: function (start, end, timezone,callback) {
$.ajax({
type: "POST",
url: 'Webservice.asmx/ListEvents',
cache: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var event = [];
$(data.d).each(function () {
event.push({
title: this.Title,
start: this.Start,
end: this.End
});
});
console.log(event);
callback(event);
},
error: function (jqXHR, textStatus, errorThrown) {
alert('There was an error');
}
});
}
});

[WebMethod]
public CalendarEvent[] ListEvents()
{
DateTime epoc = new DateTime(1970, 1, 1);
return new CalendarEvent[]
{
new CalendarEvent { Title = "Event 1", Start = new DateTime(2018,3,9,16,0,0).Subtract(epoc).TotalSeconds, End = new DateTime(2018,3,9,17,0,0).Subtract(epoc).TotalSeconds},
new CalendarEvent { Title = "Event 2", Start = new DateTime(2018,3,12,12,0,0).Subtract(epoc).TotalSeconds, End = new DateTime(2018,3,12,13,0,0).Subtract(epoc).TotalSeconds}
};
}

来自 Web 服务的控制台输出

{"d":[{"__type":"CalendarEvent","End":1520614800,"Start":1520611200,"Title":"Event 1"},{"__type":"CalendarEvent","End":1520859600,"Start":1520856000,"Title":"Event 2"}]}

Answer 1

我认为您的日期正在输入日历，但不是在您想要的位置。

虽然你没有明确提到，但我强烈怀疑你为开始和结束日期输出的时间戳是以秒为单位指定的。

现在，fullCalendar使用momentJS来解析提供给它的任何日期字符串或时间戳。或者，它可以接受现成的momentJS或JS日期对象。

momentJS可以通过momentJS构造函数(fullCalendar在收到时间戳值时正在调用)自动解析时间戳，但它假设该值以毫秒为单位，而不是以秒为单位。

因此，例如，当您为其提供1520611200(第一个事件的开始日期)时，它会以毫秒为单位对其进行解释，并且生成的日期为1970-01-18 14:23:31。

如果要以秒为单位指定日期，则必须改用 moment.unix() 方法。使用这种方法，您的时间戳被解释为2018-03-09 16:00:00，我认为这是您的意图。

请参阅 http://jsfiddle.net/Loccoxds/1/演示，以了解momentJS如何解析您的一个值的差异。

要使代码正常工作，最简单的方法是执行以下操作：

success: function (data) {
var event = [];
$(data.d).each(function () {
event.push({
title: this.Title,
start: moment.unix(this.Start),
end: moment.unix(this.End)
});
});
console.log(event);
callback(event);
},

这样，您就可以向 fullCalendar 提供一个现成的 momentJS 对象，并正确解析时间戳。

有关在 momentJS 中解析时间戳的更多详细信息，请参阅 http://momentjs.com/docs/#/parsing/unix-timestamp-milliseconds/

---

附言当然，您也可以更改asmx服务以momentJS可以自动解析的格式输出日期，例如以毫秒为单位的时间戳或ISO8601格式的日期字符串 - 有关详细信息，请参阅 http://momentjs.com/docs/#/parsing/string/。

P.P.S. ASMX 现在几乎是 .NET 中的一种遗留技术。应考虑改用 WCF 或 Web API。Microsoft建议不要使用 ASMX 创建新代码。