Add To Calendar

Owned by Will Wilson (Deactivated)
Last updated: Jun 27, 2016
7 min read

Overview

The Add To Calendar feature allows the app user to add an item within the app to the user's calendar.  This feature is available in Flex AppBlocks and Component REST AppBlocks.  The feature will appear the same in both instances to the app user, but they are setup differently in the MobileSmith platform.

In both cases, the app designer must specify which field(s) the device's calendar should use.  There are five potential calendar fields:

  • Title
  • Start Date
  • Start Time
  • End Date
  • End Time

These calendar fields are "universal" fields, i.e. they are used for calendar events on both iPhone and Droid.

 

iPhone: new calendar event

Droid: new calendar event

 

Flex

Setup

Data Mapping

To setup Add To Calendar in a Flex AppBlock, find the AppBlock in the left-hand menu and go to Data Mapping.

For each data field, you will see the blue sharing fields under the label "Use for social sharing and app events as".  The available sharing fields differ based on the field type.  There are some sharing fields that are not used in Add To Calendar.  For example, "Caption" and "Description" are used when sharing to Facebook, but not for Add To Calendar.

You can only select "Title" for a field that is Short Text or Long Text.

 

You can only select "Start Date" for a field that is Date or Date&Time.

  • You must select "Start Date" for a field in order for Add To Calendar to work - all the other fields are optional.

 

You can only select "End Date" for a field that is Date or Date&Time.

 

You can only select "Start Time" for a field that is Time.

  • If no field is selected for "Start Time", and the field selected for "Start Date" is Date&Time, the time from that field will be used as the Start Time.
  • If no field is selected for "Start Time", and the field selected for "Start Date" is Date, 12:00am will be used as the Start Time.

You can only select "End Time" for a field that is Time.

  • If no field is selected for "End Time", and the field selected for "End Date" is Date&Time, the time from that field will be used as the End Time.
  • If no field is selected for "End Time", and the field selected for "End Date" is Date, 1 hour after the Start Time will be used as the End Time.
  • If no field is selected for "End Time", and no field is selected for "End Date", 1 hour after the Start Time will be used as the End Time.

 

Canvas

Once you have completed Data Mapping, find the AppBlock in the left-hand menu and go to Phone Canvases.

Go to the Detail page - that is the only page that can use Add To Calendar.

Open the Tool Box on the right and go to the Actions tab.

Drag-and-drop the Add To Calendar action button onto the navbar or canvas.

 

 

Device Behavior

When the app user taps the Add To Calendar action button, it will launch the New Event function of the device's default calendar app.

 

 

 

If the app user has not yet allowed your app to access the calendar, it may ask for permission:

 

iPhone: Calendar access

 

On the New Event screen, the app will prepopulate each of the five calendar fields using the data from the Detail page.

If you did not select "Title" for any of the fields, the new event's Title will be left blank.

If you did not select "Start Time" for any of the fields, and you selected a Date field for "Start Date" (and not a Date&Time field), the Start Time will be 12:00 AM.

If you did not select "End Time" for any of the fields, and you did not select "End Date" for any of the fields, 1 hour after the Start Time will be used as the End Time.

The app user is still able to edit any field, whether it was prepopulated or not.

 

iPhone: Add To Calendar from Flex Detail View

 

Droid: Add To Calendar from Flex Detail View

 

REST

Setup

Data Mapping

In a REST AppBlock, the only page type that uses Add To Calendar is a Detail page.

 

In the wizard for a Detail page, on the Available Features step, you must select "Enable" for the Add To Calendar feature.  Once you do that, there will be an Add To Calendar step in the wizard.

 

 

 

 

On the Add To Calendar step of the wizard, you will see the five calendar fields, and you can select which of your data fields should be used for each.

The available choices for each calendar field will depend on the field type you set for each of your data fields on the Data Mapping step of the wizard.  For "Title", the dropdown will show all fields set to Short Text or Long Text.

For "Start Date", the dropdown will show all fields set to Date or Date&Time.

For "Start Time", the dropdown will show all fields set to Time.

For "End Date", the dropdown will show all fields set to Date or Date&Time.

For "End Time", the dropdown will show all fields set to Time.

 

 

  • You must select "Start Date" for a field in order for Add To Calendar to work - all the other fields are optional.
    • You will not be able to proceed to the next step of the wizard unless you have selected a field for "Start Date".
  • If no field is selected for "Start Time", and the field selected for "Start Date" is Date&Time, the time from that field will be used as the Start Time.
  • If no field is selected for "Start Time", and the field selected for "Start Date" is Date, 12:00am will be used as the Start Time.
  • If no field is selected for "End Time", and the field selected for "End Date" is Date&Time, the time from that field will be used as the End Time.
  • If no field is selected for "End Time", and the field selected for "End Date" is Date, 1 hour after the Start Time will be used as the End Time.
  • If no field is selected for "End Time", and no field is selected for "End Date", 1 hour after the Start Time will be used as the End Time.

 

Canvas

 

After you have completed the wizard for the Detail page, go to its canvas.

Open the Tool Box on the right and go to the Actions tab.

Drag-and-drop the Add To Calendar action button onto the navbar or canvas.

 

 

Device Behavior

When the app user taps the Add To Calendar action button, it will launch the New Event function of the device's default calendar app.  If the app user has not yet allowed your app to access the calendar, it may ask for permission.

On the New Event screen, the app will prepopulate each of the five calendar fields using the data from the Detail page.

If you did not select "Title" for any of the fields, the new event's Title will be left blank.

If you did not select "Start Time" for any of the fields, and you selected a Date field for "Start Date" (and not a Date&Time field), the Start Time will be 12:00 AM.

If you did not select "End Time" for any of the fields, and you did not select "End Date" for any of the fields, 1 hour after the Start Time will be used as the End Time.

iPhone: Add To Calendar from REST Detail page

 

Droid: Add To Calendar from REST Detail page