for iOS and Android, by Eddy Verbruggen
- Description
- Installation 2. Automatically (CLI / Plugman) 2. Manually 2. PhoneGap Build
- Usage
- Credits
- License
This plugin allows you to add events to the Calendar of the mobile device.
- Works with PhoneGap >= 3.0.
- For PhoneGap 2.x, see the pre-3.0 branch.
- Compatible with Cordova Plugman.
- Officially supported by PhoneGap Build.
- Supported methods:
find,create,modify,delete, .. - All methods work without showing the native calendar. Your app never looses control.
- Tested on iOS 6 and 7.
- Supported methods on Android 4:
find,create(silent and interactive),delete, .. - Supported methods on Android 2 and 3:
createinteractive only: the user is presented a prefilled Calendar event. Pressing the hardware back button will give control back to your app.
Calendar is compatible with Cordova Plugman and ready for the PhoneGap 3.0 CLI, here's how it works with the CLI:
$ phonegap local plugin add https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin.git
or
$ cordova plugin add https://github.com/EddyVerbruggen/Calendar-PhoneGap-Plugin.git
and run this command afterwards:
$ cordova build
1. Add the following xml to your config.xml:
<!-- for iOS -->
<feature name="Calendar">
<param name="ios-package" value="Calendar" />
</feature>2. Grab a copy of Calendar.js, add it to your project and reference it in index.html:
<script type="text/javascript" src="js/Calendar.js"></script>3. Download the source files for iOS and copy them to your project.
Copy Calendar.h and Calendar.m to platforms/ios/<ProjectName>/Plugins
4. Click your project in XCode, Build Phases, Link Binary With Libraries, search for and add EventKit.framework and EventKitUI.framework.
1. Add the following xml to your config.xml:
<!-- for Android -->
<feature name="Calendar">
<param name="android-package" value="nl.xservices.plugins.Calendar" />
</feature>2. Grab a copy of Calendar.js, add it to your project and reference it in index.html:
<script type="text/javascript" src="js/Calendar.js"></script>3. Download the source files for Android and copy them to your project.
Android: Copy Calendar.java to platforms/android/src/nl/xservices/plugins (create the folders/packages).
Then create a package called accessor and copy other 3 java Classes into it.
4. Add these permissions to your AndroidManifest.xml:
<uses-permission android:name="android.permission.READ_CALENDAR"/>
<uses-permission android:name="android.permission.WRITE_CALENDAR"/>Note that if you don't want your app to ask for these permissions, you can leave them out, but you'll only be able to
use one function of this plugin: createEventInteractively.
Add the following xml to your config.xml to always use the latest version of this plugin:
<gap:plugin name="nl.x-services.plugins.calendar" />or to use this exact version:
<gap:plugin name="nl.x-services.plugins.calendar" version="4.2" />Basic operations, you'll want to copy-paste this for testing purposes:
// prep some variables
var startDate = new Date(2014,2,15,18,30,0,0,0); // beware: month 0 = january, 11 = december
var endDate = new Date(2014,2,15,19,30,0,0,0);
var title = "My nice event";
var location = "Home";
var notes = "Some notes about this event.";
var success = function(message) { alert("Success: " + JSON.stringify(message)); };
var error = function(message) { alert("Error: " + message); };
// create a calendar (iOS only for now)
window.plugins.calendar.createCalendar(calendarName,success,error);
// if you want to create a calendar with a specific color, pass in a JS object like this:
var createCalOptions = window.plugins.calendar.getCreateCalendarOptions();
createCalOptions.calendarName = "My Cal Name";
createCalOptions.calendarColor = "#FF0000"; // an optional hex color (with the # char), default is null, so the OS picks a color
window.plugins.calendar.createCalendar(createCalOptions,success,error);
// delete a calendar (iOS only for now)
window.plugins.calendar.deleteCalendar(calendarName,success,error);
// create an event silently (on Android < 4 an interactive dialog is shown)
window.plugins.calendar.createEvent(title,location,notes,startDate,endDate,success,error);
// create an event silently (on Android < 4 an interactive dialog is shown which doesn't use this options) with options.
// The options support only the reminders/alarms for now, but I will add more in the future:
var calOptions = window.plugins.calendar.getCalendarOptions(); // grab the defaults
calOptions.firstReminderMinutes = 120; // default is 60, pass in null for no reminder (alarm)
calOptions.secondReminderMinutes = 5;
window.plugins.calendar.createEventWithOptions(title,location,notes,startDate,endDate,calOptions,success,error);
// create an event interactively (only supported on Android)
window.plugins.calendar.createEventInteractively(title,location,notes,startDate,endDate,success,error);
// create an event in a named calendar (iOS only for now)
window.plugins.calendar.createEventInNamedCalendar(title,location,notes,startDate,endDate,calendarName,success,error);
// find events
window.plugins.calendar.findEvent(title,location,notes,startDate,endDate,success,error);
// list all events in a date range (only supported on Android for now)
window.plugins.calendar.listEventsInRange(startDate,endDate,success,error);
// list all calendar names - returns this JS Object to the success callback: [{"id":"1", "name":"first"}, ..]
window.plugins.calendar.listCalendars(success,error);
// find all events in a named calendar (iOS only for now)
window.plugins.calendar.findAllEventsInNamedCalendar(calendarName,success,error);
// change an event (iOS only for now)
var newTitle = "New title!";
window.plugins.calendar.modifyEvent(title,location,notes,startDate,endDate,newTitle,location,notes,startDate,endDate,success,error);
// delete an event (you can pass nulls for irrelevant parameters, note that on Android `notes` is ignored)
window.plugins.calendar.deleteEvent(newTitle,location,notes,startDate,endDate,success,error);Creating an all day event:
// set the startdate to midnight and set the enddate to midnight the next day
var startDate = new Date(2014,2,15,0,0,0,0,0);
var endDate = new Date(2014,2,16,0,0,0,0,0);Creating an event for 3 full days
// set the startdate to midnight and set the enddate to midnight 3 days later
var startDate = new Date(2014,2,24,0,0,0,0,0);
var endDate = new Date(2014,2,27,0,0,0,0,0);This plugin was enhanced for Plugman / PhoneGap Build by Eddy Verbruggen. I fixed some issues in the native code (mainly for iOS) and changed the JS-Native functions a little in order to make a universal JS API for both platforms.
- Inspired by this nice blog of Devgirl.
- Credits for the original iOS code go to Felix Montanez.
- Credits for the original Android code go to Ten Forward Consulting and twistandshout.
- Special thanks to four32c.com for sponsoring part of the implementation, while keeping the plugin opensource.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.