Sonam Gupta's Blog: February 2016

Hi,

Here is a way by which, we can the device calendar in ionic framework.

ionic start IonicCalendar blank

cd IonicCalendar

ionic platform add android

The next step is to install the Cordova plugin for Calendar. 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 use the native calendar in your application, but we are going to make 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:

It is very important that the above line be included before cordova.js, otherwise we can't use the cordova plugin in our project.
Now 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"]);

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("CalendarController", function($scope, $cordovaCalendar) {

$scope.createEvent = function() {

$cordovaCalendar.createEvent({

title: 'Hello world',

location: 'Home',

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) {

alert("Event created successfully");

}, function (err) {

alert("There was an error: " );

});

}

});

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

<ion-content ng-controller="CalendarController">

<button class="button" ng-click="createEvent()">Create Event</button>

</ion-content>

If event created successfully then you will get alert message 'Event created successfully' otherwise you will get alert an error message like ' There was an error:'

Thanks...

Hi,

Create the ionic project using the below commands. Here we are creating the ionic blank project and name it is as “DeviceInformaion”

ionic start DeviceInformaion blank

cd DeviceInformaion

Then add the platform android and ios

ionic platform add android

ionic platform add ios

Then integrate the ng-Cordova library into your project.
Add the ng-cordova.min.js reference above to the cordova.js file in the index.html as mentioned in the below.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">


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

<script src="cordova.js"></script>

<script src="js/app.js"></script>
</head>

<body ng-app="starter">

ng-cordova integration is still not over. Open your app.js file and alter the angular.module line to look like the following.

angular.module('starter', ['ionic', 'ngCordova'])

The next thing we want to do is add the Apache Cordova device plugin. This can be done by running the following command.

cordova plugin add org.apache.cordova.device

Add get Device information button.

Then index.html file will look like-

<ion-pane>

<ion-header-bar class="bar-stable">

<h1 class="title">Device Information</h1>

</ion-header-bar>

<ion-content>

Manufacturer : {{manufacturer}}

</li>

Model : {{model}}

</li>

Platform : {{platform}}

</li>

UUID : {{uuid}}

</li>

</ul>

</div>

</ion-content>

</ion-pane>

</body>

Next create the controller for app.js file and add $ionicPlatform.ready function. Then get the device information using getDevice() function and assign the device detail values in respective list elements. Please find the full source code for app.js file in the below.

angular.module('starter', ['ionic','ngCordova'])

.run(function($ionicPlatform) {

$ionicPlatform.ready(function() {

// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard

// for form inputs)

if(window.cordova && window.cordova.plugins.Keyboard) {

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

}

if(window.StatusBar) {

StatusBar.styleDefault();

}

});

})

.controller('DeviceController', function($ionicPlatform, $scope, $cordovaDevice) {

$ionicPlatform.ready(function() {

$scope.$apply(function() {

// sometimes binding does not work! :/

// getting device infor from $cordovaDevice

var device = $cordovaDevice.getDevice();

$scope.manufacturer = device.manufacturer;

$scope.model = device.model;

$scope.platform = device.platform;

$scope.uuid = device.uuid;

});

})

Next we have to run the application using the below command lines. If you are running in emulator you can use emulate instead run.

ionic run ios

ionic run android

Once run the application it will get the device details in the ionic platform ready function.

And it will display on index.html page.

Thanks...

Sonam Gupta's Blog

Friday 19 February 2016

Device Calendar In Ionic Framework

Friday 5 February 2016

Finding model,platform,UUID and manufacturer of a device in ionic