javascript 中的 Google Calendar API 时区覆盖

Question

I have developed a website that's used as a digital display monitor slide to combine several different Google Calendars into one view. http://www.anokaramsey.edu/events/displays

I am having a problem with the time zone. We are on Central Time. The digital display has a super wonky configuration in order to show this website as a slide. So it's taking periodic screengrabs of the website from a cloud browser on EST, and sending the images to our digital display software. http://webshots.channelshd.com/remoteImages/anokaramsey-1.png

So the events are being rendered on the display into EST, but I need them to stay on CST. I'm using moment.js & moment-timezone.js.

This is my javascript that's trying to set the correct time zone, but to no avail.

    ...
                  var request = gapi.client.calendar.events.list({
                      'calendarId': cals[c],
                          'timeMin': (new Date()).toISOString(),
                          'lazyFetching': false,
                          'showDeleted': false,
                          'singleEvents': true,
                          'maxResults': 5,
                          'futureevents': true,
                          'orderBy': 'startTime'
                  });

                  request.execute(function (resp) {
                      for (i = 0; i < resp.items.length; i++) {
                          gevents.push(resp.items[i]); // keep. to monitor original gcal objects.
                          var start = resp.items[i].start.dateTime;
                          if (!start) {
                              start = resp.items[i].start.date;
                          };
                          var end = resp.items[i].end.dateTime;
                          if (!end) {
                              end = resp.items[i].end.date;
                          };

                          events.push({
                              id: resp.items[i].id,
                              title: resp.items[i].summary,
                              cal: resp.items[i].organizer.email,
                              start: start,
                              end: end,
                              url: resp.items[i].htmlLink,
                              location: resp.items[i].location,
                              descr: resp.items[i].description
                          });
                      }
                  });
              }
          }
    ...
          function display(events) {
              if (events.length > 0) {

                  events.sort(function (a, b) {
                      // super simple sort
                      return new Date(a.start) - new Date(b.start);
                  });

                  for (i = 0; i < events.length; i++) {
                      var event = events[i];
                      var when = event.start;
                      var until = event.end;

                      var header = moment(when).format("MMM D, YYYY");

                      if (header != oldHeader) {
                          var id = moment(when);
                          //appendPre('<h3>'+header+'</h3>');
                          appendPre('<ul id="' + id + '">');
                      }

var startTime = moment(when).tz("America/Chicago").format("h:mma");
var endTime = moment(until).tz("America/Chicago").format("h:mma");

    ...

You should be able to see all the interworking files from the top URL, but if more code would help, please let me know.

Answer 1

If you open the developer console while on your site, the error message there explains the problem:

You are loading moment.js and moment-timezone.js , but you have not populated any time zone data.

Often one would want to cover all time zones of the world, and thus would use either moment-timezone-all-years.js or moment-timezone-2010-2020.js , depending on the range of data you care about. You'd load these instead of moment-timezone.js .

However, in your case, I think you only need relatively current data for a single time zone, so I would continue to load moment-timezone.js and simply populate that single zone manually in your own script:

moment.tz.add("America/Chicago|CST CDT|60 50|01010101010101010101010|1BQU0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0");

You can read more about data loading in the documentation , and find other specific time zone data by examining the moment-timezone-with-data-2010-2020.js file.