How to: Transfer calendars – WECHANGE meets WordPress #2

You can transfer the calendar entries from one or more WECHANGE groups and projects to your website in just a few steps and without any technical knowledge, where they are automatically synchronized when you enter new events (and to be honest, the calendar display is then more clear than on WECHANGE). Your website calendar can not only display events from WECHANGE, but also those from other calendars. And: you can subscribe to your WECHANGE calendar just as easily with your personal online calendar on your PC or smartphone.

Last time it was about Embedding the WECHANGE map, this time we will explain step by step how you can broadcast your events. In WordPress, this is made possible by free plugins, two of which are presented in detail. You can also achieve the same results with another content management system or a website builder if the import of an iCal feed is supported (we will look at what that is in a moment). You can see how this can all look in practice on the website of Living Lüneburg look at.

Background information: iCal – The practical data exchange format

The exchange of calendar data, in this case from WECHANGE to your website, is made possible by the iCalendar standard, iCal for short. This means that your website knows what you enter and change on WECHANGE. If the transfer is made via a corresponding URL (an iCal feed), the calendars are synchronized with each other (possibly with a slight delay and only in one direction). It is also possible to export and import a file with calendar data, which then has the file extension .ics or .ical carries.

The best thing about the whole thing is that not only the WECHANGE calendar, but most online calendars support the iCal format. This means that other calendars also allow the import and export or synchronization of events.

The iCal feed of your WECHANGE calendar

First of all, you need the URL that enables the transmission of events from your group or project. To do this, navigate to the relevant calendar and open it in full-screen view. At the bottom right you will now see a button:

feed for events

If you click on it, you will see a link. Copy it, we will need it shortly. You can also copy the URL into the browser line and load it. You will then be asked if you want to download an iCal file. However, since this only contains the currently entered events and is not updated, we do not need the file at all.

Please note that the iCal feed also non-public events from your calendar, i.e. entries that are only visible to members on WECHANGE or only to you. These are displayed without restrictions in the calendar on your website. Only when users click on the event do they not jump directly to the WECHANGE entry as with public events, but are directed to your microsite.

Also note: formatting characters are not displayed correctly after the transfer. For example, if you write in the WECHANGE calendar: bold word, italicized word, link, on the website it becomes: **Bold Word**, *italic Word*, [Link](https://beispiel.de) (just as you originally entered it).

Free WordPress Plugins

Next, we want to get the calendar onto our website. For this, we need extensions that allow the import of iCal feeds. There are several such plugins for WordPress, two of which we will look at in detail. Other content management systems and website builders certainly have similar functions, but we have not tested them. However, a quick Ecosia search for "ical feed" and the name of your CMS or builder should produce corresponding results - feel free to share these in our #community!

ICS Calendar vs. All-In-One Event Calendar

Let's first compare the two plugins that we have tested for you and which we will take a closer look at. You can install and activate both as usual via the WordPress plugin directory. Please note: This is about the free version. Both plugins also have premium versions with more features.

Basically, the plugins are quite similar – and the calendar display is definitely better than on WECHANGE. The most important difference is that with the ICS Calendar import events from multiple sources (groups, projects or anywhere else). If you plan to do that, the decision should be easy (but beware, there is a bug in the mobile view, but it can be worked around, see below). On the other hand, the design (colors, font size, spacing, etc.) is not always suitable by default and customization is fraught with hurdles, as it requires CSS knowledge (maybe someone from our Rocket Chat channel So if you only want to import the events from one source and want the calendar to look nice, the All-In-One Event Calendar probably the better choice.

	ICS Calendar	All-In-One Event Calendar
Max. importable feeds	Unlimited	1 (only events from one group/project)
Insert	As a shortcode	As a shortcode
configuration	Through parameters in the shortcode	In the plugin settings in the WordPress dashboard, additionally if necessary through parameters in the shortcode
adaptation of the design	With CSS	In the plugin settings or with CSS
Upcoming events in the sidebar	Yes, if desired	Yes, if desired
Automatic creation of an event page for each entry	No	Yes, each with its own subpage on your website
Direct links to the WECHANGE entry	Yes	Hard to find
Show event description when hovering	Yes	Yes
Different views (month, week, list)	Yes	Yes, additional day view
Optimized for mobile view	Not quite, but can be solved (see below)	Yes
categories and keywords	No	Yes, but will not taken from WECHANGE, must be added manually
Filter	By calendars if multiple iCal feeds are imported	By categories and keywords
Manual creation of additional events	No, only iCal feeds	Yes, via the WordPress dashboard
subscription function	No (but can be enabled by providing iCal feeds)	Yes, but partly faulty
Transferring the calendar as a widget to external websites	No	Yes, if desired

Notes on the ICS Calendar

Once you have installed and activated the plugin, you will find the item “ICS Calendar” in the dashboard side menu. Here you will only see an example shortcode and the redirect to the full User Guide. All shortcode parameters that you can use to configure your calendar are explained here (even in German). If it's not clear what is meant: just try it out!

The calendar shown above is created with the following shortcode:

[ics_calendar feedlabel="Example initiative|Model group|Fürth in the day after tomorrow|FC St. Pauli match schedule" color="#1db2b2 #463758 #feec2e #e20613" url="https://wechange.de/project/beispiel-initiative/event/feed/?user=4582&token=168731651272886455335726828300121089245 https://wechange.de/group/muster-gruppe/event/feed/?user=4582&token=168731651272886455335726828300121089245 https://fuerth-im-uebermorgen.de/kalender/?ical=1 https://www.google.com/calendar/ical/6lmacpjrrr96vi590djoo8nadkgroup.calendar.google.com/public/basic.ics" columnlabels="short" description="false" eventdesc="true" legendposition="above" legendstyle="inline" linktitles="true" location="true" monthnav="compact" title="false" view="month"]

If you enter this as a shortcode or just as text (don't forget the square brackets) on your website, you should get the same result, apart from the design. However, things are different in the mobile view.

Adaptation for mobile view

Since a mobile phone screen is too narrow for the month view, it automatically switches to the list view, which is also good. If a calendar that is displayed in the month view by default is automatically switched to the list view, however, the parameters count and eventdesc These ensure – in a pure list calendar – that not all upcoming events of the current month are displayed, but only a predetermined number (count) or that not the whole description is displayed, but only the first so many characters, the rest must be expanded by tapping (eventdesc).

Since these (very helpful) parameters do not work when changing a monthly calendar, this can lead to it becoming extremely long in the list view (if there are many events with long descriptions). This is not something that should be expected of users. Fortunately, a trick can help. You can insert two almost identical calendars into your website, one of which is only displayed on the desktop and the other on smartphones (and tablets). The desktop calendar is a standard monthly calendar (see above), but for the smartphone calendar you set view="list" eventdesc="10" count="10" (the numbers are only example values). Now you have to use your page builder or a @media query Set the first calendar to be displayed only on large screens and the second only on small screens.

Long loading times

If you import events from many different calendars, the loading times may become significantly longer. If this becomes problematic, you will probably have to consider whether you want to remove individual calendars.

Subscribe to calendar with the PC or smartphone app

If you use an online calendar (e.g. Outlook), you can also use it to subscribe to your WECHANGE calendar. All you need is the iCal feed that we got at the beginning. Depending on which program you use, the steps for adding the calendar are different. If you simply search the internet for "import ical feed" and the name of your app, you should find what you are looking for (if it is not self-explanatory).

---

That was it, the second article from our new WECHANGE meets WordPress section. Did you like the instructions and does the platform help you in general? Then support our public welfare-oriented cooperative with a solidarity contribution – we and all users thank you!