Would you like to learn how to display a list of calendar events on your WordPress site? Sugar Calendar provides different ways to show event lists you’ve created.
This tutorial will show you the various ways to display event lists on your site.
Using the Event Lists Block
With the Event Lists block, you’ll be able to display a list of events on your site. To use this block, you’ll need to create a new post/page or edit an existing one to access the block editor.
In the block editor, click the Add block (+) icon and select the Event Lists block.
After adding the block, it will display a list of events you’ve created on your site.
Additional options will appear on the right sidebar of the page. Under the Calendars section, select the calendar(s) you’d like to display. If none is selected, it will default to show all calendars and events on your site.
In the Display section, you can choose to display the events in List, Grid, or Plain view. The default is the List display option.
Next, you’ll see several toggle buttons that allow you to customize the display further:
- Allow Users to Change Display: When enabled, this option lets visitors switch between different display formats on the frontend.
- Show Featured Images: Toggle this on to display event images in the list.
- Show Descriptions: Enable this to show event descriptions along with the titles.
You can adjust these settings to best suit your site’s needs and the information you want to present to your visitors.
In the Colors section, customize the accent and link colors to match your site’s design.
When you’re done customizing the block, be sure to publish or update the page to save your changes.
Using a Shortcode
The [sc_events_list] shortcode will show a list of events wherever you place the shortcode. You can display it on a page or post on your site.
By default, this shortcode will display a list of the next 5 upcoming events.
Note: When using the shortcode, recurring events with a start date before the current date will not appear in the list view.
Customizing the Event List Shortcode
The [sc_events_list] shortcode accepts several attributes to customize how events are displayed. Below are the different attributes you can use:
Display Events
Use the display attribute to select which events to show in the list. Here are the options and corresponding shortcodes:
- Upcoming Events: To display only upcoming events, use:
-
[sc_events_list display='upcoming']
-
- Past Events: To display only past events, use:
-
[sc_events_list display='past']
-
- All Events: To display all events, both upcoming and past, use:
-
[sc_events_list display='all']
-
Number of Events to Display
To specify the number of events to display in the list, use the following shortcode:
[sc_events_list number='15']
Use the number attribute and enter an integer greater than zero to indicate how many events you want to display.
Note: If you do not specify a number, the shortcode will default to displaying only the next 5 upcoming events. For example, if you use [sc_events_list category='x' show_date='yes' show_time='yes' display='all'], it will still show only 5 events unless you include the number attribute to specify the desired number of events.
Category of Events
To filter events by category, use the following shortcode:
[sc_events_list category='social,meetings']
Use the category attribute with category slugs. For example, if your category is Social Events, the slug would be social-events. You can include multiple categories separated by commas.
Show Date for Events
To display the date of the event in the list, use the following shortcode:
[sc_events_list show_date='yes']
Show Time of Events
To display the time of the event in the list, use the following shortcode:
[sc_events_list show_time='yes']
Show Event Categories
To display the categories of the event in the list, use the following shortcode:
[sc_events_list show_categories='yes']
Show Event Link
To display a Read More link to the event page in the list, use the following shortcode:
[sc_events_list show_link='yes']
That’s it! You’ve now learned how to easily display and customize event lists on your WordPress site using Sugar Calendar.
Next, would you like to learn how to display a calendar of your events on your site? Check out our tutorial on displaying the calendar for more information.