Google Календарь jquery перечисляет события на весь день в неправильный день

Question

Я искал что-то, что позволило бы мне извлекать события из общедоступного календаря Google и отображать его в виде списка событий. Я натолкнулся на скрипт jquery, который удовлетворял эту потребность и позволял настраивать его внешний вид (css), но есть одна проблема. Для событий "весь день" в календаре Google они отображаются днем ​​ранее, т. Е. Событие 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(...), создается объект даты, но имейте в виду, что этот объект также содержит информацию о времени (которая в этом случае определяется на основе часового пояса вашего компьютера).

Например, если для моего компьютера установлена ​​дата в часовом поясе Лос-Анджелеса, при вызове new Date('2019-01-15') будет получена следующая дата: пн 14 января 2019 16:00:00 GMT-0800 (тихоокеанское стандартное время)

Конструктор Date воспринимает строку даты как время UTC, но вызов функций getDate, getHours и т. Д. Вернет информацию, основанную на вашем местном часовом поясе.

В качестве временного решения вы можете использовать функции getUTCDate, getUTCHours и т. д. См. адаптацию кода, который вы предоставили ниже (единственная измененная функция - 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 здесь .