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, 2024

8:00 pm Rock Concert

May 2, 2024

May 14, 2024

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, 2024

8:00 pm Rock Concert @ Doug Fir Lounge

May 2, 2024

8:00 pm Late Night Party @ Party Haus

May 14, 2024

10:00 am Movie Marathon @ Winchester Mystery House

Include the Cost

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

May 1, 2024

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

May 2, 2024

8:00 pm Late Night Party - $5

May 14, 2024

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 2024

Saturday 6: 6:00 pm Dinner Party
Sunday 7: 1:30 pm Cupcake Decorating

May 2024

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

June 2024

Saturday 15: 12:00 pm Board Meeting
Tuesday 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="l d" limit="4"]

October 2024

Tuesday 22: 5:00 pm Weekend Long Adventure

November 2024

Friday 01: 8:00 pm Rock Concert
Saturday 02: 8:00 pm Late Night Party
Saturday 23: Farmer’s Market

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, 2024

May 2, 2024

May 14, 2024

 

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, 2024 @ 8PM Rock Concert
May 02, 2024 @ 8PM Late Night Party
May 14, 2024 @ 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"]

October 22, 2024

November 1, 2024

8:00 pm Rock Concert

November 2, 2024

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"]

October 22, 2024

November 1, 2024

8:00 pm Rock Concert

November 2, 2024

November 23, 2024

December 2, 2024