How to connect component to your Google Calendar

PREV
NEXT

Create new project

1. Sign in with your Google account and open Google Developers Console page.

2. Write any project name you like for example: "My Calendar". Select "No" that you don't want to receive feature announcements, etc. Select "Yes" that you are agree with Google terms and conditions. And click "Create".

Enable Google Calendar API and Google Maps JavaScript API

1. Open the Google Developers Console Overview page, if necessary, select your project (for example: "My Calendar") and click "Continue". Select Calendar API.

2. Click Enabled.

3. If you are going to use Google Maps for your events location so then you also need to select Google Maps JavaScript API and also click "Enabled" like you did for Calendar API. Google Maps key we will get in Google Maps API section of this page.

Google Calendar API

Create API Key

1. Open the Google Developers Console Credentials page, select your project (for example: "My Calendar") and click "Continue".

2. On the Credentials page, select Create credentials, then select API Key.

3. Now you can copy the API key and paste it in the Wizard -> General category, in 'Google calendar' section -> 'API Key' parameter.

Create OAuth 2.0 client ID

1. On the Credentials page, select Create credentials, then select OAuth client ID.

2. If you get warning message "To create an OAuth client ID, you must first set a product name on the consent screen" then click "Configure consent screen" and in "Product name shown to users" write any name you like, for example "Calendar" and click "Save".

2. Under Application type, choose Web application.

3. Under Authorized redirect URIs, add the line with this address:

https://developers.google.com/oauthplayground

4. Click Create.

5. On the page that appears, take note of the client ID and client secret. Copy client ID and client secret and paste it in the Wizard -> General category, in 'Google calendar' section -> 'Client ID' and 'Client secret' parameters. Also you'll need these in the next step.

Generate tokens

1. Go to the OAuth2 Playground via this link, which should pre-populate some key values for you.

2. Click the gear icon in the upper right corner and check the box labeled Use your own OAuth credentials (if it isn't already checked).

3. Make sure that:

  • OAuth flow is set to Server-side.
  • Access type is set to Offline (this ensures you get a refresh token and an access token, instead of just an access token).

4. Enter the OAuth2 client ID and OAuth2 client secret you obtained above. You can take them from the component Wizard or click this link, then select your project, then click on the project name under "OAuth 2.0 client IDs". Copy both keys and paste it:

5. In the section labeled Step 1 - Select & authorize APIs, enter the following URL:

https://www.googleapis.com/auth/calendar.readonly

in the text box at the bottom, if it's not already there, then click Authorize APIs:

6. Click "Allow" that you allow Google to use your information in accordance with their respective terms .

7. In the tab labeled Step 2 - Exchange authorization code for tokens, you should now see an Authorization code. Click Exchange authorization code for tokens.

8. If all goes well, you should see the Refresh token and Access token filled in for you (you may have to re-expand Step 2 - Exchange authorization code for tokens to see these values):

9. Copy the Refresh token and paste it in the Wizard -> General category, in 'Google calendar' section -> 'Refresh token' parameter.

Google Maps API

Create API Key

1. Open the Google Developers Console Credentials page.

2. On the Credentials page, select Create credentials, then select API Key.

3. A pop-up window will ask what kind of API you want to create. Click on the Browser key button.

4. Under Accept requests from these HTTP referrers (web sites), add the line with your local host (for testing):

http://localhost/

and the line with your site, for example:

http://solutions4website.com

Click Create.

5. Now you can copy the API key and paste it in the Wizard General settings page, in the 'Google maps' section -> API Key' parameter.