Calendar Design

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

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

Change the Default Date

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

[ecs-list-events design="calendar" startdate="2017-10-15"]
Loading...

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

(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"]
Loading...

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

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

Other Views

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

[ecs-list-events design="calendar" defaultview="basicWeek"]
Loading...
[ecs-list-events design="calendar" defaultview="agendaWeek"]
Loading...
Still have questions? View the detailed documentation or ask us!