Device Calendar In Ionic Framework

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:

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

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...