Integrating the Calendar Into Your Ionic App
or today’s demo, I decided to try something I’ve been meaning to make time for – integrating with the calendar on the mobile device. Luckily there is a great plugin for this – Calendar-PhoneGap-Plugin. This plugin provides all types of hooks into the local calendar including the ability to search and add events. With that plugin in place, I whipped up a quick demo.
Let’s look at the code behind this. First, the HTML. Since this application is so simple, I’m not using routes and templates.
This should all be fairly boiler plate. I simply loop over the events and create a card UI for each. Now let’s look into the controller code.
Yep, just call the service and render the events. Trivial. Now let’s look at the service.
Ok, so this is a bit more complex. I’ve got a set of fake data that creates four events in the future. The service then returns those fake events. Ok, so let’s kick it up a notch. Given that our Calendar plugin can check for events, I’m going to update my code to display if an event has been added to the calendar or not.
In this screen shot, you can see buttons to add the event to your calendar. Notice that the third event though is recognized as being in the calendar. To make this work, I updated the service call for events to handle checking the calendar. It was a bit complex since each call is asynch, but $q makes it easy to handle that.
I set a status value on events to represent whether or not the event exists. Back on the display side, I handle this like so:
Fairly simple, right? Now let’s look at the add code. I’ll skip the controller code as all it does is call the service and update the scope.
I’ve put the full source code for this demo up on GitHub: https://github.com/cfjedimaster/Cordova-Examples/tree/master/calendarionic. I want to give big thanks to Eddy Verbruggen for helping me use his plugin, and for fixing a bug I encountered!
0 comments