Looking for the new OutSystems Now? Click here!
 Features > Add an Event to the Device Calendar
Add an Event to the Device Calendar
Use the AddCalendarEvent plugin of OutSystems Now to save an event from your application to the calendar of a mobile device.
Example
In this example we will extend a mobile application, which displays scheduled visits to customers.
The initial screen looks like this: 
To extend your application to add an event to the device calendar, follow the steps below. Note that we use a Table Records widget called VisitTable to display the Visit records in this example.
1. Ensure that the OutSystems Now component of the Forge is installed. Learn how to install a component from the Forge;
2. In your application module, create a reference to the following elements of the OutSystemsNow module: AddCalendarEvent and IsUsingOutSystemsNowApp;
3. Add a button below the event details in the row of the Table Records, name it ‘AddToCalendar’.
Set its label with the text ‘Add to calendar’.
Set the Method property to ‘Navigate’.
As Destination set an External Site with the dynamic URL value of “#”. This means, the button will navigate to the top of the screen;
4. Add an AddCalendarEvent web block next to the button. Set its parameters with the Id of the button, and with the visit data of the current row in the VisitTable;
5.  Enclose the button and the AddCalendarEvent web block in an If element. Set its condition to IsUsingOutSystemsNowApp(). This ensures that the button is only displayed when the user is accessing the screen from OutSystems Now.
After completing the above steps, we have the ‘Add to calendar’ button in our application:
When you tap ‘Add to calendar’, the event is added to the device calendar:
How does it work?
When OutSystems Now loads the screen, the AddCalendarEvent web block adds some JavaScript to the HTML code of the page. When you tap the button, the application first executes the JavaScript which saves the event to the calendar. Then it executes the navigation defined in the button properties. In our case it jumps to the top of the page as the “#” value in the URL property indicates.

Note that it’s not supported to add any other logic to the button, as it interferes with the execution of the script that the AddCalendarEvent web block adds. 
 To learn more about this Cordova plugin, check the plugin documentation and source code.
Click here to see your activities