Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Using The Native Device Calendar In Ionic Framework

TwitterFacebookRedditLinkedInHacker News

A while back one of my subscribers asked me how to integrate the native device calendar into their Ionic Framework mobile application. I didn’t know at first, but after some research I found a great Apache Cordova plugin by Eddy Verbruggen called PhoneGap Calendar Plugin.

Don’t let the plugin name fool you. PhoneGap still works on Apache Cordova, just like Ionic Framework.

This guide will show you how to use the native device calendar with Ionic Framework using the AngularJS extension set, ngCordova.

Before we begin, if you plan to use Android it is important to note that you must have a calendar account on your device, otherwise the functions we use won’t work. I tried to test on an Android emulator and it failed for exactly this reason.

With that noted, let’s go ahead and create a new Ionic Framework Android and iOS project:

ionic start IonicExample blank
cd IonicExample
ionic platform add android
ionic platform add ios

It is important to note that if you’re not using a Mac, you cannot add and build for the iOS platform.

The next step is to install the Apache Cordova plugin by Eddy Verbruggen. Using your Terminal or command prompt, run the following command:

cordova plugin add https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin.git

At this point you can technically use the native calendar in your application, but we are going to make life easier by using ngCordova. Download the latest ngCordova release and extract ng-cordova.min.js into your project’s www/js directory.

With the file included in your project you now need to include it in your www/index.html file:

<script src="js/ng-cordova.min.js"></script>

It is very important that the above line be included before cordova.js, otherwise you will end up with strange and possibly breaking results in your project.

One final thing must be done in order to get ngCordova working. We must include it into our angular.module directives list like the following in our www/js/app.js file:

var ionicApp = angular.module("starter", ["ionic", "ngCordova"]);

Now we can start using the plugin. Although the ngCordova documentation doesn’t explain this, the plugin’s official documentation proves that this plugin will work better for iOS since many of the commands are iOS only.

Open your www/js/app.js file and make it look like the following:

var ionicApp = angular.module('starter', ['ionic', 'ngCordova']);

ionicApp.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
});

ionicApp.controller("ExampleController", function($scope, $cordovaCalendar) {

    $scope.createEvent = function() {
        $cordovaCalendar.createEvent({
            title: 'Space Race',
            location: 'The Moon',
            notes: 'Bring sandwiches',
            startDate: new Date(2015, 0, 15, 18, 30, 0, 0, 0),
            endDate: new Date(2015, 1, 17, 12, 0, 0, 0, 0)
        }).then(function (result) {
            console.log("Event created successfully");
        }, function (err) {
            console.error("There was an error: " + err);
        });
    }

});

You’ll notice I ripped off the $cordovaCalendar.createEvent part from the ngCordova documentation. That command should work for both Android and iOS and add events to the default calendar.

To use the createEvent() method above, open your www/index.html file and add the following code:

<ion-content ng-controller="ExampleController">
  <button class="button" ng-click="createEvent()">Create Event</button>
</ion-content>

Because of the incompleteness of the plugin, unless you’re building strictly for either iOS or Android, I can’t recommend using the other commands unless you’re looking for a headache. It isn’t all bad because in most scenarios you’ll only be setting calendar events in your application.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.