Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.2 How to Use the Google Calendar API

In this lesson, we’ll create a simple app that can access the Google Calendar API. After registering the app with Google, we’ll write code to request permission to access a user’s calendar and to add a new event to that calendar.

Code Snippet

Use the following snippet to authorize your app for access to a user’s calendar.

function checkAuth() {
    gapi.auth.authorize(
      {
        'client_id': CLIENT_ID,
        'scope': SCOPES,
        'immediate': true
      }, handleAuthResult);
}

1.How to Use the Google Calendar API
2 lessons, 07:57

1.1
Introduction
00:40

1.2
How to Use the Google Calendar API
07:17


1.2 How to Use the Google Calendar API

[SOUND] Hello everyone, I am Reggie Dawson. Welcome to the Google Calendar API coffee break course with Text Plus. I am sure if you use Gmail, you've encountered the Google Calendar. This also has an API that will allow us to access the calendar in our web apps. Each user is connected to a primary calendar. The calendar ID is the email address of the user. Each calendar handles a collection of related events. Now beyond a start and end time, these events also contain other information, such as a summary or description. The primary calendars associated with one account and is the default calendar created for each new user. While this account is active the primary calendar can never be deleted, of course we can also or have access to more than one calendar, and other users can give us access to their calendar as well. Now before we put together a small example project, I wanna take a look at the documentation on creating events. Here we can see some of the options we can use when we generate an event. The summary represents a title for the calendar entry, location is where the event will occur, while description is self explanatory. The start and end time are in date time, but we can also use date to add it in a human readable format. The time zone is optional. Then recurrence allows us to create a reoccurring event. In this example the event will be entered for two days. After that the attendees are the people who are invited to this event. And reminders allows us to create a reminder that will let you beforehand about an upcoming event. Now this might not make that much sense just looking at the documentation, so let's create a project. Now this is based off the QuickStart project, but I had to make some changes to make this a bit more functional. The original project has listed the last ten events on your calendar in a read-only format, in our project we will use the calendar API to add an event on the calendar. Now before we can use the API, we have to enable it. We do this by going to the Google Developer Console. Now if you have Gmail then you have access to this. If this is your first visit, make sure you create a project first. Once you are inside the Google Developers Console, click on the library and then find the Google Calendar API. Here we're going to enable the API for use in our project. Once you do that, click on credentials. Here you're going to choose create credentials, and then OAuth client ID. I'm sorry, we have to configure the consent screen first. So if you have to create a consent screen, all we have to do is put a product name here. So after that we're gonna choose Web Application, and then in the Authorized JavaScript origins we're going to add localhost colon 3000. Now this is the URL where our client application will be coming from. When we run our project, we will use a small web server, and this is the address and port we use to view our project. After that, click on create and make sure to save the client ID. After that, navigate to the folder that you will use for your project. Then create a file called, index.html. The first thing we will add is our client ID. We need this in order to make requests against the calendar API. Next we have our out scopes which represent our permissions that we have in this app. In the original project this was set to read only. If we left it that way, we would not be able to add events to our calendar. Then we have our checkAuth function that will verify if the user has the proper permissions to access the calendar. This function will execute when the page is loaded. Gapi.auth.authorize will check whether or not this app has been authorized by the current user. If so, we won't see a dialogue asking for access to your calendar. After that we call the handleAuthResult function. Now the handleAuthResult function determines whether or not to show the authorized dialogue. First we grave the Div that we used to display the authorized dialogue. Then the if statement checks if we have an auth result and no auth result errors. We will have an auth result if we click on the authorize div which runs another function which we will get to in a moment. If both of these conditions are true, the authorized dialogue will be hidden and we will load the Calendar API. After the first time authorizing the app,we will not be prompted again and the next time the script will just load. If we aren't already authorized, the handleAuthResult function will just display the authorized dialogue. Now the handleAuthClick function is what we will run when the authorized dialogue is confirmed. You may notice that this is almost identical to the checkAuth function. This maybe confusing how this works, so let me explain. When the file is first loaded the checkAuth function will be executed. This will in turn run the andleAuthResult function. Now as we know, this checks whether or not the API is authorized. If so, we can move and load the calendar API. If not, the authorized dialogue will be shown. From there, when we authorize the API, we are sent back to the andleAuthResult function. This time since we are authorized, we will moved on and load the calendar API. Now the loadCalendarApi function use gapi.client.load. We've also seen the gapi.auth.authorize method. Gapi is shown for Google API and represent generic methods that apply across all of Google's API. Since Google offer so many different technologies, it looks like they have decided to move them all to a consistent API. For example, we can easily load Google Map's API by replacing calendar with maps. V3 represents the version of the API to load. Add events is the function that will be called after the API is loaded. Here we are going to hard code our request, but we could easily set up some sort of input, so that our user can choose the date and time of their event. We have already talked about the options that we can pass in our event, but here I have added date instead of date time. Then we use the gapi.client.calendar.insert method to add the event. The calendarId of primary will use the currently logged in Google user. Remember, the calendarId is the email address of the user. Resource is the event that we are adding to the calendar. The last thing we do in this function is to execute the request. Then after that, we have the appendPre function that adds the response to our page. Now the last part of this file first has another script file. This is loading the Google API and then executing the check all function when that is loaded. Then in the body we have the HTML for our authorized dialog. Initially this is set to display none, but we know this can change depending on whether or not a user has authorized the app. Then we have the authorize button that executes the handleAuthClick function. We know once we click this, the API will be authorized to access our calendar. Then finally the pre tag is where the message from adding the event will be appended to the page. After that our project is finished, now in order to run this we need a web server, the easiest way to do this is to install the lite-server. As long as you have no GS installed, just run npm install lite-server. Once that is installed, save your file and run the lite-server As expected when we first run our app, we get prompted to authorize to access the Google Calendar API. Then after we click on Authorize, the event should be added to our Calendar. I know it wasn't very exciting, but if we look at our Calendar, we can see that our test entry has actually been added to our Calendar. Now again this has been a very simple example,but now that you know how to use the API, there's a lot you can do with it. Imagine creating an app for scheduling where people can book time by adding an event to a calendar without any user interaction. I hope you learned something that you can use going forward. Thanks for watching the Google Calendar API course for touch plus.

Back to the top