Grouped Design

The grouped design lets you show many events in the same day, grouped together with the date as the header.

[ecs-list-events design="grouped" limit="10"]

May 1, 2025

8:00 pm Rock Concert

May 2, 2025

May 14, 2025

10:00 am Movie Marathon

Include the Venue

Note that the first event does not have a venue.

[ecs-list-events design="grouped" venue="true" limit="10"]

May 1, 2025

8:00 pm Rock Concert @ Doug Fir Lounge

May 2, 2025

8:00 pm Late Night Party @ Party Haus

May 14, 2025

10:00 am Movie Marathon @ Winchester Mystery House

Include the Cost

[ecs-list-events design="grouped" cost="true" limit="10"]

May 1, 2025

8:00 pm Rock Concert - $15 – $40

May 2, 2025

8:00 pm Late Night Party - $5

May 14, 2025

10:00 am Movie Marathon - $20

Group by Month

You can group the events by the month, instead of by day.

[ecs-list-events design="grouped" groupby="month" limit="10"]

April 2025

Tuesday 1: Kitten Adoption Day
Sunday 6: 6:00 pm Dinner Party
Monday 7: 1:30 pm Cupcake Decorating

May 2025

Thursday 1: 8:00 pm Rock Concert
Friday 2: 8:00 pm Late Night Party
Wednesday 14: 10:00 am Movie Marathon

June 2025

Wednesday 25: 3:30 pm Birthday Party

 

Format the date

You can format the date when grouping by month using the dateformat option:

[ecs-list-events design="grouped" groupby="month" dateformat="d" limit="4"]

January 2025

22: 8:00 pm Rock Concert

February 2025

01: 8:00 pm Rock Concert
02: 8:00 pm Late Night Party
14: 10:00 am Movie Marathon

Time Format

You can modify the format of the time displayed using the timeformat option. This uses the same format options as WordPress does:

[ecs-list-events design="grouped" timeformat="gA" limit="10"]

May 1, 2025

May 2, 2025

May 14, 2025

 

Include the date beside each event

You can even use this to add in parts of the date in addition to the time, and use the hideheading option to hide the main heading:

[ecs-list-events design="grouped" timeformat="F d, Y @ gA" hideheading="true" limit="10"]

May 01, 2025 @ 8PM Rock Concert
May 02, 2025 @ 8PM Late Night Party
May 14, 2025 @ 10AM Movie Marathon

Group by Month (No start time)

If you want to hide the time of the event, just add timeonly=”false”

[ecs-list-events design="grouped" groupby="month" timeonly="false" limit="10"]

Pagination

Show previous and next links, allowing more events to be displayed by visitors. The amount of events on each page can be controlled using the limit value.

[ecs-list-events design="grouped" pagination="true" limit="3"]

January 22, 2025

8:00 pm Rock Concert

February 1, 2025

8:00 pm Rock Concert

February 2, 2025

Filter Bar

Let your visitors select the events they want to see with the filter, on any page! See the Filter Bar page for more examples.

[ecs-list-events design="grouped" filterbar="true" pagination="true" filterorder="category, venue, state, country, tag, fromdate"]

January 22, 2025

8:00 pm Rock Concert

February 1, 2025

8:00 pm Rock Concert

February 2, 2025

February 14, 2025

10:00 am Movie Marathon

March 15, 2025

12:00 pm Board Meeting