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

<小时/>

编辑:

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

Answer 1

最初，我在 FullCalendar 的配置中将时区明确设置为“非洲/开罗”。事实证明，这样无法正确渲染。但是，将时区设置为“本地”确实可以正常工作:

$("#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);
    }
});

即使我的本地计算机的时区设置为开罗: