Display a full calendar view of events wherever you need it.
Change the Default Date
Use startdate to specify the default date, which will determine the initial month displayed.
[ecs-list-events design="calendar" startdate="2023-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"]
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 :))
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"]
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']
Several other calendar style views are available as shown below, selectable with the defaultview option.
[ecs-list-events design="calendar" defaultview="basicWeek"]
[ecs-list-events design="calendar" defaultview="listWeek"]
[ecs-list-events design="calendar" defaultview="agendaWeek"]
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:
|today||Show button to jump to todays date|
|title||Show text containing the day/week/month being displayed|
|month||Button to switch to the default monthly calendar view|
|agendaWeek||Button to switch to a week view|
|agendaDay||Button to switch to a day view|
|prev||Button to go to the previous day/week/month|
|next||Button to go to the next day/week/month|
|prevYear||Button to go to the previous year|
|nextYear||Button to go to the next year|