Skip to main content

Calendar

The Calendar block allows you to display events from multiple sources in a traditional monthly calendar view. Intended for showcasing department events, conference schedules, or important dates for your team or organisation. Specifically, the Calendar block enables you to

  • display a navigable monthly calendar;
  • integrate events from Indico categories and events;
  • import events from external ICS calendar feeds (Outlook);
  • color-code events from different sources; and
  • provide direct links to event details.

The Calendar automatically adjusts to show six rows of days with days from the previous and next months shown in a lighter shade with the current day highlighted. By default, the Calendar is responsive and will adjust to different screen sizes. Additionally, events that span multiple days appear on each day of their duration. Please note that in order to improve performance, data is cached hourly. As such, should you need to see the latest events immediately, please reload the page to refresh.

The CERN Calendar block with two inputs; one Indico event in blue and one Indico category in orange.

The CERN Calendar block with two inputs; one Indico event in blue and one Indico category in orange.

Adding the Calendar Block​

  1. In the WordPress block editor, click the + button to add a new block.
  2. Search for Calendar and select the Calendar block.
  3. The block will appear with the current month displayed.

Alternatively, you can type /calendar on a new line and press enter to add the block.

Adding Event Sources​

The Calendar block can display events from multiple sources:

  1. Indico Events
    • In the block settings sidebar, enable Indico Integration
    • Add a new event source with type Indico
    • Specify whether to use a category or event ID
    • Enter the Indico category or event ID
    • Choose a color for events from this source
  2. Outlook ICS Calendar Feeds
    • Add a new event source with type ICS
    • Enter the Outlook URL of the ICS feed
    • Choose a color for events from this source

The Calendar block is customised the same way regardless of event source.

It is possible to combine both ICS and Indico entries.

Customising the Display​

Each event source can be customised:

  • Name: Give each source a descriptive name.
  • Color: Assign unique colors to different event sources for easy visual identification.
  • Visibility: Toggle sources on/off as needed.

Event Display​

Events appear on their respective dates with the following information:

  • Start time
  • Event title
  • Color-coded indicator matching the source
  • Hover effects for better user experience

Clicking on an event will open the event's details page in a new tab.

Calendar Navigation​

The calendar includes intuitive navigation controls:

  1. Use the left and right arrows to move between months.
  2. Month and year are displayed in the header.
  3. The calendar automatically highlights the current day.