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!

Reach

ionicframework.com/docs/native/calendar – Epanaphora

Actually, I have tried this one before but did not work with capacitor 3x but somehow now it's working. Thankx for your advice – Colincolinson

Answer 1

If have found a clean turnaround that saves me from the burden of accessing phone's native calendar; by simply generating a .ics (event) and opening it.

import * as ics from 'ics'
import { FileOpener } from '@capawesome-team/capacitor-file-opener';
import * as capfs from '@capacitor/filesystem';

export const setCalendarEvent = async (startDate, endDate, title, description) => {
    let event = await awaitableICSEvent(startDate, endDate, title, description);
    let blob = new Blob([event], { type: "text/plain;charset=utf-8" });
    let file = new File([blob], "event.ics", { type: "text/plain;charset=utf-8" });
    let b64 = await fileToBase64(file);
    let sysFile = await capfs.Filesystem.writeFile({
        path: 'event.ics', directory: capfs.Directory.Cache, data: b64
    })
    await FileOpener.openFile({
        path: sysFile.uri
    })
}

const awaitableICSEvent = (startDate, endDate, title, description) => new Promise((rs, rj) => {
    let event = {
        start: getDateTimeArray(startDate),
        end: getDateTimeArray(endDate),
        title: title + 'ssssssss',
        description,

    }
    ics.createEvent(event, (error, value) => {
        if (error) {
            rj(error)
        }
        console.log(value)
        rs(value);


    });

})

This line await FileOpener.openFile({path: sysFile.uri}) will open the native calendar screen dialog and allow you to save the event. It is also worth looking at the ics object constructor, which contains many event features other than a title, description and start/end times.

Moy

I found I also needed to add the mime type in FileOpener.openFile. – Thibodeau

Answer 2

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

Snapback

I was using capacitor 3x then I upgraded to 3x but lots of misconfiguration errors come with that. So I decided to start clean capacitor 3x and migrate all my codes to that project then all errors were gone. I think it's still hard to upgrade the capacitor or migrate your project Cordova to the capacitor. – Colincolinson

Answer 3

You have probably found your solution already. However, I recommend the @ebarooni/capacitor-calendar plugin:

npm i @ebarooni/capacitor-calendar
npx cap sync

It currently supports adding events to the calendar using native prompts as well as adding events programmatically.

import { CapacitorCalendar } from '@ebarooni/capacitor-calendar';

createEvent() {
   return CapacitorCalendar.createEvent({ title: 'My Event' });
}

createEventWithPrompt() {
   return CapacitorCalendar.createEventWithPrompt({ title: 'My Event' });
} 

Its compatible with iOS 17 and Android 14 (and below).

Heterogynous

I'm trying to implement this plugin in an angular ionic capacitor project but having no success. can you give me a couple of pointers on how to implement it in my class? – Except

@Except Whats your issue specifically? In the repo of the project under the example directory you should be able to find some code samples. But lmk what the specific problem is using girhub issues please. – Heterogynous

Hi @Skin_phil, I had the same problem, here's the ebarooni response on [github.com/ebarooni/capacitor-calendar/issues/140](Github), I've also update the response. Cheers – Osset

Answer 4

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.

Update

Calendar is now hosted in the following library -> @awesome-cordova-plugins/calendar/ngx

Contradiction