---
title: "Display Events Using Blocks"
canonical: "https://kb.uconn.edu/space/IKB/28244869121/Display%20Events%20Using%20Blocks"
format: markdown
---
In Aurora (WordPress), [blocks](https://kb.uconn.edu/space/IKB/27461091393/Block+Editor) are modular units that allow you to add content to your website. Blocks are only available on sites using the Cynder theme.
How to Add a Block to Your Website
In Aurora, there are two main ways that you can add a block to your page - [using the block inserter or the slash command](https://wordpress.org/documentation/article/adding-a-new-block/).
When using the block inserter, click the '**+**' icon in any of the following three locations:
1. In the top toolbar
2. To the right of an empty block
3. In between blocks
Then, begin typing the name of the block you would like to add to the page. Select the block when it appears in the picker.
When using the slash command, press ‘Enter’ or ‘Return’ on your keyboard. Then hit the forward-slash '/' key on your keyboard and begin typing the name of the block you would like to add to the page. Select the block when it appears in the picker.
UConn Event Calendar List Block
If you add the UConn Event Calendar List Block to your site and make no modifications to the block settings, your website will show the next 4 events from the UConn Events site, regardless of which calendar they appear on.
Settings on the block can be customized to filter the events that are displayed.
UConn Event Calendar Grid Block
If you add the UConn Event Calendar Grid Block to your site and make no modifications to the block settings, your website will show the next 8 events from the events calendar, regardless of which calendar they appear on, laid out in a 4 column-2 row grid. Your website will also have a “View More” button. Clicking on the “View More” button will display additional events from the ‘All Events’ calendar, in increments of 8, continuing the 4 column-2 row layout, until 25 rows or 100 events are displayed.
Settings on the block can be customized to filter the events that are displayed.
Settings Shared by Both Blocks
## Filters Include:
- Event Calendar(s)
- Event Type(s)
- Audience(s)
- Campus(es)
- Tag(s)
## Filtering Behaviors
- Filters from the same field are treated as “OR” combinations which expand the search.
- Filters from different fields are treated as “AND” and narrow down what is returned.
- In *Event Types*:
- If you select *Online Events,* non-online events are ignored.
- Events marked as *hybrid events* will be returned as both online and in-person events.
## Selecting Multiple Values
- Multiple values can be selected under each filter. By default, if you would like to include all elements within a filter (i.e. all calendars or all campuses), then you do not need to select anything under that filter.
## The Tags Field
- Valid tags can be found by visiting [events.uconn.edu](https://events.uconn.edu/) and looking for the the Find Events section on the right side of the page. Click *Show* next to the Tags header. (A full list of the Tags will be available soon.)
- To add multiple tags, insert valid tag(s) in the field separated by a pipe | character.
- The pipe character can be found on your keyboard, above the enter key and below the delete/backspace key.
- Press the shift key and pipe key together to render the pipe character.
## Tag Mode
If you have entered-in multiple tags, by default, the system will return items that are tagged with ALL of the listed tags (an AND relationship). By toggling this box, the system will force an OR relationship, meaning that it will return events that include ANY of the listed tags.
## Date Range
The following table provides suggestions for possible start date and end date values and what results those values yield.
| | | | |
| --- | --- | --- | --- |
| **Start Date** | **End Date** | **Results** | **Notes** |
| 2025-05-01 | 2025–05-15 | This will show events from May 1, 2025 through May 15, 2025. | Dates must be entered in the format of YYYY-MM-DD.
We do not recommend setting a hard date, as you will always have to remember to go into the system and update it. This may really only be applicable in very specific situations (ex. You only plan on showing events in a specific semester.). You should rarely use hard dates and instead should rely on tags to narrow down your events. Feel free to contact the UConn Email Calendar team with questions about properly configuring tags on your calendar(s) to allow for this. |
| today | 6 months | This will show events for the next 6 months. | This syntax is dynamic. It will always show the next 6 months of events without have to be updated. You can replace the number 6 with any positive number (ex. 18 months). |
| today | this Saturday | This configuration would consistently show “this week’s” events without an administrator having to make any updates to the widget configuration throughout the week. | |
| today | + 1 week | This configuration would consistently show events over the next 7 days. | Be mindful of syntax and spacing. |
| First Day of September | Last Day of September | This will show all events in the month of September. | |
| First Day of | Last Day of | By writing “First Day of” and “Last Day of” and not specifying a specific month, the calendar will show events from the *current month*. For example, on the last day of September, the calendar will show any events remaining in September (if there are any). On October 1st, it will immediately begin showing events from the month of October. When coupled with the grid view, this is a great way of mimicking a month view on a traditional calendar. | |
| To Show Past Events** |
| **Start Date** | **End Date** | **Results** | **Notes** |
| previous year | yesterday | This will show events from the first day of the previous year (ex 1/1/2025) through ‘yesterday.' Once 2027 begins, this configuration will show events from 1/1/2026 through ‘yesterday.' | By default, past events will be listed in chronological order (ex. January 2025, February 2025, March 2025, etc.). Please see the following section (Reverse Date Order) to learn how to sort events in reverse date order (ex. March 2025, February 2025, January 2025). |
| 2025-01-01 | 2025-03-02 | This will show events between January 1, 2025 and March 2, 2025. |
## Reverse Date Order
The reverse date order functionality can be used in conjunction with showing past events. If you would like to display your events in reverse chronological order, with the most recent events showing first and the oldest events showing last, then you can toggle the “Reverse Date Order” setting on.
## Fallback Settings
These options determine the behavior of the widget if your selected calendar(s) and their filters do not return any events.
- Use a fallback calendar
- If you opt to use a fallback calendar, then events from your fallback calendar will be included in the widget in the event that your specified calendar(s) and any applied filters do not contain any events.
- Additional filters (ex. audience, event-type, etc) are not applied to fallback calendars.
- A no events message will be displayed if any of the following are true:
- The specified calendar(s) (and any applied filters) contains no events and you are not using a fallback calendar.
- The specified calendar(s) (and any applied filters) contains no events, you are using a fallback calendar, and the specified fallback calendar contains no events.
- This message links out to the [UConn Events Calendar](https://events.uconn.edu/).
Settings Specific to the List View Block
## Maximum Number of Events to Display
If left empty, a **maximum** of **4** events will be displayed.
> ⚠️ Note that this value is for the maximum amount of events to be shown, not the total. Less events will be shown if less events are available after all filters have been applied.
## Display Options
View-related attributes include:
- Hide location
- Hide time
- Hide summary
By default, all of these attributes are set to false, meaning that all of these elements are visible unless explicitly turned off (via toggling the checkboxes).
> ℹ️ Please note that not every event in the system has a location, time, and/or summary. So, even if you opt to show these fields, they will not appear on events that do not have them.
Settings Specific to the Grid View Block
## View More Button Text
The grid view includes a “View More Events Button Text” option which allows you to set the text of the “View More Events” button. By default, this text reads “View More Events” but can be customized (ex. “See More Athletics Events”). Note that this button automatically disables/grays out when there are no more events to show OR when 100 events have been displayed (whichever comes first).
## Number of Columns
You can set the maximum number of columns (up to 4) to be displayed in your grid. This value only impacts the **desktop **view of your grid. Regardless of how many columns you have displayed on desktop, the tablet view of your grid will always show 2 columns (unless your desktop view is set to 1 column - in that case, a single column will persist in tablet view). In mobile view, the grid items will always appear in a single column.
## Number of Rows
You can also set the initial number of rows that you would like to appear on the page when the grid is first loaded. The number of rows can range anywhere from 1 to 12.
> 📝 Please note that the number of additional events that appears when you click the “View More” button is equal to the number of columns * number of rows. For example, if you set your initial grid to have 4 columns and 2 rows in desktop, then every click of the “View More” button will show you an additional 8 events (4 * 2), continuing the 4 column and 2 row layout. This behavior will continue until there are no more events to show or until 100 events have been shown (whatever occurs first).
> ℹ️ In mobile, this same 4 column, 2 row configuration will simply show 8 events (assuming that at least 8 events exist) stacked in a single column. Every click of the “View More” button will show 8 more events in a one column view until the same criteria as above are met. Essentially, any configuration will show as a single column **on mobile**, and the number of rows * number of columns is used to determine how many additional items appear on mobile when the button is clicked.
> ℹ️ In tablet, this same 4 column, 2 row configuration will show 8 events in a 2 column layout, as this is generally the best number of columns for tablet. Every click of the “View More” button will show 8 more events in a two column view until the same criteria as above are met. The grid will always display as two columns in tablet, unless you have configured a one column grid in desktop. In that case, you will see a one column grid in tablet as well. As on desktop and mobile, the number of rows * number of columns is used to determine how many additional items appear on mobile when the button is clicked.