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

[ngrok | Angular] External Access to your Local Test Environment

Sometimes you have to test your local hosted API or website with multiple different devices. They may be on the same network and you can open your local ports in some way to get it working but most of the time it's a messy solution. Tech Stack * Angular * ASP.NET

[ngrok | Angular] External Access to your Local Test Environment
Members Public

[Capacitorjs | Azure Devops Pipeline] Ignore Pods at Signing

Today I stumbled over a problem in my capacitorjs azure devops build pipeline. I switched to manual signing for some internal reasons but then I was faced with the error "X does not support provisioning profiles". I invested some time to find a solution for the problem and found a

[Capacitorjs | Azure Devops Pipeline] Ignore Pods at Signing
Members Public

[Angular] Native iOS and Android App - Capacitor

In this blog post we will go through the initial process of how to convert an existing angular project into a cross-platform project. Our focus is on iOS and Android. In addition to this, I show you how to speed up developing and especially testing the app. Setup * Code Editor

[Angular] Native iOS and Android App - Capacitor