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

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

Change the Default Date

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

[ecs-list-events design="calendar" startdate="2024-10-15"]

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

Event Colors

You can also specify the colors you want to use for the events with eventbg eventfg and the border with eventborder using any hex color values or standard web color 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 🙂

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

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

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

Some available options are: