Display a full calendar view of events wherever you need it.

[ecs-list-events design="calendar" show_end_time="true" timeformat="h:mm a"]

See documentation on the time format.

Change the Default (Start) Date

Use startdate to specify the default date, which will determine the initial month displayed.

[ecs-list-events design="calendar" startdate="2026-10-15" timeformat="h:mm a"]

Change the First Day of the Week

Use first_day_of_week to specify the change the first day of the week, where 0 is Sunday, 1 is Monday and so on.

[ecs-list-events design="calendar" first_day_of_week="1" timeformat="h:mm a"]

Event Colours

You can also specify the colours you want to use for the events with eventbg eventfg and the border with eventborder using any hex colour values or standard web colour names:

[ecs-list-events design="calendar" eventbg="#f77530" eventfg="black" eventborder="blue"]

Yes, these colors are pretty ugly together, but it's just a demo :)

Time Format

You can change the time format using the timeformat option. For example, to show the time in 12 hour format with AM/PM, use timeformat="h:mm a".

Mobile View

On mobile the calendar will drop to a list view, so it is readable and tappable. This can also be set on desktop with the defaultview="listMonth" option.

[ecs-list-events design="calendar" defaultview="listMonth"]

Filter Bar

Add a filter bar to the top of the calendar to let visitors refine what events are displayed. More detail on the dedicated filter bar demo page.

[ecs-list-events design="calendar" filterbar="true" timeformat="h:mm a"]

Hide Days Outside of Month

By default an extra few days or even a week might appear before and after the days of the current month. This is to avoid the page content jumping up and down if one month has a different number of weeks than another, and encourage visitors to continue browsing events in other months near the current one.

However if you want to hide the extra days you can do so with the hide_extra_days='true' option:

[ecs-list-events design="calendar" hide_extra_days="true" timeformat="h:mm a"]

Other Views

Several other calendar style views are available as shown below, selectable with the defaultview option.

Time Grid Week

[ecs-list-events design="calendar" defaultview="timeGridWeek"]

List Week

[ecs-list-events design="calendar" defaultview="listWeek"]

Customize the Header

You can do a bit of customization with the header by changing what appears using the leftheader, centerheader and rightheader options. By default it is:

[ecs-list-events design="calendar" leftheader="title" centerheader="" rightheader="today prev,next"]

Available Options