title: Google Calendar API Freebusy JQuery $.post gets 400 (Bad Request) Error
body: <p>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.</p>
  
  <p>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</p>
  
  <pre><code>POST https://www.googleapis.com/calendar/v3/freeBusy
  </code></pre>
  
  <p>with a request body of</p>
  
  <pre><code>{
    "timeMin": datetime,
    "timeMax": datetime,
    "timeZone": string,
    "groupExpansionMax": integer,
    "calendarExpansionMax": integer,
    "items": [
      {
        "id": string
      }
    ]
  }
  </code></pre>
  
  <p>My current html page includes the latest jquery library, and the script I'm writing. Calling the script on the page results in a <code>Failed to load resource: the server responded with a status of 400 (Bad Request)</code> error. A further dig into the error information returns a parse error with <code>"This API does not support parsing form-encoded input."</code></p>
  
  <p>My script looks like this:</p>
  
  <pre><code>(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 &lt; 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 &gt; startTime &amp;&amp; now &lt; endTime){
  
               $(options.element).append( 'Available!');
  
          }
  
          else {
  
              $(options.element).append( 'Unavailable!');
  
              }
  
      } else {
  
      $(options.element).append('Unavailable!');
  
      }
  
      }
  
    };
  })(jQuery);
  </code></pre>
  
  <p>My request is receiving the proper response in the <a href="https://developers.google.com/google-apps/calendar/v3/reference/freebusy/query#tryit" rel="nofollow">Google Explorer "Try It"</a>, so I think it may be javascript error/json request I'm overlooking? Thanks in advance for your help and advice.</p>