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 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);
        }
    );
};
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Marcus Vance

Marcus Vance

Cybersecurity & Digital Privacy Researcher

Marcus Vance is a cybersecurity auditor and technology writer dedicated to educating the public about online safety, data privacy regulations, enterprise security, and emerging cyber threats.

Share this article
Twitter Facebook Pinterest