how to add events to the Calendar of the mobile device with ionic capacitor

Question

I am working on a mobile application project that will list events. As I mentioned in the title, I am using ionic capacitor for my project. I did a lot of research, but I couldn't find any plugins where I could access the ios and android calendar applications. To put it simply, what I want to do is to save that event on the phone's calendar when a button on the application is clicked.If anyone has an idea about this issue or has done this before with the ionic capacitor and can help, I would appreciate it. Thank you!

Answer 1

I'll share my experience, although I am also new to this topic.

I've migrated from cordova to capacitor and I was, so far, unable to make this happen again (add event to the device calendar). The plugin suggested by @NajamUsSaqib in the documentation doesn't work in this scenario, not for me at least.

What I've done to bypass this issue was to create an ICS with java, which is my backend, and send a mail to the user with this ICS. To trigger this, I've added a share fucntion that will send it to whoever he wants (as in the picture below). Inside the calendar event itself he can send himself a notification to make it easier.

Having this said, you'll have to take care of the kind of invitation to send.

Gmail, Office 365 and Outlook can add the event directly to the calendar from the mail itself, there is an auto-generated link for that but, for other calendars, the user will have to download the ICS itself and then add it.

It is not a neat solution for an APP but, so far, this was the best solution for me.

For more information on the ICS and how to send the link for the e-mail, in case that you are interested, you can check this post at litmus, which is very well written in my opinion.

Best of luck mate

Answer 2

On Ionic >= 5 and Capacitor 3 you need to import the Calendar in your app.module.ts like this:

import {Calendar} from '@ionic-native/calendar/ngx';

And not as it's been written in the documenation from @ionic-native/calendar

Afther this, you can add Calendar to your app.module.ts providers and to inject the calendar in any *.ts file, you need again to import it from @ionic-native/calendar/ngx.