Calendly Clone / Meeting Scheduler Built on Appsmith

Show and Tell
1

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.

2

Template: Meeting Scheduler

3

Please use the following link to Fork this application:

https://app.appsmith.com/applications/60a6120498f6c43a4b854a0b/pages/60a6120498f6c43a4b854a10

Steps to use this app

Firstly, we should have an Appsmith account; if not, sign-up here (it’s free)! Now, open the Meeting Scheduler application template by clicking here and fork the application to your Appsmith account. 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. To set these up, let’s understand how the application is built.

  • The app uses the Google Calendar API and lists all the events scheduled on your account. It finds the free slots and displays them on the table, where other users can schedule calls in that time slot.
  • This Google Calendar API is configured using OAuth configuration on Appsmith.
  • Next, the app utilises Zoom API to schedule meetings in that particular time slot.

To use the forked application, 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. Now, let’s get started by setting up the Google Calendar API to the forked application.

  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 this authorized appsmith to access your drive.

  6. Now add the following URIs under Authorised Redirect URIs:

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

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

  9. 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.

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!

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.

1600×1099 203 KB

  1. 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.

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

  3. Set the Redirect URL to the following:

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

  1. 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

Next, you’ll have to add details in the information tab and set the scopes on your zoom account.

Lastly, save and re-authorise the data source. With this, your meeting scheduler should be up and ready!