Google Calendar API Freebusy JQuery $.post gets 400 (Bad Request) Error

Question

I am new to javascript, JQuery and Google API, so the answer to this question may be a very simple thing that I am overlooking. I've checked all available Google Calendar Freebusy Questions on this site, but I can't manage to make their answers fit my code in any way.

I am trying to write a script for an html page that checks a public calendar's freebusy query. Google says that the HTTP Request should be

POST https://www.googleapis.com/calendar/v3/freeBusy

with a request body of

{
  "timeMin": datetime,
  "timeMax": datetime,
  "timeZone": string,
  "groupExpansionMax": integer,
  "calendarExpansionMax": integer,
  "items": [
    {
      "id": string
    }
  ]
}

My current html page includes the latest jquery library, and the script I'm writing. Calling the script on the page results in a Failed to load resource: the server responded with a status of 400 (Bad Request) error. A further dig into the error information returns a parse error with "This API does not support parsing form-encoded input."

My script looks like this:

(function ($) {
  $.GoogleCalendarFreebusy = function (options) {
    var defaults = {
      apiKey: '[projectkey]',
      getID: '[id]@group.calendar.google.com',
      element: '#div'
    };

    options = $.extend(defaults, options);

    $.post('https://www.googleapis.com/calendar/v3/freeBusy?key=' + options.apiKey,
           {"items":[{"id": getID }],"timeMin":"2015-04-10T14:15:00.000Z","timeMax":"2015-04-20T23:30:00.000Z"}, "null", "json")    
    .done(function(data) {
        loaded(data);
      });

    function loaded(data) {
      var status = data.calendars[getID].busy;

      console.log(status);

      if(status.length !== 0 ) {

      for(var i = 0; i < status.length; i++) {
        var statusEntry = status[i];
        var startTime = statusEntry.start;
        var endTime = statusEntry.end;
      }

        var now = new Date().toISOString();
        var element = options.element ;
        var name = element.substr(1);

        if (now > startTime && now < endTime){

             $(options.element).append( 'Available!');

        }

        else {

            $(options.element).append( 'Unavailable!');

            }

    } else {

    $(options.element).append('Unavailable!');

    }

    }

  };
})(jQuery);

My request is receiving the proper response in the Google Explorer "Try It", so I think it may be javascript error/json request I'm overlooking? Thanks in advance for your help and advice.

Is the calendar you are looking at public? Otherwise you will need to authenticate. — luc
The calendar is set to public [share only my free/busy information]. With the calendar settings changed to purely public, I'm still getting a 400 bad request error. — Akai
try putting ' quotes around this: {"items":[{"id":"[id]@group.calendar.google.com"}],"timeMin":"2015-04-10T14:15:00.000Z","timeMax":"2015-04-20T23:30:00.000Z"} — luc
Unfortunately quotes didn't help either. Updating original post with further error information. — Akai
Post the raw output of the POST body, so we see what's being sent (use Network tab to get it). So we see things like what datetime and string are. — Jared Farrish

Akai Akai · Accepted Answer · 2015-04-26T15:27:11

Google Calendar API Post requests need to have the content-type specified as JSON to avoid the above error. Processing the POST as an AJAX request with contentType specified solves this error.

$.ajax({
  url: 'https://www.googleapis.com/calendar/v3/freeBusy?key=' + options.apiKey,
  type: 'POST',
  data: '{"items":[{"id": "[id]@group.calendar.google.com"}], "timeMin": "2015-04-10T14:15:00.000Z", "timeMax": "2015-04-20T23:30:00.000Z"}',
  contentType: 'application/json; charset=utf-8',
  dataType: 'json',
  success: 'null'
})

Thank you for the suggestions!

Google Calendar API Freebusy JQuery $.post gets 400 (Bad Request) Error

1 Answers