Multiple Calendars Integration Using Cordova
I Am Using Cordova and Ionic for My Android App. I Am in Need to Integrate Multiple Calendars to Add Events to Different Calendars. I Have Checked Few Other...
I am using cordova and ionic for my android app. I am in need to integrate multiple calendars to add events to different calendars.
I have checked few other apps which populates the list of accounts added in the Android device and the event gets added to the selected account from the populated list. [account can be google/outlook etc.]
I wonder if there is any way achieve the same as above using cordova. I am using which allows me to add to the default calendar in the device. But I need to populate all the accounts added in the device and add events to selected account calendar.
Any help appreciated.
1 Answer
To select a specific calendar, you first need to list the available calendars using listCalendars().
You can use this to present a list of available calendars to the user and enable them to select one.
Once the user has chosen a calendar, you then pass its details to createEventWithOptions() when you are creating the event.
For example, something like this:
var calendars = [];
var selectedCalendar;
var onDeviceReady = function(){
window.plugins.calendar.listCalendars(function(_calendars){
_calendars.forEach(function(_calendar){
if(cordova.platformId === "android"){
// Omit Contacts from Android calendar list
if(!_calendar.name.match(/Contacts/i)){
calendars.push(_calendar);
}
}else{ //cordova.platformId === "ios"
// Omit Birthdays and Subscriptions as they are read-only
if(!_calendar.type.match(/Subscription/i) && !_calendar.type.match(/Birthday/i)){
calendars.push(_calendar);
}
}
});
}, function(err){
console.error('Error listing calendars: ' + err);
});
};
document.addEventListener("deviceready", onDeviceReady, false);
// Call this to display the list of available calendars for the user to choose from
// TODO implement calendar picker UI
var displayCalendars = function(){
calendars.forEach(function(calendar){
var id = calendar.id;
var name = calendar.name;
var displayName = calendar.displayname || calendar.name;
//TODO generate calendar picker UI entry
});
};
// TODO call this when user has selected a calendar entry in the picker UI
var selectCalendar = function(id, name){
selectedCalendar = {
id: id,
name: name
};
}
// TODO call this to add event to selected calendar
var createEvent = function(title, location, startDateTime, endDateTime, notes){
// Generate options for selected calendar
var calOptions = window.plugins.calendar.getCalendarOptions();
calOptions.calendarId = selectedCalendar.id;
calOptions.calendarName = selectedCalendar.name;
// Add event to selected calendar
window.plugins.calendar.createEventWithOptions(
title,
location,
notes,
startDateTime,
endDateTime,
calOptions,
function(){
console.log("Successfully added to calendar");
},
function(err){
console.error("Error adding to calendar: " + err);
}
);
};