FullCalendar日期和时间呈现不正确

Question

我有一个ASP.NET MVC应用程序，它显示以下完整的日历元素：

以下是服务器在2016年1月的ajax调用中返回的json：

[{"id":17,"title":"39/2015 - Site meeting test 3","start":"\/Date(1451307600000)\/","end":"\/Date(1451316600000)\/","allDay":false,"className":"site-meeting","url":"/OATS/ManageInvestigation/SiteMeetingEvidence/17"},{"id":19,"title":"2/2015 - test","start":"\/Date(1453244400000)\/","end":"\/Date(1453248000000)\/","allDay":false,"className":"site-meeting","url":"/OATS/ManageInvestigation/SiteMeetingEvidence/19"},{"id":20,"title":"2/2015 - test","start":"\/Date(1453345200000)\/","end":"\/Date(1453435200000)\/","allDay":false,"className":"site-meeting","url":"/OATS/ManageInvestigation/SiteMeetingEvidence/20"},{"id":21,"title":"2/2015 - test","start":"\/Date(1453329000000)\/","end":"\/Date(1453505400000)\/","allDay":false,"className":"site-meeting","url":"/OATS/ManageInvestigation/SiteMeetingEvidence/21"},{"id":22,"title":"2/2015 - test","start":"\/Date(1453694400000)\/","end":"\/Date(1453813200000)\/","allDay":false,"className":"site-meeting","url":"/OATS/ManageInvestigation/SiteMeetingEvidence/22"},{"id":23,"title":"2/2015 - test","start":"\/Date(1453935600000)\/","end":"\/Date(1453935600000)\/","allDay":false,"className":"site-meeting","url":"/OATS/ManageInvestigation/SiteMeetingEvidence/23"},{"id":24,"title":"2/2015 - test","start":"\/Date(1452749400000)\/","end":"\/Date(1452823200000)\/","allDay":false,"className":"site-meeting","url":"/OATS/ManageInvestigation/SiteMeetingEvidence/24"},{"id":20,"title":"24/2015 - City Health","start":"\/Date(1452636000000)\/","end":"\/Date(-62135596800000)\/","allDay":true,"className":"line-correspondence sent","url":"/OATS/ManageInvestigation/ViewLineCorrespondence/20"},{"id":26,"title":"39/2015 - Utility Services","start":"\/Date(1452117600000)\/","end":"\/Date(-62135596800000)\/","allDay":true,"className":"line-correspondence sent","url":"/OATS/ManageInvestigation/ViewLineCorrespondence/26"},{"id":18,"title":"8/2015 - Journal entry","start":"\/Date(1452549600000)\/","end":"\/Date(-62135596800000)\/","allDay":true,"className":"journal-entry-reminder","url":"/OATS/ManageInvestigation/ViewCaseJournalEntry/18"}]

如果我提取1月11日日历上显示的橙色事件：

{
    "id":18,
    "title":"8/2015 - Journal entry",
    "start":"\/Date(1452549600000)\/",
    "end":"\/Date(-62135596800000)\/",
    "allDay":true,
    "className":"journal-entry-reminder",
    "url":"/OATS/ManageInvestigation/ViewCaseJournalEntry/18"
}

这显示开始日期值：Date(1452549600000)。如果我使用简单的在线日期/纪元转换器，我会得到以下值：

Tue Jan 12 2016 00:00:00 GMT+0200 (South Africa Standard Time)

因此，这个事件应该在1月12日而不是11日显示。

另外，看看另一个事件的时间：

这表示从1月14日凌晨5:30到1月15日凌晨2:00发生的事件。这个事件的json：

{
    "id":24,
    "title":"2/2015 - test",
    "start":"\/Date(1452749400000)\/",
    "end":"\/Date(1452823200000)\/",
    "allDay":false,
    "className":"site-meeting",
    "url":"/OATS/ManageInvestigation/SiteMeetingEvidence/24"
}

分别为这些开始和结束时间值的纪元转换：

开始：

Thu Jan 14 2016 07:30:00 GMT+0200 (South Africa Standard Time)

结束：

Fri Jan 15 2016 04:00:00 GMT+0200 (South Africa Standard Time)

在服务器上我有一个简单的CalenderEvent对象：

public class CalendarEvent
{
    public int id { get; set; }
    public string title { get; set; }
    public DateTime start { get; set; }
    public DateTime end { get; set; }
    public bool allDay { get; set; }
    public string className { get; set; }
    public string url { get; set; }
}

我以JSON身份返回客户端：

public JsonResult GetCalendarEvents(DateTime start, DateTime end)
{
    List<CalendarEvent> events = CalendarEventHelper.GetCalendarEvents(db, CurrentUser.StaffID, start, end);
    return Json(events, JsonRequestBehavior.AllowGet);
}

修改

我刚注意到月视图中的第二个示例甚至没有显示为2天的事件。

Answer 1

最初我已将FullCalendar配置中的时区明确设置为“Africa / Cairo”。事实证明这不能正确渲染。但是，将时区设置为“local”可以正常工作：

$("#Calendar").fullCalendar({
    header: {
        left: 'prevYear,prev,next,nextYear today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    weekNumbers: true,
    editable: false,
    eventLimit: true,
    events: {
        url: '@Url.Action("GetCalendarEvents")',
        error: function () {
            alert("error");
        },
    },
    timezone: "local",
    loading: function (bool) {
        $("#Loading").toggle(bool);
    }
});

即使我的本地机器的时区设置为开罗：