Add an event calendar to your blog

Would you like to display a calendar of your unit’s activities, laboratory events or seminar dates?

The “Calendar” widget in the list of widgets on Hypotheses only allows you to display the dates on which articles were published on your blog.

Integrating an external calendar

To display an event calendar, you need to integrate a calendar created on an external online service, such as Google Calendar.

From Google Calendar

Connect to the Google Calendar you want to display on your blog, click on the 3-point menu next to the agenda in question in the Google Calendar sidebar. Click on “Settings and sharing”. In the “Access permissions” part, it is necessary that “Make available to public” is checked and “See all event details” is selected, so that your readers can view the calendar. Then, in the “Integrate the agenda” part, you will find the iframe html code that allows you to integrate this calendar into your blog. This html code starts with <iframe. To better understand iframe html codes, you can read the article from the House of blogs “Multimedia in your articles”. You can customize the items to be displayed in the integrated calendar by clicking on “Customize”.

Integrate the iframe code of the calendar into your blog

In your blog’s dashboard, go to Appearance > Widgets and add the “Custom Html” widget to the widget area that corresponds to the location in your blog where you want to display the calendar. Paste the integration iframe code into the widget. Save the widget, and see the result on the public interface of your blog. If the calendar does not adapt well to the size of the widget area, you can set the width (width="...") and height (height="...") parameters directly in the html code pasted into the widget, by trial and error. These sizes depend on the graphic theme used on the notebook.
If you want to publish such a calendar in a page or in a post, just follow the same procedure and paste the iframe html code into the text field in “Text” mode (at the top right of the editor, next to the “Visual” tab).

Integration of a Google Calendar on a blog

If you need to create a new external calendar for your blog

The first step is to sign in to your Google Calendar account. If you do not have one, you will need to create an account. It is possible to create a Google account to use Google Calendar without having to create a Gmail email address; you must then select “I prefer to use my current email address” when you register.

Once you are signed in to your Google Account, click on the square menu at the top right of the screen and then click on “Calendar”. You can add a new calendar by clicking on the “+ New calendar” button.

Note : If you know of any open-source alternative to Google Calendar in English, do not hesitate to send an email to the Hypocommunity discussion list, and we will gladly add it to this article. In French, a great alternative is Framagenda, that can be integrated similarly to Google Calendar (explanations in French here).

Featured image: Photo by Eric Rothermel under Unsplash license

Cite this article as: "Add an event calendar to your blog" from Marion Wesely. Published on The house of blogs, 07/09/2018. Link:

Marion Wesely

Anciennement Chargée de l'accompagnement des communautés et de la valorisation des contenus d'Hypothèses / Community manager & communication officer for the Hypotheses platform (OpenEdition)

You may also like...

Search OpenEdition Search

You will be redirected to OpenEdition Search