Agenda & What’s on layout options

Update: 20 January 2025 for Release v207


Did you know that your Agenda can display your events in multiple ways? Perhaps you have heard about the Brochure view, but there are some more cool layouts at your fingertips.
 
⚠️
Take note! Some options are only available on bigger screens. On mobile devices, all events will automatically be shown in the same (mobile optimized) layout.

Agenda Layout Options

You can apply different layouts to your entire Agenda:

Default list layout, grouped by production

Layout = normal

"
"Default" list with production grouping
Default list layout, grouped by date

Displaying each event individually by date

Layout = grouping

Default list, chronological
Default list, chronological
Compact list
Compact list
Brochure layout, for a grid of productions, with a pop-up

Enables quick browsing through your Productions

Layout = brochure

Brochure view with popup and browsing
Brochure view with popup and browsing
Mobile layout, grid view

The grid view that features every production in the mobile card-layout

Layout = grid

Mobile cards in a grid
Mobile cards in a grid
🚧
Take note! This is the only layout available on Mobile.
💡
There is also an option available to select the number of events that are displayed on the page. This is set in Control Panel > Pagination > Events per page.

Adding layout icons to your Agenda filter

Next to the filters you can add icons for visitors to change the layout of the overview themselves.

Note: This is not shown on mobile devices as these options do not feature on mobile screens.

Agenda showing available layout option to Visitors
Agenda showing available layout option to Visitors

All the options can be individually shown or hidden. These are set in Control Panel > Events & Productions >Layout controls.

Control Panel setting for showing layout icons in Agenda
Control Panel setting for showing layout icons in Agenda

Agenda Filter Layout Options

The filter at the top of your calendar can also be configured in five different ways:

  • Default
  • Sentence
  • Sidebar
  • Simple
  • Buttons
🚧
Agenda Parameters Agenda Filter parameters are added in System > Routes & Parts > Event overview > Events (Main) part.

Default filter

The default filter sits at the top of the Agenda page.

It can be minimized to show only the basic selection, or folded out to show extra options, like genres, tags, locations.

Default filter above the Agenda listing
Default filter above the Agenda listing
  • To set the filter as folded or folded out when landing on the Agenda page - add the parameter "filtersDefaultCollapsed” in Routes & Parts > Event overview > Events (Main) part in the Dashboard [true is folded in, false is folded out].
  • The options you want to show in the minimized view can be changed with the parameterfilter” in Routes & Parts > Event overview > Events (Main) part. Values are "date" "genre" "location" and "theme".
Example Parameters for Filter layout
Example Parameters for Filter layout
💡
When a Visitor opens or closes the filter, the last position will be remembered in that web browser.
 

Setting a Tag limit

Set how many tags are shown initially before showing the “more” button.

In this example the
In this example the tagsLimit parameter is set to 3
  • To set a limit add the ParametertagsLimit in Routes & Parts > Event overview > Events (Main) part in the Dashboard.

Sentence Filter

The sentence filter has a limited subset of options. You can select a date range, genres and locations.

Sentence Filter option using date and genre.
Sentence Filter option using date and genre.
  • The filter can be activated by adding the parameter "filters" in Routes & Parts > Events > Events (Main) part in the Dashboard, with the value "sentence".
 

 

Sidebar filter

The sidebar filter has all the options of the default filter. The filter is positioned on the left side of the desktop view of the agenda. On mobile it changes into a slider you can open and close.

Sidebar filter to the left of the Agenda listing
Sidebar filter to the left of the Agenda listing
  • The filter can be activated by adding the parameter "filters" in Routes & Parts > Events > Events (Main) part in the Dashboard, with the value "sidebar".
 

 

Simple

The simple view only shows the icons for Genres and Date picker. Selecting either opens up a modal to see the available genre filters or calendar.

Simple filter layout, with a additional filters and calendar icon
Simple filter layout, with a additional filters and calendar icon
  • The filter can be activated by adding the parameter "filters" in Routes & Parts > Events > Events (Main) part in the Dashboard, with the value "simple".

 

Filter buttons

The alternative for a full agenda filter is a more minimal filter button style list. This part can be used on the Homepage and in the agenda overview. It can display genres, tags, locations and/or themes.

Filter buttons with an Assigned banner between to label each set of button.
Filter buttons with an Assigned banner between to label each set of button.
  • To add Go To System > Routes & Parts and add the Part Filter buttons to website_show_list
 
Part and Route settings to add Filter Buttons to Agenda
Part and Route settings to add Filter Buttons to Agenda
  • Add parameter filter and set value to “genre” “location” “theme” “tag” (or a combination, no comma’s in between).
 
filter
filter Parameter with genre and location added
🚧
Button Number Limit By default 4 buttons will be displayed before the “more” button appears. To overrule this add the Parameterlimit” to the Filter buttons part.
Routes & Parts set up for the above Assigned Banner, Filter Buttons example.
Routes & Parts set up for the above Assigned Banner, Filter Buttons example.
💡
Top Tip! If you want to change the order the filters appear in (when you are using more than one), you can add the Filter buttons part multiple times in the Routes & Parts module, and configure each part to show a different filter. Use the padding above and below the parts to move them closer or further apart from each other.
 

How to set the Agenda layout in the URL

You can set which layout is shown in the Agenda URL.

You can make links to specific layouts by putting these variables directly into the URL and use this in a button or a banner.

Examples:

  • You want to show a brochure view of all your Opera events?
  • Perhaps a compact list view of all events in one of your locations?

Filter on location or genre in your regular Agenda, and then add one of the following variables in the URL:

For chronological list of events:

 
?list_type=events

For grouped list:

?layout=normal

For brochure view:

?layout=brochure

For compact view (similar to normal with no images)

?layout=compact

For the grid moible card view:

?layout=mobile-ish

To set the maximum number of events shown:

?max=[a number]
Combine multiple variables for more fun:

Links to a brochure view with 8 items per page

/agenda?layout=brochure&max=8 

Links to a “normal” list view with 24 items per page:

/agenda?layout=normal&max=24 
 

Always link to Production Page from Agenda

There is a setting to always send Visitors to the Production detail page from the Agenda.

When this option is active, it replaces the event dates fold-out button “show dates” and will link Visitors directly to the Production page. This is especially convenient when Productions have a lot of Events, and you want to avoid long lists with dates in the What’s On page.

Go to Control Panel > Events > Event Cards > Cards always link to detail and switch the toggle to Yes.

 
 

 

Related articles

Did this answer your question?
😞
😐
🤩