Read and Write Your Native Calendar with Ionic [v3]

ionic-native-calendar-header

Working with a calendar inside a native app is not the easiest task as it’s most of the time strongly connected to the OS. However, there are many operations we can perform on the calendar even from our Ionic app so let’s so how far we can go!

In this Quick Win we will use the Ionic Native calendar plugin to access the users calendar as well as some of the events. However, there are differences between iOS and Android how we can access them, but the creation of new events should work on both platforms!

Prepare Your Ionic App

We start with a blank new app and install the Ionic Native plugin and add the Cordova plugin as well:

Note that you need to test this functionality on a device as the plugin won’t work inside your brwoser!

Also make sure to add the plugin inside your app/app.module.ts like this

Now you are ready to access the calendars, as the plugin will automatically ask for the permissions. If the user denies access there are also functions to ask for read/write permissions again, simply check out the docs for more information then.

Loading Calendar Data

Our first view consists of a list of all calendars of the users. We can load a list through the plugin and display them in a simple list with some information.

Additionally we add the functions to go into one calendar which we handle on another page and also the addEvent() function which brings up a dialog for a new event.

You can also handle this silently to add events, in our case we picked the createEventInteractivelyWithOptions() function which allows to set many details of the new event directly by passing the options to the call of the plugin!

Go ahead and change your pages/home.ts to:

Now we got the list of data and only need to display them in a simple ngFor. To access our 2 functions we also add buttons to each of the items which call the according functions. Change your pages/home.html to display a list of calendars like this:

You can now already run this and add events, but let’s also add another function.

Listing Calendar Events

This is where iOS and Android are different: On iOS we can receive all events for a calendar. We simply use the name of the calendar, however this might cause problems if the user has multiple calendars with the same name. There’s already an open issue on the official plugin but at the moment this might cause a problem!

On Android we can only ask for events in a certain range, therefore we just use a start and end date so we get all events of the upcoming 31 days.

All those events will be stored in a local array which we use in the view in the next step. For now change your pages/cal-details.ts to:

As said, we finish this tutorial with the last view which I guess doesn’t need any comment as it’s a simple list of cards. The only problem here was that the Angular DatePipe was not working with the dates of the events, so if you want to convert them accordingly perhaps create your own pipe and use something like MomentJS.

Open your pages/cal-details.html and change it to:

Now your app is ready to list calendars, create new events and also display a list of events!

There is a lot more you can do like removing or changing events or adding events without the user noticing it. Use your power wisely and don’t spam the users calendar!

You can find a video version of this Quick Win below.

Tweet
Reddit
+1
Share24
Email
24 Shares