Displaying Event Lists

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.

Below the Calendars dropdown, you’ll see a Group Events by Week toggle button. When enabled, this option organizes your events into weekly sections, with each week’s events grouped together for easier viewing.

When disabled, you can configure how many events to display using the Events Per Page field and set a limit on the total number of events shown using the Maximum Events to Show field.

Next, in the Display section, you can choose to display the events in List, Grid, or Plain view from the Display Type option.

The default is the List display type.

 

Next, you’ll see several toggle buttons that allow you to customize the display further:

• Show Block Header: Enable this to display the header section of your event list that contains filter and search options.
• Allow Users to Change Display: When enabled, this option lets visitors switch between different display formats on the frontend.
• Show Filters: When enabled, this displays the filter button in your event list header, allowing visitors to filter events.
• Show Search: Toggle this on to show the search field in your event list header, letting visitors search through your events.
• Show Date Cards: Enable this to display a card showing the day and date for each event in your list.
• Show Descriptions: Enable this to show event descriptions along with the titles.
• Show Featured Images: Toggle this on to display event images in the list.

In the Image Position dropdown, select whether to display featured images on the left or right side of your event content. By default, images will appear on the right.

You can adjust these settings to best suit your site’s needs and the information you want to present to your visitors.

In the Styles section, you can customize the appearance and colors of your event list.

Under Appearance, select from the dropdown to choose between Light and Dark styles for your event list display.

In the Colors section, you can customize the Accent and Links color 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 the Event Lists Widget in Elementor

Sugar Calendar provides Elementor widgets that offer the same functionality as WordPress blocks. To use the Event Lists widget in Elementor, search for Event Lists in the Elementor widgets panel and drag it into your layout.

The widget includes all the same customization options as the Events List block. You’ll find them organized in the left sidebar under Content, Display, and Style sections.

For detailed information about these settings, check out our complete guide in the Block Editor section above.

Using a Shortcode

The [sugarcalendar_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.

Customizing the Event List Shortcode

The [sugarcalendar_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:

    • [sugarcalendar_events_list display='upcoming']

  • Upcoming Events Including Recurring: To display upcoming events including recurring events use:

    • [sugarcalendar_events_list display='upcoming_with_recurring']

  • Past Events: To display only past events, use:

    • [sugarcalendar_events_list display='past']

  • All Events: To display all events, both upcoming and past, use:

    • [sugarcalendar_events_list display='all']

Number of Events to Display

To specify the number of events to display in the list, use the following shortcode:

[sugarcalendar_events_list number='15']

Use the number attribute and enter an integer greater than zero to indicate how many events you want to display.

Category of Events

To filter events by category, use the following shortcode:

[sugarcalendar_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:

[sugarcalendar_events_list show_date='yes']

Show Time of Events

To display the time of the event in the list, use the following shortcode:

[sugarcalendar_events_list show_time='yes']

Show Event Categories

To display the categories of the event in the list, use the following shortcode:

[sugarcalendar_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:

[sugarcalendar_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.