109 XDK: Create Cordova Calendar Test Project
This tutorial demonstrates the steps to create a Cordova Calendar Test Project based on Blank Cordova Starter App.
This tutorial uses Intel XDK version 3759.
1) Create a new project
Select Samples and Demos.
Select General.
Select Blank Cordova Starter App.
Click Continue.
2) Specify Project Name and Location
Click Create.
Make sure you have an Internet connection.
Optionally, you may choose not to optimize with crosswalk (resulting with smaller package file size but having a risk of not compatible with various versions of android)
3) Add Calendar Plug In
We are going to add cordova-plugin-calendar located at https://www.npmjs.com/package/cordova-plugin-calendar
This plugin allows you to manipulate the native calendar.
Go to Project Page and find the Plugin Management.
Click Add Plugins to this project.
Select Third-Party Plugins
Select Plugin Source: npm
Set Plugin ID = cordova-plugin-calendar
Click Add Plugin
Wait for the fetching process.
Fetching successful.
4) Add Calendar.js
Add the Calendar.js file to the folder js.
5) Edit index.html
Replace all codes with the following.
<!DOCTYPE html>
<html>
<head>
<title>Cordova Calendar Test Project</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<link rel="stylesheet" href="css/app.css">
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="xdk/init-dev.js"></script>
<script type="text/javascript" src="js/Calendar.js"></script>
<script>
function addEvent()
{
var element = document.getElementById('info');
element.innerHTML = 'processing';
// prep some variables
var startDate = new Date(2016,1,10,18,30,0,0,0); // beware: month 0 = january, 11 = december
var endDate = new Date(2016,1,11,19,30,0,0,0);
var title = "notarazi";
var eventLocation = "Malaysia";
var notes = "tutorial";
var success = function(message) { alert("Success: " + JSON.stringify(message)); };
var error = function(message) { alert("Error: " + message); };
window.plugins.calendar.createEvent(title,eventLocation,notes,startDate,endDate,success,error);
element.innerHTML += '<br/> done. ';
}
</script>
</head>
<body>
<p id="info"></p>
<button onclick="addEvent();">add calendar event</button> <br>
</body>
</html>
|
6) Simulate
7) Build
If you have not configured the Build Requirement, read the steps in http://xdk-steps.blogspot.my/2016/12/104-xdk-how-to-build-cordova-for-android.html .
Otherwise, select the target platform and click Build.
Wait for the process to complete.
8) Deploy
The app should be able to add an event to your calendar.
No comments:
Post a Comment