Adding events to native calendar in PhoneGap iOS application

While developing a PhoneGap application, I got a new requirement to add an event to native calendar from the application. So that user can get aware of the details of the event from native calendar.

To implement the same, I goggled for while and found a nice and interesting plugin which is very easy to integrate and works with PhoneGap smoothly. It allows the user to add the event to calendar of that device. Here are the steps bellow which will guide to integrate the calendar plugin in PhoneGap iOS application.

1. Download the calendar plugin from github by using this URL.

2. Find the plugins inside Calendar-PhoneGap-Plugin / src / ios and drag the Calendar.h and Calendar.m files into the Plugins directory in XCode and always choose the “Create folder references for any added folders” option while adding reference.

3. Add the plugin reference in config.xml like this

	<plugin name="Calendar" value="Calendar"/>

4. In the Project “Build Phases” tab, choose the “Link Binary with Libraries” drop down box and add the EventKit.framework and EventKitUI.framework into our application.

5. Get the Calendar.js file from www folder and put it inside the www folder of our application.

6. Add the reference of the Cordova/Phonegap.js and Calendar.js in our html file.

7. Now add the following codes to create the event.

// Code to create an event in calendar

Now to create the new event pass the below parameter to createEvent method.

// Start date and time of the event
  var startDate = new Date("March 15, 2014 20:00:00");
  // End date and time of the event 
  var endDate = new Date("March 15, 2014 22:00:00");
  // Title of the event 
  var title = "Birthday Party";
  // Location of the event 
  var location = "Bhubneswar, Odisha";
  // Description about the event 
  var notes = "Don't miss out on having the best birthday party ever.";

  var success = function(message) {
	navigatore.notification.alert("Event added successfully.");
  var error = function(message) { 
	navigatore.notification.alert("Error occurred while adding the event.");

So the above createEvent method will help to create and add the event to native calendar using the native plugin and return the success/error message.

If we need to search the event , then we can use the following method.

//Code to find an event in calendar

It will search the events having the above calendar and return the details.

We can also modify the event using the below method.

// Code to modify an event in calendar
  var modifiedTitle = "10th Anniversary";

On above method modifyEvent will get the existing event and change the required parameter as per the user specification.

Simultaneously to delete the particular event from native calendar, we can use the deleteEvent method. But it will also delete all the duplicate events which matches as per the specification.

  // Code to delete event from calendar
 var newTitle = "10th Anniversary";

The above guide will work for PhoneGap 2.X, and for PhoneGap version 3.X we can follow the link below.

Here we get to know, how to integrate the calendar plugin to add, delete, search and modify the event in native calendar by using our PhoneGap application.

Written By: Sourabha Kumar Sahoo, Software Developer, Mindfire Solutions


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s