iCal Integration

iCal sharing is the most common option when it comes to web-based calendars and is known for easy and friendly event schedule sharing with minimum manual work.

Web-based calendars allow you to export the calendar in the .ics format, which you can import into your app to display your event schedule. That .ics file contains your event schedule information such as event name, start and end time, dates when the event will take place, and event’s description if you saved it in the first place.

Share your calendar events with simple export-import action, but most importantly, the events will be automatically updated whenever the events are updated in the origin web-based Calendar.

Exporting the iCal feed

Extracting iCal feed steps really depends on the web-based calendar you are currently using. Later we will share steps examples from the most used web-based calendar – Google Calendar.

Regardless of the web-based calendar provider, in most cases, the iCal URL is generated by default. Since we can’t cover all the cases, here are a few guidelines that might help you while setting everything up:

1. Every calendar has its own Settings where you can configure it
2. iCal URL is saved in sections such as Integrate calendar, Share, Import & Export
3. A calendar that could be shared also should have Access permissions in its Settings (make sure to mark your calendar as Public or your Shoutem app won’t be able to access Events)

Add iCal Events screen

To add iCal as a screen of your app, go to Screens → click the + button → search for iCal → click iCal Events to add it as a screen to your app.

Now that you’ve added iCal to your app, paste the URL to your calendar on the extension’s settings page. Have in mind that you can add only one iCal feed per one iCal screen.

As mentioned, the event’s basic details will be displayed. If you have a Location added to your web-based Calendar, that will not be presented in the app.

Layout options

Like for any other screen, there are several Layout options for a dynamic look and feel user experience instead of having one layout across all the apps.

Specifically, iCal layouts do not have images included since images can’t be imported via the iCal feed. If you would like to present your events with images and not just plain text, we advise you to consider adding events manually via our Events extension.

Google Calendar iCal feed

Let’s start by logging in to your Google account here. We will assume you already have a Calendar ready for sharing and proceed right away on how to obtain the iCal feed URL.

If you don’t have one yet, you should create it first and then continue with the below steps.

On the left sidebar, you have a list of your calendars. Hover over the calendar you wish to import, and you should see a vertical ellipsis icon that stands for Settings.

Click on the Settings, Settings and sharing option and an additional screen will appear with all settings tied to your selected calendar.

On the Settings screen make sure to adjust Access permissions and allow Make available to the public. This step is very important, make sure not to miss it.

Navigate to Integrate calendar section, where you will see the Public address in iCal format. Copy the whole URL and save it to the builder (iCal settings page).

Feel free to start the preview of your app, and if everything is done correctly, your events from the Google Calendar will appear in the app.