ICS Calendars - How to create a event calendar for your website from an ICS feed

Many Event Applications export what is called an ICS feed. This is basically just a document that contains a list of events.

Google Calendar, for example, lets you export any calendar in ICS format. This can be found in your calendar settings.

Google will then continue to update this feed with your latest events every time you add or remove and event to your calendar.

Apple calendar also does the same. Clicking the icon next to the name of your calendar opens a window that allows you to set the calendar to 'public'. Apple then gives you a URL to access the ICS feed of that calendar.

But what can we do with this feed and how can we display it on your website?

Unfortunately there's no way to display an ICS feed on your website without using some software that will display the events for you.

Luckily, Event Calendar App makes this easy. Using Event Calendar App we can plug-in an ICS feed and it will transform the events into a beautiful Event Calendar. We can then embed this Event Calendar wherever we choose. Simple.

Let's take a look how it works.

Create an Event Calendar App account. After you have been through the onboarding you should be able to see the dashboard screen. It looks like this:

Using the left navigation, click Calendar Sync:

You will then see an option to connect an ics feed. It looks like this:

Click connect and enter the details of your ICS feed. Ensure that your ICS feed contains at least one event otherwise Event Calendar App wont be able to pick it up.

Once you've done this your ICS feed should then show in the dropdown at the top of the page:

Great news, you've connected your ICS feed to ECA.

Next we need to create a widget to display the events.

Head back to the main dashboard and click on 'New Widget' or use one that you have created already.

You'll now be inside the widget editor but there wont be any events to display:

We now just need to tell ECA to display the events from the ICS feed we added earlier. To do this, click Event Sources on the left, and then choose the ICS feed you added earlier.

Event Calendar App will then pull in all your events and display them in a widget:

What's great about ECA is that you can style the widget to look great on your website. In the example above, I changed the theme, and added some images to make things look great.

Another great thing about ECA and its ICS integration is the fact that it doesn't 'import' and then ignore any changes to your ICS feed. A lot of other applications do this and it can lead to some infuriating results. This is because they don't notice when you've deleted, added or modified your events in the feed. Instead ECA constantly checks the feed for any changes and displays these on your widget.

Finally, using ECA we can embed the widget on our website.