Would you like to display upcoming events on your WordPress site? Sugar Calendar provides various ways to show events on your site’s frontend.
This guide will cover how to customize event lists to show upcoming events.
In This Article
Before getting started, ensure that the Sugar Calendar plugin is installed and activated on your WordPress site.
Customizing Event List
We’ll show you how to customize your site to show upcoming events using different methods.
Block Editor
To use this block, you’ll need to create a new post/page or open the one you’d like to display your upcoming events.
In the block editor, click the Add block (+) icon and select the Events List 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.
To display upcoming events, disable the Group Events by Week option. Disabling this option will filter the list to show upcoming events first and progress downwards.
After that, specify the number of events to show per page in the Events Per Page field.
If you’d like to limit the total number of events shown by this block, specify the amount in the Maximum Events To Show field.
Elementor
The steps are similar if you’re building your event list page with Elementor or the block editor. If you’re using Elementor, add the Events List widget to your page.
After that, additional options will appear to customize the widget settings. Scroll down and toggle the Group events by week option to the No position.
Similarly, you can customize the number of events shown per page and the maximum number of events to display with the Events per page and Max events to show fields, respectively.
Shortcode
If you’re using the event list shortcode, you can display upcoming events by setting the group_events_by_week parameter to false. Here’s an example:
[sugarcalendar_events_list group_events_by_week=false]
You can use the maximum_events_to_show and events_per_page parameters to further customize the shortcode.
[sugarcalendar_events_list group_events_by_week=false events_per_page=5 maximum_events_to_show=20]
That’s it! You’ve now learned how to customize Sugar Calendar to show upcoming events on your site.
Next, would you like to learn about the various ways to show events in Sugar Calendar? Be sure to check our guide for details on displaying events list.