Cordova calendar plugin for Windows Phone 8

If you worked with Cordova/Phonegap and came across calendar plugin for Windows Phone 8 you must be knowing that Windows Phone 8 does not support calendar plugin officially and there is no plugin in Cordova plugin registry. As a workaround I wrote native plugin to add appointments to device calendar and thought to share it with my readers in quickie blog. 🙂

Create a new cs file in plugins directory named AddCalendarEvents.cs and add following code-

using Microsoft.Phone.Tasks;
using Microsoft.Phone.UserData;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using WPCordovaClassLib.Cordova;
using WPCordovaClassLib.Cordova.Commands;
using WPCordovaClassLib.Cordova.JSON;

namespace Cordova.Extension.Commands {
	public class AddCalendarEvents: BaseCommand {
		public void addCalendarEvents(String str) {
			string[] calendarValues = str.Split('|');

			SaveAppointmentTask saveAppointmentTask = new SaveAppointmentTask();

			int appointmentYear = Int32.Parse(calendarValues[3]);
			int appointmentMonth = Int32.Parse(calendarValues[4]);
			int appointmentDate = Int32.Parse(calendarValues[5]);
			float appointmentTime = float.Parse(calendarValues[6]);

			DateTime scheduleApptDateStart = (new DateTime(appointmentYear, appointmentMonth, appointmentDate, 7, 0, 0)).AddHours(appointmentTime);
			DateTime scheduleApptDateEnd = (new DateTime(appointmentYear, appointmentMonth, appointmentDate, 7, 30, 0)).AddHours(appointmentTime);
			saveAppointmentTask.StartTime = scheduleApptDateStart;
			saveAppointmentTask.EndTime = scheduleApptDateEnd;
			saveAppointmentTask.Subject = calendarValues[1];
			saveAppointmentTask.Location = calendarValues[2];
			saveAppointmentTask.Details = "";
			saveAppointmentTask.IsAllDayEvent = false;
			saveAppointmentTask.Reminder = Reminder.FifteenMinutes;
			saveAppointmentTask.AppointmentStatus = Microsoft.Phone.UserData.AppointmentStatus.Busy;

		public void getCalendarEventData(String str) {

		private void ButtonAppointments_Click() {
			Appointments appts = new Appointments();

			//Identify the method that runs after the asynchronous search completes.
			appts.SearchCompleted += new EventHandler < AppointmentsSearchEventArgs > (Appointments_SearchCompleted);

			DateTime start = DateTime.Now;
			DateTime end = start.AddDays(7);
			int max = 20;

			//Start the asynchronous search.
			appts.SearchAsync(start, end, max, "Appointments Test #1");

		void Appointments_SearchCompleted(object sender, AppointmentsSearchEventArgs e) {
			//Do something with the results.
			try {
			} catch (System.Exception) {}


Refer plugin in config.xml-

<feature name="AddCalendarEvents">
        <param name="wp-package" value="AddCalendarEvents" />
        <param name="onload" value="true" />


If you have basic knowledge of Cordova it should not be tough.

You can call it using

var inputCalendarString = notes + '|' + title + '|' + location + '|' + appointmentDate.getFullYear() + '|' + (appointmentDate.getMonth() + 1) + '|' + appointmentDate.getDate() + '|' + '1.0' + '|' + ' ';
cordova.exec(null, null, "AddCalendarEvents", "addCalendarEvents", inputCalendarString);

It works for one event but if you have loop of events it will not work. To support multiple events, you can maintain Localstorage flag & data with current index of events data. Use resume callback to add rest of the events using custom appointment plugin that you wrote. Each time your app resumes you increment index and add events data from next index.

document.addEventListener('resume', this.resumeApp, false)
resumeApp: function () {
if (localStorage.getItem('updatecalendar') == 'false') {

Happy Coding!

The great framework battle: PhoneGap vs Titanium

One of the most common discussion topic among developers when planning to develop any mobile/web app is selection of right framework. There are various HTML5 frameworks that help developers by providing CSS styling and APIs to cut short the pain of dealing with HTML5. When it comes to development of mobile apps, there are two famous solutions for cross platform development, PhoneGap and Appcelerator Titanium.

PhoneGap is HTML/JS/CSS. PhoneGap is not just a native wrapper of a web app. Apps developed using PhoneGap are web apps running inside a UIWebView control. Through PhoneGap API, the “web app” has access to the mobile functions such as geolocation, camera etc. On the other hand Titanium doesn’t compile your HTML, CSS or Javascript code into “native bits”. They are packaged to resources as executive bundles much like an embedded image file. When an application runs, these resources are loaded into a UIWebView control and run there as Javascript code. From architectural standpoint these two frameworks are very similar.

Apps build using Titanium are native and they can’t be reused among different platforms. Code once, deploy everywhere. PhoneGap promotes code reusability and portability so that same code can be deployed among different various mobiles, tablets and TV with minimal change.

One advantage of Titanium over Phonegap is that Titanium provides access to device native UI functionalities, which means Titanium apps are native apps developed using web technologies. PhoneGap does not expose many UI components to the JavaScript. Apps developed using PhoneGap are web apps running inside a UIWebView control. Titanium Apps become native apps whereas PhoneGap apps start their life as WebApps and die as web apps.

Phonegap is MIT licensed and Titanium is Apache licensed. How that help in selecting a framework from technical perspective.

PhoneGap Build
One more cool thing with using PhoneGap is their PhoneGap Build services, which lets you package mobile apps in the cloud. Upload your HTML, CSS & JavaScript assets to PhoneGap Build and they will compile it for you.

If you are looking to create an app with native look and feel using your existing web development skills Titanium is the right choice, but If you want to be able to “port” your app to various platforms and devices more easily, PhoneGap is the right choice. There are more than 80,000 apps developed using PhoneGap as of July 2012.

New PhoneGap build- quick walkthrough

I got a call from one of my friend that new PhoneGap build is not working, so I thought I will give it a try and write some technical tutorial after a long time. I checked PhoneGap build and figured out that it was working fine and it didn’t ask for any password(Someone told me it was asking for password?). So here is quick tutorial on Adobe’s new PhoneGap build. Lets count least number of steps it takes to build an App using PhoneGap-

  1. Go to PhoneGap build an sign in to your account. I am using my GIT credentials.


  2. Create a new App and upload zip file i.e. www folder your app.



  3. After that click on App and you will have build for Android ready, you can download APK file by clicking on Android icon
  4. To create custom build for iOS you will need to upload and select your key from menu. To do that, click on App from main menu, click on builds and select key from the dropdown. If you have not added a key yet, you will need to add it manually.

So that’s it, 4 simple steps to build apps using PhoneGap. Please don’t forget to add config.xml in your app. As PhoneGap says, ‘Make your life easier by including config.xml in your project’. Do post your comments for any queries.

Step by step guide to create Android build using Eclipse

This post is ‘on request’. In my earlier post on PhoneGap build, I explained steps to generate ipa files and install test apps on iOS without a MAC. In this post I will explain about Android build using Eclipse and Phonegap. For the first time users, make sure you have installed the following:

  1. Eclipse Classic
  2. Android SDK
  3. ADT Plugin
  4. Latest copy of Cordova


  1. Assuming you have already installed Eclipse, Android SDK, ADT plugin and Cordova. Let’s create a new PhoneGap project using Eclipse.
  2. Select Phonegap for Android project from menu.
  3. Select your installed PhoneGap version. You can also include latest Sencha Touch or Jquery Mobile library if you are using these frameworks for your project.
  4. Specify a project name.
  5. Select build target based on your device. You can change build settings based on your device from android properties menu. Android 2.3 or 2.2 works best for me.
  6. Specify application name and package name. Keep in mind that package name is written ulta.
  7. After successful creation of project, the project structure looks like this. www is main folder for your project which contains assets folder. index.html is main file for mobile apps.
  8. You can right click on project and select build for android. If your android device is connected, it will successfully install app in your android device.

Additional useful information:
The android apk is typically saved in


folder of your application.

To check if Android device and SDK is installed successfully you can use

adb devices

from command prompt. If your device is connected, it will show list of devices connected to your PC. If your device is connected and it doesn’t show any device there’s something wrong. Come back from step 1.

List PackageManager.getInstalledApplications()

will give you a list of the installed applications, and ApplicationInfo.sourceDir is the path to the .apk file.

Happy Android Building

Skeuomorphs and Metros: Best design practices for iPhone and Windows 8

From last few months I am researching on best practices for designing mobile applications. iPhone apps leading in all aspects cause of their skeumorphic designs but maybe that’s temprorary.

Skeumorphic Design iPhone A skeumorph is an element of design or structure that serves little or no purpose in the artifact fashioned from the new material but was essential to the object made from the original material. A very good example is what you might be wearing right now, your jeans. The age of your jeans serve no purpose whatsoever – they’re just an aesthetic hangover from a time when denim was too thick to be held together just be stitching, purely to make you feel comfortable.

The age and ruggedness in case of jeans is skeumorphic. You don’t think much about them, but it makes you feel good.

apple skeumorphic design

Apple’s Skeumorphic Design

Apple’s uses Skeumorphic design patterns for their apps. Check the notes, voice memos, organizers. We are full of Skeumorphs all around us. Our old jackets, our cars, bikes all are good example of skeumorphs. No matter how old they get or how many scratches they have we love them and we don’t want to replace them just cause of scratches or age. People even say that Apple’s overdoing their Skeumorphic designs but who cares? They lead the market as of now.

A question comes, are skeumorphic designs forever? Can’t there be better designs than that? Microsoft answered that question well by launching Metro Style apps for Windows 8 against Skeumorphic apps.

metro style apps

Microsoft Metro Style Apps

Microsoft recently introduced metro style apps when skeumorphic apps are already in the market. You can experience them on Windows Phone, Windows 8, XBOX. Windows 8 is build on Metro design language. The UI looks clean, elegant and fast. After trying few apps, I thought it will give a stiff competition to Apple’s Skeumorphic design patterns.

It’s really hard to design products by focus groups. A lot of times, people don’t know what they want until you show it to them. -Steve Jobs

Deploying iPhone apps without a Mac

applePeople wonder if they can develop an iOS mobile application and deploy it on an iOS device using windows. I spent a lot of time trying to generate P12 and signing certificates using OpenSSL in Windows and then deploying it in my iPhone using Phonegap. After all the trials I figured out that it’s possible to generate P12 and certificates using OpenSSL, but it’s better to buy an Apple developer account for certificates and P12 to avoid any jailbreaking or warranty void. So here’s guide how to get started. We will deploy a simple application in the tutorial.

You will need to install the following before you can build iOS applications using Windows.

(Each link will open in new tab)

Once you are done with installing above, follow below 6 steps:

  • Step 1- Archive(zip) www folder of your application

     folder icon -> 

    If you already have www folder for your application which contains index.html you can skip this part. Beginners or people who want to learn Themeroller to get a basic layout for your app with very less effort may have a look at Jquerymobile for Dummies tutorial.

  • Step 2-Get certificate and a provisioning profile  for your application using Apple Developer Account or OpenSSL.

    Go through phonegap documentation to learn how to generate certificate and a provisioning profile without a Mac. If you already have P12 and certificate you can skip this step. I will suggest to generate .p12 and .cer file using Developer account. Just for information, Provisioning Profile is a collection of your App ID, Apple device UDID, and iOS Development Certificate that allows you to install your application on your device.

  • Step 3-Upload Archive to Phonegap build site

    Now you have provisioning profile, certificate and archive of your application. Sign into your Phonegap build account and create a new application. Check upload an archive or index.html file. Give a name to your app and upload your archive.

    New application using Phonegap build

  • Step 4-Add signing key using certificate(p12) and provisioning profile

    You will notice that you have builds for each except iOS which is orange in color. You can click on any platform and download build for platform required.

    Phonegap build iOS

    Click on your application. You will see this screen.

    ios-signing key

    Click on Edit-> Signing

    For iOS select the dropdown and select add a key..

    Signing Key-iOS

    Upload both provisioning profile and certificate(p12) to generate a signing key.

    Note: Provide the same password which you provided while generating p12 file using OpenSSL during Step2.

  • Step 5-Download .ipa(iPhone archive) file

    After providing the signing key go back to your apps page and you will see that you have ready builds for each of the platform.

    Click on iOS and it will download .ipa file which is build file for iOS platforms.

  • Step 6-Upload your build(.ipa) to your TestFlightApp account

    A very good work around to test your app in development environment is TestFlight App. If you already have the credentials for TestFlight and .ipa file, you can deploy your application in no time(NOTE: your device should be registered with TestFlight App). You will need 40 digit Hexadecimal code for your device which you can get by clicking on Device Serial Number in iTunes. Device can be iPod touch, iPhone or iPad.

    ->Click on Upload build.


    ->Drag and drop your .ipa file. Add some release notes and upload.


    ->Once you have your build ready, you can invite your testers and developers to test your app on their registered devices.


    Once you register you app your testers will get an email on their registered E-Mail ids from where they can downloadTestFlight app on their iOS devices and install and run your application(Note: They should open that E-mail in their registered device.)

NOTE: This method can only be used to check your apps on testing devices, not to host on App Store.

Escaping mechanisms can be exciting, but results might make you mad.
Happy iOS development

Nikhil Mishra