Calendly in Appsmith

Introduction

A barebones version of calendly that you can use to schedule meetings, or just play around with how you can use APIs and Appsmith to build really powerful applications. Connects to Google Calendar API, so will need you to authorize your OAuth2 token.

Steps to fork the App

  • Firstly, you should have an Appsmith account; if not, sign-up here (it's free)!
  • Now, open the Meeting Scheduler application template by clicking here. You'll find a fork button on the top-right of the application.
  • Click the fork button and fork it to you're organisation. Now you should see the application under your organisation connected; however, there might be few errors as the API's are not linked with your accounts. Below is the GIF showing the same:
Forking the Meeting Scheduler Application
  • You can change your name or modify the table UI based on your preferences.
  • To use this, all we have to do is replace the Auth keys from your own Google, Zoom accounts and customise the UI for the app based on your choice.
  • Navigate to the Google Calendar data source under the APIs section and update Client ID and Client Secret.
  • Similarly, you'll have to update the auth keys in the Zoom data source and use the application by navigating to Calendar page.
  • Lastly, you can make the app public and deploy it by clicking on the deploy button on the top-right.
  • Check the following guides to configure Google and Zoom APIs.

Deploying the Meeting Scheduler Application

Setup of external APIs

Setting Up Google Calendar API

Now, let’s set up Calendar API’s to list our calendar events and find free slots.

  1. If you’re an existing user, you can sign in to Google Console or sign up for a new free account.
  2. You’ll then be redirected to a console, where you’ll have to create a New Project.
  3. Now, you’ll have to generate OAuth 2.0 Client IDs; you can do this by navigating to the APIs and Services - Credentials section.
  4. Next, create a new app under the OAuth 2.0 Client ID section and give it a name.
  5. You’ll now find two keys, Client ID and Client Secret; you’ll need these authorised appsmith to access your drive.
  6. Now add the following  URIs under Authorised Redirect URIs: 

                  - https://app.appsmith.com/api/v1/datasources/authorize​

                   - https://app.appsmith.com/applications

  1. Lastly, you’ll have to enable API’s to communicate with different services. For example, if you’re integrating google sheets, you’ll have to search for Google Calendar using the top search bar and enable APIs on the console.

Below is the GIF to set this up:

Setting up Google OAuth


With this, all the APIs that are connected with the Google Calendar will be working. In the above GIF, you can also see the list_events API will now be able to fetch all the calendar events from your Google Calendar, as simple as that!

Setting Up Zoom API

Next, let’s set up Zoom API’s to create meeting links for your calendar invite.

  1. If you already have a developer account, you can login to your account or you’ll have to sign up here.
  2. Now choose OAuth app type, from the app selection page and click the Create button.


3. Enter the name of your app, you can say Appsmith Meeting Scheduler, and choose the app type as user-managed app. You can toggle the publish option based on your choice.

4. Now you should be able to see the Client ID and Client Secret, we’ll need to update these keys on the Appsmith application. 

5. Set the Redirect URL to following:

- https://app.appsmith.com/api/v1/datasources/authorize

6. Next, you'll have to whitelist Appsmith URLs by adding the following under the Whitelist URLs section in the same page:

- https://app.appsmith.com/api/v1/datasources/authorize

- https://app.appsmith.com/applications

Below is the GIF to set this up:

Setting up Zoom OAuth