iCal Integration

Plenty of web based calendars will allow you to export the calendar in the .ics (iCal, iCalendar) format, which you can import in your Shoutem mobile app to display your event schedule.

Exporting the iCal feed

Before we can load the feed into your app, first we need to get the link to the feed itself. Depending on the platform where you have your event calendar set up, follow this steps.

Google Calendar

Let’s start by logging in into your google account here. If you don’t have an account for Google, you can create one here.

Once you’ve logged in, you can create your calendar. If you already have one, you can import it to your app.

First, we need a link to your calendar which we will enter in the Events module.

On the left side, you have a list of your calendars. Hover over the calendar you wish to import and you should see an arrow icon on the right side appear. Click on it to get the options menu.

Now when you have the options menu open, click the Calendar settings.

Scroll to the bottom of the page. You should see the Private address tab and two colored link to it’s right (XML and ICAL). Look for the green ICAL button and click on it.

You should get the link, looking something like this:

This is the link of your calendar feed. Copy it as we will need to enter this within your app builder. Proceed to the ​”adding the feed to your app” part of this guide.

Apple Calendar

Log in to your iCloud here. Once you’re logged in go to your calendars tab.

On the left side you should see the list of your calendars and a “signal icon” next to each of them.

Depending on the calendar you would like to import, click on it’s signal icon. Two checkboxes should appear. Click on the Public calendar checkbox in order to activate this option.

Once you do that, the link to your calendar should appear underneath the same checkbox. This is the link we will import to your app so copy it as we will need it later.

Importing the iCal feed into your app

Click the “+” icon to add a new “Screen” and choose “iCal events.” Add your iCal feed and click “Save”

Changing the iCal feed layout

Now click the “Layout” tab. Here you can change the layout of both list and detail screens.

Preview your iCal calendar in the app

If you want to preview how your iCal calendar looks in the app, you can do it right away by clicking the “preview” button.