Google Calendar jquery 列出了错误日期的全天事件

Question

我正在寻找可以让我从公共谷歌日历中提取事件并将其显示为事件列表的东西。 我遇到了一个 jquery 脚本，它满足了这一需求并允许自定义其外观（css），但有一个问题。 对于谷歌日历上“全天”的事件，它们会提前一天显示，即.. 4 日的事件显示为 3 日。

我对 jquery 几乎没有经验，因此非常感谢任何有关可能需要在脚本中更改或更改以进行更正的指导/方向。

(function(t, e, n, a) {
    "use strict";
    var i = "google_calendar_events";
    var s = {
        key: null,
        calendar: null,
        max: 7
    };
    function r(e, n) {
        this.element = e;
        this.settings = t.extend({}, s, n);
        this.init();
    }
    r.prototype.init = function() {
        var t = this;
        if (!t.settings.key || !t.settings.calendar) {
            return false;
        }
        t.getCalendarEvents();
    };
    r.prototype.getCalendarEvents = function() {
        var e = this;
        e.settings.apiUrl = "https://www.googleapis.com/calendar/v3/calendars/" + e.settings.calendar + "/events";
        t.get(e.settings.apiUrl, {
            maxResults: e.settings.max,
            singleEvents: true,
            orderBy: "startTime",
            timeMin: new Date().toISOString(),
            key: e.settings.key
        }, function(t) {
            if (t.hasOwnProperty("items")) {
                e.build(t.items);
            }
        });
    };
    r.prototype.build = function(e) {
        var n = this;
        t(n.element).html('<ul class="eventlist"></ul>');
        for (var a = 0; a < e.length; a++) {
            var i = e[a];
            var s = !i.start.hasOwnProperty("dateTime");
            var r = s ? new Date(i.start.date) : new Date(i.start.dateTime);
            var o = "<li>";
            if (i.summary && i.htmlLink) {
                o += '<div class="g_day_div">' + n.formatDate(r, s) + '</div>';
            }
                o += '<div class="event_title">' + '<a href="' + i.htmlLink + '" rel="' + i.summary + '">' + i.summary + '</a>' + '</div>';
            if (i.location) {
                o += '<div class="location">' + i.location + '</div>';
            }
            if (i.description) {
                o += '<div class="description">' + i.description + '</div>';
            }
            o += "</li>";
            t(n.element).find("ul.eventlist").append(o);
        }
    };
    r.prototype.formatDate = function(t, e) {
        t = t instanceof Date ? t : new Date(t);
        var n = [ "Sun", "Mon", "Tues", "Weds", "Thu", "Fri", "Sat" ];
        var a = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
        var i = t.getHours();
        var s = t.getMinutes();
        var r = i > 11 ? "pm" : "am";
        i = i > 12 ? i - 12 : i;
        s = s < 10 ? "0" + s : s;
        var o = i + ":" + s + r;
        var l = '<div class="g_month">' + a[t.getMonth()] + '</div>' + '<div class="g_day">' + t.getDate() + '</div>';
        return e ? l : l;
    };
    t.fn[i] = function(e) {
        return this.each(function() {
            if (!t.data(this, "plugin_" + i)) {
                t.data(this, "plugin_" + i, new r(this, e));
            }
        });
    };
})(jQuery, window, document);

Answer 1

您遇到的问题是由于时区。 当您调用new Date(...)时，创建日期 object - 但请注意此 object 还包含时间信息（在这种情况下，根据您计算机的时区猜测）。

例如，将我的计算机的日期设置为洛杉矶时区，调用new Date('2019-01-15')产生以下日期：2019 年 1 月 14 日星期一 16:00:00 GMT-0800（太平洋标准时间）

Date 构造函数将日期字符串理解为 UTC 时间，但调用 getDate、getHours 等函数将根据您当地的时区返回信息。

作为一种解决方法，您可以使用函数 getUTCDate、getUTCHours 等。请参阅下面提供的代码的改编版（唯一修改的 function 是 r.prototype.formatDate）：

(function(t, e, n, a) {
    "use strict";
    var i = "google_calendar_events";
    var s = {
        key: null,
        calendar: null,
        max: 7
    };
    function r(e, n) {
        this.element = e;
        this.settings = t.extend({}, s, n);
        this.init();
    }
    r.prototype.init = function() {
        var t = this;
        if (!t.settings.key || !t.settings.calendar) {
            return false;
        }
        t.getCalendarEvents();
    };
    r.prototype.getCalendarEvents = function() {
        var e = this;
        e.settings.apiUrl = "https://www.googleapis.com/calendar/v3/calendars/" + e.settings.calendar + "/events";
        t.get(e.settings.apiUrl, {
            maxResults: e.settings.max,
            singleEvents: true,
            orderBy: "startTime",
            timeMin: new Date().toISOString(),
            key: e.settings.key
        }, function(t) {
            if (t.hasOwnProperty("items")) {
                e.build(t.items);
            }
        });
    };
    r.prototype.build = function(e) {
        var n = this;
        t(n.element).html('<ul class="eventlist"></ul>');
        for (var a = 0; a < e.length; a++) {
            var i = e[a];
            var s = !i.start.hasOwnProperty("dateTime");
            var r = s ? new Date(i.start.date) : new Date(i.start.dateTime);
            var o = "<li>";
            if (i.summary && i.htmlLink) {
                o += '<div class="g_day_div">' + n.formatDate(r, s) + '</div>';
            }
                o += '<div class="event_title">' + '<a href="' + i.htmlLink + '" rel="' + i.summary + '">' + i.summary + '</a>' + '</div>';
            if (i.location) {
                o += '<div class="location">' + i.location + '</div>';
            }
            if (i.description) {
                o += '<div class="description">' + i.description + '</div>';
            }
            o += "</li>";
            t(n.element).find("ul.eventlist").append(o);
        }
    };
    r.prototype.formatDate = function(t, e) {
        t = t instanceof Date ? t : new Date(t);
        var n = [ "Sun", "Mon", "Tues", "Weds", "Thu", "Fri", "Sat" ];
        var a = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
        var i = t.getUTCHours();
        var s = t.getUTCMinutes();
        var r = i > 11 ? "pm" : "am";
        i = i > 12 ? i - 12 : i;
        s = s < 10 ? "0" + s : s;
        var o = i + ":" + s + r;
        var l = '<div class="g_month">' + a[t.getUTCMonth()] + '</div>' + '<div class="g_day">' + t.getUTCDate() + '</div>';
        return e ? l : l;
    };
    t.fn[i] = function(e) {
        return this.each(function() {
            if (!t.data(this, "plugin_" + i)) {
                t.data(this, "plugin_" + i, new r(this, e));
            }
        });
    };
})(jQuery, window, document);

无论您的计算机上设置了什么时区，这都会显示适当的日期。

您可以在此处找到有关 JavaScript 日期的更多信息。