How can I add an event to a Google calendar using v3 API and JQuery?

Question

I am attempting to teach myself some JQuery/REST/Google API by putting together a simple page that does the following:

1. Authenticates with Google
2. Validates a token
3. Gets a list of Google Calendars for the user
4. List events for a selected calendar
5. Add an event for a selected calendar

I have #1 through #4 working (although no doubt in an ugly manner), and am getting tripped up on #5. Here's the JQuery ajax call:

var url = 'https://www.googleapis.com/calendar/v3/calendars/[MY_CALENDAR_ID]/events?sendNotifications=false&access_token=[GOOGLE_API_TOKEN]';
            var data = { end: { dateTime: "2012-07-22T11:30:00-07:00" }
                            , start: { dateTime: "2012-07-22T11:00:00-07:00" }
                            , summary: "New Calendar Event from API"
                        };

            var ajax = $.ajax({ url: url
                                , data: data
                                , type: 'POST'
                        }).done(addEventDone)
                          .fail(function (jqHXR, textStatus) {
                              console.log("addEvent(): ajax failed = " + jqHXR.responseText);
                              console.log(jqHXR);
                          });

The results are a global parseError: "This API does not support parsing form-encoded input.". The first four steps are all using GET ajax calls, so I'm not sure if that is what is tripping me up.

Here's the API in question: https://developers.google.com/google-apps/calendar/v3/reference/events/insert

I think I may be doing things the long and hard way, and my new approach is to tackle this using the javascript API instead of going straight at it with manual JQuery and REST. This is the approach I am attempting going forward http://code.google.com/p/google-api-javascript-client/wiki/Samples#Calendar_API , although I would still love to use this as a learning opportunity if there is something simple I am screwing up in the code above.

Thanks for any help, insights, pointers, etc. I will post updates if I make any progress using the javascript API.

Answer 1

Interestingly, I just answered a similar question here . Your intuition to use Google's JS client library is a good one. It's going to handle OAuth 2 for you, which is a requirement if you're going to do any manipulation of the Calendar data.

My other answer has both a link to a blog post that I authored (which demonstrates configuration of the client and user authorization), as well as an example of inserting a Calendar event.

Answer 2

you need to set contentType: "application/json", to do JSON.stringify for your data and method : 'POST'

var ajax = $.ajax({
url: url,
contentType: "application/json",
data: JSON.stringify(data),
method : 'POST',
});