The Events Calendar is one of the most popular WordPress plugins for creating and managing events.
It lets you display past, ongoing and upcoming events in different calendar views.
While the default event layouts provide all the essential information, you may want to enhance the way your events are presented, especially if your website hosts multiple events or long-running events.
Adding interactive elements can make event pages more engaging and easier to navigate.
For example, an event progress bar helps visitors quickly see how much time has passed and how much of the event remains. Similarly, an event slider lets you showcase featured, upcoming, or past events in a compact, visually appealing carousel view.
But the problem is that The Events Calendar doesn’t include these features by default, to add these features, you’ll need dedicated extensions: Event Progress Bar and Event Slider Addon (by The Events Calendar).
In this guide we are going to discuss what is Event Progress bar and Event slider and how to add them to your Events Calendar website.
Display Event Status With a Progress Bar
When an event runs for several hours or days, visitors may find it difficult to understand its current status by looking at the start and end dates alone.
An event progress bar solves this problem by showing the progress of the event visually.
What is an Event Progress Bar?
An event progress bar is a visual indicator that displays the current status of an event based on its start and end timings. As the event progresses, the bar updates automatically to reflect its current stage.
Instead of making visitors check the start and end dates manually, they can quickly see whether an event is upcoming, ongoing, or completed.
For example, a progress value of 0% means the event has not started yet. A value around 50% means the event is currently in progress, while 100% means the event has ended.
This feature is especially useful for multi-day conferences, exhibitions, workshops, festivals, training programs, and other events that continue for a longer period.
It can also help visitors decide whether they still have enough time to join an ongoing event.
Add a Progress Bar
Follow the steps below to add the progress bar:
- First, make sure that you have installed and activated the Event Progress Bar extension on your wordpress website.
- After activation, the extension connects with the events already created through The Events Calendar. It checks the event start and end times and automatically displays a progress bar for events that are currently running.
- Because the progress is calculated from the event schedule, the bar continues to update as the event moves from its start time towards its end time.
- You can also customize the appearance of the progress bar container, background, filled section, and the small indicator or “ball” shown on the bar using custom css.
Note: The progress bar is currently displayed in the List View and Day View. Make sure you check these views on the frontend after activating the extension.
Output:
Showcase Multiple Events With an Event Slider
Event Slider is a better option when you want to feature upcoming events, promote selected events, or display several event cards in a limited space.
What is an Event Slider?
An event slider displays events in a sliding carousel instead of a traditional list or calendar layout.
Visitors can move between events using navigation arrows, dots, or swipe gestures, depending on the device and slider configuration. This allows them to explore multiple events without leaving the page or scrolling through a long event list.
An event slider is especially useful on homepages, landing pages, event category pages, and promotional sections where space is limited.
Add Event slider
Follow the steps below to add slider to your events:
- First, install and activate the Event Slider Addon on your WordPress website.
- After activation, the following shortcode becomes available:
[events_slider]
- Next, open the page or post and add this shortcode.
- Use the following parameters to customize your slider shortcode:
- posts_per_page: Sets the number of events displayed in the slider.
- tag: Filters events by a specific event tag.
- category: Filters events by an event category.
- height: Sets the slider height in pixels.
- width: Sets the slider width in pixels.
- dots: Shows or hides the slider navigation dots.
- color1: Sets the main slider color using a hexadecimal color value.
- color2: Sets the secondary slider color using a hexadecimal color value.
Conclusion
A good event website should help visitors understand what is happening without making them search through too much information. That is where these two extensions can be useful.
You do not need to add both features simply because they are available.
The best approach is to start with the feature that solves a clear problem on your website, then check how visitors interact with it. A simple improvement in the right place is often more useful than adding several visual elements that do not serve a clear purpose.
