Google Calendar Integration: The Latest Complete Guide

This guide is a compilation of setup procedures I put together to display and integrate my custom web app with Google Calendar.
*Note: Since the Google Cloud interface changes frequently, item names and other details may differ.

Step 1. Create a 'Project (Workspace)'

First, create a 'container (project)' on Google Cloud to save your settings.
*Note: Using Google Calendar is basically free. You can create it without entering payment information.

1. Click this link (project creation screen) directly.

   • If prompted to log in to your Google account, please do so.

   • You may see prompts for a 'Free Trial ($300 credit)' here and there on the screen, but you can basically ignore them (it is fine to close them). Clicking them will prompt you to enter payment information.

2. Enter the settings as follows:

   • Project Name: Enter any name you like (e.g., `yoyaku-calendar`).
     

     • [Caution] Japanese characters will cause an error, so please be sure to enter 'alphanumeric characters and hyphens' only.

   • Parent Resource (Location): Leaving it as [No organization] is fine.

3. Click [Create] at the bottom.

[Important] Post-creation steps:
After creation, the screen will not switch automatically.

• Click the "bell icon (notifications)" in the top right of the screen.

• Click the blue text that says [Select Project] within the notifications.

• Preparation is complete once the text next to the logo in the top left changes to the project name you just entered.

Step 2. Enable the Calendar feature

Grant permission to use Google Calendar in the project you created.

1. In the large "search bar (magnifying glass icon)" at the top of the screen, type `` directly.

2. Select and click "Google Calendar API" from the search result suggestions.

3. Press the blue [Enable] button and wait a few seconds for the screen to change.

Step 3. Configure initial app settings (Latest: Google Auth Platform)

Proceed with the initial app settings using the "wizard" format so that external access to the calendar is possible.

Click the [Three-line menu] in the top left of the screen ➔ [API & Services] ➔ [OAuth consent screen].

Click the blue [Get Started] button in the center of the screen.

From here, proceed through the following steps in order.

1. App information

• App name: `yoyaku-calendar` (any name is fine)

• User support email: Select your own email address

• Once entered, click [Save and Continue] at the bottom.

2. Audience

• User type: Check [External].

• Click [Next] at the bottom.

3. Contact Information

• Enter your email address in the "Developer contact information" field at the bottom.

• Once entered, click [Next] at the bottom.

4. Finish

1. "I agree to the Google API Services: User Data Policy." Check the checkbox.

2. Click the blue [Continue] button at the bottom.

3. Once the screen changes, finally click the [Done] button to confirm the settings.

Step 4. Set the app to "Published" status

Once the wizard is complete, finally move the app to the "Production" environment. If you forget this step, the integration will be disconnected in one week, so be sure to do it.

1. Click "Audience" in the left menu.

2. Click the [Publish App] button under "Publishing status".

3. The screen will change, and if it displays "Production", you are done!

[Why "Publish"?]
Because if it is in "Testing" mode, the integration will automatically disconnect in one week. By setting it to "Production," you can continue using it indefinitely.
* Even if you publish it, no one other than those you have authorized will be able to see your calendar.

Step 5. Obtain "Client ID" and "Secret"

Finally, issue the "passphrase" to set up on the system side.

1. Click "Clients" in the left menu.

   • This is the menu with the icon showing a row of squares.

2. Click [+ Create Client] at the top.

3. Enter the settings as follows:

   • Application type: Select [Web application].

   • Name: Any name is fine (e.g., `yoyaku-client`). You can also leave it as the default name.

4. Click [+ Add URI] under "Authorized redirect URIs" at the bottom, then copy and paste your web app's URL exactly.

1. Click [Create] at the very bottom, and the "Client ID" and "Client Secret" will be displayed on the screen. Please copy these and paste them into your web app's settings screen.

You are now finished.

Troubleshooting

I created the project by mistake and want to delete it

1. Open this settings page.

2. Confirm that the "project you want to delete" is selected at the top of the screen.

3. [Shut down], then enter the ID as instructed to confirm.

If you have forgotten your ID or secret

It is okay if you have already closed the screen.

1. Click "Clients" in the left menu.

2. Click on the name you created (e.g., `yoyaku-client`).

3. The ID and secret are listed on the right side of the screen (detailed information). Copy them to use.

If you like this, please consider liking or following. 🙇