Google calendar invites in Ionic2

Very often we deal with events, sometimes as hosts, other times as guests.
For an event to be successfull the least we could do is broadcast it thoroughly to intented audiences.
Creating a formal invitation and sharing it across will then become the need of the hour.
With google calendar invites, one can easily create the event. Once created we need not worry about sending email reminders, text messages, screen pop ups and other tedious tasks as google services would take care of it for you.
Google's Javascript client comes to rescue as now we can easily create a google calendar invite and send it across multiple users with a single click in our ionic 2 apps.

google calendar

Send google calendar invites with ionic2 (a hybrid mobile app framework) which is maried to angular2 (the nest gen web framwework) in 5 steps.
It has neven been this easier, follow along with me for the rest of the post.

Prerequites for ionic2 apps

  • Android sdk version 23 or above(or else your ionic v2 app wont build).
  • Latest android build and platform tools.
  • Latest ionic version(ionic2 beta25 or above), ionic cli.
  • Latest cordova, cordova cli.

Step 1 - Setting up google console project

  • Create a simple google console project and enable calendar api in it.
  • Take a note of the project's api key and google project number, Click here to start set up

Step 2 - Including google's javascript library in our ionic2 app

  • Download a sample ionic2 side menu project and start doing the following modifications.
  • Include the link of google javascript library for accesing the apis by adding the following script tag to the head section of app's index.html, we can use following cdn.
    <script src="https://apis.google.com/js/client.js"></script>
  • This library exposes a global object "gapi", we would be decalring this in our .ts and using the methods of this global object later.
    declare var gapi: any;

Step 3 - Create a simple form which captures the Google calendar invitation details.

This simple ionic form captures the user inputs for creating and sending a basic google calendar invitation.

Step 4 - Integrating to the google apis

The following code behinds binds the user inputs and also wires everything up for sending the invite to the intented users.

Step 5 - Sending the invite

  • Note : We would not be able to test the app on a desktop browser since we are using the InAppBrowser which isn't' available in the context and accessing it throws errors.
  • Deploy this ionic2 app to any device, say android.
    • $ ionic platform add android
    • $ ionic build android
    • $ ionic run android
  • Fill appropriate details of the calendar invitation which includes Event name, location and other details.
  • Click on the Send Google Calendar Invite button.
  • Boom! You have created a google calendar invitation and sent it to the added attendees.
  • Check your invitaion in the google calendar mobile app or google calendar web app.
  • The jsonR object in the callback contains valuable information about the invite, one can analyze and use that information to enhance the functionality further.

Git repo for complete code and other references

Consider seeing the following from the git repo for your own set up in newer versions(RCs) of ionic2.

  • index.html of the app for including the google javascript library
  • app.ts of the app
  • calendar invitation form, googleCalendar.html
  • code behind the form, googleCalendar.ts
  • Node modules can be older so please ignore and get latest of those that comes out of the box with ionic2 projects
  • My git repo

Enhancements

This is a very basic set up of sending calendar invites and a lot of things can be improved on top of this.

  • Frequency of the event, reminders can be taken from some settings.
  • Programatically calculating TimeZone which is mandatorily required for sending the google calendar invite.
  • A proper fall back mechanism if sending the invitation fails and other cosmetics

Feedback

If this post helps you in sending google calendar invites, do share.