jQuery/JSON date handling

Question

I have a problem handling JSON dates from a Google Calendar XML. I have extracted the .startTime and .endTime & I use jQuery to format those dates (+ all dates between) as YYYY-MM-DD. Then I'm using the formatted dates to add background color to table cells of the matching unique IDs (#YYYY-MM-DD) within my own calendar. Its working ok, but somewhere along the way the dates are becoming mismatched. Process I'm following is:

• Enter event on Google Calendar. For my test event I've used 25th-27th March 2014 (All-day event is ticked).
• Extracted XML JSON data: "gd$when": [{"endTime": "2014-03-28", "startTime": "2014-03-25"

(So already I'm confused because the JSON has an extra day added to the end date of my event - why?)

• Used jQuery below to assign formatted dates to ID of my own Cal. (Thanks to @Ezequiel who's helped me get this far - I'm not great at jQuery).

  function GCalEvents() {
  
  var calendar_json_url = "https://www.google.com/calendar/feeds/my_email%40googlemail.com/public/full?orderby=starttime&sortorder=ascending&max-results=60&futureevents=true&alt=json"
  
    // Get list of upcoming events formatted in JSON
    jQuery.getJSON(calendar_json_url, function(data){
  
      // Parse and render each event
      jQuery.each(data.feed.entry, function(i, item){
  
          var formatInt = function (i) {
              if (i < 10) return "0" + i;
              return i;
          };
          var format = function (d) {
              var date = d.getDate();
              var month = d.getMonth() + 1;
              var year = d.getFullYear();
              return year + "-" + formatInt(month) + "-" + formatInt(date);
          };
          var getDates = function (start, theend) {
              var current = new Date(start);
              var finish = new Date(theend);
              var result = [];
  
          do {
              current.setDate(current.getDate() + 1);
              result.push(format(current));
          } while (current < finish);
  
              return result;
          };
  
        // Apply background to dates.
          var start = item.gd$when[0].startTime;
          var theend = item.gd$when[0].endTime;
  
          var dates = getDates(start, theend).map(function toId(date) { return "#" + date }).join(",");
          jQuery(dates).removeClass('date-cell').addClass('date-selected');
  
          });
        });
  
  }
  

• Check the calendar and it has colored the backgrounds of 26th, 27th, 28th March - so the final effect is that it has shifted my whole original GCal event forward by one day, and in relation to the JSON it has the correct end date but the wrong start date! Obviously I just want the correct GCal date to display.

Things I've tried:

• var date = d.getDate() -1 ; - But this causes problems with the final day of the month.
  • There are no other jQuery functions interfering.
  • The table cell ID's for my own calendar are generating correctly.

Is it time-zone related?

I'd appreciate any help anyone can give.

Answer 1

From what i can see in your "Extracted XML JSON data" it's only the end date that has changed. And that I have seen before. I believe it has to do with the fact that you have set the event to be a full day event. It then ends on midnight the day after. And that has nothing to do with how it's represented (JSON in this case) but rather with how Google stores it.

If you create a "normal" event (not all day) you should get the date you expect.