Skip to content

[Angular | Capacitor] Interact With Your Native Calendar

Georg Höller
Georg Höller
2 min read
[Angular | Capacitor] Interact With Your Native Calendar
Photo by Nick Hillier / Unsplash

Recently I had do to implement a simple task: When the user presses the 'save appointment' button, the app should add this event to the native calendar. My first thought was saving an .ical file and open it, till i recognized that this isn't the most user friendly way.

After a little search I found a really great github project which makes this task a no brainer.

GitHub - EddyVerbruggen/Calendar-PhoneGap-Plugin: Cordova plugin to Create, Change, Delete and Find Events in the native Calendar
:date: Cordova plugin to Create, Change, Delete and Find Events in the native Calendar - GitHub - EddyVerbruggen/Calendar-PhoneGap-Plugin: Cordova plugin to Create, Change, Delete and Find Events i...
Ionic Plugin Docs Reference: https://ionicframework.com/docs/native/calendar

Install & Setup

npm i cordova-plugin-calendar
npm i @awesome-cordova-plugins/calendar
npx cap sync

If you sync your iOS project you may get some warnings. Just do what they say ;-)

[warn] Configuration required for cordova-plugin-calendar.
       Add the following to Info.plist:
       <key>NSCalendarsUsageDescription</key>
       <string>$CALENDAR_USAGE_DESCRIPTION</string>

[warn] Configuration required for cordova-plugin-calendar.
       Add the following to Info.plist:
       <key>CFBundleLocalizations</key>
       <array>
       <string>en</string>
       <string>de</string>
       <string>nl</string>
       <string>fr</string>
       <string>it</string>
       <string>pt-BR</string>
       </array>

Switch to your angular module and add Calendar to your providers.

import { Calendar } from '@awesome-cordova-plugins/calendar/ngx';
@NgModule({
  ...
  providers: [Calendar],
})
app.module.ts

Nice - setup should be done!

Exploring the Calendar API

Now switch to the component where you need to interact with the phones calendar and add the Calendar Plugin to your constructor.

import { Calendar } from '@awesome-cordova-plugins/calendar/ngx';

export class .... {
	constructor(private calendar: Calendar) {}
}

Let us explore the declared calendar property with some examples.

Create Event

   this.addEventResult = this.calendar.createEventInteractively(
      'My Hero Event', // title
      'Hero Garden', // location
      undefined, // notes
      new Date(), // start date
      undefined // end date
    );

Opens the "Create Event" dialog with pre-filled data from the built-in Calendar app.

💡
To create the event silently, just use createEvent instead of createEventInteractively

List Calendars

this.availableCalendar = this.calendar.listCalendars();

On Android you will get something like this as a result.

[
  {
    "id": "1",
    "name": "yesreply@georghoeller.dev",
    "displayname": "yesreply@georghoeller.dev",
    "isPrimary": true
  }
]

Edit, Delete, ...

The plugin can do much more - for the full feature list checkout the projects github page: Github

AngularCapacitor

Comments


Related Posts

Members Public

[Angular] Dynamic App Config and Translations in a Submodule

When I'm setting up a new angular application, I always start with translation support and an external app config json loader. You should never start a new app without an internationalization (i18n) system - even if you only support one language! We are going to use the package @ngx-translate/core.

[Angular] Dynamic App Config and Translations in a Submodule
Members Public

[Capacitorjs | Angular] Back Swipe Support for iOS and Android

Recently I recognized that capacitorjs apps does not have a native back swipe support. Little bit weird I thought but the solution is quite simple! iOS - Native To enable the iOS back swipe we need to write a capacitor plugin. I tried it without a plugin but inside the

[Capacitorjs | Angular] Back Swipe Support for iOS and Android
Members Public

[Angular] Routing Helper - a Typesafe Routing Attempt

It always bothered me that you have to define the routing paths as strings. If a route changes, you have to change all references manually. There must be a better way! Routing Constants The constants are for your specific app - here you can define a class which represents your

[Angular] Routing Helper - a Typesafe Routing Attempt