Integrate your own calendar on the website

Sometimes you don't want to maintain everything twice and three times. You have a public calendar on Google or Apple or Microsoft Office or - very commendable - in your own NextCloud and would now like to display it on your website?

No problem. It only takes a few simple steps. And if not, just ask us...

The key to happiness is called "ICS".

What is "ICS", What is an "ICS" calendar?

ICS stands for "iCalendar Specification" or "Internet Calendaring and Scheduling Core Object Specification". It is a standardised file format for calendar data that was developed in 1998 and is used in RFC 5545 is specified. The most important features of ICS are

• It is a open, platform-independent format for exchanging calendar information.
• ICS files usually have the file extension .ics or .ical.
• They contain information on calendar events such as title, description, date, time, location, etc.
• The information can be opened and customised in a simple text editor.
• It is supported by the most popular calendar applications, including Proton Calendar, NextCloud's CalDAV server, Google Calendar, Apple Calendar, Microsoft Outlook and many more.
• ICS makes it easy to exchange appointments and events between different calendar systems and devices. In our case, between your calendar and your website.

The important thing for us about this form is its exchangeability. You can export appointments as an ICS file and send them to others, who can then import them into their own calendars.

What are the benefits of including your calendar on the website?

If you integrate a calendar on your website, you only have to maintain the appointments or block times in one place, namely in your electronic calendar. Thanks to the convenient software of the calendar software, this is much faster and more convenient than logging into a website and using a calendar form. So what could be better than combining the convenience of the application with the reach of your website?

How to find your ICS feed on the various systems:

Nextcloud

1. Open calendarLog in to your Nextcloud instance and open the calendar app.
2. Select calendarClick on the three dots next to the calendar you want to export.
3. Copy private linkSelect "Copy private link". This link can then be used as an ICS feed.

Google Calendar

1. Sign in to your Google account.
2. With the desktop browser: On the "Apps" icon (top right), click on "Calendar".
3. Select calendarClick on the settings icon (the cogwheel) and select "Settings".
4. Make the calendar publicSelect the calendar you want to share and activate the option "Release publicly“.
5. Copy iCal linkScroll down and copy the link in the "Public address in iCal format" field.
6. Find out more here: https://support.google.com/calendar/answer/37118?co=GENIE.Platform%3DDesktop&hl=de

The link looks something like this:

https://calendar.google.com/calendar/ical/<lange-zahlen-und-buchstabenreihe>group.calendar.google.com/public/basic.ics

Apple Calendar

1. Open calendarOpen the Calendar app on your Mac.
2. Select calendarRight-click on the calendar you want to share and select "Share calendar".
3. Make publicActivate the "Share publicly" option. If you then right-click on the calendar again (desktop, Mac OS), the feed will appear. Alternatively, you have the option "Copy URL to Clipboard" or "Copy URL to clipboard".
4. Copy linkCopy the displayed link, which serves as an ICS feed.

The link looks something like this:

webcal://p148-caldav.icloud.com/published/<lange-zahlen-und-buchstabenreihe>

Microsoft Outlook

1. Open OutlookOpen Outlook and go to your calendar.
2. Share calendarClick on "Share calendar" and select "Publish calendar".
3. Generate ICS linkSelect the desired release settings and copy the generated ICS link[13][14].

The link looks something like this:

https://outlook.office365.com/owa/calendar/<lange-zahlen-und-buchstabenreihe>/calendar.ics

Integrating and displaying your calendar in WordPress

Finding the ICS link in the depths of the settings of large providers is actually most of the work. If you use WordPress, it's now really easy. (And if you've ever looked enviously at all the WordPress users and wondered if it's time to migrate your site to WordPress, feel free to ask us, we've done it many times).

We recommend the "ICS Calendar" plug-in (https://icscalendar.com) for integration. In the free version, you already get a simple calendar that you can graphically polish with a little CSS knowledge. In the PRO version, which is not expensive, you also have the option of designing and configuring your calendar using a convenient interface.

There are also alternatives, which we have listed below. However, ICS Calender focuses entirely on the integration of ICS calendars and we love plug-ins of the "Do one thing and do it right" variety.

This is how you proceed:

1. Install pluginInstall and activate the plugin ICS Calendar on your WordPress page.
2. Show calendar: Use the plugin's shortcode to display the calendar on a page or in a post.

That's it already. The plug-in does the rest.

And this is what it could look like (example of a customer project, ICS Calendar in the PRO version):